Dropdown changes (#48)

* started refactoring dropdown * fixing leading * docs, leading space * adding disabled * Fixing text overflow and widgetbook * assert
ZebraDevs · Apr 17, 2024 · 671fcc1 · 671fcc1
1 parent d782481
commit 671fcc1
Show file tree

Hide file tree

Showing 3 changed files with 315 additions and 240 deletions.
diff --git a/example/lib/pages/components/dropdown_example.dart b/example/lib/pages/components/dropdown_example.dart
@@ -11,45 +11,62 @@ class DropdownExample extends StatefulWidget {
 }
 
 class _DropdownExampleState extends State<DropdownExample> {
-  ZetaDropdownItem selectedItem = ZetaDropdownItem(
-    value: "Item 1",
-    leadingIcon: Icon(ZetaIcons.star_round),
-  );
+  String selectedItem = "Item 1";
 
   @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: "Dropdown",
-      child: Center(
-        child: SingleChildScrollView(
-          child: SizedBox(
-              width: 320,
-              child: Column(children: [
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: [
+          Center(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
                 ZetaDropdown(
-                  leadingType: LeadingStyle.checkbox,
+                  disabled: true,
+                  type: ZetaDropdownMenuType.standard,
                   onChange: (value) {
                     setState(() {
                       selectedItem = value;
                     });
                   },
-                  selectedItem: selectedItem,
-                  items: [
-                    ZetaDropdownItem(
-                      value: "Item 1",
-                      leadingIcon: Icon(ZetaIcons.star_round),
-                    ),
-                    ZetaDropdownItem(
-                      value: "Item 2",
-                      leadingIcon: Icon(ZetaIcons.star_half_round),
-                    ),
-                    ZetaDropdownItem(
-                      value: "Item 3",
-                    )
-                  ],
+                  value: selectedItem,
+                  items: items,
                 ),
-                Text('Selected item : ${selectedItem.value}')
-              ])),
-        ),
+                Text('Selected item : ${selectedItem}')
+              ],
+            ),
+          ),
+          ZetaDropdown(
+            items: items,
+            value: selectedItem,
+            type: ZetaDropdownMenuType.checkbox,
+          ),
+          ZetaDropdown(
+            items: items,
+            value: selectedItem,
+            size: ZetaDropdownSize.mini,
+            type: ZetaDropdownMenuType.radio,
+          ),
+        ],
       ),
     );
   }

diff --git a/example/widgetbook/pages/components/dropdown_widgetbook.dart b/example/widgetbook/pages/components/dropdown_widgetbook.dart
@@ -3,6 +3,7 @@ import 'package:widgetbook/widgetbook.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
 import '../../test/test_components.dart';
+import '../../utils/utils.dart';
 
 Widget dropdownUseCase(BuildContext context) => WidgetbookTestWidget(
       widget: Center(
@@ -19,52 +20,37 @@ class DropdownExample extends StatefulWidget {
 }
 
 class _DropdownExampleState extends State<DropdownExample> {
-  List<ZetaDropdownItem> _children = [
+  final items = [
     ZetaDropdownItem(
       value: "Item 1",
-      leadingIcon: Icon(ZetaIcons.star_round),
+      icon: Icon(ZetaIcons.star_round),
     ),
     ZetaDropdownItem(
       value: "Item 2",
-      leadingIcon: Icon(ZetaIcons.star_half_round),
+      icon: Icon(ZetaIcons.star_half_round),
     ),
     ZetaDropdownItem(
       value: "Item 3",
     )
   ];
 
-  late ZetaDropdownItem selectedItem = ZetaDropdownItem(
-    value: "Item 1",
-    leadingIcon: Icon(ZetaIcons.star_round),
-  );
-
   @override
   Widget build(BuildContext _) {
-    return SingleChildScrollView(
-      child: SizedBox(
-          width: double.infinity,
-          child: Column(children: [
-            ZetaDropdown(
-              leadingType: widget.c.knobs.list(
-                label: "Checkbox type",
-                options: [
-                  LeadingStyle.none,
-                  LeadingStyle.checkbox,
-                  LeadingStyle.radio,
-                ],
-              ),
-              onChange: (value) {
-                setState(() {
-                  selectedItem = value;
-                });
-              },
-              selectedItem: selectedItem,
-              items: _children,
-              rounded: widget.c.knobs.boolean(label: "Rounded"),
-              isMinimized: widget.c.knobs.boolean(label: "Minimized"),
-            ),
-            Text('Selected item : ${selectedItem.value}')
-          ])),
+    return ZetaDropdown(
+      type: widget.c.knobs.list(
+        label: "Dropdown type",
+        options: ZetaDropdownMenuType.values,
+        labelBuilder: enumLabelBuilder,
+      ),
+      onChange: (value) {},
+      items: items,
+      rounded: widget.c.knobs.boolean(label: "Rounded"),
+      disabled: widget.c.knobs.boolean(label: "Disabled"),
+      size: widget.c.knobs.list(
+        label: 'Size',
+        options: ZetaDropdownSize.values,
+        labelBuilder: enumLabelBuilder,
+      ),
     );
   }
 }