react-native-unistyles 1.0.0-rc.1 → 1.0.0-rc.2
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/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>}`
|