Skip to content

Commit

Permalink
fix: [MDS-985] Deprecate Checkbox and Radio label constructor and rep…
Browse files Browse the repository at this point in the history 
…lace usages with MenuItem (#345)
  • Loading branch information
@Kypsis
Kypsis committed Feb 14, 2024
1 parent 2a28bbc commit e9a1c84
Show file tree
Hide file tree
Showing 13 changed files with 295 additions and 270 deletions.
33 changes: 27 additions & 6 deletions example/assets/code_snippets/checkbox.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ class Checkbox extends StatefulWidget {

class _CheckboxState extends State<Checkbox> {
bool? checkboxValue = false;
bool? checkboxWithLabelValue = false;
bool checkboxWithLabelValue = false;
bool? tristateCheckboxWithLabelValue = false;

@override
Widget build(BuildContext context) {
Expand All @@ -20,11 +21,31 @@ class _CheckboxState extends State<Checkbox> {
value: checkboxValue,
onChanged: (bool? newValue) => setState(() => checkboxValue = newValue),
),
MoonCheckbox.withLabel(
context,
value: checkboxWithLabelValue,
label: "MoonCheckbox with label",
onChanged: (bool? newValue) => setState(() => checkboxWithLabelValue = newValue),
MoonMenuItem(
absorbGestures: true,
onTap: () => setState(() => checkboxWithLabelValue = !checkboxWithLabelValue),
label: const Text("MoonCheckbox with label"),
trailing: MoonCheckbox(
value: checkboxWithLabelValue,
tapAreaSizeValue: 0,
onChanged: (_) => {},
),
),
MoonMenuItem(
absorbGestures: true,
onTap: () => setState(
() => switch (tristateCheckboxWithLabelValue) {
true => tristateCheckboxWithLabelValue = null,
null => tristateCheckboxWithLabelValue = false,
false => tristateCheckboxWithLabelValue = true,
},
),
label: const Text("Tristate MoonCheckbox with label"),
trailing: MoonCheckbox(
value: tristateCheckboxWithLabelValue,
tapAreaSizeValue: 0,
onChanged: (_) => {},
),
),
],
);
Expand Down
75 changes: 48 additions & 27 deletions example/assets/code_snippets/dropdown.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,19 @@ import 'package:moon_design/moon_design.dart';

const String _groupId = "dropdown";

enum Choices { first, second }

extension ChoicesX on Choices {
String get name {
switch (this) {
case Choices.first:
return "Choice #1";
case Choices.second:
return "Choice #2";
}
}
}

class Dropdown extends StatefulWidget {
const Dropdown({super.key});

Expand All @@ -11,9 +24,9 @@ class Dropdown extends StatefulWidget {
}

class _DropdownState extends State<Dropdown> {
final Map<String, bool> _availableChoices = {
"Choice #1": false,
"Choice #2": false,
final Map<Choices, bool> _availableChoices = {
Choices.first: false,
Choices.second: false,
};

bool _showChoices = false;
Expand All @@ -30,24 +43,27 @@ class _DropdownState extends State<Dropdown> {
MoonDropdown(
show: _showChoices,
constrainWidthToChild: true,
contentPadding: const EdgeInsets.symmetric(horizontal: 16),
onTapOutside: () => setState(() => _showChoices = false),
content: Column(
children: [
MoonCheckbox.withLabel(
context,
value: _availableChoices["Choice #1"],
label: "Choice #1",
onChanged: (bool? isSelected) => setState(
() => _availableChoices["Choice #1"] = isSelected!,
MoonMenuItem(
absorbGestures: true,
onTap: () => setState(() => _availableChoices[Choices.first] = !_availableChoices[Choices.first]!),
label: Text(Choices.first.name),
trailing: MoonCheckbox(
value: _availableChoices[Choices.first],
tapAreaSizeValue: 0,
onChanged: (_) {},
),
),
MoonCheckbox.withLabel(
context,
value: _availableChoices["Choice #2"],
label: "Choice #2",
onChanged: (bool? isSelected) => setState(
() => _availableChoices["Choice #2"] = isSelected!,
MoonMenuItem(
absorbGestures: true,
onTap: () => setState(() => _availableChoices[Choices.second] = !_availableChoices[Choices.second]!),
label: Text(Choices.second.name),
trailing: MoonCheckbox(
value: _availableChoices[Choices.second],
tapAreaSizeValue: 0,
onChanged: (_) {},
),
),
],
Expand All @@ -59,19 +75,24 @@ class _DropdownState extends State<Dropdown> {
hintText: "Choose an option",
onTap: () => setState(() => _showChoices = !_showChoices),
leading: _availableChoices.values.any((element) => element == true)
? Center(
child: GestureDetector(
onTap: () => setState(() => _availableChoices.updateAll((key, value) => false)),
child: MoonTag(
tagSize: MoonTagSize.xs,
label: Text(
"${_availableChoices.values.where((element) => element == true).length}",
? 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,
),
),
trailing: const Icon(MoonIcons.controls_close_small_16_light),
),
),
)
: null,
)
: null,
trailing: Center(
child: AnimatedRotation(
duration: const Duration(milliseconds: 200),
Expand Down
16 changes: 10 additions & 6 deletions example/assets/code_snippets/radio.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,16 @@ class _RadioState extends State<Radio> {
groupValue: radioSelection,
onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection),
),
MoonRadio.withLabel(
context,
value: RadioSelection.second,
groupValue: radioSelection,
label: "With label",
onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection),
MoonMenuItem(
absorbGestures: true,
onTap: () => setState(() => radioSelection = RadioSelection.second),
label: const Text("MoonRadio with label"),
trailing: MoonRadio(
value: RadioSelection.second,
groupValue: radioSelection,
tapAreaSizeValue: 0,
onChanged: (_) {},
),
),
],
);
Expand Down
51 changes: 26 additions & 25 deletions example/lib/src/storybook/stories/checkbox.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,6 @@ class _CheckboxStoryState extends State<CheckboxStory> {

@override
Widget build(BuildContext context) {
final textColorKnob = context.knobs.nullable.options(
label: "Text color",
description: "MoonColors variants for MoonCheckbox label.",
enabled: false,
initial: 0,
// piccolo
options: colorOptions,
);

final textColor = colorTable(context)[textColorKnob ?? 40];

final checkColorKnob = context.knobs.nullable.options(
label: "checkColor",
description: "MoonColors variants for MoonCheckbox check icon.",
Expand Down Expand Up @@ -75,12 +64,12 @@ class _CheckboxStoryState extends State<CheckboxStory> {

final borderColor = colorTable(context)[borderColorKnob ?? 40];

final isTristate = context.knobs.boolean(
final isTristateKnob = context.knobs.boolean(
label: "tristate",
description: "Whether MoonCheckbox uses tristate.",
);

final isDisabled = context.knobs.boolean(
final isDisabledKnob = context.knobs.boolean(
label: "Disabled",
description: "MoonCheckbox onChanged() is null.",
);
Expand All @@ -99,21 +88,33 @@ class _CheckboxStoryState extends State<CheckboxStory> {
inactiveColor: inactiveColor,
checkColor: checkColor,
borderColor: borderColor,
tristate: isTristate,
tristate: isTristateKnob,
value: checkboxValue,
onChanged: isDisabled ? null : (bool? newValue) => setState(() => checkboxValue = newValue),
onChanged: isDisabledKnob ? null : (bool? newValue) => setState(() => checkboxValue = newValue),
),
const TextDivider(text: "MoonCheckbox with label"),
MoonCheckbox.withLabel(
context,
label: "With label",
textStyle: TextStyle(color: textColor),
activeColor: activeColor,
inactiveColor: inactiveColor,
checkColor: checkColor,
tristate: isTristate,
value: checkboxWithLabelValue,
onChanged: isDisabled ? null : (bool? newValue) => setState(() => checkboxWithLabelValue = newValue),
MoonMenuItem(
absorbGestures: true,
onTap: isDisabledKnob
? null
: () => setState(
() => switch (checkboxWithLabelValue) {
true when isTristateKnob => checkboxWithLabelValue = null,
false when isTristateKnob => checkboxWithLabelValue = true,
null => checkboxWithLabelValue = false,
_ => checkboxWithLabelValue = !checkboxWithLabelValue!,
},
),
label: const Text("With label"),
trailing: MoonCheckbox(
activeColor: activeColor,
inactiveColor: inactiveColor,
checkColor: checkColor,
tristate: isTristateKnob,
value: checkboxWithLabelValue,
tapAreaSizeValue: 0,
onChanged: isDisabledKnob ? null : (_) {},
),
),
],
),
Expand Down
Loading

0 comments on commit e9a1c84

Please sign in to comment.