feat: add support to overflowY

skynexui · Jan 21, 2022 · 8fe001a · 8fe001a · vercel · Jan 21, 2022
1 parent 176d2cd
commit 8fe001a
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 24 deletions.
diff --git a/examples/demo_base/lib/screens/home/home_screen.dart b/examples/demo_base/lib/screens/home/home_screen.dart
@@ -12,9 +12,10 @@ class HomeScreen extends StatelessWidget {
     return Scaffold(
       body: Box(
         styleSheet: StyleSheet(
-          flexDirection: {Breakpoints.xs: 'column'},
-          crossAxisAlignment: {Breakpoints.xs: 'stretch'}, // alignItems
-          mainAxisAlignment: {Breakpoints.xs: 'flex-start'}, // justifyContent
+          overflowY: {Breakpoints.xs: 'scroll'},
+          // flexDirection: {Breakpoints.xs: 'column'},
+          // crossAxisAlignment: {Breakpoints.xs: 'stretch'}, // alignItems
+          // mainAxisAlignment: {Breakpoints.xs: 'flex-start'}, // justifyContent
           backgroundColor: {Breakpoints.xs: bg},
         ),
         children: [
@@ -27,30 +28,50 @@ class HomeScreen extends StatelessWidget {
               backgroundColor: {Breakpoints.xs: theme.colors.primary.x400},
             ),
           ),
-          FlatList(
-            crossAxisCount: const {
-              Breakpoints.xs: 1,
-              Breakpoints.md: 2,
-            },
+          Box(
             styleSheet: StyleSheet(
-              paddingTop: {Breakpoints.xs: 15, Breakpoints.md: 50},
-              paddingHorizontal: {Breakpoints.xs: 15, Breakpoints.md: 50},
-              flex: {Breakpoints.xs: 1},
-              crossAxisAlignment: {Breakpoints.xs: 'stretch'}, // alignItems
-              backgroundColor: {Breakpoints.xs: theme.colors.primary.x200},
+              height: {Breakpoints.xs: '550'},
+              backgroundColor: {Breakpoints.xs: theme.colors.positive.x800},
+            ),
+          ),
+          Box(
+            styleSheet: StyleSheet(
+              height: {Breakpoints.xs: '550'},
+              backgroundColor: {Breakpoints.xs: theme.colors.accent.x800},
+            ),
+          ),
+          Box(
+            styleSheet: StyleSheet(
+              height: {Breakpoints.xs: '550'},
+              backgroundColor: {Breakpoints.xs: theme.colors.negative.x800},
             ),
-            data: const [1, 2, 3, 4, 5],
-            itemBuilder: (context, index) {
-              return Text(
-                'Olaa $index',
-                styleSheet: StyleSheet(backgroundColor: {
-                  Breakpoints.xs: theme.colors.neutral.x500,
-                }),
-              );
-            },
           ),
         ],
       ),
     );
   }
 }
+
+
+// FlatList(
+//             crossAxisCount: const {
+//               Breakpoints.xs: 1,
+//               Breakpoints.md: 2,
+//             },
+//             styleSheet: StyleSheet(
+//               paddingTop: {Breakpoints.xs: 15, Breakpoints.md: 50},
+//               paddingHorizontal: {Breakpoints.xs: 15, Breakpoints.md: 50},
+//               flex: {Breakpoints.xs: 1},
+//               crossAxisAlignment: {Breakpoints.xs: 'stretch'}, // alignItems
+//               backgroundColor: {Breakpoints.xs: theme.colors.primary.x200},
+//             ),
+//             data: const [1, 2, 3, 4, 5],
+//             itemBuilder: (context, index) {
+//               return Text(
+//                 'Olaa $index',
+//                 styleSheet: StyleSheet(backgroundColor: {
+//                   Breakpoints.xs: theme.colors.neutral.x500,
+//                 }),
+//               );
+//             },
+//           )
diff --git a/lib/components/box/box.dart b/lib/components/box/box.dart
@@ -67,6 +67,7 @@ class Box extends StatelessWidget {
       ),
       child: children!.isNotEmpty
           ? ChildDecorator(
+              styles: styles,
               flexDirection: styles.flexDirection,
               position: styles.position,
               crossAxisAlignment: styles.crossAxisAlignment,

diff --git a/lib/components/box/flutter/box_base_styles.dart b/lib/components/box/flutter/box_base_styles.dart
@@ -27,6 +27,7 @@ class BoxBaseStyles {
   dynamic flex;
   dynamic crossAxisAlignment = 'flex-start';
   dynamic mainAxisAlignment = 'flex-start';
+  dynamic overflowY;
 
   BoxBaseStyles({
     required this.styleSheet,
@@ -125,5 +126,9 @@ class BoxBaseStyles {
 
     // [flex]
     flex = resolveValueForBreakpoint(styleSheet.flex, activeBreakpoint);
+
+    // [overflowY]
+    overflowY =
+        resolveValueForBreakpoint(styleSheet.overflowY, activeBreakpoint);
   }
 }
diff --git a/lib/components/box/flutter/child_decorator.dart b/lib/components/box/flutter/child_decorator.dart
@@ -1,4 +1,5 @@
 import 'package:skynexui_components/components.dart';
+import 'package:skynexui_components/components/box/flutter/box_base_styles.dart';
 
 mainAxisResolver(String value) {
   // justify-content
@@ -30,6 +31,7 @@ class ChildDecorator extends StatelessWidget {
   final List<Widget> children;
   final String crossAxisAlignment;
   final String mainAxisAlignment;
+  final BoxBaseStyles styles;
 
   const ChildDecorator({
     Key? key,
@@ -38,13 +40,20 @@ class ChildDecorator extends StatelessWidget {
     this.children = const [],
     required this.crossAxisAlignment,
     required this.mainAxisAlignment,
+    required this.styles,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     var mainAxis = mainAxisResolver(mainAxisAlignment);
     var crossAxis = crossAxisResolver(crossAxisAlignment);
 
+    if (styles.overflowY == 'scroll') {
+      return ListView(
+        children: children,
+      );
+    }
+
     if (flexDirection == "row") {
       return Row(
         children: children,

diff --git a/lib/core/stylesheet/stylesheet.dart b/lib/core/stylesheet/stylesheet.dart
@@ -22,6 +22,7 @@ const Map<Breakpoints, double?> defaultDoubleEmptyValue = {
 
 class StyleSheet {
 // %%[CODER_START]:StyleSheet_attributes%%
+  final Map<Breakpoints, String?> overflowY;
   final Map<Breakpoints, double?> flex;
   final Map<Breakpoints, String?> alignItems;
   final Map<Breakpoints, String?> crossAxisAlignment;
@@ -45,11 +46,12 @@ class StyleSheet {
   final Map<Breakpoints, String?> backgroundColor;
   final Map<Breakpoints, String?> color;
   final Map<Breakpoints, String?> height;
-  final Map<Breakpoints, String?> width;
+  final Map<Breakpoints, String?> width; 
 // %%[CODER_END]:StyleSheet_attributes%%
 
   const StyleSheet({
 // %%[CODER_START]:StyleSheet_constructor%%
+    this.overflowY = defaultStringEmptyValue,
     this.flex = defaultDoubleEmptyValue,
     this.alignItems = defaultStringEmptyValue,
     this.crossAxisAlignment = defaultStringEmptyValue,
@@ -73,7 +75,7 @@ class StyleSheet {
     this.backgroundColor = defaultStringEmptyValue,
     this.color = defaultStringEmptyValue,
     this.height = defaultStringEmptyValue,
-    this.width = defaultStringEmptyValue,
+    this.width = defaultStringEmptyValue, 
 // %%[CODER_END]:StyleSheet_constructor%%
   });
 }
diff --git a/lib/core/stylesheet/stylesheet.json b/lib/core/stylesheet/stylesheet.json
@@ -101,5 +101,10 @@
   "flex": {
     "type": "double?",
     "default": "defaultDoubleEmptyValue"    
+  },
+  "overflowY": {
+    "type": "String?",
+    "default": "defaultStringEmptyValue",
+    "hintValues": "'visible' | 'hidden' | 'scroll'"
   }
 }
diff --git a/lib/core/stylesheet/stylesheet.ts b/lib/core/stylesheet/stylesheet.ts
@@ -4,6 +4,7 @@ type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
   // %%[CODER_START]:StyleSheet_attributes%%
+  overflowY?: ResponsiveProperty<'visible' | 'hidden' | 'scroll'> | string;
   flex?: ResponsiveProperty<number | string> | string | number;
   alignItems?:
     | ResponsiveProperty<'stretch' | 'flex-start' | 'flex-end' | 'center'>