From 9ef71b9fccb855aabb91e85d17adfd1093d8b9f6 Mon Sep 17 00:00:00 2001 From: Kypsis Date: Fri, 24 Nov 2023 05:34:04 +0200 Subject: [PATCH] fix: [NO-TASK] Add actual code for multi-select Dropdown --- .../lib/src/storybook/stories/dropdown.dart | 120 +++++++++++++++--- .../macos/Runner.xcodeproj/project.pbxproj | 2 +- .../xcshareddata/xcschemes/Runner.xcscheme | 2 +- .../squircle/squircle_border_radius.dart | 4 +- lib/src/utils/squircle/squircle_radius.dart | 4 +- lib/src/widgets/checkbox/checkbox.dart | 20 +-- lib/src/widgets/radio/radio.dart | 20 +-- 7 files changed, 129 insertions(+), 43 deletions(-) diff --git a/example/lib/src/storybook/stories/dropdown.dart b/example/lib/src/storybook/stories/dropdown.dart index f6190389..90c05f7d 100644 --- a/example/lib/src/storybook/stories/dropdown.dart +++ b/example/lib/src/storybook/stories/dropdown.dart @@ -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'; @@ -15,8 +16,15 @@ class DropdownStory extends StatefulWidget { } class _DropdownStoryState extends State { - bool _show = false; - bool _showInner = false; + final Map _availableChoices = { + "Choice #1": false, + "Choice #2": false, + "Choice #3": false, + }; + + bool _showChoices = false; + bool _showMenu = false; + bool _showMenuInner = false; Color? _buttonColor; String _buttonName = "Piccolo"; @@ -104,8 +112,86 @@ class _DropdownStoryState extends State { 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, @@ -116,8 +202,8 @@ class _DropdownStoryState extends State { dropdownAnchorPosition: dropdownAnchorPositionKnob ?? MoonDropdownAnchorPosition.bottom, dropdownShadows: showShadowKnob == true ? null : [], onTapOutside: () => setState(() { - _show = false; - _showInner = false; + _showMenu = false; + _showMenuInner = false; }), content: Column( children: [ @@ -125,7 +211,7 @@ class _DropdownStoryState extends State { title: const Text("Piccolo"), borderRadius: const MoonSquircleBorderRadius.all(MoonSquircleRadius(cornerRadius: 12)), onTap: () => setState(() { - _show = false; + _showMenu = false; _buttonName = "Piccolo"; _buttonColor = colorPiccolo; }), @@ -135,14 +221,14 @@ class _DropdownStoryState extends State { 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, @@ -157,8 +243,8 @@ class _DropdownStoryState extends State { 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; }), @@ -168,8 +254,8 @@ class _DropdownStoryState extends State { 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; }), @@ -179,8 +265,8 @@ class _DropdownStoryState extends State { 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; }), @@ -188,11 +274,11 @@ class _DropdownStoryState extends State { ], ), 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, @@ -206,7 +292,7 @@ class _DropdownStoryState extends State { width: 128, label: Text(_buttonName), backgroundColor: _buttonColor, - onTap: () => setState(() => _show = !_show), + onTap: () => setState(() => _showMenu = !_showMenu), ), ), ], diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj index 605c9a7b..8c98892c 100644 --- a/example/macos/Runner.xcodeproj/project.pbxproj +++ b/example/macos/Runner.xcodeproj/project.pbxproj @@ -203,7 +203,7 @@ isa = PBXProject; attributes = { LastSwiftUpdateCheck = 0920; - LastUpgradeCheck = 1300; + LastUpgradeCheck = 1430; ORGANIZATIONNAME = ""; TargetAttributes = { 33CC10EC2044A3C60003C045 = { diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme index fb7259e1..83d88728 100644 --- a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme +++ b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme @@ -1,6 +1,6 @@ x; diff --git a/lib/src/widgets/checkbox/checkbox.dart b/lib/src/widgets/checkbox/checkbox.dart index 0ea24a2b..f8b756b7 100644 --- a/lib/src/widgets/checkbox/checkbox.dart +++ b/lib/src/widgets/checkbox/checkbox.dart @@ -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, @@ -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), - ), - ), ], ), ), diff --git a/lib/src/widgets/radio/radio.dart b/lib/src/widgets/radio/radio.dart index 139726e5..670feee9 100644 --- a/lib/src/widgets/radio/radio.dart +++ b/lib/src/widgets/radio/radio.dart @@ -125,8 +125,17 @@ class MoonRadio 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( key: key, value: value, @@ -139,15 +148,6 @@ class MoonRadio extends StatefulWidget { focusNode: focusNode, autofocus: autofocus, ), - const SizedBox(width: 12), - AnimatedOpacity( - opacity: isInteractive ? 1 : effectiveDisabledOpacityValue, - duration: effectiveFocusEffectDuration, - child: DefaultTextStyle( - style: resolvedTextStyle, - child: Text(label), - ), - ), ], ), ),