Skip to content

Commit

Permalink
fix: [NO-TASK] Add actual code for multi-select Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kypsis
Kypsis committed Nov 24, 2023
1 parent 9e1131e commit 9ef71b9
Show file tree
Hide file tree
Showing 7 changed files with 129 additions and 43 deletions.
120 changes: 103 additions & 17 deletions example/lib/src/storybook/stories/dropdown.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/text_divider.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
Expand All @@ -15,8 +16,15 @@ class DropdownStory extends StatefulWidget {
}

class _DropdownStoryState extends State<DropdownStory> {
bool _show = false;
bool _showInner = false;
final Map<String, bool> _availableChoices = {
"Choice #1": false,
"Choice #2": false,
"Choice #3": false,
};

bool _showChoices = false;
bool _showMenu = false;
bool _showMenuInner = false;
Color? _buttonColor;
String _buttonName = "Piccolo";

Expand Down Expand Up @@ -104,8 +112,86 @@ class _DropdownStoryState extends State<DropdownStory> {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const TextDivider(text: "Dropdown with choices"),
MoonDropdown(
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
show: _showChoices,
minWidth: 250,
borderColor: borderColor ?? Colors.transparent,
backgroundColor: backgroundColor,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
constrainWidthToChild: constrainWidthToChildKnob,
distanceToTarget: distanceToTargetKnob,
dropdownAnchorPosition: dropdownAnchorPositionKnob ?? MoonDropdownAnchorPosition.bottom,
dropdownShadows: showShadowKnob == true ? null : [],
onTapOutside: () => setState(() {
_showChoices = false;
}),
content: Column(
children: [
MoonCheckbox.withLabel(
context,
label: "Choice #1",
value: _availableChoices["Choice #1"],
onChanged: (bool? isSelected) => setState(() => _availableChoices["Choice #1"] = isSelected!),
),
const SizedBox(height: 4),
MoonCheckbox.withLabel(
context,
label: "Choice #2",
value: _availableChoices["Choice #2"],
onChanged: (bool? isSelected) => setState(() => _availableChoices["Choice #2"] = isSelected!),
),
const SizedBox(height: 4),
MoonCheckbox.withLabel(
context,
label: "Choice #3",
value: _availableChoices["Choice #3"],
onChanged: (bool? isSelected) => setState(() => _availableChoices["Choice #3"] = isSelected!),
),
],
),
child: MoonTextInput(
mouseCursor: MouseCursor.defer,
readOnly: true,
width: 250,
hintText: "Choose an option",
leading: _availableChoices.values.any((element) => element == true)
? Center(
child: GestureDetector(
onTap: () => setState(() => _availableChoices.updateAll((key, value) => false)),
child: MoonTag(
tagSize: MoonTagSize.xs,
backgroundColor: context.moonColors!.bulma,
label: Text(
"${_availableChoices.values.where((element) => element == true).length}",
style: TextStyle(color: context.moonColors!.gohan),
),
trailing: Icon(
MoonIcons.controls_close_small_16_light,
color: context.moonColors!.gohan,
),
),
),
)
: null,
trailing: Center(
child: AnimatedRotation(
duration: const Duration(milliseconds: 200),
turns: _showChoices ? -0.5 : 0,
child: const Icon(
MoonIcons.controls_chevron_down_small_16_light,
size: 16,
),
),
),
onTap: () => setState(() => _showChoices = !_showChoices),
),
),
const SizedBox(height: 32),
const TextDivider(text: "Dropdown usage as menu"),
MoonDropdown(
show: _show,
show: _showMenu,
groupId: _groupId,
maxWidth: 250,
borderColor: borderColor ?? Colors.transparent,
Expand All @@ -116,16 +202,16 @@ class _DropdownStoryState extends State<DropdownStory> {
dropdownAnchorPosition: dropdownAnchorPositionKnob ?? MoonDropdownAnchorPosition.bottom,
dropdownShadows: showShadowKnob == true ? null : [],
onTapOutside: () => setState(() {
_show = false;
_showInner = false;
_showMenu = false;
_showMenuInner = false;
}),
content: Column(
children: [
MoonMenuItem(
title: const Text("Piccolo"),
borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)),
onTap: () => setState(() {
_show = false;
_showMenu = false;
_buttonName = "Piccolo";
_buttonColor = colorPiccolo;
}),
Expand All @@ -135,14 +221,14 @@ class _DropdownStoryState extends State<DropdownStory> {
title: const Text("Krillin"),
borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)),
onTap: () => setState(() {
_show = false;
_showMenu = false;
_buttonName = "Krillin";
_buttonColor = colorKrillin;
}),
),
const SizedBox(height: 4),
MoonDropdown(
show: _showInner,
show: _showMenuInner,
groupId: _groupId,
maxWidth: 100,
constrainWidthToChild: constrainWidthToChildKnob,
Expand All @@ -157,8 +243,8 @@ class _DropdownStoryState extends State<DropdownStory> {
title: const Text("Roshi100"),
borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)),
onTap: () => setState(() {
_show = false;
_showInner = false;
_showMenu = false;
_showMenuInner = false;
_buttonName = "Roshi100";
_buttonColor = colorRoshi100;
}),
Expand All @@ -168,8 +254,8 @@ class _DropdownStoryState extends State<DropdownStory> {
title: const Text("Roshi60"),
borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)),
onTap: () => setState(() {
_show = false;
_showInner = false;
_showMenu = false;
_showMenuInner = false;
_buttonName = "Roshi60";
_buttonColor = colorRoshi60;
}),
Expand All @@ -179,20 +265,20 @@ class _DropdownStoryState extends State<DropdownStory> {
title: const Text("Roshi10"),
borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)),
onTap: () => setState(() {
_show = false;
_showInner = false;
_showMenu = false;
_showMenuInner = false;
_buttonName = "Roshi10";
_buttonColor = colorRoshi10;
}),
),
],
),
child: MoonMenuItem(
backgroundColor: _showInner ? context.moonColors!.heles : null,
backgroundColor: _showMenuInner ? context.moonColors!.heles : null,
title: const Text("Roshi"),
borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)),
onTap: () => setState(() {
_showInner = !_showInner;
_showMenuInner = !_showMenuInner;
}),
trailing: const Icon(
MoonIcons.controls_chevron_right_16_light,
Expand All @@ -206,7 +292,7 @@ class _DropdownStoryState extends State<DropdownStory> {
width: 128,
label: Text(_buttonName),
backgroundColor: _buttonColor,
onTap: () => setState(() => _show = !_show),
onTap: () => setState(() => _showMenu = !_showMenu),
),
),
],
Expand Down
2 changes: 1 addition & 1 deletion example/macos/Runner.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@
isa = PBXProject;
attributes = {
LastSwiftUpdateCheck = 0920;
LastUpgradeCheck = 1300;
LastUpgradeCheck = 1430;
ORGANIZATIONNAME = "";
TargetAttributes = {
33CC10EC2044A3C60003C045 = {
Expand Down
2 changes: 1 addition & 1 deletion example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "1300"
LastUpgradeVersion = "1430"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
Expand Down
4 changes: 2 additions & 2 deletions lib/src/utils/squircle/squircle_border_radius.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ class MoonSquircleBorderRadius extends BorderRadius {

MoonSquircleBorderRadius({
required double cornerRadius,
// The value of 1 or 1.0 leads to NaN error in mobile web/PWA for some reason. So we use 0.99 instead.
double cornerSmoothing = 0.99,
// The value of 1 or 1.0 leads to NaN error in mobile web/PWA for some reason. So we use 0.9 instead.
double cornerSmoothing = 0.9,
}) : this.only(
topLeft: MoonSquircleRadius(
cornerRadius: cornerRadius,
Expand Down
4 changes: 2 additions & 2 deletions lib/src/utils/squircle/squircle_radius.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ class MoonSquircleRadius extends Radius {

const MoonSquircleRadius({
required double cornerRadius,
// The value of 1 or 1.0 leads to NaN error in mobile web/PWA for some reason. So we use 0.99 instead.
this.cornerSmoothing = 0.99,
// The value of 1 or 1.0 leads to NaN error in mobile web/PWA for some reason. So we use 0.9 instead.
this.cornerSmoothing = 0.9,
}) : super.circular(cornerRadius);

double get cornerRadius => x;
Expand Down
20 changes: 10 additions & 10 deletions lib/src/widgets/checkbox/checkbox.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,17 @@ class MoonCheckbox extends StatefulWidget {
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: tapAreaSizeValue),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
AnimatedOpacity(
opacity: isInteractive ? 1 : effectiveDisabledOpacityValue,
duration: effectiveFocusEffectDuration,
child: DefaultTextStyle(
style: resolvedTextStyle,
child: Text(label),
),
),
const SizedBox(width: 12),
MoonCheckbox(
key: key,
autofocus: autofocus,
Expand All @@ -129,15 +138,6 @@ class MoonCheckbox extends StatefulWidget {
focusNode: focusNode,
onChanged: onChanged,
),
const SizedBox(width: 12),
AnimatedOpacity(
opacity: isInteractive ? 1 : effectiveDisabledOpacityValue,
duration: effectiveFocusEffectDuration,
child: DefaultTextStyle(
style: resolvedTextStyle,
child: Text(label),
),
),
],
),
),
Expand Down
20 changes: 10 additions & 10 deletions lib/src/widgets/radio/radio.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,8 +125,17 @@ class MoonRadio<T> extends StatefulWidget {
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: tapAreaSizeValue),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
AnimatedOpacity(
opacity: isInteractive ? 1 : effectiveDisabledOpacityValue,
duration: effectiveFocusEffectDuration,
child: DefaultTextStyle(
style: resolvedTextStyle,
child: Text(label),
),
),
const SizedBox(width: 12),
MoonRadio<T>(
key: key,
value: value,
Expand All @@ -139,15 +148,6 @@ class MoonRadio<T> extends StatefulWidget {
focusNode: focusNode,
autofocus: autofocus,
),
const SizedBox(width: 12),
AnimatedOpacity(
opacity: isInteractive ? 1 : effectiveDisabledOpacityValue,
duration: effectiveFocusEffectDuration,
child: DefaultTextStyle(
style: resolvedTextStyle,
child: Text(label),
),
),
],
),
),
Expand Down

0 comments on commit 9ef71b9

Please sign in to comment.