-
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-617] Refactor Input to align with Flutter 3.10.x changes a…
…nd create InputGroup component (#239) Co-authored-by: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
3 people
committed
Sep 6, 2023
1 parent
a77270a
commit 32ec1c7
Showing
27 changed files
with
2,118 additions
and
4,881 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
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
224 changes: 224 additions & 0 deletions
224
example/lib/src/storybook/stories/text_input_group.dart
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,224 @@ | ||
| import 'package:example/src/storybook/common/color_options.dart'; | ||
| import 'package:example/src/storybook/common/widgets/error.dart'; | ||
| import 'package:flutter/material.dart'; | ||
| import 'package:moon_design/moon_design.dart'; | ||
| import 'package:storybook_flutter/storybook_flutter.dart'; | ||
|
|
||
| TextEditingController _textController = TextEditingController(); | ||
| TextEditingController _passwordController = TextEditingController(); | ||
|
|
||
| bool _hidePassword = true; | ||
|
|
||
| class TextInputGroupStory extends Story { | ||
| TextInputGroupStory() | ||
| : super( | ||
| name: "TextInputGroup", | ||
| builder: (BuildContext context) { | ||
| final textColorKnob = context.knobs.nullable.options( | ||
| label: "textColor", | ||
| description: "MoonColors variants for MoonTextInputGroup text.", | ||
| enabled: false, | ||
| initial: 0, | ||
| // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final textColor = colorTable(context)[textColorKnob ?? 40]; | ||
|
|
||
| final hintTextColorKnob = context.knobs.nullable.options( | ||
| label: "hintTextColor", | ||
| description: "MoonColors variants for MoonTextInputGroup hint text.", | ||
| enabled: false, | ||
| initial: 0, | ||
| // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final hintTextColor = colorTable(context)[hintTextColorKnob ?? 40]; | ||
|
|
||
| final backgroundColorKnob = context.knobs.nullable.options( | ||
| label: "backgroundColor", | ||
| description: "MoonColors variants for MoonTextInputGroup background.", | ||
| enabled: false, | ||
| initial: 0, | ||
| // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; | ||
|
|
||
| final activeBorderColorKnob = context.knobs.nullable.options( | ||
| label: "activeBorderColor", | ||
| description: "MoonColors variants for MoonTextInputGroup active border.", | ||
| enabled: false, | ||
| initial: 0, | ||
| // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; | ||
|
|
||
| final inactiveBorderColorKnob = context.knobs.nullable.options( | ||
| label: "inactiveBorderColor", | ||
| description: "MoonColors variants for MoonTextInputGroup inactive border.", | ||
| enabled: false, | ||
| initial: 0, | ||
| // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; | ||
|
|
||
| final errorColorKnob = context.knobs.nullable.options( | ||
| label: "errorColor", | ||
| description: "MoonColors variants for MoonTextInputGroup error.", | ||
| enabled: false, | ||
| initial: 0, | ||
| // piccolo | ||
| options: colorOptions, | ||
| ); | ||
|
|
||
| final errorColor = colorTable(context)[errorColorKnob ?? 40]; | ||
|
|
||
| final borderRadiusKnob = context.knobs.nullable.sliderInt( | ||
| label: "borderRadius", | ||
| description: "Border radius for MoonTextInputGroup.", | ||
| enabled: false, | ||
| initial: 8, | ||
| max: 32, | ||
| ); | ||
|
|
||
| final enabledKnob = context.knobs.boolean( | ||
| label: "enabled", | ||
| description: "Switch between enabled and disabled states.", | ||
| initial: true, | ||
| ); | ||
|
|
||
| final showHelperKnob = context.knobs.boolean( | ||
| label: "helper", | ||
| description: "Show widget in MoonTextInputGroup helper slot.", | ||
| ); | ||
|
|
||
| final BorderRadiusGeometry? borderRadius = | ||
| borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; | ||
|
|
||
| return Center( | ||
| child: SingleChildScrollView( | ||
| padding: const EdgeInsets.symmetric(vertical: 64), | ||
| child: Form( | ||
| child: StatefulBuilder( | ||
| builder: (context, setState) { | ||
| return Column( | ||
| mainAxisSize: MainAxisSize.min, | ||
| children: [ | ||
| MoonTextInputGroup( | ||
| enabled: enabledKnob, | ||
| textColor: textColor, | ||
| backgroundColor: backgroundColor, | ||
| inactiveBorderColor: inactiveBorderColor, | ||
| errorColor: errorColor, | ||
| borderRadius: borderRadius, | ||
| helper: showHelperKnob ? const Text("Supporting text") : null, | ||
| errorBuilder: (BuildContext context, List<String> errorMessages) => | ||
| _StoryErrorMessageWidget(errors: errorMessages), | ||
| children: [ | ||
| MoonFormTextInput( | ||
| textInputSize: MoonTextInputSize.xl, | ||
| controller: _textController, | ||
| enabled: enabledKnob, | ||
| hasFloatingLabel: true, | ||
| textColor: textColor, | ||
| hintTextColor: hintTextColor, | ||
| activeBorderColor: activeBorderColor, | ||
| errorColor: errorColor, | ||
| borderRadius: borderRadius, | ||
| hintText: "Enter your text here (over 10 characters)", | ||
| validator: (String? value) => value?.length != null && value!.length < 10 | ||
| ? "The text should be longer than 10 characters." | ||
| : null, | ||
| leading: const MoonIcon( | ||
| MoonIcons.search_24, | ||
| size: 24, | ||
| ), | ||
| trailing: MouseRegion( | ||
| cursor: SystemMouseCursors.click, | ||
| child: GestureDetector( | ||
| child: const MoonIcon( | ||
| MoonIcons.close_small_24, | ||
| size: 24, | ||
| ), | ||
| onTap: () => _textController.clear(), | ||
| ), | ||
| ), | ||
| ), | ||
| MoonFormTextInput( | ||
| textInputSize: MoonTextInputSize.xl, | ||
| controller: _passwordController, | ||
| enabled: enabledKnob, | ||
| keyboardType: TextInputType.visiblePassword, | ||
| obscureText: _hidePassword, | ||
| hasFloatingLabel: true, | ||
| textColor: textColor, | ||
| hintTextColor: hintTextColor, | ||
| activeBorderColor: activeBorderColor, | ||
| errorColor: errorColor, | ||
| borderRadius: borderRadius, | ||
| hintText: "Enter password (123abc)", | ||
| validator: (String? value) => value != "123abc" ? "Wrong password." : null, | ||
| leading: const MoonIcon( | ||
| MoonIcons.search_24, | ||
| size: 24, | ||
| ), | ||
| trailing: MouseRegion( | ||
| cursor: SystemMouseCursors.click, | ||
| child: GestureDetector( | ||
| child: IntrinsicWidth( | ||
| child: Align( | ||
| alignment: Alignment.centerRight, | ||
| child: Text( | ||
| _hidePassword ? "Show" : "Hide", | ||
| style: DefaultTextStyle.of(context) | ||
| .style | ||
| .copyWith(decoration: TextDecoration.underline), | ||
| ), | ||
| ), | ||
| ), | ||
| onTap: () => setState(() => _hidePassword = !_hidePassword), | ||
| ), | ||
| ), | ||
| ), | ||
| ], | ||
| ), | ||
| const SizedBox(height: 32), | ||
| MoonFilledButton( | ||
| label: const Text("Submit"), | ||
| onTap: () => Form.of(context).validate(), | ||
| ) | ||
| ], | ||
| ); | ||
| }, | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| }, | ||
| ); | ||
| } | ||
|
|
||
| class _StoryErrorMessageWidget extends StatelessWidget { | ||
| final List<String> errors; | ||
|
|
||
| const _StoryErrorMessageWidget({required this.errors}); | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Column( | ||
| mainAxisSize: MainAxisSize.min, | ||
| children: List.generate(errors.length * 2 - 1, (int index) { | ||
| final int derivedIndex = index ~/ 2; | ||
|
|
||
| return index.isEven ? StoryErrorWidget(errorText: errors[derivedIndex]) : const SizedBox(height: 4); | ||
| }), | ||
| ); | ||
| } | ||
| } |
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
Oops, something went wrong.