@react-native-styled-system/core 1.2.2 → 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.2",
+  "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": "140df13db7628f158a4094252af671c584ebe8eb"
+  "gitHead": "d8939b5cb012a3d68bca99530c1c392f0ac1a477"
 }

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