react-native-unistyles 1.0.0-beta.2 → 1.0.0-beta.4
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +342 -35
- package/lib/commonjs/createUnistyles.js +17 -3
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/hooks/index.js +13 -0
- package/lib/commonjs/hooks/index.js.map +1 -0
- package/lib/commonjs/hooks/useDimensions.js +19 -0
- package/lib/commonjs/hooks/useDimensions.js.map +1 -0
- package/lib/commonjs/hooks/useDimensions.web.js +31 -0
- package/lib/commonjs/hooks/useDimensions.web.js.map +1 -0
- package/lib/commonjs/utils/styles.js +20 -10
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/commonjs/utils/styles.spec.js +66 -0
- package/lib/commonjs/utils/styles.spec.js.map +1 -1
- package/lib/module/createUnistyles.js +17 -3
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/hooks/index.js +2 -0
- package/lib/module/hooks/index.js.map +1 -0
- package/lib/module/hooks/useDimensions.js +12 -0
- package/lib/module/hooks/useDimensions.js.map +1 -0
- package/lib/module/hooks/useDimensions.web.js +24 -0
- package/lib/module/hooks/useDimensions.web.js.map +1 -0
- package/lib/module/utils/styles.js +20 -10
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/module/utils/styles.spec.js +66 -0
- package/lib/module/utils/styles.spec.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +5 -1
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/hooks/index.d.ts +2 -0
- package/lib/typescript/src/hooks/index.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useDimensions.d.ts +3 -0
- package/lib/typescript/src/hooks/useDimensions.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useDimensions.web.d.ts +3 -0
- package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +1 -0
- package/lib/typescript/src/types.d.ts +26 -8
- package/lib/typescript/src/types.d.ts.map +1 -1
- package/lib/typescript/src/utils/styles.d.ts +1 -3
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/createUnistyles.ts +20 -4
- package/src/hooks/index.ts +1 -0
- package/src/hooks/useDimensions.ts +11 -0
- package/src/hooks/useDimensions.web.ts +30 -0
- package/src/types.ts +64 -20
- package/src/utils/styles.ts +43 -13
@@ -93,6 +93,72 @@ describe('styles', () => {
|
|
93
93
|
fontWeight: 'bold'
|
94
94
|
});
|
95
95
|
});
|
96
|
+
it('should correctly parse transform styles', () => {
|
97
|
+
const screenSize = {
|
98
|
+
width: 400,
|
99
|
+
height: 800
|
100
|
+
};
|
101
|
+
const breakpoint = 'sm';
|
102
|
+
const breakpoints = {
|
103
|
+
xs: 0,
|
104
|
+
sm: 400,
|
105
|
+
md: 800
|
106
|
+
};
|
107
|
+
const style = {
|
108
|
+
transform: [{
|
109
|
+
translateX: {
|
110
|
+
sm: 120,
|
111
|
+
md: 200
|
112
|
+
},
|
113
|
+
translateY: 200
|
114
|
+
}]
|
115
|
+
};
|
116
|
+
expect((0, _styles.parseStyle)(style, breakpoint, screenSize, breakpoints)).toEqual({
|
117
|
+
transform: [{
|
118
|
+
translateX: 120,
|
119
|
+
translateY: 200
|
120
|
+
}]
|
121
|
+
});
|
122
|
+
});
|
123
|
+
it('should correctly parse shadowOffset styles', () => {
|
124
|
+
const screenSize = {
|
125
|
+
width: 400,
|
126
|
+
height: 800
|
127
|
+
};
|
128
|
+
const breakpoint = 'sm';
|
129
|
+
const breakpoints = {
|
130
|
+
xs: 0,
|
131
|
+
sm: 400,
|
132
|
+
md: 800
|
133
|
+
};
|
134
|
+
const style = {
|
135
|
+
shadowOffset: {
|
136
|
+
width: 0,
|
137
|
+
height: 4
|
138
|
+
}
|
139
|
+
};
|
140
|
+
const styleWithBreakpoints = {
|
141
|
+
shadowOffset: {
|
142
|
+
width: 0,
|
143
|
+
height: {
|
144
|
+
sm: 10,
|
145
|
+
md: 20
|
146
|
+
}
|
147
|
+
}
|
148
|
+
};
|
149
|
+
expect((0, _styles.parseStyle)(style, breakpoint, screenSize, breakpoints)).toEqual({
|
150
|
+
shadowOffset: {
|
151
|
+
width: 0,
|
152
|
+
height: 4
|
153
|
+
}
|
154
|
+
});
|
155
|
+
expect((0, _styles.parseStyle)(styleWithBreakpoints, breakpoint, screenSize, breakpoints)).toEqual({
|
156
|
+
shadowOffset: {
|
157
|
+
width: 0,
|
158
|
+
height: 10
|
159
|
+
}
|
160
|
+
});
|
161
|
+
});
|
96
162
|
});
|
97
163
|
});
|
98
164
|
//# sourceMappingURL=styles.spec.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_styles","require","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","proxifyFunction","toEqual","style","fontSize","fontWeight","parseStyle"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["_styles","require","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","proxifyFunction","toEqual","style","fontSize","fontWeight","parseStyle","transform","translateX","translateY","shadowOffset","styleWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
@@ -1,14 +1,28 @@
|
|
1
1
|
import { useContext } from 'react';
|
2
|
-
import { useWindowDimensions } from 'react-native';
|
3
2
|
import { UnistylesContext } from './UnistylesTheme';
|
4
3
|
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils';
|
4
|
+
import { useDimensions } from './hooks';
|
5
5
|
export const createUnistyles = breakpoints => {
|
6
6
|
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
|
7
7
|
return {
|
8
|
-
|
8
|
+
/**
|
9
|
+
* @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
|
10
|
+
*/
|
11
|
+
createStyles: styles => {
|
12
|
+
if (typeof styles === 'function') {
|
13
|
+
return styles;
|
14
|
+
}
|
15
|
+
return styles;
|
16
|
+
},
|
17
|
+
createStyleSheet: styles => {
|
18
|
+
if (typeof styles === 'function') {
|
19
|
+
return styles;
|
20
|
+
}
|
21
|
+
return styles;
|
22
|
+
},
|
9
23
|
useStyles: stylesheet => {
|
10
24
|
const theme = useContext(UnistylesContext);
|
11
|
-
const dimensions =
|
25
|
+
const dimensions = useDimensions();
|
12
26
|
const breakpoint = getBreakpointFromScreenWidth(dimensions.width, sortedBreakpoints);
|
13
27
|
const screenSize = {
|
14
28
|
width: dimensions.width,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useContext","
|
1
|
+
{"version":3,"names":["useContext","UnistylesContext","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","useDimensions","createUnistyles","breakpoints","sortedBreakpoints","createStyles","styles","createStyleSheet","useStyles","stylesheet","theme","dimensions","breakpoint","width","screenSize","height","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","x"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAElC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAC/G,SAASC,aAAa,QAAQ,SAAS;AAEvC,OAAO,MAAMC,eAAe,GAA8CC,WAAc,IAAK;EACzF,MAAMC,iBAAiB,GAAGJ,0BAA0B,CAACG,WAAW,CAAC;EAEjE,OAAO;IACH;AACR;AACA;IACQE,YAAY,EAAyCC,MAAqF,IAAY;MAClJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,gBAAgB,EAAyCD,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDE,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGf,UAAU,CAACC,gBAAgB,CAAM;MAC/C,MAAMe,UAAU,GAAGV,aAAa,CAAC,CAAC;MAClC,MAAMW,UAAU,GAAGf,4BAA4B,CAAIc,UAAU,CAACE,KAAK,EAAET,iBAAiB,CAAC;MACvF,MAAMU,UAAsB,GAAG;QAC3BD,KAAK,EAAEF,UAAU,CAACE,KAAK;QACvBE,MAAM,EAAEJ,UAAU,CAACI;MACvB,CAAC;MAED,IAAI,CAACN,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLJ,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMU,YAAY,GAAG,OAAOP,UAAU,KAAK,UAAU,GAC/CA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU;MAEhB,MAAMQ,iBAAiB,GAAGC,MAAM,CAC3BC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,CAAC,GAAGD,KAAiC;QAE3C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGzB,eAAe,CAAI0B,KAAK,EAAEZ,UAAU,EAAEE,UAAU,EAAEV,iBAAiB;UAC9E,CAAC;QACL;QAEA,OAAO;UACH,GAAGiB,GAAG;UACN,CAACE,GAAG,GAAGxB,UAAU,CAAQ0B,CAAC,EAAEb,UAAU,EAAEE,UAAU,EAAEV,iBAAiB;QACzE,CAAC;MACL,CAAC,EAAE,CAAC,CAAO,CAAC;MAEhB,OAAO;QACHM,KAAK;QACLJ,MAAM,EAAEW;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["useDimensions"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":"AAAA,SAASA,aAAa,QAAQ,iBAAiB"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["useWindowDimensions","useDimensions","width","height"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAGlD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAM;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGH,mBAAmB,CAAC,CAAC;EAE/C,OAAO;IACHE,KAAK;IACLC;EACJ,CAAC;AACL,CAAC"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { useEffect, useRef, useState } from 'react';
|
2
|
+
export const useDimensions = () => {
|
3
|
+
const timerRef = useRef();
|
4
|
+
const [screenSize, setScreenSize] = useState({
|
5
|
+
width: window.innerWidth,
|
6
|
+
height: window.innerHeight
|
7
|
+
});
|
8
|
+
useEffect(() => {
|
9
|
+
const handleResize = () => {
|
10
|
+
clearTimeout(timerRef.current);
|
11
|
+
timerRef.current = setTimeout(() => setScreenSize({
|
12
|
+
width: window.innerWidth,
|
13
|
+
height: window.innerHeight
|
14
|
+
}), 100);
|
15
|
+
};
|
16
|
+
window.addEventListener('resize', handleResize);
|
17
|
+
return () => {
|
18
|
+
window.removeEventListener('resize', handleResize);
|
19
|
+
clearTimeout(timerRef.current);
|
20
|
+
};
|
21
|
+
}, []);
|
22
|
+
return screenSize;
|
23
|
+
};
|
24
|
+
//# sourceMappingURL=useDimensions.web.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["useEffect","useRef","useState","useDimensions","timerRef","screenSize","setScreenSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAGnD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGH,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACI,UAAU,EAAEC,aAAa,CAAC,GAAGJ,QAAQ,CAAa;IACrDK,KAAK,EAAEC,MAAM,CAACC,UAAU;IACxBC,MAAM,EAAEF,MAAM,CAACG;EACnB,CAAC,CAAC;EAEFX,SAAS,CAAC,MAAM;IACZ,MAAMY,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;MAE9BV,QAAQ,CAACU,OAAO,GAAGC,UAAU,CAAC,MAAMT,aAAa,CAAC;QAC9CC,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,UAAU;AACrB,CAAC"}
|
@@ -50,14 +50,24 @@ export const proxifyFunction = (fn, breakpoint, screenSize, breakpoints) => new
|
|
50
50
|
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
51
51
|
* // { fontSize: '12px' }
|
52
52
|
*/
|
53
|
-
export const parseStyle = (style, breakpoint, screenSize, breakpoints) =>
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
53
|
+
export const parseStyle = (style, breakpoint, screenSize, breakpoints) => {
|
54
|
+
const entries = Object.entries(style);
|
55
|
+
return Object.fromEntries(entries.map(_ref => {
|
56
|
+
let [key, value] = _ref;
|
57
|
+
const isNestedStyle = key === 'shadowOffset';
|
58
|
+
if (isNestedStyle) {
|
59
|
+
return [key, parseStyle(value, breakpoint, screenSize, breakpoints)];
|
60
|
+
}
|
61
|
+
const isTransform = key === 'transform';
|
62
|
+
if (isTransform && Array.isArray(value)) {
|
63
|
+
return [key, value.map(value => parseStyle(value, breakpoint, screenSize, breakpoints))];
|
64
|
+
}
|
65
|
+
const isDynamicFunction = typeof value === 'function';
|
66
|
+
const isValidStyle = typeof value !== 'object';
|
67
|
+
if (isDynamicFunction || isValidStyle) {
|
68
|
+
return [key, value];
|
69
|
+
}
|
70
|
+
return [key, getValueForBreakpoint(value, breakpoint, screenSize, breakpoints)];
|
71
|
+
}));
|
72
|
+
};
|
63
73
|
//# sourceMappingURL=styles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","
|
1
|
+
{"version":3,"names":["getValueForBreakpoint","proxifyFunction","fn","breakpoint","screenSize","breakpoints","Proxy","apply","target","thisArg","argumentsList","parseStyle","style","entries","Object","fromEntries","map","_ref","key","value","isNestedStyle","isTransform","Array","isArray","isDynamicFunction","isValidStyle"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":"AACA,SAASA,qBAAqB,QAAQ,eAAe;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA4B,EAC1CC,UAAsB,EACtBC,WAAc,KACH,IAAIC,KAAK,CAACJ,EAAE,EAAE;EACzBK,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEP,UAAU,EAAEC,UAAU,EAAEC,WAAW;AAC5F,CAAC,CAAC;;AAEF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMM,UAAU,GAAGA,CACtBC,KAA8B,EAC9BT,UAA4B,EAC5BC,UAAsB,EACtBC,WAAc,KACV;EACJ,MAAMQ,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,CAGnC;EAED,OAAOE,MAAM,CACRC,WAAW,CAACF,OAAO,CACfG,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACd,MAAMG,aAAa,GAAGF,GAAG,KAAK,cAAc;IAE5C,IAAIE,aAAa,EAAE;MACf,OAAO,CACHF,GAAG,EACHP,UAAU,CAACQ,KAAK,EAA6BhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CACpF;IACL;IAEA,MAAMgB,WAAW,GAAGH,GAAG,KAAK,WAAW;IAEvC,IAAIG,WAAW,IAAIC,KAAK,CAACC,OAAO,CAACJ,KAAK,CAAC,EAAE;MACrC,OAAO,CACHD,GAAG,EACHC,KAAK,CAACH,GAAG,CAACG,KAAK,IAAIR,UAAU,CAACQ,KAAK,EAAEhB,UAAU,EAAEC,UAAU,EAAEC,WAAW,CAAC,CAAC,CAC7E;IACL;IAEA,MAAMmB,iBAAiB,GAAG,OAAOL,KAAK,KAAK,UAAU;IACrD,MAAMM,YAAY,GAAG,OAAON,KAAK,KAAK,QAAQ;IAE9C,IAAIK,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACP,GAAG,EAAEC,KAAK,CAAC;IACvB;IAEA,OAAO,CACHD,GAAG,EACHlB,qBAAqB,CACjBmB,KAAK,EACLhB,UAAU,EACVC,UAAU,EACVC,WACJ,CAAC,CACJ;EACL,CAAC,CACL,CAAC;AACT,CAAC"}
|
@@ -91,6 +91,72 @@ describe('styles', () => {
|
|
91
91
|
fontWeight: 'bold'
|
92
92
|
});
|
93
93
|
});
|
94
|
+
it('should correctly parse transform styles', () => {
|
95
|
+
const screenSize = {
|
96
|
+
width: 400,
|
97
|
+
height: 800
|
98
|
+
};
|
99
|
+
const breakpoint = 'sm';
|
100
|
+
const breakpoints = {
|
101
|
+
xs: 0,
|
102
|
+
sm: 400,
|
103
|
+
md: 800
|
104
|
+
};
|
105
|
+
const style = {
|
106
|
+
transform: [{
|
107
|
+
translateX: {
|
108
|
+
sm: 120,
|
109
|
+
md: 200
|
110
|
+
},
|
111
|
+
translateY: 200
|
112
|
+
}]
|
113
|
+
};
|
114
|
+
expect(parseStyle(style, breakpoint, screenSize, breakpoints)).toEqual({
|
115
|
+
transform: [{
|
116
|
+
translateX: 120,
|
117
|
+
translateY: 200
|
118
|
+
}]
|
119
|
+
});
|
120
|
+
});
|
121
|
+
it('should correctly parse shadowOffset styles', () => {
|
122
|
+
const screenSize = {
|
123
|
+
width: 400,
|
124
|
+
height: 800
|
125
|
+
};
|
126
|
+
const breakpoint = 'sm';
|
127
|
+
const breakpoints = {
|
128
|
+
xs: 0,
|
129
|
+
sm: 400,
|
130
|
+
md: 800
|
131
|
+
};
|
132
|
+
const style = {
|
133
|
+
shadowOffset: {
|
134
|
+
width: 0,
|
135
|
+
height: 4
|
136
|
+
}
|
137
|
+
};
|
138
|
+
const styleWithBreakpoints = {
|
139
|
+
shadowOffset: {
|
140
|
+
width: 0,
|
141
|
+
height: {
|
142
|
+
sm: 10,
|
143
|
+
md: 20
|
144
|
+
}
|
145
|
+
}
|
146
|
+
};
|
147
|
+
expect(parseStyle(style, breakpoint, screenSize, breakpoints)).toEqual({
|
148
|
+
shadowOffset: {
|
149
|
+
width: 0,
|
150
|
+
height: 4
|
151
|
+
}
|
152
|
+
});
|
153
|
+
expect(parseStyle(styleWithBreakpoints, breakpoint, screenSize, breakpoints)).toEqual({
|
154
|
+
shadowOffset: {
|
155
|
+
width: 0,
|
156
|
+
height: 10
|
157
|
+
}
|
158
|
+
});
|
159
|
+
});
|
94
160
|
});
|
95
161
|
});
|
96
162
|
//# sourceMappingURL=styles.spec.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
1
|
+
{"version":3,"names":["parseStyle","proxifyFunction","describe","it","screenSize","width","height","breakpoint","breakpoints","xs","sm","md","dynamicFunction","isEven","backgroundColor","expect","toEqual","style","fontSize","fontWeight","transform","translateX","translateY","shadowOffset","styleWithBreakpoints"],"sourceRoot":"../../../src","sources":["utils/styles.spec.ts"],"mappings":"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"}
|
@@ -1,6 +1,10 @@
|
|
1
1
|
import type { CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
2
|
export declare const createUnistyles: <B extends Record<string, number>, T = {}>(breakpoints: B) => {
|
3
|
-
|
3
|
+
/**
|
4
|
+
* @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
|
5
|
+
*/
|
6
|
+
createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
|
7
|
+
createStyleSheet: <S_1 extends CustomNamedStyles<S_1, B>, X_1>(styles: S_1 | X_1 | CustomNamedStyles<S_1, B> | ((theme: T) => X_1 | CustomNamedStyles<X_1, B>)) => S_1 | X_1;
|
4
8
|
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
|
5
9
|
theme: T;
|
6
10
|
styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAc,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK3H,eAAO,MAAM,eAAe;IAIpB;;OAEG;;;;;;;CA2DV,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useDimensions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UAOhC,CAAA"}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAE1C,eAAO,MAAM,aAAa,QAAO,UA0BhC,CAAA"}
|
@@ -1,19 +1,37 @@
|
|
1
|
-
import type { ImageStyle, TextStyle,
|
2
|
-
import type {
|
1
|
+
import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
2
|
+
import type { MatrixTransform, PerpectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
|
3
3
|
export type ScreenSize = {
|
4
4
|
width: number;
|
5
5
|
height: number;
|
6
6
|
};
|
7
|
-
export type CreateStylesFactory<
|
7
|
+
export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST;
|
8
8
|
type StyleProperty<T, B extends Record<string, number>> = {
|
9
|
-
[
|
10
|
-
[innerKey in keyof B]?: T[
|
9
|
+
[K in keyof T]: {
|
10
|
+
[innerKey in keyof B]?: T[K];
|
11
11
|
} | {
|
12
|
-
[innerKey in
|
13
|
-
} | T[
|
12
|
+
[innerKey in string]?: T[K];
|
13
|
+
} | T[K];
|
14
14
|
};
|
15
|
+
type ShadowOffsetProps<B extends Record<string, number>> = {
|
16
|
+
shadowOffset: {
|
17
|
+
width: number | {
|
18
|
+
[innerKey in keyof B]?: number;
|
19
|
+
};
|
20
|
+
height: number | {
|
21
|
+
[innerKey in keyof B]?: number;
|
22
|
+
};
|
23
|
+
};
|
24
|
+
};
|
25
|
+
type TransformStyles<B extends Record<string, number>> = PerpectiveTransform | StyleProperty<PerpectiveTransform, B> | RotateTransform | StyleProperty<RotateTransform, B> | RotateXTransform | StyleProperty<RotateXTransform, B> | RotateYTransform | StyleProperty<RotateYTransform, B> | RotateZTransform | StyleProperty<RotateZTransform, B> | ScaleTransform | StyleProperty<ScaleTransform, B> | ScaleXTransform | StyleProperty<ScaleXTransform, B> | ScaleYTransform | StyleProperty<ScaleYTransform, B> | TranslateXTransform | StyleProperty<TranslateXTransform, B> | TranslateYTransform | StyleProperty<TranslateYTransform, B> | SkewXTransform | StyleProperty<SkewXTransform, B> | SkewYTransform | StyleProperty<SkewYTransform, B> | MatrixTransform | StyleProperty<MatrixTransform, B>;
|
26
|
+
type TransformProps<B extends Record<string, number>> = {
|
27
|
+
transform: Array<TransformStyles<B>>;
|
28
|
+
};
|
29
|
+
type UnistyleView = Omit<Omit<ViewStyle, 'shadowOffset'>, 'transform'>;
|
30
|
+
type UnistyleText = Omit<Omit<TextStyle, 'shadowOffset'>, 'transform'>;
|
31
|
+
type UnistyleImage = Omit<Omit<ImageStyle, 'shadowOffset'>, 'transform'>;
|
32
|
+
export type StaticStyles<B extends Record<string, number>> = (UnistyleView | StyleProperty<UnistyleView, B>) | (UnistyleText | StyleProperty<UnistyleText, B>) | (UnistyleImage | StyleProperty<UnistyleImage, B>) & TransformProps<B> & ShadowOffsetProps<B>;
|
15
33
|
export type CustomNamedStyles<T, B extends Record<string, number>> = {
|
16
|
-
[
|
34
|
+
[K in keyof T]: T[K] extends (...args: infer A) => unknown ? (...args: A) => StaticStyles<B> : StaticStyles<B>;
|
17
35
|
};
|
18
36
|
export type ExtractBreakpoints<T, B extends Record<string, number>> = T extends Partial<Record<keyof B & string, infer V>> ? V : T extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : {
|
19
37
|
[K in keyof T]: T[K] extends (...args: infer A) => infer R ? (...args: A) => ExtractBreakpoints<R, B> : T[K] extends object ? ExtractBreakpoints<T[K], B> : T[K];
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
|
@@ -46,7 +46,5 @@ export declare const proxifyFunction: <B extends Record<string, number>>(fn: Fun
|
|
46
46
|
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
47
47
|
* // { fontSize: '12px' }
|
48
48
|
*/
|
49
|
-
export declare const parseStyle: <T, B extends Record<string, number>>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) =>
|
50
|
-
[k: string]: unknown;
|
51
|
-
};
|
49
|
+
export declare const parseStyle: <T, B extends Record<string, number>>(style: CustomNamedStyles<T, B>, breakpoint: keyof B & string, screenSize: ScreenSize, breakpoints: B) => T;
|
52
50
|
//# sourceMappingURL=styles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,yCACpB,QAAQ,4CACA,UAAU,qBAEvB,QAGD,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,UAAU,kHAGP,UAAU,sBA+CzB,CAAA"}
|
package/package.json
CHANGED
package/src/createUnistyles.ts
CHANGED
@@ -1,17 +1,33 @@
|
|
1
1
|
import { useContext } from 'react'
|
2
|
-
import { useWindowDimensions } from 'react-native'
|
3
2
|
import type { CreateStylesFactory, CustomNamedStyles, ScreenSize, ExtractBreakpoints, RemoveKeysWithPrefix } from './types'
|
4
3
|
import { UnistylesContext } from './UnistylesTheme'
|
5
4
|
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
|
5
|
+
import { useDimensions } from './hooks'
|
6
6
|
|
7
7
|
export const createUnistyles = <B extends Record<string, number>, T = {}>(breakpoints: B) => {
|
8
|
-
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
|
8
|
+
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
|
9
9
|
|
10
10
|
return {
|
11
|
-
|
11
|
+
/**
|
12
|
+
* @deprecated The method should not be used, proposed version by the community is createStyleSheet, will be removed in RC
|
13
|
+
*/
|
14
|
+
createStyles: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
|
15
|
+
if (typeof styles === 'function') {
|
16
|
+
return styles as X
|
17
|
+
}
|
18
|
+
|
19
|
+
return styles as S
|
20
|
+
},
|
21
|
+
createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | CustomNamedStyles<S, B> | X | ((theme: T) => X | CustomNamedStyles<X, B>)): S | X => {
|
22
|
+
if (typeof styles === 'function') {
|
23
|
+
return styles as X
|
24
|
+
}
|
25
|
+
|
26
|
+
return styles as S
|
27
|
+
},
|
12
28
|
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
|
13
29
|
const theme = useContext(UnistylesContext) as T
|
14
|
-
const dimensions =
|
30
|
+
const dimensions = useDimensions()
|
15
31
|
const breakpoint = getBreakpointFromScreenWidth<B>(dimensions.width, sortedBreakpoints)
|
16
32
|
const screenSize: ScreenSize = {
|
17
33
|
width: dimensions.width,
|
@@ -0,0 +1 @@
|
|
1
|
+
export { useDimensions } from './useDimensions'
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { useEffect, useRef, useState } from 'react'
|
2
|
+
import type { ScreenSize } from '../types'
|
3
|
+
|
4
|
+
export const useDimensions = (): ScreenSize => {
|
5
|
+
const timerRef = useRef<ReturnType<typeof setTimeout>>()
|
6
|
+
const [screenSize, setScreenSize] = useState<ScreenSize>({
|
7
|
+
width: window.innerWidth,
|
8
|
+
height: window.innerHeight
|
9
|
+
})
|
10
|
+
|
11
|
+
useEffect(() => {
|
12
|
+
const handleResize = () => {
|
13
|
+
clearTimeout(timerRef.current)
|
14
|
+
|
15
|
+
timerRef.current = setTimeout(() => setScreenSize({
|
16
|
+
width: window.innerWidth,
|
17
|
+
height: window.innerHeight
|
18
|
+
}), 100)
|
19
|
+
}
|
20
|
+
|
21
|
+
window.addEventListener('resize', handleResize)
|
22
|
+
|
23
|
+
return () => {
|
24
|
+
window.removeEventListener('resize', handleResize)
|
25
|
+
clearTimeout(timerRef.current)
|
26
|
+
}
|
27
|
+
}, [])
|
28
|
+
|
29
|
+
return screenSize
|
30
|
+
}
|