rn-css 1.4.3 → 1.5.2

package/dist/index.js

@@ -18,6 +18,9 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SharedValue = exports.FontSizeContext = exports.cssToRNStyle = void 0;
 const RN = __importStar(require("react-native"));
@@ -28,14 +31,14 @@ var features_1 = require("./features");
 Object.defineProperty(exports, "FontSizeContext", { enumerable: true, get: function () { return features_1.FontSizeContext; } });
 var styleComponent_2 = require("./styleComponent");
 Object.defineProperty(exports, "SharedValue", { enumerable: true, get: function () { return styleComponent_2.SharedValue; } });
-const styled = (Component) => styleComponent_1.default(Component);
+__exportStar(require("./useTheme"), exports);
+const styled = (Component) => (0, styleComponent_1.default)(Component);
 styled.ActivityIndicator = styled(RN.ActivityIndicator);
 styled.Button = styled(RN.Button);
 styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid);
 styled.Image = styled(RN.Image);
 styled.ImageBackground = styled(RN.ImageBackground);
 styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView);
-styled.ListView = styled(RN.ListView);
 styled.Modal = styled(RN.Modal);
 styled.NavigatorIOS = styled(RN.NavigatorIOS);
 styled.ScrollView = styled(RN.ScrollView);
@@ -45,17 +48,13 @@ styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView);
 styled.RefreshControl = styled(RN.RefreshControl);
 styled.SafeAreaView = styled(RN.SafeAreaView);
 styled.StatusBar = styled(RN.StatusBar);
-styled.SwipeableListView = styled(RN.SwipeableListView);
-styled.TabBarIOS = styled(RN.TabBarIOS);
 styled.Text = styled(RN.Text);
 styled.TextInput = styled(RN.TextInput);
-styled.ToolbarAndroid = styled(RN.ToolbarAndroid);
 styled.TouchableHighlight = styled(RN.TouchableHighlight);
 styled.TouchableNativeFeedback = styled(RN.TouchableNativeFeedback);
 styled.TouchableOpacity = styled(RN.TouchableOpacity);
 styled.TouchableWithoutFeedback = styled(RN.TouchableWithoutFeedback);
 styled.View = styled(RN.View);
-styled.ViewPagerAndroid = styled(RN.ViewPagerAndroid);
 styled.FlatList = styleComponent_1.styledFlatList;
 styled.SectionList = styleComponent_1.styledSectionList;
 styled.VirtualizedList = styleComponent_1.styledVirtualizedList;

package/dist/styleComponent.d.ts

@@ -5,6 +5,7 @@ declare type Primitive = number | string | null | undefined | boolean;
 declare type Functs<T> = (arg: T & {
     rnCSS?: string;
     shared: unknown;
+    theme: unknown;
 }) => Primitive;
 declare type OptionalProps = {
     rnCSS?: `${string};`;

package/dist/styleComponent.js

@@ -17,7 +17,7 @@ const styleMap = {};
 // We use this to share value within the component (Theme, Translation, whatever)
 exports.SharedValue = react_1.default.createContext(undefined);
 function buildCSSString(chunks, functs, props, shared) {
-    let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ ...props, shared }) : functs[i]])).flat().join('');
+    let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? functs[i]({ ...props, shared, theme: shared }) : functs[i]])).flat().join('');
     if (props.rnCSS)
         computedString += props.rnCSS.replace(/=/gm, ':') + ';';
     return computedString;
@@ -29,20 +29,20 @@ const styled = (Component) => {
             const shared = react_1.default.useContext(exports.SharedValue);
             // Store the style for mutualization
             const cssString = react_1.default.useRef(buildCSSString(chunks, functs, props, shared));
-            const [rnStyle, setRNStyle] = react_1.default.useState(cssToRN_1.default(cssString.current));
+            const [rnStyle, setRNStyle] = react_1.default.useState((0, cssToRN_1.default)(cssString.current));
             react_1.default.useEffect(() => {
                 // Build the css string with the context
                 const css = buildCSSString(chunks, functs, props, shared);
                 cssString.current = css;
                 // Try to load an existing style from the style map or save it for next time
-                const hash = generateHash_1.default(css);
+                const hash = (0, generateHash_1.default)(css);
                 const style = styleMap[hash];
                 if (style) {
                     setRNStyle(style.style);
                     style.usages++;
                 }
                 else {
-                    const rns = cssToRN_1.default(css);
+                    const rns = (0, cssToRN_1.default)(css);
                     setRNStyle(rns);
                     styleMap[hash] = { style: rns, usages: 1 };
                 }
@@ -70,29 +70,29 @@ const styled = (Component) => {
             delete finalStyle.hover;
             // Read all the data we might need
             // Handle hover
-            const { onMouseEnter, onMouseLeave, style: hoverStyle } = features_1.useHover(rnStyle, props.onMouseEnter, props.onMouseLeave);
+            const { onMouseEnter, onMouseLeave, style: hoverStyle } = (0, features_1.useHover)(rnStyle, props.onMouseEnter, props.onMouseLeave);
             if (hoverStyle)
                 Object.assign(finalStyle, hoverStyle);
             // Calculate current em unit for media-queries
-            const { em: tempEm } = features_1.useFontSize(finalStyle.fontSize, units.current.rem);
+            const { em: tempEm } = (0, features_1.useFontSize)(finalStyle.fontSize, units.current.rem);
             if (units.current.em !== tempEm)
                 units.current = { ...units.current, em: tempEm };
             // Handle layout data needed for % units
-            const { width, height, onLayout } = features_1.useLayout(props.onLayout);
+            const { width, height, onLayout } = (0, features_1.useLayout)(props.onLayout);
             if (needsLayout && (units.current.width !== width || units.current.height !== height)) {
                 units.current = { ...units.current, width, height };
             }
             // Handle screen size needed for vw and wh units
-            const screenUnits = features_1.useScreenSize();
+            const screenUnits = (0, features_1.useScreenSize)();
             if ( /* needsScreenSize && */Object.keys(screenUnits).find(key => units.current[key] !== screenUnits[key])) {
                 units.current = { ...units.current, ...screenUnits };
             }
             // apply media queries
-            const mediaQuery = features_1.useMediaQuery(rnStyle.media, units.current);
+            const mediaQuery = (0, features_1.useMediaQuery)(rnStyle.media, units.current);
             if (mediaQuery)
                 Object.assign(finalStyle, mediaQuery);
             // Handle em units
-            const { em } = features_1.useFontSize(finalStyle.fontSize, units.current.rem);
+            const { em } = (0, features_1.useFontSize)(finalStyle.fontSize, units.current.rem);
             if (units.current.em !== em)
                 units.current = { ...units.current, em };
             if (finalStyle.fontSize)
@@ -102,8 +102,8 @@ const styled = (Component) => {
             if (Object.keys(finalStyle).length !== Object.keys(calculatedStyle.current).length || Object.keys(finalStyle).find(key => calculatedStyle.current[key] !== finalStyle[key])) {
                 calculatedStyle.current = finalStyle;
             }
-            const styleConvertedFromCSS = react_1.default.useMemo(() => convertStyle_1.default(calculatedStyle.current, units.current), [calculatedStyle.current, units.current]);
-            const zIndex = features_1.useZIndex(react_native_1.StyleSheet.flatten([props.style, styleConvertedFromCSS]).zIndex);
+            const styleConvertedFromCSS = react_1.default.useMemo(() => (0, convertStyle_1.default)(calculatedStyle.current, units.current), [calculatedStyle.current, units.current]);
+            const zIndex = (0, features_1.useZIndex)(react_native_1.StyleSheet.flatten([props.style, styleConvertedFromCSS]).zIndex);
             const style = react_1.default.useMemo(() => {
                 const style = [];
                 style.push(styleConvertedFromCSS);

package/dist/useTheme.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/** Provider for the theme. */
+export declare const ThemeProvider: ({ theme, children }: {
+    theme: unknown;
+    children: React.ReactNode;
+}) => JSX.Element;
+/**
+ * Returns the Theme
+ * @returns The Theme object
+ */
+export declare const useTheme: () => unknown;
+/**
+ * Adds the theme prop to a non rn-css component
+ * @param Component A non rn-css component
+ * @returns A component with the theme prop
+ */
+export declare const withTheme: <T>(Component: React.ComponentType<T>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<T> & React.RefAttributes<React.Component<{}, {}, any>>>;

package/dist/useTheme.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withTheme = exports.useTheme = exports.ThemeProvider = void 0;
+const react_1 = __importDefault(require("react"));
+const styleComponent_1 = require("./styleComponent");
+/** Provider for the theme. */
+const ThemeProvider = ({ theme, children }) => {
+    return react_1.default.createElement(styleComponent_1.SharedValue.Provider, { value: theme }, children);
+};
+exports.ThemeProvider = ThemeProvider;
+/**
+ * Returns the Theme
+ * @returns The Theme object
+ */
+const useTheme = () => react_1.default.useContext(styleComponent_1.SharedValue);
+exports.useTheme = useTheme;
+/**
+ * Adds the theme prop to a non rn-css component
+ * @param Component A non rn-css component
+ * @returns A component with the theme prop
+ */
+const withTheme = (Component) => {
+    const theme = (0, exports.useTheme)();
+    const ThemedComponent = react_1.default.forwardRef((props, ref) => react_1.default.createElement(Component, { ref: ref, theme: theme, ...props }));
+    ThemedComponent.displayName = 'ThemedComponent';
+    return ThemedComponent;
+};
+exports.withTheme = withTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-css",
-  "version": "1.4.3",
+  "version": "1.5.2",
   "scripts": {
     "test": "jest",
     "prepare": "tsc",
@@ -17,44 +17,44 @@
     "react-native": ">=0.62.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/runtime": "^7.12.13",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^17.0.1",
-    "@types/react-native": "^0.63.48",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
-    "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "dotenv": "^8.2.0",
-    "eslint": "^7.19.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "@babel/core": "^7.16.5",
+    "@babel/runtime": "^7.16.5",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@types/jest": "^27.0.3",
+    "@types/react": "^17.0.37",
+    "@types/react-native": "^0.66.9",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
+    "babel-jest": "^27.4.5",
+    "babel-loader": "^8.2.3",
+    "dotenv": "^10.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.22.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-standard": "^5.0.0",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^5.0.0",
-    "husky": "^5.0.9",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.4",
-    "metro-react-native-babel-preset": "^0.65.0",
+    "html-loader": "^3.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "husky": "^7.0.4",
+    "jest": "^27.4.5",
+    "lint-staged": "^12.1.2",
+    "metro-react-native-babel-preset": "^0.66.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-native": "^0.64.2",
+    "react-native": "^0.66.4",
     "react-native-typescript-transformer": "^1.2.13",
-    "react-native-web": "^0.17.1",
+    "react-native-web": "^0.17.5",
     "react-test-renderer": "17.0.2",
-    "release-it": "^14.3.0",
-    "ts-jest": "^27.0.5",
-    "ts-loader": "^9.2.5",
-    "typescript": "^4.3.5",
-    "webpack": "^5.21.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2"
+    "release-it": "^14.11.8",
+    "ts-jest": "^27.1.1",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
   },
   "jest": {
     "preset": "react-native"

package/src/convertUnits.ts

@@ -47,6 +47,7 @@ export function convertValue (key: keyof PartialStyle | keyof Transform, value:
   if (convertedValue.startsWith('calc(')) return calculate(convertedValue.substring(4))// remove calc. We can keep the parenthesis
   else if (convertedValue.startsWith('max(')) return max(convertedValue.substring(4, convertedValue.length - 1))// Remove max()
   else if (convertedValue.startsWith('min(')) return min(convertedValue.substring(4, convertedValue.length - 1))// remove min()
+  else if (key === 'fontWeight') return convertedValue // fontWeight must be a string even when it is an integer value.
   else if (parseFloat(convertedValue) + '' === convertedValue) return parseFloat(convertedValue)
   else return convertedValue
 }

package/src/features.tsx

@@ -51,8 +51,8 @@ export const useLayout = (onLayout?: (event: LayoutChangeEvent) => void) => {
     if (onLayout) onLayout(event)
     if (unmounted.current) return
     const { width, height } = event.nativeEvent.layout
-    if (width !== layout.width || height !== layout.height) setLayout({ width, height })
-  }, [onLayout, layout.width, layout.height])
+    setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height })
+  }, [onLayout])
   return { onLayout: updateLayout, ...layout }
 }
 

package/src/index.tsx

@@ -4,6 +4,7 @@ import styledComponent, { styledFlatList, styledSectionList, styledVirtualizedLi
 export { cssToRNStyle } from './cssToRN'
 export { FontSizeContext } from './features'
 export { SharedValue } from './styleComponent'
+export * from './useTheme'
 
 const styled = <T, >(Component: React.ComponentType<T>) => styledComponent<T>(Component)
 
@@ -13,7 +14,6 @@ styled.DrawerLayoutAndroid = styled(RN.DrawerLayoutAndroid)
 styled.Image = styled(RN.Image)
 styled.ImageBackground = styled(RN.ImageBackground)
 styled.KeyboardAvoidingView = styled(RN.KeyboardAvoidingView)
-styled.ListView = styled(RN.ListView)
 styled.Modal = styled(RN.Modal)
 styled.NavigatorIOS = styled(RN.NavigatorIOS)
 styled.ScrollView = styled(RN.ScrollView)
@@ -23,17 +23,13 @@ styled.RecyclerViewBackedScrollView = styled(RN.RecyclerViewBackedScrollView)
 styled.RefreshControl = styled(RN.RefreshControl)
 styled.SafeAreaView = styled(RN.SafeAreaView)
 styled.StatusBar = styled(RN.StatusBar)
-styled.SwipeableListView = styled(RN.SwipeableListView)
-styled.TabBarIOS = styled(RN.TabBarIOS)
 styled.Text = styled(RN.Text)
 styled.TextInput = styled(RN.TextInput)
-styled.ToolbarAndroid = styled(RN.ToolbarAndroid)
 styled.TouchableHighlight = styled(RN.TouchableHighlight)
 styled.TouchableNativeFeedback = styled(RN.TouchableNativeFeedback)
 styled.TouchableOpacity = styled(RN.TouchableOpacity)
 styled.TouchableWithoutFeedback = styled(RN.TouchableWithoutFeedback)
 styled.View = styled(RN.View)
-styled.ViewPagerAndroid = styled(RN.ViewPagerAndroid)
 styled.FlatList = styledFlatList
 styled.SectionList = styledSectionList
 styled.VirtualizedList = styledVirtualizedList

package/src/styleComponent.tsx

@@ -15,7 +15,7 @@ const styleMap: StyleMap = {}
 export const SharedValue = React.createContext<unknown>(undefined)
 
 type Primitive = number | string | null | undefined | boolean
-type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown }) => Primitive
+type Functs<T> = (arg: T & { rnCSS?: string; shared: unknown, theme: unknown }) => Primitive
 type OptionalProps = {
   rnCSS?: `${string};`;
   onMouseEnter?: (event: MouseEvent) => void;
@@ -25,7 +25,7 @@ type OptionalProps = {
   style?: StyleProp<any>;
 }
 function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsArray, functs: (Primitive | Functs<T>)[], props: T, shared: unknown) {
-  let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ ...props, shared }) : functs[i]])).flat().join('')
+  let computedString = chunks.map((chunk, i) => ([chunk, (functs[i] instanceof Function) ? (functs[i] as Functs<T>)({ ...props, shared, theme: shared }) : functs[i]])).flat().join('')
   if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
   return computedString
 }

package/src/useTheme.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { SharedValue } from './styleComponent'
+
+/** Provider for the theme. */
+export const ThemeProvider = ({ theme, children }: { theme: unknown; children: React.ReactNode }) => {
+  return <SharedValue.Provider value={theme}>
+    {children}
+  </SharedValue.Provider>
+}
+
+/**
+ * Returns the Theme
+ * @returns The Theme object
+ */
+export const useTheme = () => React.useContext(SharedValue)
+
+/**
+ * Adds the theme prop to a non rn-css component
+ * @param Component A non rn-css component
+ * @returns A component with the theme prop
+ */
+export const withTheme = <T, >(Component: React.ComponentType<T>) => {
+  const theme = useTheme()
+  const ThemedComponent = React.forwardRef<React.Component, T>((props: T, ref) => <Component ref={ref} theme={theme} {...props} />)
+  ThemedComponent.displayName = 'ThemedComponent'
+  return ThemedComponent
+}