feat: [MDS-946] Add search functionality to Icons story (#337)

coingaming · Jan 11, 2024 · b6cf11a · b6cf11a
1 parent 23049f8
commit b6cf11a
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 8 deletions.
diff --git a/example/lib/src/storybook/common/widgets/segment.dart b/example/lib/src/storybook/common/widgets/segment.dart
@@ -21,7 +21,7 @@ class IconsSegment extends StatelessWidget {
       sliver: SliverMainAxisGroup(
         slivers: [
           SliverPadding(
-            padding: const EdgeInsets.only(top: 32),
+            padding: const EdgeInsets.only(top: 16),
             sliver: SliverToBoxAdapter(
               child: TextDivider(
                 text: createSegmentTitle(segmentMap.keys.first),
@@ -60,6 +60,9 @@ class IconsSegment extends StatelessWidget {
               );
             },
           ),
+          const SliverPadding(
+            padding: EdgeInsets.only(bottom: 16),
+          ),
         ],
       ),
     );

diff --git a/example/lib/src/storybook/stories/icons.dart b/example/lib/src/storybook/stories/icons.dart
@@ -3,13 +3,22 @@ import 'dart:ui';
 
 import 'package:example/src/storybook/common/widgets/segment.dart';
 import 'package:flutter/material.dart';
-import 'package:moon_icons/moon_icons.dart';
+import 'package:moon_design/moon_design.dart';
 
-class IconsStory extends StatelessWidget {
+class IconsStory extends StatefulWidget {
   static const path = '/icons';
 
   const IconsStory({super.key});
 
+  @override
+  State<IconsStory> createState() => _IconsStoryState();
+}
+
+class _IconsStoryState extends State<IconsStory> {
+  final TextEditingController _searchController = TextEditingController();
+
+  Map<String, IconData> _filteredIcons = {};
+
   // Helper function to group keys in trios
   List<List<String>> _groupInTrios(List<String> keys) {
     final List<List<String>> trios = [];
@@ -80,8 +89,43 @@ class IconsStory extends StatelessWidget {
     return combinedSegments.values;
   }
 
+  void _performSearch() {
+    setState(() {
+      _filteredIcons = Map.fromEntries(
+        iconsMap.entries
+            .where((entry) => entry.key.contains(_searchController.text.toLowerCase()))
+            .map((entry) => MapEntry(entry.key, entry.value)),
+      );
+    });
+  }
+
+  void _handleClear() {
+    setState(() {
+      _searchController.clear();
+      _performSearch();
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+
+    _searchController.addListener(_performSearch);
+    // Perform search once on init to show all icons
+    _performSearch();
+  }
+
+  @override
+  void dispose() {
+    _searchController.dispose();
+
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final sortedIcons = _getSortedIcons(_filteredIcons);
+
     final ScrollBehavior scrollBehaviour = ScrollConfiguration.of(context).copyWith(
       scrollbars: false,
       overscroll: false,
@@ -91,11 +135,35 @@ class IconsStory extends StatelessWidget {
       },
     );
 
-    final sortedIcons = _getSortedIcons(iconsMap);
-
-    return CustomScrollView(
-      scrollBehavior: scrollBehaviour,
-      slivers: sortedIcons.map((e) => IconsSegment(segmentMap: e)).toList(),
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: context.moonColors?.goku,
+        title: Theme(
+          data: Theme.of(context),
+          child: MoonTextInput(
+            controller: _searchController,
+            hintText: "Search icons",
+            leading: const Icon(
+              MoonIcons.generic_search_24_light,
+              size: 24,
+            ),
+            trailing: MouseRegion(
+              cursor: SystemMouseCursors.click,
+              child: GestureDetector(
+                onTap: _handleClear,
+                child: const Icon(
+                  MoonIcons.controls_close_small_24_light,
+                  size: 24,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+      body: CustomScrollView(
+        scrollBehavior: scrollBehaviour,
+        slivers: sortedIcons.map((e) => IconsSegment(segmentMap: e)).toList(),
+      ),
     );
   }
 }