Release (#7)

src/hook/useSx.test.ts

@@ -56,6 +56,26 @@ describe('edge case', () => {
     expectResult(undefined as any, {}, {});
     expectResult(undefined as any, { style: { width: 1 } }, { width: 1 });
   });
+
+  it('if prop and viewStyle sx parameter are nullish, return undefined', () => {
+    const {
+      result: {
+        current: { viewStyle },
+      },
+    } = renderHook(() => useSx(null, { theme: baseTheme }));
+
+    return expect(viewStyle()).toEqual(undefined);
+  });
+
+  it('if prop is nullish and viewStyle sx parameter is not nullish, return style', () => {
+    const {
+      result: {
+        current: { viewStyle },
+      },
+    } = renderHook(() => useSx(null, { theme: baseTheme }));
+
+    return expect(viewStyle({ width: 1 })).toEqual({ width: 4 });
+  });
 });
 
 describe('space parsing', () => {

src/hook/useSx.ts

@@ -1,6 +1,5 @@
 import { useContext, useMemo } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
 
 import type { SxProps } from '../@types/SxProps';
 import { _allPropList } from '../@types/SxProps';
@@ -14,26 +13,33 @@ type Props = { style?: StyleProp<any> } & SxProps;
 export type UseSxOptions = {
   theme?: ThemedDict;
 };
-export const useSx = <P extends Props>(props: P, { theme: optionTheme }: UseSxOptions = {}) => {
+export const useSx = <P extends Props>(
+  props?: P | null,
+  { theme: optionTheme }: UseSxOptions = {},
+) => {
   const styledSystemContext = useContext(StyledSystemContext);
 
-  const styleProp: ViewStyle = !props.style ? undefined : StyleSheet.flatten(props.style);
-
   const viewStyle = useStableCallback((sx?: SxProps): StyleProp<ViewStyle> | undefined => {
-    const mergedSx: SxProps = { ...sx, ...props, ...props.sx };
+    const skip = !props && !sx;
+
+    if (skip) {
+      return;
+    }
+
+    const mergedSx: SxProps = { ...sx, ...props, ...props?.sx };
 
     return propsToThemedStyle({
       theme: optionTheme ?? styledSystemContext?.theme,
       sx: mergedSx,
-      baseStyle: styleProp,
+      baseStyle: props?.style,
     });
   });
 
   const filteredProps: Omit<P, keyof SxProps | 'style'> = useMemo(() => {
     const ret = { ...props };
     _allPropList.forEach((keyName) => delete ret[keyName]);
 
-    return ret;
+    return ret as Omit<P, keyof SxProps | 'style'>;
   }, [props]);
 
   return { viewStyle, filteredProps };

src/hook/useSxToken.test.ts

@@ -0,0 +1,47 @@
+// import { renderHook } from '@testing-library/react-hooks';
+//
+// import type { ThemedDict } from '../@types/ThemedDict';
+// import type { ThemedTypings } from '../@types/ThemedTypings';
+//
+// import { useSxToken } from './useSxToken';
+//
+// const emptyTheme: ThemedDict = {
+//   colors: {},
+//   sizes: {},
+//   space: {},
+// };
+//
+// const baseTheme: ThemedDict = {
+//   colors: {
+//     red: 'red',
+//     blue: 'blue',
+//     green: 'green',
+//   },
+//   sizes: {
+//     1: 4,
+//     2: 8,
+//     pagePadding: 20,
+//   },
+//   space: { 1: 4, 2: 8, pagePadding: 20 },
+// };
+//
+// export function expectResult<T extends keyof ThemedTypings>(
+//   theme: ThemedDict,
+//   tokenGroup: T,
+//   tokenValue: string,
+//   expectation: any,
+// ) {
+//   const {
+//     result: { current },
+//   } = renderHook(() => useSxToken(tokenGroup, tokenValue, { theme }));
+//
+//   return expect(current).toEqual(expectation);
+// }
+//
+// describe('', () => {
+//   it('', () => {
+//     expectResult(baseTheme, 'colors', 'red', 'red');
+//   });
+// });
+
+it('', () => {});

src/hook/useSxToken.ts

@@ -0,0 +1,24 @@
+// import { useContext } from 'react';
+//
+// import type { ThemedDict } from '../@types/ThemedDict';
+// import type { ThemedTypings } from '../@types/ThemedTypings';
+// import { StyledSystemContext } from '../provider/StyledSystemProvider';
+//
+// export type UseSxTokenOptions = {
+//   theme?: ThemedDict;
+// };
+// export const useSxToken = <T extends keyof ThemedTypings>(
+//   tokenType: T,
+//   tokenValue: string,
+//   { theme: optionTheme }: UseSxTokenOptions = {},
+// ): undefined | ThemedTypings[T][keyof ThemedTypings[T]] => {
+//   const styledSystemContext = useContext(StyledSystemContext);
+//
+//   const theme = optionTheme ?? styledSystemContext?.theme;
+//
+//   if (!theme || tokenType! in theme) {
+//     return;
+//   }
+//
+//   return theme[tokenType][tokenValue] as any;
+// };

src/util/propsToThemedStyle.ts

@@ -14,7 +14,7 @@ export const propsToThemedStyle = ({
   theme,
   sx,
 }: {
-  baseStyle?: ViewStyle;
+  baseStyle?: StyleProp<ViewStyle>;
   theme?: ThemedDict;
   sx?: SxProps;
 }): StyleProp<ViewStyle> | undefined => {

tsconfig.json

@@ -8,11 +8,12 @@
     "sourceMap": true,
     "module": "ESNext",
     "moduleResolution": "node",
+    "strict": true,
     "target": "ESNext",
     "declaration": true,
     "esModuleInterop": true,
     "rootDir": "src",
-    "skipLibCheck": true,
+    "skipLibCheck": true
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }