diff --git a/src/core/hoc.tsx b/src/core/hoc.tsx index 966c053..7de8ebb 100644 --- a/src/core/hoc.tsx +++ b/src/core/hoc.tsx @@ -1,54 +1,60 @@ -import React, { useContext, useMemo } from "react"; +import { useContext, useMemo } from "react"; import { OsmiContext } from "./context"; import { applyHelper } from "./apply"; import { colorHelper } from "./color"; +// Types +import type { FC, ComponentType } from "react"; import type { NamedStyles, ApplyInstance } from "../types/osmi.types"; export const withStyles =

( - Component: React.ComponentType

- ): React.FC> => - (props) => { - const themeContext = useContext(OsmiContext); + Component: ComponentType

+ ): FC> => + (props: Omit) => { + const themeContext = useContext(OsmiContext); - if (themeContext === null) { - throw new Error("You must wrap your components in a OsmiProvider."); - } + if (themeContext === null) { + throw new Error("You must wrap your components in a OsmiProvider."); + } - const { scaleWidth, scaleHeight, switchMode } = themeContext; + const { scaleWidth, scaleHeight, switchMode } = themeContext; - const apply = useMemo( - () => - | NamedStyles>(...args: (string | boolean | undefined)[]) => - applyHelper(...args)(themeContext) - , - [themeContext] - ); + const apply = useMemo( + () => + | NamedStyles>( + ...args: (string | boolean | undefined)[] + ) => + applyHelper(...args)(themeContext), + [themeContext] + ); - const colors = useMemo( - () => - (...args: (string | boolean | undefined)[]): string | string[] => { - if (args.length === 1) { - const arg = args[0]; - return arg !== false && arg !== undefined ? colorHelper(arg)(themeContext) : ""; - } else if (args.length === 2) { - return args.map(arg => arg !== false && arg !== undefined ? colorHelper(arg)(themeContext) : ""); - } + const colors = useMemo( + () => + ( + ...args: (string | boolean | undefined)[] + ): T => { + if (args.length === 1) { + return colorHelper(args[0] as string)(themeContext) as T; + } else if (args.length === 2) { + return args.map((syntax) => + colorHelper(syntax as string)(themeContext) + ) as T; + } else { throw Error("Invalid color syntax"); } - , - [themeContext] - ); + }, + [themeContext] + ); - return ( - - ); - }; + return ( + + ); + }; diff --git a/src/core/hooks.tsx b/src/core/hooks.tsx index 8938b98..6ac6a01 100644 --- a/src/core/hooks.tsx +++ b/src/core/hooks.tsx @@ -22,13 +22,13 @@ export const useStyles = (): ApplyInstance => { const colors = useMemo( () => - (...args: (string | boolean | undefined)[]): string | string[] => { + (...args: (string | boolean | undefined)[]): T => { if (args.length === 1) { - return colorHelper(args[0] as string)(themeContext); + return colorHelper(args[0] as string)(themeContext) as T; } else if (args.length === 2) { return args.map((syntax) => colorHelper(syntax as string)(themeContext) - ); + ) as T; } else { throw Error("Invalid color syntax"); } diff --git a/src/processor/index.ts b/src/processor/index.ts index 9ddaabd..fa73604 100644 --- a/src/processor/index.ts +++ b/src/processor/index.ts @@ -27,7 +27,7 @@ export const customProcessor = ( customTheme: CustomThemeType ): Record => { const processors: Record< - string, + keyof CustomThemeType, (themeValue: any) => Record > = { colors: customColors, @@ -39,14 +39,19 @@ export const customProcessor = ( shadow: customShadows, }; - return Object.entries(processors).reduce((finalObject, [key, processor]) => { - const themeValue = customTheme[key as keyof CustomThemeType]; - if (themeValue) { - finalObject = { - ...finalObject, - ...processor(themeValue), - }; - } - return finalObject; - }, {} as Record); + return Object.entries(processors).reduce>( + (finalObject, [key, processor]) => { + if (key in customTheme) { + const themeValue = customTheme[key as keyof CustomThemeType]; + if (themeValue) { + finalObject = { + ...finalObject, + ...processor(themeValue), + }; + } + } + return finalObject; + }, + {} + ); };