Merge pull request #9 from jpudysz/feture/transform

Nested objects

Author: jpudysz

src/utils/styles.spec.ts

@@ -110,5 +110,79 @@ describe('styles', () => {
                 fontWeight: 'bold'
             })
         })
+
+        it('should correctly parse transform styles', () => {
+            const screenSize: ScreenSize = {
+                width: 400,
+                height: 800
+            }
+            const breakpoint = 'sm'
+            const breakpoints = {
+                xs: 0,
+                sm: 400,
+                md: 800
+            }
+            const style = {
+                transform: [
+                    {
+                        translateX: {
+                            sm: 120,
+                            md: 200
+                        },
+                        translateY: 200
+                    }
+                ]
+            }
+
+            expect(parseStyle(style as CustomNamedStyles<typeof style, typeof breakpoints>, breakpoint, screenSize, breakpoints)).toEqual({
+                transform: [
+                    {
+                        translateX: 120,
+                        translateY: 200
+                    }
+                ]
+            })
+        })
+
+        it('should correctly parse shadowOffset styles', () => {
+            const screenSize: ScreenSize = {
+                width: 400,
+                height: 800
+            }
+            const breakpoint = 'sm'
+            const breakpoints = {
+                xs: 0,
+                sm: 400,
+                md: 800
+            }
+            const style = {
+                shadowOffset: {
+                    width: 0,
+                    height: 4
+                }
+            }
+            const styleWithBreakpoints = {
+                shadowOffset: {
+                    width: 0,
+                    height: {
+                        sm: 10,
+                        md: 20
+                    }
+                }
+            }
+
+            expect(parseStyle(style as CustomNamedStyles<typeof style, typeof breakpoints>, breakpoint, screenSize, breakpoints)).toEqual({
+                shadowOffset: {
+                    width: 0,
+                    height: 4
+                }
+            })
+            expect(parseStyle(styleWithBreakpoints as CustomNamedStyles<typeof style, typeof breakpoints>, breakpoint, screenSize, breakpoints)).toEqual({
+                shadowOffset: {
+                    width: 0,
+                    height: 10
+                }
+            })
+        })
     })
 })

src/utils/styles.ts

@@ -61,19 +61,40 @@ export const parseStyle = <T, B extends Record<string, number>>(
     breakpoint: keyof B & string,
     screenSize: ScreenSize,
     breakpoints: B
-) => Object
-    .fromEntries(Object
-        .entries(style)
-        .map(([key, value]) => {
-            const isDynamicFunction = typeof value === 'function'
-            const isValidStyle = typeof value !== 'object' || key === 'transform'
+): T => {
+    const entries = Object.entries(style) as [[keyof T, CustomNamedStyles<T, B>]]
 
-            if (isDynamicFunction || isValidStyle) {
-                return [key, value]
-            }
+    return Object
+        .fromEntries(entries
+            .map(([key, value]) => {
+                const isNestedStyle = key === 'shadowOffset'
 
-            const valueWithBreakpoint = value as Record<keyof B & string, string | number>
+                if (isNestedStyle) {
+                    return [
+                        key,
+                        parseStyle(value, breakpoint, screenSize, breakpoints)
+                    ]
+                }
 
-            return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
-        })
-    )
+                const isTransform = key === 'transform'
+
+                if (isTransform && Array.isArray(value)) {
+                    return [
+                        key,
+                        value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))
+                    ]
+                }
+
+                const isDynamicFunction = typeof value === 'function'
+                const isValidStyle = typeof value !== 'object'
+
+                if (isDynamicFunction || isValidStyle) {
+                    return [key, value]
+                }
+
+                const valueWithBreakpoint = value as Record<keyof B & string, string | number>
+
+                return [key, getValueForBreakpoint<B>(valueWithBreakpoint, breakpoint, screenSize, breakpoints)]
+            })
+        )
+}