-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [MDS-436] Create Checkbox component (#81)
- Loading branch information
Showing
28 changed files
with
893 additions
and
75 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import 'package:example/src/storybook/common/options.dart'; | ||
| import 'package:example/src/storybook/common/widgets/text_divider.dart'; | ||
| import 'package:flutter/cupertino.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| bool? value = false; | ||
|
|
||
| class CheckboxStory extends Story { | ||
| CheckboxStory() | ||
| : super( | ||
| name: "Checkbox", | ||
| builder: (context) { | ||
| final checkColorsKnob = context.knobs.options( | ||
| label: "checkColor", | ||
| description: "MoonColors variants for the Checkbox icon.", | ||
| initial: 7, // goten | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final checkColor = colorTable(context)[checkColorsKnob]; | ||
|
|
||
| final activeColorsKnob = context.knobs.options( | ||
| label: "activeColor", | ||
| description: "MoonColors variants for when Checkbox is checked.", | ||
| initial: 0, // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final activeColor = colorTable(context)[activeColorsKnob]; | ||
|
|
||
| final fillColorsKnob = context.knobs.options( | ||
| label: "fillColor", | ||
| description: "MoonColors variants for when Checkbox is unchecked.", | ||
| initial: 39, // transparent | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final fillColor = colorTable(context)[fillColorsKnob]; | ||
|
|
||
| final isDisabled = context.knobs.boolean( | ||
| label: "Disabled", | ||
| description: "onChanged() is null.", | ||
| ); | ||
|
|
||
| final isTristate = context.knobs.boolean( | ||
| label: "tristate", | ||
| description: "Whether the checkbox uses tristate.", | ||
| ); | ||
|
|
||
| final setRtlModeKnob = context.knobs.boolean( | ||
| label: "RTL mode", | ||
| description: "Switch between LTR and RTL modes.", | ||
| ); | ||
|
|
||
| return Directionality( | ||
| textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr, | ||
| child: Center( | ||
| child: Column( | ||
| mainAxisAlignment: MainAxisAlignment.center, | ||
| children: [ | ||
| const SizedBox(height: 64), | ||
| const TextDivider(text: "Customisable Checkbox"), | ||
| const SizedBox(height: 32), | ||
| StatefulBuilder( | ||
| builder: (context, setState) { | ||
| return MoonCheckbox( | ||
| checkColor: checkColor, | ||
| activeColor: activeColor, | ||
| fillColor: fillColor, | ||
| tristate: isTristate, | ||
| value: value, | ||
| onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), | ||
| ); | ||
| }, | ||
| ), | ||
| const SizedBox(height: 40), | ||
| const TextDivider(text: "Checkbox with clickable text"), | ||
| const SizedBox(height: 32), | ||
| StatefulBuilder( | ||
| builder: (context, setState) { | ||
| return MoonCheckbox.withLabel( | ||
| context, | ||
| checkColor: checkColor, | ||
| activeColor: activeColor, | ||
| fillColor: fillColor, | ||
| tristate: isTristate, | ||
| value: value, | ||
| onChanged: isDisabled ? null : (newValue) => setState(() => value = newValue), | ||
| label: "With label", | ||
| ); | ||
| }, | ||
| ), | ||
| const SizedBox(height: 64), | ||
| ], | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/colors.dart'; | ||
|
|
||
| @immutable | ||
| class MoonCheckboxColors extends ThemeExtension<MoonCheckboxColors> with DiagnosticableTreeMixin { | ||
| static final light = MoonCheckboxColors( | ||
| activeColor: MoonColors.light.piccolo, | ||
| checkColor: MoonColors.light.goten, | ||
| fillColor: Colors.transparent, | ||
| borderColor: MoonColors.light.trunks, | ||
| ); | ||
|
|
||
| static final dark = MoonCheckboxColors( | ||
| activeColor: MoonColors.dark.piccolo, | ||
| checkColor: MoonColors.dark.goten, | ||
| fillColor: Colors.transparent, | ||
| borderColor: MoonColors.dark.trunks, | ||
| ); | ||
|
|
||
| /// Checkbox active color. | ||
| final Color activeColor; | ||
|
|
||
| /// Checkbox border color. | ||
| final Color borderColor; | ||
|
|
||
| /// Checkbox icon color. | ||
| final Color checkColor; | ||
|
|
||
| /// Checkbox fill (inactive) color. | ||
| final Color fillColor; | ||
|
|
||
| const MoonCheckboxColors({ | ||
| required this.activeColor, | ||
| required this.borderColor, | ||
| required this.checkColor, | ||
| required this.fillColor, | ||
| }); | ||
|
|
||
| @override | ||
| MoonCheckboxColors copyWith({ | ||
| Color? activeColor, | ||
| Color? borderColor, | ||
| Color? checkColor, | ||
| Color? fillColor, | ||
| }) { | ||
| return MoonCheckboxColors( | ||
| activeColor: activeColor ?? this.activeColor, | ||
| borderColor: borderColor ?? this.borderColor, | ||
| checkColor: checkColor ?? this.checkColor, | ||
| fillColor: fillColor ?? this.fillColor, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonCheckboxColors lerp(ThemeExtension<MoonCheckboxColors>? other, double t) { | ||
| if (other is! MoonCheckboxColors) return this; | ||
|
|
||
| return MoonCheckboxColors( | ||
| activeColor: Color.lerp(activeColor, other.activeColor, t)!, | ||
| borderColor: Color.lerp(borderColor, other.borderColor, t)!, | ||
| checkColor: Color.lerp(checkColor, other.checkColor, t)!, | ||
| fillColor: Color.lerp(fillColor, other.fillColor, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonCheckboxColors")) | ||
| ..add(ColorProperty("activeColor", activeColor)) | ||
| ..add(ColorProperty("borderColor", borderColor)) | ||
| ..add(ColorProperty("checkColor", checkColor)) | ||
| ..add(ColorProperty("fillColor", fillColor)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import 'dart:ui'; | ||
|
|
||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/src/theme/borders.dart'; | ||
|
|
||
| @immutable | ||
| class MoonCheckboxProperties extends ThemeExtension<MoonCheckboxProperties> with DiagnosticableTreeMixin { | ||
| static final properties = MoonCheckboxProperties( | ||
| borderRadiusValue: MoonBorders.borders.interactiveXs.topLeft.x, | ||
| ); | ||
|
|
||
| /// Checkbox border radius value. | ||
| final double borderRadiusValue; | ||
|
|
||
| const MoonCheckboxProperties({ | ||
| required this.borderRadiusValue, | ||
| }); | ||
|
|
||
| @override | ||
| MoonCheckboxProperties copyWith({ | ||
| double? borderRadiusValue, | ||
| }) { | ||
| return MoonCheckboxProperties( | ||
| borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonCheckboxProperties lerp(ThemeExtension<MoonCheckboxProperties>? other, double t) { | ||
| if (other is! MoonCheckboxProperties) return this; | ||
|
|
||
| return MoonCheckboxProperties( | ||
| borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonCheckboxProperties")) | ||
| ..add(DiagnosticsProperty<double>("borderRadiusValue", borderRadiusValue)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/checkbox/checkbox_colors.dart'; | ||
| import 'package:moon_design/src/theme/checkbox/checkbox_properties.dart'; | ||
|
|
||
| @immutable | ||
| class MoonCheckboxTheme extends ThemeExtension<MoonCheckboxTheme> with DiagnosticableTreeMixin { | ||
| static final light = MoonCheckboxTheme( | ||
| colors: MoonCheckboxColors.light, | ||
| properties: MoonCheckboxProperties.properties, | ||
| ); | ||
|
|
||
| static final dark = MoonCheckboxTheme( | ||
| colors: MoonCheckboxColors.dark, | ||
| properties: MoonCheckboxProperties.properties, | ||
| ); | ||
|
|
||
| /// Checkbox colors. | ||
| final MoonCheckboxColors colors; | ||
|
|
||
| /// Checkbox properties. | ||
| final MoonCheckboxProperties properties; | ||
|
|
||
| const MoonCheckboxTheme({ | ||
| required this.colors, | ||
| required this.properties, | ||
| }); | ||
|
|
||
| @override | ||
| MoonCheckboxTheme copyWith({ | ||
| MoonCheckboxColors? colors, | ||
| MoonCheckboxProperties? properties, | ||
| }) { | ||
| return MoonCheckboxTheme( | ||
| colors: colors ?? this.colors, | ||
| properties: properties ?? this.properties, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonCheckboxTheme lerp(ThemeExtension<MoonCheckboxTheme>? other, double t) { | ||
| if (other is! MoonCheckboxTheme) return this; | ||
|
|
||
| return MoonCheckboxTheme( | ||
| colors: colors.lerp(other.colors, t), | ||
| properties: properties.lerp(other.properties, t), | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { | ||
| super.debugFillProperties(diagnosticProperties); | ||
| diagnosticProperties | ||
| ..add(DiagnosticsProperty("type", "MoonCheckboxTheme")) | ||
| ..add(DiagnosticsProperty<MoonCheckboxColors>("colors", colors)) | ||
| ..add(DiagnosticsProperty<MoonCheckboxProperties>("properties", properties)); | ||
| } | ||
| } |
Oops, something went wrong.