From df34d5c90f44d3a9df98c0dcc91e87a30b580e30 Mon Sep 17 00:00:00 2001 From: DeVoresyah ArEst Date: Sat, 18 Feb 2023 22:07:47 +0700 Subject: [PATCH] fix: only apply style when condition true on dynamic style (#65) (#66) Co-authored-by: Diana <52313779+Diananaa@users.noreply.github.com> --- src/core/apply.ts | 168 +++++++++++++++++++++------------------- src/core/hooks.tsx | 4 +- src/types/osmi.types.ts | 2 +- 3 files changed, 92 insertions(+), 82 deletions(-) diff --git a/src/core/apply.ts b/src/core/apply.ts index 0acc143..5ec9974 100644 --- 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 = - | NamedStyles>(...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."); + | NamedStyles>( + ...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[]; + }; \ No newline at end of file diff --git a/src/core/hooks.tsx b/src/core/hooks.tsx index 1fec068..7616028 100644 --- a/src/core/hooks.tsx +++ b/src/core/hooks.tsx @@ -12,7 +12,9 @@ export const useStyles = (): ApplyInstance => { } const apply = useCallback( - | NamedStyles>(...args: string[]) => { + | NamedStyles>( + ...args: (boolean | string)[] + ) => { return applyHelper(...args)(themeContext); }, [themeContext] diff --git a/src/types/osmi.types.ts b/src/types/osmi.types.ts index 569a391..0fc952d 100644 --- a/src/types/osmi.types.ts +++ b/src/types/osmi.types.ts @@ -20,7 +20,7 @@ export interface OsmiContextInstance { export interface ApplyInstance { apply: | NamedStyles>( - ...args: string[] + ...args: (string | boolean)[] ) => any; colors: ( ...args: string[]