@react-native-styled-system/core 1.2.1 → 1.3.0

package/lib/typescript/src/util/createSxComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createSxComponent.d.ts","sourceRoot":"","sources":["../../../../src/util/createSxComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAYtF;AAED,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAY1F"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-styled-system/core",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React Native Styled System",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -67,5 +67,5 @@
       "**/*.test.*"
     ]
   },
-  "gitHead": "b8feacc50e72c139be6d7a68de6cb6cfce54c67e"
+  "gitHead": "d8939b5cb012a3d68bca99530c1c392f0ac1a477"
 }

package/src/hook/useSx.test.ts

@@ -74,6 +74,12 @@ const baseTheme: ThemedDict = {
       fontStyle: 'normal',
       fontWeight: '400',
     },
+    body: {
+      fontFamily: 'Noto Sans',
+      fontSize: 12,
+      fontStyle: 'normal',
+      fontWeight: '400',
+    },
   },
 };
 
@@ -241,6 +247,23 @@ describe('style parse priority', () => {
       { fallback: { width: 1, marginX: 5 }, expectation: { width: 2, marginHorizontal: 4 } },
     );
   });
+
+  it('sx typography > fallback', () => {
+    expectResult(
+      baseTheme,
+      { t: 'title' },
+      {
+        fallback: { typography: 'body' },
+        expectation: {
+          fontFamily: 'Noto Sans',
+          fontSize: 14,
+          fontStyle: 'normal',
+          fontWeight: '400',
+        },
+        styleType: 'TextStyle',
+      },
+    );
+  });
 });
 
 describe('radii', () => {

package/src/index.ts

@@ -6,3 +6,4 @@ export * from './hook/useSxStyle';
 export * from './hook/useSxTokens';
 export * from './provider/StyledSystemProvider';
 export * from './util/propsToThemedStyle';
+export * from './util/createSxComponent';

package/src/internal/util/mutateShortcutPropToOriginalKeys.ts

@@ -6,13 +6,15 @@ export function mutateShortcutPropToOriginalKeys(sx?: TextSxProps | null) {
     return sx;
   }
 
+  const ret = { ...sx };
+
   for (const key of Object.keys(sx)) {
     if (SHORTCUT_NAME_MAP[key]) {
-      if (!(SHORTCUT_NAME_MAP[key] in sx)) {
-        sx[SHORTCUT_NAME_MAP[key]] = sx[key];
+      if (!(SHORTCUT_NAME_MAP[key] in ret)) {
+        ret[SHORTCUT_NAME_MAP[key]] = sx[key];
       }
     }
   }
 
-  return sx;
+  return ret;
 }

package/src/util/createSxComponent.tsx

@@ -0,0 +1,33 @@
+import type { ComponentType } from 'react';
+import React, { forwardRef } from 'react';
+
+import type { SxProps, TextSxProps } from '../@types/SxProps';
+import { useSx } from '../hook/useSx';
+
+export function createSxComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & SxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props);
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}
+
+export function createSxTextComponent<Props extends object, Ref>(Base: ComponentType<Props>) {
+  return () => {
+    const Transformed = forwardRef<Ref, Props & TextSxProps>(function (props, ref) {
+      const { filteredProps, getStyle } = useSx(props, { styleType: 'TextStyle' });
+
+      return <Base {...(filteredProps as any)} style={getStyle()} ref={ref as any} />;
+    });
+
+    Transformed.displayName = `Sx.${Base.displayName || Base.name || 'NoName'}`;
+
+    return Transformed;
+  };
+}