Merge pull request #12 from mohit23x/responsive-values

v0.1.4 allow undefined value in responsive array values

Author: mohit23x

build/Sheet.d.ts

@@ -1,5 +1,5 @@
-import type { ConstantsType, Fn, NamedStyles, StyleSheetType } from './type';
-export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>, O extends StyleSheetType<O> | StyleSheetType<any>> {
+import type { ConstantsType, Fn, NamedStyles } from './type';
+export default class Sheet<T, S extends NamedStyles<S> | NamedStyles<any>, O = S> {
     result: O;
     source: Fn<T, S>;
     nativeSheet: O;

build/Sheet.js

@@ -29,8 +29,15 @@ class Sheet {
                 Object.keys(styles).forEach((styleKey) => {
                     const styleValue = styles[styleKey];
                     if (styleValue && Array.isArray(styleValue)) {
-                        const selectedValue = styleValue[activeIndex] || styleValue[styleValue.length - 1];
-                        styles[styleKey] = selectedValue;
+                        // length is checked to allow undefined to set as styleValue
+                        if (activeIndex >= styleValue.length) {
+                            const selectedValue = styleValue[styleValue.length - 1];
+                            styles[styleKey] = selectedValue;
+                        }
+                        else {
+                            const selectedValue = styleValue[activeIndex];
+                            styles[styleKey] = selectedValue;
+                        }
                     }
                 });
                 // @ts-ignore

build/Sugar.d.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Fn, buildEventType, NamedStyles, ConstantsType, StyleSheetType } from './type';
+import { Fn, buildEventType, NamedStyles, ConstantsType } from './type';
 import Sheet from './Sheet';
 export default class Sugar<T> {
     builded: boolean;
@@ -99,7 +99,7 @@ export default class Sugar<T> {
     _refresh(): void;
     build(themeObj: T): void;
     configure(newConstants: Partial<ConstantsType>): void;
-    create<P extends NamedStyles<P> | NamedStyles<any>, O extends StyleSheetType<P> | StyleSheetType<any>>(objFn: Fn<T, P>): P;
+    create<P extends NamedStyles<P> | NamedStyles<any>>(objFn: Fn<T, P>): P;
     _calculateActiveIndex(): void;
     _calcSheets(): void;
     _callListeners(event: buildEventType): void;

example/App.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { ThemeProvider } from "./style";
 import Screen from "./screens";
-import { StatusBar } from "react-native";
 
 export default function App() {
   return (

lib/Sheet.ts

@@ -4,7 +4,7 @@ import type { ConstantsType, Fn, NamedStyles, StyleSheetType } from './type';
 export default class Sheet<
   T,
   S extends NamedStyles<S> | NamedStyles<any>,
-  O extends StyleSheetType<O> | StyleSheetType<any>
+  O = S
   > {
   public result: O;
   public source: Fn<T, S>;
@@ -44,9 +44,14 @@ export default class Sheet<
         Object.keys(styles).forEach((styleKey) => {
           const styleValue = styles[styleKey];
           if (styleValue && Array.isArray(styleValue)) {
-            const selectedValue =
-              styleValue[activeIndex] || styleValue[styleValue.length - 1];
-            styles[styleKey] = selectedValue;
+            // length is checked to allow undefined to set as styleValue
+            if (activeIndex >= styleValue.length) {
+              const selectedValue = styleValue[styleValue.length - 1];
+              styles[styleKey] = selectedValue;
+            } else {
+              const selectedValue = styleValue[activeIndex];
+              styles[styleKey] = selectedValue;
+            }
           }
         });
         // @ts-ignore

lib/Sugar.ts

@@ -145,10 +145,7 @@ export default class Sugar<T> {
     this._refresh();
   }
 
-  create<
-    P extends NamedStyles<P> | NamedStyles<any>,
-    O extends StyleSheetType<P> | StyleSheetType<any>
-  >(objFn: Fn<T, P>): P {
+  create<P extends NamedStyles<P> | NamedStyles<any>>(objFn: Fn<T, P>): P {
     if (typeof objFn === 'function') {
       const sheet = new Sheet(objFn);
       this.sheets.push(sheet);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-sugar-style",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "React Native Stylesheet alternative with theme support",
   "author": "mohit23x",
   "license": "MIT",