From ee1c46846fbfdd1dd1a481902b2d814bdd98b616 Mon Sep 17 00:00:00 2001 From: mikecoomber Date: Thu, 6 Jun 2024 17:15:33 +0100 Subject: [PATCH] fixed widget book, created input icon button --- .../components/select_input_example.dart | 55 ++++++++--- .../pages/components/text_input_example.dart | 14 ++- .../components/select_input_widgetbook.dart | 91 ++++++------------- .../components/buttons/input_icon_button.dart | 73 +++++++++++++++ lib/src/components/date_input/date_input.dart | 66 +------------- lib/src/components/dropdown/dropdown.dart | 1 + .../components/select_input/select_input.dart | 10 +- lib/src/components/time_input/time_input.dart | 66 +------------- 8 files changed, 170 insertions(+), 206 deletions(-) create mode 100644 lib/src/components/buttons/input_icon_button.dart diff --git a/example/lib/pages/components/select_input_example.dart b/example/lib/pages/components/select_input_example.dart index d6d3030e..e7c145e2 100644 --- a/example/lib/pages/components/select_input_example.dart +++ b/example/lib/pages/components/select_input_example.dart @@ -15,6 +15,20 @@ class _SelectInputExampleState extends State { @override Widget build(BuildContext context) { + final items = [ + ZetaDropdownItem( + value: "Item 1", + icon: Icon(ZetaIcons.star_round), + ), + ZetaDropdownItem( + value: "Item 2", + icon: Icon(ZetaIcons.star_half_round), + ), + ZetaDropdownItem( + value: "Item 3", + ), + ]; + return ExampleScaffold( name: 'Select Input', child: Center( @@ -26,22 +40,33 @@ class _SelectInputExampleState extends State { child: Column( children: [ ZetaSelectInput( - label: 'Label', + label: 'Large', + size: ZetaWidgetSize.large, hintText: 'Default hint text', + rounded: false, + placeholder: 'Placeholder', initialValue: "Item 1", - items: [ - ZetaDropdownItem( - value: "Item 1", - icon: Icon(ZetaIcons.star_round), - ), - ZetaDropdownItem( - value: "Item 2", - icon: Icon(ZetaIcons.star_half_round), - ), - ZetaDropdownItem( - value: "Item 3", - ), - ], + items: items, + ), + ZetaSelectInput( + label: 'Medium', + hintText: 'Default hint text', + placeholder: 'Placeholder', + items: items, + ), + ZetaSelectInput( + label: 'Small', + size: ZetaWidgetSize.small, + hintText: 'Default hint text', + placeholder: 'Placeholder', + items: items, + ), + ZetaSelectInput( + label: 'Disabled', + hintText: 'Default hint text', + placeholder: 'Placeholder', + disabled: true, + items: items, ), ZetaButton( label: 'Validate', @@ -49,7 +74,7 @@ class _SelectInputExampleState extends State { formKey.currentState?.validate(); }, ) - ], + ].divide(const SizedBox(height: 8)).toList(), ), ), ), diff --git a/example/lib/pages/components/text_input_example.dart b/example/lib/pages/components/text_input_example.dart index 0b293921..80bbb133 100644 --- a/example/lib/pages/components/text_input_example.dart +++ b/example/lib/pages/components/text_input_example.dart @@ -44,12 +44,16 @@ class TextInputExample extends StatelessWidget { ZetaTextInput( size: ZetaWidgetSize.small, placeholder: 'Placeholder', - prefix: IconButton( - iconSize: 12, - icon: Icon( - ZetaIcons.add_alert_round, + prefix: SizedBox( + height: 8, + child: IconButton( + iconSize: 12, + splashRadius: 1, + icon: Icon( + ZetaIcons.add_alert_round, + ), + onPressed: () {}, ), - onPressed: () {}, ), ), const SizedBox(height: 8), diff --git a/example/widgetbook/pages/components/select_input_widgetbook.dart b/example/widgetbook/pages/components/select_input_widgetbook.dart index 2a6d13c3..64c378fb 100644 --- a/example/widgetbook/pages/components/select_input_widgetbook.dart +++ b/example/widgetbook/pages/components/select_input_widgetbook.dart @@ -6,44 +6,44 @@ import '../../test/test_components.dart'; import '../../utils/utils.dart'; Widget selectInputUseCase(BuildContext context) { - final zeta = Zeta.of(context); final items = [ - ZetaSelectInputItem(value: 'Item 1'), - ZetaSelectInputItem(value: 'Item 2'), - ZetaSelectInputItem(value: 'Item 3'), - ZetaSelectInputItem(value: 'Item 4'), - ZetaSelectInputItem(value: 'Item 5'), - ZetaSelectInputItem(value: 'Item 6'), - ZetaSelectInputItem(value: 'Item 7'), - ZetaSelectInputItem(value: 'Item 8'), - ZetaSelectInputItem(value: 'Item 9'), - ZetaSelectInputItem(value: 'Item 10'), - ZetaSelectInputItem(value: 'Item 11'), - ZetaSelectInputItem(value: 'Item 12'), + ZetaDropdownItem( + value: "Item 1", + icon: Icon(ZetaIcons.star_round), + ), + ZetaDropdownItem( + value: "Item 2", + icon: Icon(ZetaIcons.star_half_round), + ), + ZetaDropdownItem( + value: "Item 3", + ), ]; - late ZetaSelectInputItem? selectedItem = items.first; - String? _errorText; final label = context.knobs.string( label: 'Label', initialValue: 'Label', ); - final hint = context.knobs.string( + final errorText = context.knobs.stringOrNull( + label: 'Error message', + initialValue: 'Oops! Error hint text', + ); + final hintText = context.knobs.string( label: 'Hint', initialValue: 'Default hint text', ); - final rounded = context.knobs.boolean(label: 'Rounded', initialValue: true); - final enabled = context.knobs.boolean(label: 'Enabled', initialValue: true); - final required = context.knobs.boolean(label: 'Required', initialValue: true); + final rounded = roundedKnob(context); + final disabled = disabledKnob(context); + final size = context.knobs.list( label: 'Size', options: ZetaWidgetSize.values, - labelBuilder: (size) => size.name, + labelBuilder: (size) => enumLabelBuilder(size), ); - final iconData = iconKnob( - context, - name: "Icon", - rounded: rounded, - initial: rounded ? ZetaIcons.star_round : ZetaIcons.star_sharp, + + final requirementLevel = context.knobs.list( + label: 'Requirement Level', + options: ZetaFormFieldRequirement.values, + labelBuilder: (requirementLevel) => enumLabelBuilder(requirementLevel), ); return WidgetbookTestWidget( @@ -53,44 +53,13 @@ Widget selectInputUseCase(BuildContext context) { padding: const EdgeInsets.all(ZetaSpacing.xL2), child: ZetaSelectInput( rounded: rounded, - enabled: enabled, + disabled: disabled, size: size, - label: Row( - children: [ - Text(label), - if (required) - Padding( - padding: const EdgeInsets.only(left: 6), - child: Text( - '*', - style: TextStyle(color: zeta.colors.red.shade60), - ), - ), - ], - ), - hint: hint, - leadingIcon: Icon(iconData), - hasError: _errorText != null, - errorText: _errorText, - onChanged: (item) { - setState(() { - selectedItem = item; - if (item != null) { - _errorText = null; - } - }); - }, - onTextChanged: (value) { - setState(() { - if (required && value.isEmpty) { - _errorText = 'Required'; - } else { - _errorText = null; - } - }); - }, - selectedItem: selectedItem, items: items, + label: label, + hintText: hintText, + requirementLevel: requirementLevel, + errorText: errorText, ), ); }, diff --git a/lib/src/components/buttons/input_icon_button.dart b/lib/src/components/buttons/input_icon_button.dart new file mode 100644 index 00000000..2377499f --- /dev/null +++ b/lib/src/components/buttons/input_icon_button.dart @@ -0,0 +1,73 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +/// An icon button to be used internally in inputs +class InputIconButton extends StatelessWidget { + /// Creates a new [InputIconButton] + const InputIconButton({ + super.key, + required this.icon, + required this.onTap, + required this.disabled, + required this.size, + required this.color, + }); + + /// The icon + final IconData icon; + + /// On tap + final VoidCallback onTap; + + /// Disables the icon and its on tap + final bool disabled; + + /// The size of the icon + final ZetaWidgetSize size; + + /// The color of the icon + final Color color; + + double get _iconSize { + switch (size) { + case ZetaWidgetSize.large: + return ZetaSpacing.xL2; + case ZetaWidgetSize.medium: + return ZetaSpacing.xL; + case ZetaWidgetSize.small: + return ZetaSpacing.large; + } + } + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + + return IconButton( + padding: EdgeInsets.all(_iconSize / 2), + constraints: BoxConstraints( + maxHeight: _iconSize * 2, + maxWidth: _iconSize * 2, + minHeight: _iconSize * 2, + minWidth: _iconSize * 2, + ), + color: !disabled ? color : colors.iconDisabled, + onPressed: disabled ? null : onTap, + iconSize: _iconSize, + icon: Icon(icon), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('icon', icon)) + ..add(ObjectFlagProperty.has('onTap', onTap)) + ..add(DiagnosticsProperty('disabled', disabled)) + ..add(ColorProperty('color', color)) + ..add(EnumProperty('size', size)); + } +} diff --git a/lib/src/components/date_input/date_input.dart b/lib/src/components/date_input/date_input.dart index de2c15cd..ccc47150 100644 --- a/lib/src/components/date_input/date_input.dart +++ b/lib/src/components/date_input/date_input.dart @@ -6,6 +6,7 @@ import 'package:mask_text_input_formatter/mask_text_input_formatter.dart'; import '../../../zeta_flutter.dart'; import '../../interfaces/form_field.dart'; +import '../buttons/input_icon_button.dart'; /// A form field used to input dates. /// @@ -107,17 +108,6 @@ class ZetaDateInputState extends State implements ZetaFormFieldSt bool get _showClearButton => _controller.text.isNotEmpty; - double get _iconSize { - switch (widget.size) { - case ZetaWidgetSize.large: - return ZetaSpacing.xL2; - case ZetaWidgetSize.medium: - return ZetaSpacing.xL; - case ZetaWidgetSize.small: - return ZetaSpacing.large; - } - } - DateTime? get _value { final value = _dateFormatter.getMaskedText().trim(); final date = DateFormat(widget.dateFormat).tryParseStrict(value); @@ -259,18 +249,18 @@ class ZetaDateInputState extends State implements ZetaFormFieldSt mainAxisSize: MainAxisSize.min, children: [ if (_showClearButton) - _IconButton( + InputIconButton( icon: widget.rounded ? ZetaIcons.cancel_round : ZetaIcons.cancel_sharp, onTap: reset, disabled: widget.disabled, - size: _iconSize, + size: widget.size, color: _colors.iconSubtle, ), - _IconButton( + InputIconButton( icon: widget.rounded ? ZetaIcons.calendar_round : ZetaIcons.calendar_sharp, onTap: _pickDate, disabled: widget.disabled, - size: _iconSize, + size: widget.size, color: _colors.iconDefault, ), ], @@ -278,49 +268,3 @@ class ZetaDateInputState extends State implements ZetaFormFieldSt ); } } - -class _IconButton extends StatelessWidget { - const _IconButton({ - required this.icon, - required this.onTap, - required this.disabled, - required this.size, - required this.color, - }); - - final IconData icon; - final VoidCallback onTap; - final bool disabled; - final double size; - final Color color; - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - - return IconButton( - padding: EdgeInsets.all(size / 2), - constraints: BoxConstraints( - maxHeight: size * 2, - maxWidth: size * 2, - minHeight: size * 2, - minWidth: size * 2, - ), - color: !disabled ? color : colors.iconDisabled, - onPressed: disabled ? null : onTap, - iconSize: size, - icon: Icon(icon), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty('icon', icon)) - ..add(ObjectFlagProperty.has('onTap', onTap)) - ..add(DiagnosticsProperty('disabled', disabled)) - ..add(DoubleProperty('size', size)) - ..add(ColorProperty('color', color)); - } -} diff --git a/lib/src/components/dropdown/dropdown.dart b/lib/src/components/dropdown/dropdown.dart index 576c6421..017f304c 100644 --- a/lib/src/components/dropdown/dropdown.dart +++ b/lib/src/components/dropdown/dropdown.dart @@ -171,6 +171,7 @@ enum MenuPosition { down, } +/// The state for a [ZetaDropdown] class ZetaDropDownState extends State> { final _DropdownControllerImpl _dropdownController = _DropdownControllerImpl( overlayPortalController: OverlayPortalController(), diff --git a/lib/src/components/select_input/select_input.dart b/lib/src/components/select_input/select_input.dart index 84565da1..e7741beb 100644 --- a/lib/src/components/select_input/select_input.dart +++ b/lib/src/components/select_input/select_input.dart @@ -4,6 +4,7 @@ import 'package:flutter/material.dart'; import '../../../zeta_flutter.dart'; import '../../interfaces/form_field.dart'; +import '../buttons/input_icon_button.dart'; /// Class for [ZetaSelectInput] class ZetaSelectInput extends ZetaFormField { @@ -179,9 +180,12 @@ class _ZetaSelectInputState extends State> { placeholder: widget.placeholder, hintText: widget.hintText, onChange: (val) => _onInputChanged(controller), - suffix: IconButton( - icon: Icon(_icon, color: colors.iconSubtle), - onPressed: widget.disabled ? null : () => _onIconTapped(controller), + suffix: InputIconButton( + icon: _icon, + disabled: widget.disabled, + size: widget.size, + color: colors.iconSubtle, + onTap: () => _onIconTapped(controller), ), ); }, diff --git a/lib/src/components/time_input/time_input.dart b/lib/src/components/time_input/time_input.dart index 65be2fd3..2dd2af5d 100644 --- a/lib/src/components/time_input/time_input.dart +++ b/lib/src/components/time_input/time_input.dart @@ -5,6 +5,7 @@ import 'package:mask_text_input_formatter/mask_text_input_formatter.dart'; import '../../../zeta_flutter.dart'; import '../../interfaces/form_field.dart'; +import '../buttons/input_icon_button.dart'; const _maxHrValue = 23; const _max12HrValue = 12; @@ -104,17 +105,6 @@ class ZetaTimeInputState extends State implements ZetaFormFieldSt BorderRadius get _borderRadius => widget.rounded ? ZetaRadius.minimal : ZetaRadius.none; - double get _iconSize { - switch (widget.size) { - case ZetaWidgetSize.large: - return ZetaSpacing.xL2; - case ZetaWidgetSize.medium: - return ZetaSpacing.xL; - case ZetaWidgetSize.small: - return ZetaSpacing.large; - } - } - int get _hrsLimit => _use12Hr ? _max12HrValue : _maxHrValue; final int _minsLimit = _maxMinsValue; @@ -261,18 +251,18 @@ class ZetaTimeInputState extends State implements ZetaFormFieldSt mainAxisSize: MainAxisSize.min, children: [ if (_showClearButton) - _IconButton( + InputIconButton( icon: widget.rounded ? ZetaIcons.cancel_round : ZetaIcons.cancel_sharp, onTap: reset, disabled: widget.disabled, - size: _iconSize, + size: widget.size, color: _colors.iconSubtle, ), - _IconButton( + InputIconButton( icon: widget.rounded ? ZetaIcons.clock_outline_round : ZetaIcons.clock_outline_sharp, onTap: _pickTime, disabled: widget.disabled, - size: _iconSize, + size: widget.size, color: _colors.iconDefault, ), ], @@ -280,49 +270,3 @@ class ZetaTimeInputState extends State implements ZetaFormFieldSt ); } } - -class _IconButton extends StatelessWidget { - const _IconButton({ - required this.icon, - required this.onTap, - required this.disabled, - required this.size, - required this.color, - }); - - final IconData icon; - final VoidCallback onTap; - final bool disabled; - final double size; - final Color color; - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - - return IconButton( - padding: EdgeInsets.all(size / 2), - constraints: BoxConstraints( - maxHeight: size * 2, - maxWidth: size * 2, - minHeight: size * 2, - minWidth: size * 2, - ), - color: !disabled ? color : colors.iconDisabled, - onPressed: disabled ? null : onTap, - iconSize: size, - icon: Icon(icon), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty('icon', icon)) - ..add(ObjectFlagProperty.has('onTap', onTap)) - ..add(DiagnosticsProperty('disabled', disabled)) - ..add(DoubleProperty('size', size)) - ..add(ColorProperty('color', color)); - } -}