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;
 };