fix: only apply style when condition true on dynamic style (#65) (#66)

Co-authored-by: Diana <[email protected]>
OsmiCSX · Feb 18, 2023 · df34d5c · df34d5c
1 parent f6d4496
commit df34d5c
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 82 deletions.
diff --git a/src/core/apply.ts b/src/core/apply.ts
@@ -2,85 +2,93 @@ import { Instance } from "./instance";
 import type { NamedStyles, OsmiContextInstance } from "../types/osmi.types";
 
 export const applyHelper =
-  <T extends NamedStyles<T> | NamedStyles<any>>(...args: string[]) =>
-  (themeContext: OsmiContextInstance | null) => {
-    const outputStyles: object[] = [];
-
-    // Get syntax from each args
-    for (let i = 0; i < args.length; i++) {
-      // Init instance
-      const instanceStyle = new Instance(themeContext?.theme);
-
-      // Get syntax list from each args
-      const argStyle = args[i];
-      const syntaxList = argStyle.split(" ");
-      const sortedSyntax = [
-        ...syntaxList.filter(
-          (item) =>
-            !item.includes("dark:") &&
-            !item.includes("notch:") &&
-            !item.includes("android:") &&
-            !item.includes("ios:")
-        ),
-        ...syntaxList.filter((item) => item.includes("android:")),
-        ...syntaxList.filter((item) => item.includes("ios:")),
-        ...syntaxList.filter((item) => item.includes("notch:")),
-        ...syntaxList.filter((item) => item.includes("dark:")),
-      ];
-
-      sortedSyntax.map((syntax: string) => {
-        // Only allow string syntax
-        if (typeof syntax !== "string") {
-          throw new Error("Invalid styling syntax.");
+  <T extends NamedStyles<T> | NamedStyles<any>>(
+    ...args: (boolean | string)[]
+  ) =>
+    (themeContext: OsmiContextInstance | null) => {
+      const outputStyles: object[] = [];
+
+      // Get syntax from each args
+      for (let i = 0; i < args.length; i++) {
+        if (args[i] !== false) {
+          // Init instance
+          const instanceStyle = new Instance(themeContext?.theme);
+
+          // Get syntax list from each args
+          const argStyle = args[i] as string;
+          const syntaxList = argStyle.split(" ");
+          const sortedSyntax = [
+            ...syntaxList.filter(
+              (item) =>
+                !item.includes("dark:") &&
+                !item.includes("notch:") &&
+                !item.includes("android:") &&
+                !item.includes("ios:")
+            ),
+            ...syntaxList.filter((item) => item.includes("android:")),
+            ...syntaxList.filter((item) => item.includes("ios:")),
+            ...syntaxList.filter((item) => item.includes("notch:")),
+            ...syntaxList.filter((item) => item.includes("dark:")),
+          ];
+
+          sortedSyntax.map((syntax: string) => {
+            // Only allow string syntax
+            if (typeof syntax !== "string") {
+              throw new Error("Invalid styling syntax.");
+            }
+
+            // Check for android platform only
+            instanceStyle.android(syntax);
+
+            // Check for ios platform only
+            instanceStyle.ios(syntax);
+
+            // Check if there's notch or not.
+            instanceStyle.notch(syntax);
+
+            if (
+              !syntax.includes("android:") &&
+              !syntax.includes("ios:") &&
+              !syntax.includes("notch:")
+            ) {
+              // check if width & size using responsive method or not
+              instanceStyle.responsiveSize(syntax);
+
+              // auto generate percentage size
+              instanceStyle.percentSize(syntax);
+
+              // auto generate fixed width size
+              instanceStyle.fixedWidthSize(syntax);
+
+              // auto generate fixed width size
+              instanceStyle.fixedHeightSize(syntax);
+
+              // auto generate transform position
+              instanceStyle.transformTranslate(syntax);
+
+              // auto generate transform scale
+              instanceStyle.transformScale(syntax);
+
+              // auto generate transform skew
+              instanceStyle.transformSkew(syntax);
+
+              // auto generate transform rotate
+              instanceStyle.transformRotate(syntax);
+
+              // Check if there's coloring opacity
+              instanceStyle.colorOpacity(syntax);
+
+              // Check if there's any dark theme
+              instanceStyle.darkTheme(syntax, themeContext?.mode ?? "system");
+
+              // Generate from pre-defined styles
+              instanceStyle.predefinedStyles(syntax);
+            }
+          });
+
+          outputStyles.push(instanceStyle.getOutputStyle());
         }
+      }
 
-        // Check for android platform only
-        instanceStyle.android(syntax);
-
-        // Check for ios platform only
-        instanceStyle.ios(syntax);
-
-        // Check if there's notch or not.
-        instanceStyle.notch(syntax);
-
-        if (!syntax.includes("android:") && !syntax.includes("ios:") && !syntax.includes("notch:")) {
-          // check if width & size using responsive method or not
-          instanceStyle.responsiveSize(syntax);
-
-          // auto generate percentage size
-          instanceStyle.percentSize(syntax);
-
-          // auto generate fixed width size
-          instanceStyle.fixedWidthSize(syntax);
-
-          // auto generate fixed width size
-          instanceStyle.fixedHeightSize(syntax);
-
-          // auto generate transform position
-          instanceStyle.transformTranslate(syntax);
-
-          // auto generate transform scale
-          instanceStyle.transformScale(syntax);
-
-          // auto generate transform skew
-          instanceStyle.transformSkew(syntax);
-
-          // auto generate transform rotate
-          instanceStyle.transformRotate(syntax);
-
-          // Check if there's coloring opacity
-          instanceStyle.colorOpacity(syntax);
-
-          // Check if there's any dark theme
-          instanceStyle.darkTheme(syntax, themeContext?.mode ?? "system");
-
-          // Generate from pre-defined styles
-          instanceStyle.predefinedStyles(syntax);
-        }
-      });
-
-      outputStyles.push(instanceStyle.getOutputStyle());
-    }
-
-    return outputStyles as any[];
-  };
+      return outputStyles as any[];
+    };
diff --git a/src/core/hooks.tsx b/src/core/hooks.tsx
@@ -12,7 +12,9 @@ export const useStyles = (): ApplyInstance => {
   }
 
   const apply = useCallback(
-    <T extends NamedStyles<T> | NamedStyles<any>>(...args: string[]) => {
+    <T extends NamedStyles<T> | NamedStyles<any>>(
+      ...args: (boolean | string)[]
+    ) => {
       return applyHelper(...args)(themeContext);
     },
     [themeContext]

diff --git a/src/types/osmi.types.ts b/src/types/osmi.types.ts
@@ -20,7 +20,7 @@ export interface OsmiContextInstance {
 
 export interface ApplyInstance {
   apply: <T extends NamedStyles<T> | NamedStyles<any>>(
-    ...args: string[]
+    ...args: (string | boolean)[]
   ) => any;
   colors: (
     ...args: string[]