table progress

coingaming · Oct 5, 2023 · cc57a49 · cc57a49
1 parent 209e4ae
commit cc57a49
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 175 deletions.
diff --git a/example/lib/src/storybook/stories/table.dart b/example/lib/src/storybook/stories/table.dart
@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
-const _rowsInPage = 25;
+const int _rowsInPage = 25;
 
 List<_ExampleTableData> _exampleTableData = _generateTableData();
 List<_ExampleTableData> _exampleTableDataToShow = _exampleTableData.sublist(0, _rowsInPage);
@@ -22,7 +22,7 @@ int _rowsToShow = _rowsInPage;
 // Knob variables for methods to use outside TableStory.
 bool _showCheckboxes = false;
 bool _showDividerKnob = false;
-bool _selectableKnob = false;
+bool _rowsSelectableKnob = false;
 bool _zebraStyleKnob = false;
 bool _infiniteScrollKnob = false;
 Color? _rowColor;
@@ -99,20 +99,20 @@ class TableStory extends Story {
               max: 16,
             );
 
-            final fixedHeaderKnob = context.knobs.boolean(
-              label: "hasFixedHeader",
-              description: "Show MoonTable with fixed header.",
+            final isHeaderPinnedKnob = context.knobs.boolean(
+              label: "isHeaderPinned",
+              description: "Show MoonTable with pinned header.",
               initial: true,
             );
 
-            final fixedFooterKnob = context.knobs.boolean(
-              label: "hasFixedFooter",
-              description: "Show MoonTable with fixed footer.",
+            final isFooterPinnedKnob = context.knobs.boolean(
+              label: "isFooterPinned",
+              description: "Show MoonTable with pinned footer.",
               initial: true,
             );
 
-            _selectableKnob = context.knobs.boolean(
-              label: "Selectable",
+            _rowsSelectableKnob = context.knobs.boolean(
+              label: "Rows selectable",
               description: "Row onSelectChanged() is not null.",
               initial: true,
             );
@@ -154,23 +154,31 @@ class TableStory extends Story {
                 }
 
                 return Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 64.0),
-                  child: MoonTable(
-                    fixedHeader: fixedHeaderKnob,
-                    fixedFooter: fixedFooterKnob,
-                    sortAscending: _sortAscending,
-                    sortColumnIndex: _sortColumnIndex,
-                    rowGap: rowGapKnob?.toDouble(),
-                    rowSize: tableRowSizeKnob ?? MoonTableRowSize.md,
-                    tableHeader: _generateTableHeader(context, setState),
-                    tableFooter: _generateTableFooter(context),
-                    rows: _generateTableRows(context, setState),
-                    cellPadding: EdgeInsets.symmetric(vertical: tableRowSizeKnob == MoonTableRowSize.xs ? 4 : 8),
-                    onScrollControllersReady: (
-                      ScrollController verticalScrollController,
-                      ScrollController horizontalScrollController,
-                    ) =>
-                        _scrollListener(setState, verticalScrollController),
+                  padding: EdgeInsets.only(
+                    top: MediaQuery.of(context).padding.top + 16.0,
+                    bottom: 42.0,
+                  ),
+                  child: OverflowBox(
+                    maxWidth: MediaQuery.of(context).size.width,
+                    child: MoonTable(
+                      columnsCount: _showCheckboxes ? 6 : 5,
+                      isHeaderPinned: isHeaderPinnedKnob,
+                      isFooterPinned: isFooterPinnedKnob,
+                      sortAscending: _sortAscending,
+                      sortColumnIndex: _sortColumnIndex,
+                      rowGap: rowGapKnob?.toDouble(),
+                      rowSize: tableRowSizeKnob ?? MoonTableRowSize.md,
+                      header: _generateTableHeader(context, setState),
+                      footer: _generateTableFooter(context),
+                      rows: _generateTableRows(context, setState),
+                      tablePadding: const EdgeInsets.symmetric(horizontal: 16),
+                      cellPadding: EdgeInsets.symmetric(vertical: tableRowSizeKnob == MoonTableRowSize.xs ? 4 : 8),
+                      onScrollControllersReady: (
+                        ScrollController verticalScrollController,
+                        ScrollController horizontalScrollController,
+                      ) =>
+                          _scrollListener(setState, verticalScrollController),
+                    ),
                   ),
                 );
               },
@@ -226,7 +234,7 @@ Widget _headerCheckBox(StateSetter setState) {
     child: MoonCheckbox(
       tapAreaSizeValue: 0,
       value: _checkAllBoxes,
-      onChanged: _selectableKnob
+      onChanged: _rowsSelectableKnob
           ? (bool? onChanged) => onChanged != null
               ? setState(() {
                   _checkAllBoxes = onChanged;
@@ -280,7 +288,7 @@ MoonTableHeader _generateTableHeader(BuildContext context, StateSetter setState)
         return MoonTableColumn(
           width: columnWidth,
           onTap: () {
-            if (checkboxColumn && _selectableKnob) {
+            if (checkboxColumn && _rowsSelectableKnob) {
               setState(() {
                 _checkAllBoxes = !_checkAllBoxes;
 
@@ -337,7 +345,8 @@ List<MoonTableRow> _generateTableRows(BuildContext context, StateSetter setState
 
       return MoonTableRow(
         selected: row.selected,
-        onSelectChanged: _selectableKnob ? (bool? selected) => setState(() => row.selected = selected ?? false) : null,
+        onSelectChanged:
+            _rowsSelectableKnob ? (bool? selected) => setState(() => row.selected = selected ?? false) : null,
         decoration: ShapeDecorationWithPremultipliedAlpha(
           color: _zebraStyleKnob
               ? row.selected
@@ -361,7 +370,8 @@ List<MoonTableRow> _generateTableRows(BuildContext context, StateSetter setState
               child: MoonCheckbox(
                 tapAreaSizeValue: 0,
                 value: row.selected,
-                onChanged: _selectableKnob ? (bool? onChanged) => setState(() => row.selected = !row.selected) : null,
+                onChanged:
+                    _rowsSelectableKnob ? (bool? onChanged) => setState(() => row.selected = !row.selected) : null,
               ),
             ),
           _buildCell(context, _exampleTableDataToShow[index].id, firstCell: !_showCheckboxes),

diff --git a/example/lib/src/storybook/storybook.dart b/example/lib/src/storybook/storybook.dart
@@ -56,8 +56,7 @@ class StorybookPage extends StatelessWidget {
     return Stack(
       children: [
         Storybook(
-          // initialStory: "Accordion",
-          initialStory: "Table",
+          initialStory: "Accordion",
           plugins: _plugins,
           brandingWidget: const MoonVersionWidget(),
           wrapperBuilder: (BuildContext context, Widget? child) => MaterialApp(

diff --git a/lib/src/theme/table/table_colors.dart b/lib/src/theme/table/table_colors.dart
@@ -14,8 +14,8 @@ class MoonTableColors extends ThemeExtension<MoonTableColors> with Diagnosticabl
   /// Table row title text color.
   final Color rowTitleTextColor;
 
-  /// Table row animated title text color.
-  final Color rowAnimatedTitleTextColor;
+  /// Table row pinned and animated title text color.
+  final Color rowPinnedAnimatedTitleTextColor;
 
   /// Table icon color.
   final Color iconColor;
@@ -27,7 +27,7 @@ class MoonTableColors extends ThemeExtension<MoonTableColors> with Diagnosticabl
     required this.columnTextColor,
     required this.rowTextColor,
     required this.rowTitleTextColor,
-    required this.rowAnimatedTitleTextColor,
+    required this.rowPinnedAnimatedTitleTextColor,
     required this.iconColor,
     required this.rowBackgroundColor,
   });
@@ -37,15 +37,15 @@ class MoonTableColors extends ThemeExtension<MoonTableColors> with Diagnosticabl
     Color? columnTextColor,
     Color? rowTextColor,
     Color? rowTitleTextColor,
-    Color? rowAnimatedTitleTextColor,
+    Color? rowPinnedAnimatedTitleTextColor,
     Color? iconColor,
     Color? rowBackgroundColor,
   }) {
     return MoonTableColors(
       columnTextColor: columnTextColor ?? this.columnTextColor,
       rowTextColor: rowTextColor ?? this.rowTextColor,
       rowTitleTextColor: rowTitleTextColor ?? this.rowTitleTextColor,
-      rowAnimatedTitleTextColor: rowAnimatedTitleTextColor ?? this.rowAnimatedTitleTextColor,
+      rowPinnedAnimatedTitleTextColor: rowPinnedAnimatedTitleTextColor ?? this.rowPinnedAnimatedTitleTextColor,
       iconColor: iconColor ?? this.iconColor,
       rowBackgroundColor: rowBackgroundColor ?? this.rowBackgroundColor,
     );
@@ -58,8 +58,10 @@ class MoonTableColors extends ThemeExtension<MoonTableColors> with Diagnosticabl
     return MoonTableColors(
       columnTextColor: colorPremulLerp(columnTextColor, other.columnTextColor, t)!,
       rowTextColor: colorPremulLerp(rowTextColor, other.rowTextColor, t)!,
-      rowTitleTextColor: colorPremulLerp(rowTitleTextColor, other.rowTitleTextColor, t)!,
-      rowAnimatedTitleTextColor: colorPremulLerp(rowAnimatedTitleTextColor, other.rowAnimatedTitleTextColor, t)!,
+      rowTitleTextColor:
+          colorPremulLerp(rowTitleTextColor, other.rowTitleTextColor, t)!,
+      rowPinnedAnimatedTitleTextColor:
+          colorPremulLerp(rowPinnedAnimatedTitleTextColor, other.rowPinnedAnimatedTitleTextColor, t)!,
       iconColor: colorPremulLerp(iconColor, other.iconColor, t)!,
       rowBackgroundColor: colorPremulLerp(rowBackgroundColor, other.rowBackgroundColor, t)!,
     );
@@ -73,7 +75,7 @@ class MoonTableColors extends ThemeExtension<MoonTableColors> with Diagnosticabl
       ..add(ColorProperty("columnTextColor", columnTextColor))
       ..add(ColorProperty("rowTextColor", rowTextColor))
       ..add(ColorProperty("rowTitleTextColor", rowTitleTextColor))
-      ..add(ColorProperty("rowAnimatedTitleTextColor", rowAnimatedTitleTextColor))
+      ..add(ColorProperty("rowPinnedAnimatedTitleTextColor", rowPinnedAnimatedTitleTextColor))
       ..add(ColorProperty("iconColor", iconColor))
       ..add(ColorProperty("rowBackgroundColor", rowBackgroundColor));
   }

diff --git a/lib/src/theme/table/table_size_properties.dart b/lib/src/theme/table/table_size_properties.dart
@@ -36,7 +36,7 @@ class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> wi
   final TextStyle rowTitleTextStyle;
 
   /// Table row animated title text style.
-  final TextStyle rowAnimatedTitleTextStyle;
+  final TextStyle rowPinnedAnimatedTitleTextStyle;
 
   const MoonTableSizeProperties({
     required this.rowBorderRadius,
@@ -49,7 +49,7 @@ class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> wi
     required this.columnTextStyle,
     required this.rowTextStyle,
     required this.rowTitleTextStyle,
-    required this.rowAnimatedTitleTextStyle,
+    required this.rowPinnedAnimatedTitleTextStyle,
   });
 
   @override
@@ -64,7 +64,7 @@ class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> wi
     TextStyle? columnTextStyle,
     TextStyle? rowTextStyle,
     TextStyle? rowTitleTextStyle,
-    TextStyle? rowAnimatedTitleTextStyle,
+    TextStyle? rowPinnedAnimatedTitleTextStyle,
   }) {
     return MoonTableSizeProperties(
       rowBorderRadius: rowBorderRadius ?? this.rowBorderRadius,
@@ -77,7 +77,7 @@ class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> wi
       columnTextStyle: columnTextStyle ?? this.columnTextStyle,
       rowTextStyle: rowTextStyle ?? this.rowTextStyle,
       rowTitleTextStyle: rowTitleTextStyle ?? this.rowTitleTextStyle,
-      rowAnimatedTitleTextStyle: rowAnimatedTitleTextStyle ?? this.rowAnimatedTitleTextStyle,
+      rowPinnedAnimatedTitleTextStyle: rowPinnedAnimatedTitleTextStyle ?? this.rowPinnedAnimatedTitleTextStyle,
     );
   }
 
@@ -96,7 +96,7 @@ class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> wi
       columnTextStyle: TextStyle.lerp(columnTextStyle, other.columnTextStyle, t)!,
       rowTextStyle: TextStyle.lerp(rowTextStyle, other.rowTextStyle, t)!,
       rowTitleTextStyle: TextStyle.lerp(rowTitleTextStyle, other.rowTitleTextStyle, t)!,
-      rowAnimatedTitleTextStyle: TextStyle.lerp(rowAnimatedTitleTextStyle, other.rowAnimatedTitleTextStyle, t)!,
+      rowPinnedAnimatedTitleTextStyle: TextStyle.lerp(rowPinnedAnimatedTitleTextStyle, other.rowPinnedAnimatedTitleTextStyle, t)!,
     );
   }
 
@@ -115,6 +115,6 @@ class MoonTableSizeProperties extends ThemeExtension<MoonTableSizeProperties> wi
       ..add(DiagnosticsProperty<TextStyle>("columnTextStyle", columnTextStyle))
       ..add(DiagnosticsProperty<TextStyle>("rowTextStyle", rowTextStyle))
       ..add(DiagnosticsProperty<TextStyle>("rowTitleTextStyle", rowTitleTextStyle))
-      ..add(DiagnosticsProperty<TextStyle>("rowAnimatedTitleTextStyle", rowAnimatedTitleTextStyle));
+      ..add(DiagnosticsProperty<TextStyle>("rowAnimatedTitleTextStyle", rowPinnedAnimatedTitleTextStyle));
   }
 }
diff --git a/lib/src/theme/table/table_sizes.dart b/lib/src/theme/table/table_sizes.dart
@@ -47,7 +47,7 @@ class MoonTableSizes extends ThemeExtension<MoonTableSizes> with DiagnosticableT
               columnTextStyle: tokens.typography.heading.text12,
               rowTextStyle: tokens.typography.body.text12,
               rowTitleTextStyle: tokens.typography.body.text12,
-              rowAnimatedTitleTextStyle: tokens.typography.body.text12,
+              rowPinnedAnimatedTitleTextStyle: tokens.typography.body.text12,
             ),
         sm = sm ??
             MoonTableSizeProperties(
@@ -61,7 +61,7 @@ class MoonTableSizes extends ThemeExtension<MoonTableSizes> with DiagnosticableT
               columnTextStyle: tokens.typography.heading.textDefault,
               rowTextStyle: tokens.typography.body.textDefault,
               rowTitleTextStyle: tokens.typography.body.textDefault,
-              rowAnimatedTitleTextStyle: tokens.typography.body.textDefault,
+              rowPinnedAnimatedTitleTextStyle: tokens.typography.body.textDefault,
             ),
         md = md ??
             MoonTableSizeProperties(
@@ -75,7 +75,7 @@ class MoonTableSizes extends ThemeExtension<MoonTableSizes> with DiagnosticableT
               columnTextStyle: tokens.typography.heading.textDefault,
               rowTextStyle: tokens.typography.body.textDefault,
               rowTitleTextStyle: tokens.typography.body.textDefault,
-              rowAnimatedTitleTextStyle: tokens.typography.body.textDefault,
+              rowPinnedAnimatedTitleTextStyle: tokens.typography.body.textDefault,
             ),
         lg = lg ??
             MoonTableSizeProperties(
@@ -89,7 +89,7 @@ class MoonTableSizes extends ThemeExtension<MoonTableSizes> with DiagnosticableT
               columnTextStyle: tokens.typography.heading.textDefault,
               rowTextStyle: tokens.typography.body.textDefault,
               rowTitleTextStyle: tokens.typography.body.textDefault,
-              rowAnimatedTitleTextStyle: tokens.typography.body.textDefault,
+              rowPinnedAnimatedTitleTextStyle: tokens.typography.body.textDefault,
             ),
         xl = xl ??
             MoonTableSizeProperties(
@@ -103,7 +103,7 @@ class MoonTableSizes extends ThemeExtension<MoonTableSizes> with DiagnosticableT
               columnTextStyle: tokens.typography.heading.textDefault,
               rowTextStyle: tokens.typography.body.textDefault,
               rowTitleTextStyle: tokens.typography.body.textDefault,
-              rowAnimatedTitleTextStyle: tokens.typography.body.textDefault,
+              rowPinnedAnimatedTitleTextStyle: tokens.typography.body.textDefault,
             ),
         x2l = x2l ??
             MoonTableSizeProperties(
@@ -117,7 +117,7 @@ class MoonTableSizes extends ThemeExtension<MoonTableSizes> with DiagnosticableT
               columnTextStyle: tokens.typography.heading.textDefault,
               rowTextStyle: tokens.typography.body.textDefault,
               rowTitleTextStyle: tokens.typography.body.textDefault,
-              rowAnimatedTitleTextStyle: tokens.typography.body.textDefault,
+              rowPinnedAnimatedTitleTextStyle: tokens.typography.body.textDefault,
             );
 
   @override

diff --git a/lib/src/theme/table/table_theme.dart b/lib/src/theme/table/table_theme.dart
@@ -30,7 +30,7 @@ class MoonTableTheme extends ThemeExtension<MoonTableTheme> with DiagnosticableT
               columnTextColor: tokens.colors.textPrimary,
               rowTextColor: tokens.colors.textPrimary,
               rowTitleTextColor: tokens.colors.textPrimary,
-              rowAnimatedTitleTextColor: tokens.colors.trunks,
+              rowPinnedAnimatedTitleTextColor: tokens.colors.trunks,
               iconColor: tokens.colors.iconPrimary,
               rowBackgroundColor: tokens.colors.goku,
             ),

diff --git a/lib/src/widgets/common/border_container.dart b/lib/src/widgets/common/border_container.dart
@@ -31,7 +31,7 @@ class BorderContainer extends StatefulWidget {
   _BorderContainerState createState() => _BorderContainerState();
 }
 
-class _BorderContainerState extends State<BorderContainer> with TickerProviderStateMixin {
+class _BorderContainerState extends State<BorderContainer> with SingleTickerProviderStateMixin {
   late AnimationController _controller;
   late Animation<double> _borderAnimation;
   late ShapeBorderTween _border;