Refactor code to use Header.nested()

forus-labs · Jun 29, 2024 · e79cdba · e79cdba
1 parent 86902df
commit e79cdba
Show file tree

Hide file tree

Showing 31 changed files with 557 additions and 699 deletions.
diff --git a/docs/pages/docs/header.mdx b/docs/pages/docs/header.mdx
@@ -12,7 +12,7 @@ It is typically used on pages at the root of the navigation stack.
   <Tabs.Tab>
         ```dart
         FHeader(
-          title: 'Edit Alarm',
+          title: const Text('Edit Alarm'),
           actions: [
             FHeaderAction(
               icon: FAssets.icons.alarmClock,
@@ -23,18 +23,48 @@ It is typically used on pages at the root of the navigation stack.
               onPress: () {},
             ),
           ],
-        )
+        );
         ```
   </Tabs.Tab>
 </Tabs>
 
+## Nested Header
+
+It is typically used on nested pages or sheets.
+
+<Tabs items={['Preview', 'Code']}>
+    <Tabs.Tab>
+        <Widget name='header'  variant='nested'/>
+    </Tabs.Tab>
+    <Tabs.Tab>
+        ```dart
+        FHeader.nested(
+          title: const Text('Appointment'),
+          leftActions: [
+            FHeaderAction.back(onPress: () {}),
+          ],
+          rightActions: [
+            FHeaderAction(
+              icon: FAssets.icons.info,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.plus,
+              onPress: () {},
+            ),
+          ],
+        );
+        ```
+    </Tabs.Tab>
+</Tabs>
+
 ## Usage
 
 ### `FHeader(...)`
 
 ```dart
 FHeader(
-  title: 'Edit Alarm',
+  title: const Text('Title'),
   actions: [
     FHeaderAction(
       icon: FAssets.icons.alarmClock,
@@ -45,5 +75,103 @@ FHeader(
       onPress: () {},
     ),
   ],
-)
+);
 ```
+
+### `FHeader.nested(...)`
+
+```dart
+FHeader.nested(
+  title: const Text('Title'),
+  leftActions: [
+    FHeaderAction.back(onPress: () {}),
+  ],
+  rightActions: [
+    FHeaderAction(
+      icon: FAssets.icons.info,
+      onPress: () {},
+    ),
+    FHeaderAction.x(onPress: () {}),
+  ],
+);
+```
+
+## Examples
+
+### Header
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='header'/>
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        FHeader(
+          title: const Text('Edit Alarm'),
+          actions: [
+            FHeaderAction(
+              icon: FAssets.icons.alarmClock,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.plus,
+              onPress: () {},
+            ),
+          ],
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
+
+### Nested Header with back icon
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='header' variant='nested' />
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        FHeader.nested(
+          title: const Text('Appointment'),
+          leftActions: [
+            FHeaderAction.back(onPress: () {}),
+          ],
+          rightActions: [
+            FHeaderAction(
+              icon: FAssets.icons.info,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.plus,
+              onPress: () {},
+            ),
+          ],
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
+
+### Nested Header with X icon
+<Tabs items={['Preview', 'Code']}>
+  <Tabs.Tab>
+    <Widget name='header' variant='nested-x' />
+  </Tabs.Tab>
+  <Tabs.Tab>
+        ```dart
+        FHeader.nested(
+          title: const Text('Climate'),
+          leftActions: [
+            FHeaderAction(
+              icon: FAssets.icons.thermometer,
+              onPress: () {},
+            ),
+            FHeaderAction(
+              icon: FAssets.icons.wind,
+              onPress: null,
+            ),
+          ],
+          rightActions: [
+            FHeaderAction.x(onPress: () {}),
+          ],
+        );
+        ```
+  </Tabs.Tab>
+</Tabs>
diff --git a/docs/pages/docs/nested-header.mdx b/docs/pages/docs/nested-header.mdx
diff --git a/docs/pages/docs/scaffold.mdx b/docs/pages/docs/scaffold.mdx
@@ -12,7 +12,7 @@ Creates a visual scaffold for Forui widgets.
     ```dart
     FScaffold(
       header: FHeader(
-        title: 'Settings',
+        title: const Text('Settings'),
         actions: [
           FHeaderAction(
             icon: FAssets.icons.ellipsis,
@@ -63,7 +63,7 @@ Creates a visual scaffold for Forui widgets.
 ```dart
 FScaffold(
   header: FHeader(
-    title: 'Settings',
+    title: const Text('Settings'),
     actions: [
       FHeaderAction(
         icon: FAssets.icons.ellipsis,

diff --git a/forui/example/lib/main.dart b/forui/example/lib/main.dart
@@ -19,7 +19,7 @@ class Application extends StatelessWidget {
           data: FThemes.zinc.light,
           child: FScaffold(
             header: FHeader(
-              title: 'Example Example Example Example',
+              title: const Text('Example Example Example Example'),
               actions: [
                 FHeaderAction(
                   icon: FAssets.icons.plus,

diff --git a/forui/lib/forui.dart b/forui/lib/forui.dart
@@ -25,7 +25,6 @@ export 'src/widgets/button/button.dart' hide FButtonContent, Variant;
 export 'src/widgets/card/card.dart' hide FCardContent;
 export 'src/widgets/dialog/dialog.dart' hide FDialogContent, FHorizontalDialogContent, FVerticalDialogContent;
 export 'src/widgets/header/header.dart';
-export 'src/widgets/nested_header/nested_header.dart';
 export 'src/widgets/tabs/tabs.dart';
 export 'src/widgets/text_field/text_field.dart';
 export 'src/widgets/scaffold.dart';

diff --git a/forui/lib/src/theme/theme_data.dart b/forui/lib/src/theme/theme_data.dart
@@ -40,9 +40,6 @@ final class FThemeData with Diagnosticable {
   /// The header styles.
   final FHeaderStyle headerStyle;
 
-  /// The nested header styles.
-  final FNestedHeaderStyle nestedHeaderStyle;
-
   /// The tabs styles.
   final FTabsStyle tabsStyle;
 
@@ -71,7 +68,6 @@ final class FThemeData with Diagnosticable {
     required this.cardStyle,
     required this.dialogStyle,
     required this.headerStyle,
-    required this.nestedHeaderStyle,
     required this.tabsStyle,
     required this.textFieldStyle,
     required this.scaffoldStyle,
@@ -98,7 +94,6 @@ final class FThemeData with Diagnosticable {
       cardStyle: FCardStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       dialogStyle: FDialogStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       headerStyle: FHeaderStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
-      nestedHeaderStyle: FNestedHeaderStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       tabsStyle: FTabsStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       textFieldStyle: FTextFieldStyle.inherit(colorScheme: colorScheme, typography: typography, style: style),
       scaffoldStyle: FScaffoldStyle.inherit(colorScheme: colorScheme, style: style),
@@ -149,7 +144,6 @@ final class FThemeData with Diagnosticable {
         cardStyle: cardStyle ?? this.cardStyle,
         dialogStyle: dialogStyle ?? this.dialogStyle,
         headerStyle: headerStyle ?? this.headerStyle,
-        nestedHeaderStyle: nestedHeaderStyle ?? this.nestedHeaderStyle,
         tabsStyle: tabsStyle ?? this.tabsStyle,
         textFieldStyle: textFieldStyle ?? this.textFieldStyle,
         scaffoldStyle: scaffoldStyle ?? this.scaffoldStyle,
@@ -169,7 +163,6 @@ final class FThemeData with Diagnosticable {
       ..add(DiagnosticsProperty('cardStyle', cardStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('dialogStyle', dialogStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('headerStyle', headerStyle, level: DiagnosticLevel.debug))
-      ..add(DiagnosticsProperty('nestedHeaderStyle', nestedHeaderStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('tabsStyle', tabsStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('textFieldStyle', textFieldStyle, level: DiagnosticLevel.debug))
       ..add(DiagnosticsProperty('scaffoldStyle', scaffoldStyle, level: DiagnosticLevel.debug))
@@ -190,7 +183,6 @@ final class FThemeData with Diagnosticable {
           cardStyle == other.cardStyle &&
           dialogStyle == other.dialogStyle &&
           headerStyle == other.headerStyle &&
-          nestedHeaderStyle == other.nestedHeaderStyle &&
           tabsStyle == other.tabsStyle &&
           textFieldStyle == other.textFieldStyle &&
           scaffoldStyle == other.scaffoldStyle &&
@@ -207,7 +199,6 @@ final class FThemeData with Diagnosticable {
       cardStyle.hashCode ^
       dialogStyle.hashCode ^
       headerStyle.hashCode ^
-      nestedHeaderStyle.hashCode ^
       tabsStyle.hashCode ^
       textFieldStyle.hashCode ^
       scaffoldStyle.hashCode ^