fixed widget book, created input icon button

ZebraDevs · Jun 10, 2024 · ee1c468 · ee1c468
1 parent 38b2e2a
commit ee1c468
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 206 deletions.
diff --git 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<SelectInputExample> {
 
   @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,30 +40,41 @@ class _SelectInputExampleState extends State<SelectInputExample> {
               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',
                     onPressed: () {
                       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
@@ -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
@@ -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<ZetaWidgetSize>(
     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<ZetaFormFieldRequirement>(
+    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
@@ -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<IconData>('icon', icon))
+      ..add(ObjectFlagProperty<VoidCallback>.has('onTap', onTap))
+      ..add(DiagnosticsProperty<bool>('disabled', disabled))
+      ..add(ColorProperty('color', color))
+      ..add(EnumProperty<ZetaWidgetSize>('size', size));
+  }
+}
diff --git 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<ZetaDateInput> 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,68 +249,22 @@ class ZetaDateInputState extends State<ZetaDateInput> 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,
           ),
         ],
       ),
     );
   }
 }
-
-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<IconData>('icon', icon))
-      ..add(ObjectFlagProperty<VoidCallback>.has('onTap', onTap))
-      ..add(DiagnosticsProperty<bool>('disabled', disabled))
-      ..add(DoubleProperty('size', size))
-      ..add(ColorProperty('color', color));
-  }
-}