Merge pull request #24 from mj-studio-library/develop

Release

doc/docs/usage/style-parsing.mdx

@@ -22,9 +22,9 @@ const props = {
 3. Styles inside the `sx` prop of Props
 4. First argument of `viewStyle(sx?: SxProps)`
 
-**The priority is calculated as  3 > 2 > 4 > 1.**
+**The priority is calculated as  1 > 3 > 2 > 4.**
 
-3 has the highest priority.
+1 has the highest priority.
 
 <details>
   <summary>Test code for the prove</summary>
@@ -38,8 +38,8 @@ describe('style parse priority', () => {
     expectResult(emptyTheme, { w: 1, viewStyleSx: { w: 2 } }, { width: 1 });
   });
 
-  it('viewStyle parameter > style prop property', () => {
-    expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 2 });
+  it('style prop property > viewStyle parameter', () => {
+    expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 1 });
   });
 });
 ```

doc/i18n/ko/docusaurus-plugin-content-docs/current/usage/style-parsing.mdx

@@ -22,9 +22,9 @@ const props = {
 3. Props의 `sx` prop 내부의 스타일들
 4. `viewStyle(sx?: SxProps)`의 첫 인자
 
-**이에 따른 우선순위는 3 > 2 > 4 > 1 로 계산됩니다.**
+**이에 따른 우선순위는 1 > 3 > 2 > 4 > 로 계산됩니다.**
 
-3이 가장 우선순위가 높습니다.
+1이 가장 우선순위가 높습니다.
 
 <details>
   <summary>이를 보여주는 테스트 코드</summary>
@@ -38,8 +38,8 @@ describe('style parse priority', () => {
     expectResult(emptyTheme, { w: 1, viewStyleSx: { w: 2 } }, { width: 1 });
   });
 
-  it('viewStyle parameter > style prop property', () => {
-    expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 2 });
+  it('style prop property > viewStyle parameter', () => {
+    expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 1 });
   });
 });
 ```

src/hook/useSx.test.ts

@@ -166,8 +166,8 @@ describe('style parse priority', () => {
     expectResult(emptyTheme, { w: 1, viewStyleSx: { w: 2 } }, { width: 1 });
   });
 
-  it('viewStyle parameter > style prop property', () => {
-    expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 2 });
+  it('style prop property > viewStyle parameter', () => {
+    expectResult(emptyTheme, { style: { width: 1 }, viewStyleSx: { w: 2 } }, { width: 1 });
   });
 });
 

src/hook/useSx.ts

@@ -1,5 +1,6 @@
 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';
@@ -19,21 +20,30 @@ export const useSx = <P extends Props>(
 ) => {
   const styledSystemContext = useContext(StyledSystemContext);
 
-  const viewStyle = useStableCallback((sx?: SxProps): StyleProp<ViewStyle> | undefined => {
-    const skip = !props && !sx;
-
-    if (skip) {
-      return;
-    }
-
-    const mergedSx: SxProps = { ...sx, ...props, ...props?.sx };
-
-    return propsToThemedStyle({
-      theme: optionTheme ?? styledSystemContext?.theme,
-      sx: mergedSx,
-      baseStyle: props?.style,
-    });
-  });
+  const viewStyle = useStableCallback(
+    (sx?: Omit<SxProps, 'sx'>): StyleProp<ViewStyle> | undefined => {
+      const skip = !props && !sx;
+
+      if (skip) {
+        return;
+      }
+
+      const mergedSx: SxProps = { ...sx, ...props, ...props?.sx };
+
+      const ret = propsToThemedStyle({
+        theme: optionTheme ?? styledSystemContext?.theme,
+        sx: mergedSx,
+      });
+
+      if (!ret) {
+        return props?.style;
+      } else if (props?.style) {
+        return StyleSheet.compose(ret, props.style);
+      } else {
+        return ret;
+      }
+    },
+  );
 
   const filteredProps: Omit<P, keyof SxProps | 'style'> = useMemo(() => {
     const ret = { ...props };

src/util/propsToThemedStyle.ts

@@ -1,6 +1,5 @@
 /* eslint-disable padding-line-between-statements */
 import type { DimensionValue, StyleProp, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native';
 import { is } from '@mj-studio/js-util';
 
 import type { SxProps } from '../@types/SxProps';
@@ -11,23 +10,21 @@ import { parsePxSuffixNumber } from '../internal/util/parsePxSuffixNumber';
 import { printWarning } from '../internal/util/printWarning';
 
 export const propsToThemedStyle = ({
-  baseStyle,
   theme,
   sx,
 }: {
-  baseStyle?: StyleProp<ViewStyle>;
   theme?: ThemedDict;
   sx?: SxProps;
 }): StyleProp<ViewStyle> | undefined => {
   const ret: ViewStyle = {};
 
   if (!theme) {
     printWarning('theme not found');
-    return baseStyle;
+    return;
   }
 
   if (!sx) {
-    return baseStyle;
+    return;
   }
 
   const parseColor = (token?: Token<'colors'>): string | undefined => {
@@ -304,5 +301,5 @@ export const propsToThemedStyle = ({
   fillViewStyleIfNotNullish(ret, 'zIndex', sx.zIndex);
   // endregion
 
-  return StyleSheet.compose(baseStyle, ret);
+  return ret;
 };