rn-css 1.6.0 → 1.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styleComponent.js +15 -7
- package/package.json +1 -1
- package/src/styleComponent.tsx +14 -7
package/dist/styleComponent.js
CHANGED
|
@@ -25,6 +25,13 @@ function buildCSSString(chunks, functs, props, shared) {
|
|
|
25
25
|
computedString += props.rnCSS.replace(/=/gm, ':') + ';';
|
|
26
26
|
return computedString;
|
|
27
27
|
}
|
|
28
|
+
function initFromCSS(css) {
|
|
29
|
+
const hash = (0, generateHash_1.default)(css);
|
|
30
|
+
const rns = (0, cssToRN_1.default)(css);
|
|
31
|
+
(0, cssToRN_1.default)(css);
|
|
32
|
+
styleMap[hash] = { style: rns, usages: 0 };
|
|
33
|
+
return rns;
|
|
34
|
+
}
|
|
28
35
|
const styled = (Component) => {
|
|
29
36
|
const styledComponent = (chunks, ...functs) => {
|
|
30
37
|
const ForwardRefComponent = react_1.default.forwardRef((props, ref) => {
|
|
@@ -33,7 +40,7 @@ const styled = (Component) => {
|
|
|
33
40
|
// Build the css string with the context
|
|
34
41
|
const css = react_1.default.useMemo(() => buildCSSString(chunks, functs, props, shared), [props, shared]);
|
|
35
42
|
// Store the style in RN format
|
|
36
|
-
const [rnStyle, setRNStyle] = react_1.default.useState(
|
|
43
|
+
const [rnStyle, setRNStyle] = react_1.default.useState(() => initFromCSS(css));
|
|
37
44
|
react_1.default.useEffect(() => {
|
|
38
45
|
// Try to load an existing style from the style map or save it for next time
|
|
39
46
|
const hash = (0, generateHash_1.default)(css);
|
|
@@ -51,8 +58,10 @@ const styled = (Component) => {
|
|
|
51
58
|
return () => {
|
|
52
59
|
const style = styleMap[hash];
|
|
53
60
|
style.usages--;
|
|
54
|
-
|
|
55
|
-
|
|
61
|
+
setTimeout(() => {
|
|
62
|
+
if (style.usages <= 0)
|
|
63
|
+
delete styleMap[hash];
|
|
64
|
+
}, 3000);
|
|
56
65
|
};
|
|
57
66
|
}, [css]);
|
|
58
67
|
const { needsLayout, needsHover } = react_1.default.useMemo(() => ({
|
|
@@ -90,7 +99,7 @@ const styled = (Component) => {
|
|
|
90
99
|
// apply media queries
|
|
91
100
|
const mediaQuery = (0, features_1.useMediaQuery)(rnStyle.media, baseUnits);
|
|
92
101
|
// Handle em units
|
|
93
|
-
const fontSize = mediaQuery
|
|
102
|
+
const fontSize = (mediaQuery && mediaQuery.fontSize) || tempStyle.fontSize;
|
|
94
103
|
const { em } = (0, features_1.useFontSize)(fontSize, baseUnits.rem, parentEm);
|
|
95
104
|
const finalStyle = react_1.default.useMemo(() => {
|
|
96
105
|
const style = { ...tempStyle, ...mediaQuery };
|
|
@@ -102,18 +111,17 @@ const styled = (Component) => {
|
|
|
102
111
|
}, [em, mediaQuery, tempStyle]);
|
|
103
112
|
const units = react_1.default.useMemo(() => ({ ...baseUnits, em }), [baseUnits, em]);
|
|
104
113
|
const styleConvertedFromCSS = react_1.default.useMemo(() => (0, convertStyle_1.default)(finalStyle, units), [finalStyle, units]);
|
|
105
|
-
const style = react_1.default.useMemo(() => react_native_1.StyleSheet.flatten([props.style
|
|
114
|
+
const style = react_1.default.useMemo(() => react_native_1.StyleSheet.flatten([styleConvertedFromCSS, props.style]), [props.style, styleConvertedFromCSS]);
|
|
106
115
|
const newProps = react_1.default.useMemo(() => {
|
|
107
116
|
const newProps = { style, onMouseEnter, onMouseLeave, onLayout };
|
|
108
117
|
if (style.textOverflow === 'ellipsis')
|
|
109
118
|
Object.assign(newProps, { numberOfLines: 1 });
|
|
110
119
|
return newProps;
|
|
111
120
|
}, [onLayout, onMouseEnter, onMouseLeave, style]);
|
|
112
|
-
console.log(style, styleConvertedFromCSS, tempStyle, rnStyle, css);
|
|
113
121
|
// The lines below can improve perfs, but it causes the component to remount when the font size changes
|
|
114
122
|
// const currentFontSize = React.useContext(FontSizeContext)
|
|
115
123
|
// if (em !== currentFontSize) {
|
|
116
|
-
if (
|
|
124
|
+
if (style.fontSize) {
|
|
117
125
|
return react_1.default.createElement(exports.FontSizeContext.Provider, { value: em },
|
|
118
126
|
react_1.default.createElement(Component, { ref: ref, ...props, ...newProps }));
|
|
119
127
|
}
|
package/package.json
CHANGED
package/src/styleComponent.tsx
CHANGED
|
@@ -33,6 +33,13 @@ function buildCSSString<T extends { rnCSS?: string }> (chunks: TemplateStringsAr
|
|
|
33
33
|
if (props.rnCSS) computedString += props.rnCSS.replace(/=/gm, ':') + ';'
|
|
34
34
|
return computedString
|
|
35
35
|
}
|
|
36
|
+
function initFromCSS (css: string) {
|
|
37
|
+
const hash = calculHash(css)
|
|
38
|
+
const rns = cssToStyle(css)
|
|
39
|
+
cssToStyle(css)
|
|
40
|
+
styleMap[hash] = { style: rns, usages: 0 }
|
|
41
|
+
return rns
|
|
42
|
+
}
|
|
36
43
|
const styled = <Props, >(Component: React.ComponentType<Props>) => {
|
|
37
44
|
const styledComponent = <S, >(chunks: TemplateStringsArray, ...functs: (Primitive | Functs<S & Props>)[]) => {
|
|
38
45
|
const ForwardRefComponent = React.forwardRef<React.ComponentType<S & Props & OptionalProps>, S & Props & OptionalProps>((props: S & Props & OptionalProps, ref) => {
|
|
@@ -41,7 +48,7 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
|
|
|
41
48
|
// Build the css string with the context
|
|
42
49
|
const css = React.useMemo(() => buildCSSString(chunks, functs, props, shared), [props, shared])
|
|
43
50
|
// Store the style in RN format
|
|
44
|
-
const [rnStyle, setRNStyle] = React.useState<Style>(
|
|
51
|
+
const [rnStyle, setRNStyle] = React.useState<Style>(() => initFromCSS(css))
|
|
45
52
|
React.useEffect(() => {
|
|
46
53
|
// Try to load an existing style from the style map or save it for next time
|
|
47
54
|
const hash = calculHash(css)
|
|
@@ -59,7 +66,9 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
|
|
|
59
66
|
return () => {
|
|
60
67
|
const style = styleMap[hash]
|
|
61
68
|
style.usages--
|
|
62
|
-
|
|
69
|
+
setTimeout(() => {
|
|
70
|
+
if (style.usages <= 0) delete styleMap[hash]
|
|
71
|
+
}, 3000)
|
|
63
72
|
}
|
|
64
73
|
}, [css])
|
|
65
74
|
|
|
@@ -101,7 +110,7 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
|
|
|
101
110
|
// apply media queries
|
|
102
111
|
const mediaQuery = useMediaQuery(rnStyle.media, baseUnits)
|
|
103
112
|
// Handle em units
|
|
104
|
-
const fontSize = mediaQuery
|
|
113
|
+
const fontSize = (mediaQuery && mediaQuery.fontSize) || tempStyle.fontSize
|
|
105
114
|
const { em } = useFontSize(fontSize, baseUnits.rem, parentEm)
|
|
106
115
|
|
|
107
116
|
const finalStyle = React.useMemo<Style>(() => {
|
|
@@ -114,19 +123,17 @@ const styled = <Props, >(Component: React.ComponentType<Props>) => {
|
|
|
114
123
|
const units = React.useMemo<Units>(() => ({ ...baseUnits, em }), [baseUnits, em])
|
|
115
124
|
|
|
116
125
|
const styleConvertedFromCSS = React.useMemo(() => convertStyle(finalStyle, units), [finalStyle, units])
|
|
117
|
-
const style: StyleProp<any> = React.useMemo(() => StyleSheet.flatten([props.style
|
|
126
|
+
const style: StyleProp<any> = React.useMemo(() => StyleSheet.flatten([styleConvertedFromCSS, props.style]), [props.style, styleConvertedFromCSS])
|
|
118
127
|
const newProps = React.useMemo(() => {
|
|
119
128
|
const newProps: OptionalProps = { style, onMouseEnter, onMouseLeave, onLayout }
|
|
120
129
|
if (style.textOverflow === 'ellipsis') Object.assign(newProps, { numberOfLines: 1 })
|
|
121
130
|
return newProps
|
|
122
131
|
}, [onLayout, onMouseEnter, onMouseLeave, style])
|
|
123
132
|
|
|
124
|
-
console.log(style, styleConvertedFromCSS, tempStyle, rnStyle, css)
|
|
125
|
-
|
|
126
133
|
// The lines below can improve perfs, but it causes the component to remount when the font size changes
|
|
127
134
|
// const currentFontSize = React.useContext(FontSizeContext)
|
|
128
135
|
// if (em !== currentFontSize) {
|
|
129
|
-
if (
|
|
136
|
+
if (style.fontSize) {
|
|
130
137
|
return <FontSizeContext.Provider value={em}>
|
|
131
138
|
<Component ref={ref} {...props} {...newProps} />
|
|
132
139
|
</FontSizeContext.Provider>
|