react-native-unistyles 1.0.0-rc.1 → 1.0.0-rc.2
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +6 -1
- package/lib/commonjs/createUnistyles.js +6 -4
- package/lib/commonjs/createUnistyles.js.map +1 -1
- package/lib/commonjs/hooks/useDimensions.js +1 -10
- package/lib/commonjs/hooks/useDimensions.js.map +1 -1
- package/lib/module/createUnistyles.js +7 -5
- package/lib/module/createUnistyles.js.map +1 -1
- package/lib/module/hooks/useDimensions.js +1 -10
- package/lib/module/hooks/useDimensions.js.map +1 -1
- package/lib/typescript/src/createUnistyles.d.ts +1 -0
- package/lib/typescript/src/createUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useDimensions.d.ts.map +1 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +7 -1
- package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/__tests__/createUnistyles.spec.tsx +34 -0
- package/src/createUnistyles.ts +8 -6
- package/src/hooks/useDimensions.ts +1 -8
- package/src/types/mediaQueries.ts +8 -67
package/README.md
CHANGED
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
<img alt="react-native-unistyles" src="assets/uni-light.svg">
|
|
7
7
|
</picture>
|
|
8
8
|
|
|
9
|
+
|
|
10
|
+
[](https://www.npmjs.com/package/react-native-unistyles)
|
|
11
|
+
|
|
12
|
+
[](https://opensource.org/licenses/MIT)
|
|
13
|
+
|
|
9
14
|
## Features
|
|
10
15
|
- ⚡ Blazing fast, adds around ~3ms on top of StyleSheet*
|
|
11
16
|
- 🎳 Share up to 100% of your styles across platforms in monorepo
|
|
@@ -21,7 +26,7 @@
|
|
|
21
26
|
## Installation
|
|
22
27
|
|
|
23
28
|
```cmd
|
|
24
|
-
yarn add react-native-unistyles
|
|
29
|
+
yarn add react-native-unistyles@rc
|
|
25
30
|
```
|
|
26
31
|
|
|
27
32
|
## [Documentation](https://reactnativeunistyles.vercel.app/)
|
|
@@ -22,15 +22,16 @@ const createUnistyles = breakpoints => {
|
|
|
22
22
|
useStyles: stylesheet => {
|
|
23
23
|
const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
|
|
24
24
|
const screenSize = (0, _hooks.useDimensions)();
|
|
25
|
+
const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
|
|
25
26
|
if (!stylesheet) {
|
|
26
27
|
return {
|
|
27
28
|
theme,
|
|
29
|
+
breakpoint,
|
|
28
30
|
styles: {}
|
|
29
31
|
};
|
|
30
32
|
}
|
|
31
|
-
const parsedStyles = typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet;
|
|
32
|
-
const
|
|
33
|
-
const dynamicStyleSheet = Object.entries(parsedStyles).reduce((acc, _ref) => {
|
|
33
|
+
const parsedStyles = (0, _react.useMemo)(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
|
|
34
|
+
const dynamicStyleSheet = (0, _react.useMemo)(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
|
|
34
35
|
let [key, value] = _ref;
|
|
35
36
|
const style = value;
|
|
36
37
|
if (typeof value === 'function') {
|
|
@@ -43,9 +44,10 @@ const createUnistyles = breakpoints => {
|
|
|
43
44
|
...acc,
|
|
44
45
|
[key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
|
|
45
46
|
});
|
|
46
|
-
}, {});
|
|
47
|
+
}, {}), [breakpoint, screenSize, parsedStyles]);
|
|
47
48
|
return {
|
|
48
49
|
theme,
|
|
50
|
+
breakpoint,
|
|
49
51
|
styles: dynamicStyleSheet
|
|
50
52
|
};
|
|
51
53
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","screenSize","useDimensions","
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_UnistylesTheme","_hooks","_utils","createUnistyles","breakpoints","sortedBreakpoints","sortAndValidateBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","useContext","UnistylesContext","screenSize","useDimensions","breakpoint","getBreakpointFromScreenWidth","width","parsedStyles","useMemo","dynamicStyleSheet","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AASA,IAAAE,eAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEO,MAAMK,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAG,IAAAC,iCAA0B,EAACF,WAAW,CAAC;EACjE,MAAMG,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACJ,iBAAiB,CAA+B;EAE7D,OAAO;IACHK,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAG,IAAAC,iBAAU,EAACC,gCAAgB,CAAM;MAC/C,MAAMC,UAAU,GAAG,IAAAC,oBAAa,EAAC,CAAC;MAClC,MAAMC,UAAU,GAAG,IAAAC,mCAA4B,EAAIH,UAAU,CAACI,KAAK,EAAEd,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLK,UAAU;UACVR,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMW,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOV,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMW,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAMf,MAAM,CACzCC,OAAO,CAACa,YAAY,CAAC,CACrBG,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAG,IAAAG,sBAAe,EAAIF,KAAK,EAAEV,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOyB,uBAAU,CAACC,MAAM,CAAC;UACrB,GAAGP,GAAG;UACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAQJ,KAAK,EAAEX,UAAU,EAAEF,UAAU,EAAEV,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACY,UAAU,EAAEF,UAAU,EAAEK,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHR,KAAK;QACLK,UAAU;QACVR,MAAM,EAAEa;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC;AAAAW,OAAA,CAAAhC,eAAA,GAAAA,eAAA"}
|
|
@@ -5,15 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useDimensions = void 0;
|
|
7
7
|
var _reactNative = require("react-native");
|
|
8
|
-
const useDimensions = () =>
|
|
9
|
-
const {
|
|
10
|
-
width,
|
|
11
|
-
height
|
|
12
|
-
} = (0, _reactNative.useWindowDimensions)();
|
|
13
|
-
return {
|
|
14
|
-
width,
|
|
15
|
-
height
|
|
16
|
-
};
|
|
17
|
-
};
|
|
8
|
+
const useDimensions = () => (0, _reactNative.useWindowDimensions)();
|
|
18
9
|
exports.useDimensions = useDimensions;
|
|
19
10
|
//# sourceMappingURL=useDimensions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","useDimensions","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","useDimensions","useWindowDimensions","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAGO,MAAMC,aAAa,GAAGA,CAAA,KAAkB,IAAAC,gCAAmB,EAAC,CAAC;AAAAC,OAAA,CAAAF,aAAA,GAAAA,aAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
1
|
+
import { useContext, useMemo } from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
|
3
3
|
import { UnistylesContext } from './UnistylesTheme';
|
|
4
4
|
import { useDimensions } from './hooks';
|
|
@@ -16,15 +16,16 @@ export const createUnistyles = breakpoints => {
|
|
|
16
16
|
useStyles: stylesheet => {
|
|
17
17
|
const theme = useContext(UnistylesContext);
|
|
18
18
|
const screenSize = useDimensions();
|
|
19
|
+
const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
|
|
19
20
|
if (!stylesheet) {
|
|
20
21
|
return {
|
|
21
22
|
theme,
|
|
23
|
+
breakpoint,
|
|
22
24
|
styles: {}
|
|
23
25
|
};
|
|
24
26
|
}
|
|
25
|
-
const parsedStyles = typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet;
|
|
26
|
-
const
|
|
27
|
-
const dynamicStyleSheet = Object.entries(parsedStyles).reduce((acc, _ref) => {
|
|
27
|
+
const parsedStyles = useMemo(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
|
|
28
|
+
const dynamicStyleSheet = useMemo(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
|
|
28
29
|
let [key, value] = _ref;
|
|
29
30
|
const style = value;
|
|
30
31
|
if (typeof value === 'function') {
|
|
@@ -37,9 +38,10 @@ export const createUnistyles = breakpoints => {
|
|
|
37
38
|
...acc,
|
|
38
39
|
[key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
|
|
39
40
|
});
|
|
40
|
-
}, {});
|
|
41
|
+
}, {}), [breakpoint, screenSize, parsedStyles]);
|
|
41
42
|
return {
|
|
42
43
|
theme,
|
|
44
|
+
breakpoint,
|
|
43
45
|
styles: dynamicStyleSheet
|
|
44
46
|
};
|
|
45
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useContext","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","
|
|
1
|
+
{"version":3,"names":["useContext","useMemo","StyleSheet","UnistylesContext","useDimensions","getBreakpointFromScreenWidth","proxifyFunction","parseStyle","sortAndValidateBreakpoints","createUnistyles","breakpoints","sortedBreakpoints","sortedBreakpointEntries","Object","entries","createStyleSheet","styles","useStyles","stylesheet","theme","screenSize","breakpoint","width","parsedStyles","dynamicStyleSheet","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["createUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAC3C,SAASC,UAAU,QAAQ,cAAc;AASzC,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,aAAa,QAAQ,SAAS;AACvC,SAASC,4BAA4B,EAAEC,eAAe,EAAEC,UAAU,EAAEC,0BAA0B,QAAQ,SAAS;AAE/G,OAAO,MAAMC,eAAe,GAAmCC,WAAc,IAAK;EAC9E,MAAMC,iBAAiB,GAAGH,0BAA0B,CAACE,WAAW,CAAC;EACjE,MAAME,uBAAuB,GAAGC,MAAM,CACjCC,OAAO,CAACH,iBAAiB,CAA+B;EAE7D,OAAO;IACHI,gBAAgB,EAAyCC,MAAqF,IAAY;MACtJ,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;QAC9B,OAAOA,MAAM;MACjB;MAEA,OAAOA,MAAM;IACjB,CAAC;IACDC,SAAS,EAAwCC,UAA4C,IAAK;MAC9F,MAAMC,KAAK,GAAGnB,UAAU,CAACG,gBAAgB,CAAM;MAC/C,MAAMiB,UAAU,GAAGhB,aAAa,CAAC,CAAC;MAClC,MAAMiB,UAAU,GAAGhB,4BAA4B,CAAIe,UAAU,CAACE,KAAK,EAAEV,uBAAuB,CAAC;MAE7F,IAAI,CAACM,UAAU,EAAE;QACb,OAAO;UACHC,KAAK;UACLE,UAAU;UACVL,MAAM,EAAE,CAAC;QACb,CAAC;MACL;MAEA,MAAMO,YAAY,GAAGtB,OAAO,CAAC,MAAM,OAAOiB,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;MAEtC,MAAMM,iBAAiB,GAAGvB,OAAO,CAAC,MAAMY,MAAM,CACzCC,OAAO,CAACS,YAAY,CAAC,CACrBE,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;QAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;QACtB,MAAMG,KAAK,GAAGD,KAAiC;QAE/C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;UAC7B,OAAO;YACH,GAAGH,GAAG;YACN,CAACE,GAAG,GAAGtB,eAAe,CAAIuB,KAAK,EAAER,UAAU,EAAED,UAAU,EAAER,uBAAuB;UACpF,CAAC;QACL;QAEA,OAAOV,UAAU,CAAC6B,MAAM,CAAC;UACrB,GAAGL,GAAG;UACN,CAACE,GAAG,GAAGrB,UAAU,CAAQuB,KAAK,EAAET,UAAU,EAAED,UAAU,EAAER,uBAAuB;QACnF,CAAC,CAAC;MACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACS,UAAU,EAAED,UAAU,EAAEG,YAAY,CAAC,CAAC;MAEzD,OAAO;QACHJ,KAAK;QACLE,UAAU;QACVL,MAAM,EAAEQ;MACZ,CAAC;IACL;EACJ,CAAC;AACL,CAAC"}
|
|
@@ -1,12 +1,3 @@
|
|
|
1
1
|
import { useWindowDimensions } from 'react-native';
|
|
2
|
-
export const useDimensions = () =>
|
|
3
|
-
const {
|
|
4
|
-
width,
|
|
5
|
-
height
|
|
6
|
-
} = useWindowDimensions();
|
|
7
|
-
return {
|
|
8
|
-
width,
|
|
9
|
-
height
|
|
10
|
-
};
|
|
11
|
-
};
|
|
2
|
+
export const useDimensions = () => useWindowDimensions();
|
|
12
3
|
//# sourceMappingURL=useDimensions.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useWindowDimensions","useDimensions"
|
|
1
|
+
{"version":3,"names":["useWindowDimensions","useDimensions"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.ts"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,cAAc;AAGlD,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkBD,mBAAmB,CAAC,CAAC"}
|
|
@@ -3,6 +3,7 @@ export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoint
|
|
|
3
3
|
createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
|
|
4
4
|
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
|
|
5
5
|
theme: T;
|
|
6
|
+
breakpoint: keyof B & string;
|
|
6
7
|
styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
|
|
7
8
|
};
|
|
8
9
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"createUnistyles.d.ts","sourceRoot":"","sources":["../../../src/createUnistyles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACR,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EAEvB,MAAM,SAAS,CAAA;AAKhB,eAAO,MAAM,eAAe;;;;;;;CAuD3B,CAAA"}
|
|
@@ -1 +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,
|
|
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,UAAmC,CAAA"}
|
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
type Optional<TOptional extends string> = TOptional | '';
|
|
2
|
+
type Separator = ',' | ', ';
|
|
3
|
+
type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`;
|
|
4
|
+
type WidthMediaQuery = `:w${MediaQuery}`;
|
|
5
|
+
type HeightMediaQuery = `:h${MediaQuery}`;
|
|
6
|
+
export type MediaQueries = `${WidthMediaQuery}${Optional<HeightMediaQuery>}` | `${HeightMediaQuery}${Optional<WidthMediaQuery>}`;
|
|
7
|
+
export {};
|
|
2
8
|
//# sourceMappingURL=mediaQueries.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/types/mediaQueries.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"mediaQueries.d.ts","sourceRoot":"","sources":["../../../../src/types/mediaQueries.ts"],"names":[],"mappings":"AAAA,KAAK,QAAQ,CAAC,SAAS,SAAS,MAAM,IAAI,SAAS,GAAG,EAAE,CAAA;AACxD,KAAK,SAAS,GAAG,GAAG,GAAG,IAAI,CAAA;AAE3B,KAAK,UAAU,GAAG,IAAI,SAAS,GAAG,MAAM,GAAG,GAAG,IAAI,MAAM,GAAG,QAAQ,CAAC,GAAG,SAAS,GAAG,MAAM,EAAE,CAAC,GAAG,CAAA;AAC/F,KAAK,eAAe,GAAG,KAAK,UAAU,EAAE,CAAA;AACxC,KAAK,gBAAgB,GAAG,KAAK,UAAU,EAAE,CAAA;AAEzC,MAAM,MAAM,YAAY,GAClB,GAAG,eAAe,GAAG,QAAQ,CAAC,gBAAgB,CAAC,EAAE,GACjD,GAAG,gBAAgB,GAAG,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAA"}
|
package/package.json
CHANGED
|
@@ -154,5 +154,39 @@ describe('createUnistyles', () => {
|
|
|
154
154
|
alignItems: 'row'
|
|
155
155
|
})
|
|
156
156
|
})
|
|
157
|
+
|
|
158
|
+
it ('should return breakpoint even if no stylesheet has been provided', () => {
|
|
159
|
+
const breakpoints = {
|
|
160
|
+
xs: 0,
|
|
161
|
+
sm: 200,
|
|
162
|
+
md: 500,
|
|
163
|
+
lg: 1000
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
const { useStyles } = createUnistyles<typeof breakpoints, {}>(breakpoints)
|
|
167
|
+
const { result } = renderHook(() => useStyles())
|
|
168
|
+
|
|
169
|
+
expect(result.current.breakpoint).toEqual('md')
|
|
170
|
+
})
|
|
171
|
+
|
|
172
|
+
it ('should return breakpoint for stylesheet', () => {
|
|
173
|
+
const breakpoints = {
|
|
174
|
+
xs: 0,
|
|
175
|
+
sm: 200,
|
|
176
|
+
lg: 1000
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
|
|
180
|
+
const stylesheet = createStyleSheet({
|
|
181
|
+
container: {
|
|
182
|
+
flex: 1,
|
|
183
|
+
justifyContent: 'center',
|
|
184
|
+
alignItems: 'center'
|
|
185
|
+
}
|
|
186
|
+
})
|
|
187
|
+
const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
|
|
188
|
+
|
|
189
|
+
expect(result.current.breakpoint).toEqual('sm')
|
|
190
|
+
})
|
|
157
191
|
})
|
|
158
192
|
})
|
package/src/createUnistyles.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext } from 'react'
|
|
1
|
+
import { useContext, useMemo } from 'react'
|
|
2
2
|
import { StyleSheet } from 'react-native'
|
|
3
3
|
import type {
|
|
4
4
|
Breakpoints,
|
|
@@ -28,20 +28,21 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
|
|
|
28
28
|
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
|
|
29
29
|
const theme = useContext(UnistylesContext) as T
|
|
30
30
|
const screenSize = useDimensions()
|
|
31
|
+
const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
|
|
31
32
|
|
|
32
33
|
if (!stylesheet) {
|
|
33
34
|
return {
|
|
34
35
|
theme,
|
|
36
|
+
breakpoint,
|
|
35
37
|
styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
|
|
36
38
|
}
|
|
37
39
|
}
|
|
38
40
|
|
|
39
|
-
const parsedStyles = typeof stylesheet === 'function'
|
|
41
|
+
const parsedStyles = useMemo(() => typeof stylesheet === 'function'
|
|
40
42
|
? stylesheet(theme)
|
|
41
|
-
: stylesheet
|
|
42
|
-
const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
|
|
43
|
+
: stylesheet, [theme, stylesheet])
|
|
43
44
|
|
|
44
|
-
const dynamicStyleSheet = Object
|
|
45
|
+
const dynamicStyleSheet = useMemo(() => Object
|
|
45
46
|
.entries(parsedStyles)
|
|
46
47
|
.reduce((acc, [key, value]) => {
|
|
47
48
|
const style = value as CustomNamedStyles<ST, B>
|
|
@@ -57,10 +58,11 @@ export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) =
|
|
|
57
58
|
...acc,
|
|
58
59
|
[key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
|
|
59
60
|
})
|
|
60
|
-
}, {} as ST)
|
|
61
|
+
}, {} as ST), [breakpoint, screenSize, parsedStyles])
|
|
61
62
|
|
|
62
63
|
return {
|
|
63
64
|
theme,
|
|
65
|
+
breakpoint,
|
|
64
66
|
styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
|
|
65
67
|
}
|
|
66
68
|
}
|
|
@@ -1,11 +1,4 @@
|
|
|
1
1
|
import { useWindowDimensions } from 'react-native'
|
|
2
2
|
import type { ScreenSize } from '../types'
|
|
3
3
|
|
|
4
|
-
export const useDimensions = (): ScreenSize =>
|
|
5
|
-
const { width, height } = useWindowDimensions()
|
|
6
|
-
|
|
7
|
-
return {
|
|
8
|
-
width,
|
|
9
|
-
height
|
|
10
|
-
}
|
|
11
|
-
}
|
|
4
|
+
export const useDimensions = (): ScreenSize => useWindowDimensions()
|
|
@@ -1,69 +1,10 @@
|
|
|
1
|
+
type Optional<TOptional extends string> = TOptional | ''
|
|
2
|
+
type Separator = ',' | ', '
|
|
1
3
|
// this is super weird, but number passes empty string and bigint does not
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
`:
|
|
5
|
-
`:w[,${bigint}]` |
|
|
6
|
-
`:w[, ${bigint}]` |
|
|
7
|
-
`:w[${bigint},${bigint}]` |
|
|
8
|
-
`:w[${bigint}, ${bigint}]` |
|
|
9
|
-
|
|
10
|
-
// For :h
|
|
11
|
-
`:h[${bigint}]` |
|
|
12
|
-
`:h[,${bigint}]` |
|
|
13
|
-
`:h[, ${bigint}]` |
|
|
14
|
-
`:h[${bigint},${bigint}]` |
|
|
15
|
-
`:h[${bigint}, ${bigint}]` |
|
|
4
|
+
type MediaQuery = `[${Separator}${bigint}]` | `[${bigint}${Optional<`${Separator}${bigint}`>}]`
|
|
5
|
+
type WidthMediaQuery = `:w${MediaQuery}`
|
|
6
|
+
type HeightMediaQuery = `:h${MediaQuery}`
|
|
16
7
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
`:w[${bigint}, ${bigint}]:h[${bigint}]` |
|
|
21
|
-
`:w[${bigint}]:h[${bigint},${bigint}]` |
|
|
22
|
-
`:w[${bigint}]:h[${bigint}, ${bigint}]` |
|
|
23
|
-
`:w[${bigint},${bigint}]:h[${bigint},${bigint}]` |
|
|
24
|
-
`:w[${bigint}, ${bigint}]:h[${bigint},${bigint}]` |
|
|
25
|
-
`:w[${bigint},${bigint}]:h[${bigint}, ${bigint}]` |
|
|
26
|
-
`:w[${bigint}, ${bigint}]:h[${bigint}, ${bigint}]` |
|
|
27
|
-
`:w[,${bigint}]:h[,${bigint}]` |
|
|
28
|
-
`:w[, ${bigint}]:h[,${bigint}]` |
|
|
29
|
-
`:w[,${bigint}]:h[, ${bigint}]` |
|
|
30
|
-
`:w[, ${bigint}]:h[, ${bigint}]` |
|
|
31
|
-
`:w[,${bigint}]:h[${bigint}]` |
|
|
32
|
-
`:w[, ${bigint}]:h[${bigint}]` |
|
|
33
|
-
`:w[${bigint}]:h[,${bigint}]` |
|
|
34
|
-
`:w[${bigint}]:h[, ${bigint}]` |
|
|
35
|
-
`:w[,${bigint}]:h[${bigint},${bigint}]` |
|
|
36
|
-
`:w[, ${bigint}]:h[${bigint},${bigint}]` |
|
|
37
|
-
`:w[,${bigint}]:h[${bigint}, ${bigint}]` |
|
|
38
|
-
`:w[, ${bigint}]:h[${bigint}, ${bigint}]` |
|
|
39
|
-
`:w[${bigint},${bigint}]:h[,${bigint}]` |
|
|
40
|
-
`:w[${bigint}, ${bigint}]:h[,${bigint}]` |
|
|
41
|
-
`:w[${bigint},${bigint}]:h[, ${bigint}]` |
|
|
42
|
-
`:w[${bigint}, ${bigint}]:h[, ${bigint}]` |
|
|
43
|
-
|
|
44
|
-
// Combinations of :h and :w
|
|
45
|
-
`:h[${bigint}]:w[${bigint}]` |
|
|
46
|
-
`:h[${bigint},${bigint}]:w[${bigint}]` |
|
|
47
|
-
`:h[${bigint}, ${bigint}]:w[${bigint}]` |
|
|
48
|
-
`:h[${bigint}]:w[${bigint},${bigint}]` |
|
|
49
|
-
`:h[${bigint}]:w[${bigint}, ${bigint}]` |
|
|
50
|
-
`:h[${bigint},${bigint}]:w[${bigint},${bigint}]` |
|
|
51
|
-
`:h[${bigint}, ${bigint}]:w[${bigint},${bigint}]` |
|
|
52
|
-
`:h[${bigint},${bigint}]:w[${bigint}, ${bigint}]` |
|
|
53
|
-
`:h[${bigint}, ${bigint}]:w[${bigint}, ${bigint}]` |
|
|
54
|
-
`:h[,${bigint}]:w[,${bigint}]` |
|
|
55
|
-
`:h[, ${bigint}]:w[,${bigint}]` |
|
|
56
|
-
`:h[,${bigint}]:w[, ${bigint}]` |
|
|
57
|
-
`:h[, ${bigint}]:w[, ${bigint}]` |
|
|
58
|
-
`:h[,${bigint}]:w[${bigint}]` |
|
|
59
|
-
`:h[, ${bigint}]:w[${bigint}]` |
|
|
60
|
-
`:h[${bigint}]:w[,${bigint}]` |
|
|
61
|
-
`:h[${bigint}]:w[, ${bigint}]` |
|
|
62
|
-
`:h[,${bigint}]:w[${bigint},${bigint}]` |
|
|
63
|
-
`:h[, ${bigint}]:w[${bigint},${bigint}]` |
|
|
64
|
-
`:h[,${bigint}]:w[${bigint}, ${bigint}]` |
|
|
65
|
-
`:h[, ${bigint}]:w[${bigint}, ${bigint}]` |
|
|
66
|
-
`:h[${bigint},${bigint}]:w[,${bigint}]` |
|
|
67
|
-
`:h[${bigint}, ${bigint}]:w[,${bigint}]` |
|
|
68
|
-
`:h[${bigint},${bigint}]:w[, ${bigint}]` |
|
|
69
|
-
`:h[${bigint}, ${bigint}]:w[, ${bigint}]`
|
|
8
|
+
export type MediaQueries =
|
|
9
|
+
| `${WidthMediaQuery}${Optional<HeightMediaQuery>}`
|
|
10
|
+
| `${HeightMediaQuery}${Optional<WidthMediaQuery>}`
|