-
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-491] Create TextArea widget (#140)
- Loading branch information
Showing
10 changed files
with
850 additions
and
30 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,128 @@ | ||
| import 'package:example/src/storybook/common/color_options.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| class TextAreaStory extends Story { | ||
| TextAreaStory() | ||
| : super( | ||
| name: "TextArea", | ||
| builder: (context) { | ||
| final textColorsKnob = context.knobs.options( | ||
| label: "textColor", | ||
| description: "MoonColors variants for MoonTextArea text.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final textColor = colorTable(context)[textColorsKnob]; | ||
|
|
||
| final hintTextColorsKnob = context.knobs.options( | ||
| label: "hintTextColor", | ||
| description: "MoonColors variants for MoonTextArea hint text.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final hintTextColor = colorTable(context)[hintTextColorsKnob]; | ||
|
|
||
| final backgroundColorsKnob = context.knobs.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for MoonTextArea background.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[backgroundColorsKnob]; | ||
|
|
||
| final activeBorderColorsKnob = context.knobs.options( | ||
| label: "activeBorderColor", | ||
| description: "MoonColors variants for MoonTextArea active border.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final activeBorderColor = colorTable(context)[activeBorderColorsKnob]; | ||
|
|
||
| final inactiveBorderColorsKnob = context.knobs.options( | ||
| label: "inactiveBorderColor", | ||
| description: "MoonColors variants for MoonTextArea inactive border.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final inactiveBorderColor = colorTable(context)[inactiveBorderColorsKnob]; | ||
|
|
||
| final errorBorderColorsKnob = context.knobs.options( | ||
| label: "errorBorderColor", | ||
| description: "MoonColors variants for MoonTextArea error border.", | ||
| initial: 40, // null | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final errorBorderColor = colorTable(context)[errorBorderColorsKnob]; | ||
|
|
||
| final borderRadiusKnob = context.knobs.sliderInt( | ||
| max: 32, | ||
| initial: 8, | ||
| label: "borderRadius", | ||
| description: "Border radius for MoonTextArea.", | ||
| ); | ||
|
|
||
| final enabledKnob = context.knobs.boolean( | ||
| label: "enabled", | ||
| description: "Switch between enabled and disabled states.", | ||
| initial: true, | ||
| ); | ||
|
|
||
| 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), | ||
| Form( | ||
| child: Builder( | ||
| builder: (context) { | ||
| return Column( | ||
| children: [ | ||
| MoonTextArea( | ||
| enabled: enabledKnob, | ||
| height: 300, | ||
| textColor: textColor, | ||
| hintTextColor: hintTextColor, | ||
| backgroundColor: backgroundColor, | ||
| activeBorderColor: activeBorderColor, | ||
| inactiveBorderColor: inactiveBorderColor, | ||
| errorBorderColor: errorBorderColor, | ||
| borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()), | ||
| hintText: "Enter your text here...", | ||
| validator: (value) => value?.length != null && value!.length < 10 | ||
| ? "The text should be longer than 10 characters." | ||
| : null, | ||
| errorBuilder: (context, errorText) => Text(errorText!), | ||
| ), | ||
| const SizedBox(height: 16), | ||
| MoonFilledButton( | ||
| label: const Text("Submit"), | ||
| onTap: () => Form.of(context).validate(), | ||
| ) | ||
| ], | ||
| ); | ||
| }, | ||
| ), | ||
| ), | ||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import 'package:flutter/foundation.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| import 'package:moon_design/src/theme/colors.dart'; | ||
|
|
||
| @immutable | ||
| class MoonTextAreaColors extends ThemeExtension<MoonTextAreaColors> with DiagnosticableTreeMixin { | ||
| static final light = MoonTextAreaColors( | ||
| backgroundColor: MoonColors.light.gohan, | ||
| activeBorderColor: MoonColors.light.piccolo, | ||
| inactiveBorderColor: MoonColors.light.beerus, | ||
| errorBorderColor: MoonColors.light.chiChi100, | ||
| hintTextColor: MoonColors.light.trunks, | ||
| ); | ||
|
|
||
| static final dark = MoonTextAreaColors( | ||
| backgroundColor: MoonColors.dark.gohan, | ||
| activeBorderColor: MoonColors.dark.piccolo, | ||
| inactiveBorderColor: MoonColors.dark.beerus, | ||
| errorBorderColor: MoonColors.dark.chiChi100, | ||
| hintTextColor: MoonColors.dark.trunks, | ||
| ); | ||
|
|
||
| /// TextArea background color. | ||
| final Color backgroundColor; | ||
|
|
||
| /// TextArea active border color. | ||
| final Color activeBorderColor; | ||
|
|
||
| /// TextArea inactive border color. | ||
| final Color inactiveBorderColor; | ||
|
|
||
| /// TextArea error border color. | ||
| final Color errorBorderColor; | ||
|
|
||
| /// TextArea hint text color. | ||
| final Color hintTextColor; | ||
|
|
||
| const MoonTextAreaColors({ | ||
| required this.backgroundColor, | ||
| required this.activeBorderColor, | ||
| required this.inactiveBorderColor, | ||
| required this.errorBorderColor, | ||
| required this.hintTextColor, | ||
| }); | ||
|
|
||
| @override | ||
| MoonTextAreaColors copyWith({ | ||
| Color? backgroundColor, | ||
| Color? activeBorderColor, | ||
| Color? inactiveBorderColor, | ||
| Color? errorBorderColor, | ||
| Color? hoverBorderColor, | ||
| Color? hintTextColor, | ||
| }) { | ||
| return MoonTextAreaColors( | ||
| backgroundColor: backgroundColor ?? this.backgroundColor, | ||
| activeBorderColor: activeBorderColor ?? this.activeBorderColor, | ||
| inactiveBorderColor: inactiveBorderColor ?? this.inactiveBorderColor, | ||
| errorBorderColor: errorBorderColor ?? this.errorBorderColor, | ||
| hintTextColor: hintTextColor ?? this.hintTextColor, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| MoonTextAreaColors lerp(ThemeExtension<MoonTextAreaColors>? other, double t) { | ||
| if (other is! MoonTextAreaColors) return this; | ||
|
|
||
| return MoonTextAreaColors( | ||
| backgroundColor: Color.lerp(backgroundColor, other.backgroundColor, t)!, | ||
| activeBorderColor: Color.lerp(activeBorderColor, other.activeBorderColor, t)!, | ||
| inactiveBorderColor: Color.lerp(inactiveBorderColor, other.inactiveBorderColor, t)!, | ||
| errorBorderColor: Color.lerp(errorBorderColor, other.errorBorderColor, t)!, | ||
| hintTextColor: Color.lerp(hintTextColor, other.hintTextColor, t)!, | ||
| ); | ||
| } | ||
|
|
||
| @override | ||
| void debugFillProperties(DiagnosticPropertiesBuilder properties) { | ||
| super.debugFillProperties(properties); | ||
| properties | ||
| ..add(DiagnosticsProperty("type", "MoonTextAreaColors")) | ||
| ..add(ColorProperty("backgroundColor", backgroundColor)) | ||
| ..add(ColorProperty("activeBorderColor", activeBorderColor)) | ||
| ..add(ColorProperty("inactiveBorderColor", inactiveBorderColor)) | ||
| ..add(ColorProperty("errorBorderColor", errorBorderColor)) | ||
| ..add(ColorProperty("hintTextColor", hintTextColor)); | ||
| } | ||
| } |
Oops, something went wrong.