widget book

ZebraDevs · Apr 12, 2024 · 1241816 · 1241816
1 parent 3001bd6
commit 1241816
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 18 deletions.
diff --git a/example/lib/pages/components/pagination_example.dart b/example/lib/pages/components/pagination_example.dart
@@ -12,18 +12,44 @@ class PaginationExample extends StatefulWidget {
 }
 
 class _PaginationExampleState extends State<PaginationExample> {
+  int currentPage = 1;
+
   @override
   Widget build(BuildContext context) {
     return ExampleScaffold(
       name: PaginationExample.name,
-      child: Column(
-        children: [
-          ZetaPagination(pages: 1000),
-          ZetaPagination(
-            pages: 9,
-            type: ZetaPaginationType.dropdown,
+      child: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(64),
+          child: Column(
+            children: [
+              Expanded(
+                child: Center(
+                  child: Text(
+                    'Current Page: ${currentPage}',
+                    style: Theme.of(context).textTheme.bodyLarge,
+                  ),
+                ),
+              ),
+              ZetaPagination(
+                pages: 10,
+                currentPage: currentPage,
+                onChange: (val) => setState(() {
+                  currentPage = val;
+                }),
+              ),
+              const SizedBox(height: 8),
+              ZetaPagination(
+                pages: 10,
+                currentPage: currentPage,
+                onChange: (val) => setState(() {
+                  currentPage = val;
+                }),
+                type: ZetaPaginationType.dropdown,
+              ),
+            ],
           ),
-        ],
+        ),
       ),
     );
   }

diff --git a/example/widgetbook/main.dart b/example/widgetbook/main.dart
@@ -18,6 +18,7 @@ import 'pages/components/dropdown_widgetbook.dart';
 import 'pages/components/in_page_banner_widgetbook.dart';
 import 'pages/components/list_item_widgetbook.dart';
 import 'pages/components/navigation_bar_widgetbook.dart';
+import 'pages/components/pagination_widgetbook.dart';
 import 'pages/components/password_input_widgetbook.dart';
 import 'pages/components/progress_widgetbook.dart';
 import 'pages/components/radio_widgetbook.dart';
@@ -87,6 +88,7 @@ class HotReload extends StatelessWidget {
             WidgetbookUseCase(name: 'Dial Pad', builder: (context) => dialPadUseCase(context)),
             WidgetbookUseCase(name: 'List Item', builder: (context) => listItemUseCase(context)),
             WidgetbookUseCase(name: 'Navigation Bar', builder: (context) => navigationBarUseCase(context)),
+            WidgetbookUseCase(name: 'Pagination', builder: (context) => paginationUseCase(context)),
             WidgetbookComponent(
               name: 'Progress',
               useCases: [

diff --git a/example/widgetbook/pages/components/pagination_widgetbook.dart b/example/widgetbook/pages/components/pagination_widgetbook.dart
@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+import '../../test/test_components.dart';
+
+Widget paginationUseCase(BuildContext context) => WidgetbookTestWidget(
+      widget: ZetaPagination(
+        pages: 10,
+        type: context.knobs.list<ZetaPaginationType>(
+          label: 'Type',
+          options: ZetaPaginationType.values,
+          labelBuilder: (value) => value.name.split('.').last.toUpperCase(),
+        ),
+        rounded: context.knobs.boolean(label: 'Rounded'),
+        disabled: context.knobs.boolean(label: 'Disabled'),
+      ),
+    );
diff --git a/lib/src/components/pagination/pagination.dart b/lib/src/components/pagination/pagination.dart
@@ -28,12 +28,16 @@ class ZetaPagination extends StatefulWidget {
     this.rounded = true,
     this.disabled = false,
     super.key,
-  }) : assert(
+  })  : assert(
           pages > 0,
           'Pages must be greater than zero',
+        ),
+        assert(
+          currentPage >= 1 && currentPage <= pages,
+          'currentPage must be greater than 1 and less than the number of pages',
         );
 
-  /// The number of pages to switch between.
+  /// The number of pages.
   final int pages;
 
   /// The current page.
@@ -198,7 +202,6 @@ class _ZetaPaginationState extends State<ZetaPagination> {
             ),
         padding: const EdgeInsets.symmetric(
           horizontal: ZetaSpacing.x3,
-          // vertical: ZetaSpacing.x2,
         ),
       ),
     );
@@ -216,22 +219,22 @@ class _ZetaPaginationState extends State<ZetaPagination> {
             _PaginationItem(
               icon: widget.rounded ? ZetaIcons.first_page_round : ZetaIcons.first_page_sharp,
               onPressed: () => _onItemPressed(1),
-              disabled: widget.disabled || _currentPage == 1,
+              disabled: widget.disabled,
               rounded: widget.rounded,
             ),
           _PaginationItem(
             icon: widget.rounded ? ZetaIcons.chevron_left_round : ZetaIcons.chevron_left_sharp,
             onPressed: () => _onItemPressed(max(1, _currentPage - 1)),
-            disabled: widget.disabled || _currentPage == 1,
+            disabled: widget.disabled,
             rounded: widget.rounded,
           ),
           if (!showDropdown) ...numberedPaginationItems else paginationDropdown,
           _PaginationItem(
-            icon: widget.rounded ? ZetaIcons.chevron_right_round : ZetaIcons.cellular_signal_sharp,
+            icon: widget.rounded ? ZetaIcons.chevron_right_round : ZetaIcons.chevron_right_sharp,
             onPressed: () => _onItemPressed(
               min(widget.pages, _currentPage + 1),
             ),
-            disabled: widget.disabled || _currentPage == widget.pages,
+            disabled: widget.disabled,
             rounded: widget.rounded,
           ),
           if (!showDropdown)
@@ -240,7 +243,7 @@ class _ZetaPaginationState extends State<ZetaPagination> {
               onPressed: () => _onItemPressed(
                 widget.pages,
               ),
-              disabled: widget.disabled || _currentPage == widget.pages,
+              disabled: widget.disabled,
               rounded: widget.rounded,
             ),
         ];
@@ -303,6 +306,9 @@ class _PaginationItemState extends State<_PaginationItem> {
   Color _getColor(Set<MaterialState> states) {
     final colors = Zeta.of(context).colors;
 
+    if (widget.disabled) {
+      return colors.surfaceDisabled;
+    }
     if (widget.selected) {
       return colors.cool[100]!;
     }
@@ -337,7 +343,10 @@ class _PaginationItemState extends State<_PaginationItem> {
             ),
       );
     } else if (widget.icon != null) {
-      child = Icon(widget.icon);
+      child = Icon(
+        widget.icon,
+        color: widget.disabled ? colors.iconDisabled : colors.iconDefault,
+      );
     }
 
     return ConstrainedBox(
@@ -347,10 +356,10 @@ class _PaginationItemState extends State<_PaginationItem> {
         minWidth: _itemWidth,
       ),
       child: Material(
-        color: widget.selected ? colors.cool[100] : colors.surfacePrimary,
+        // color: widget.selected ? colors.cool[100] : colors.surfacePrimary,
         borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none,
         child: InkWell(
-          onTap: widget.onPressed,
+          onTap: widget.disabled ? null : widget.onPressed,
           statesController: _controller,
           borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none,
           highlightColor: Colors.transparent,