react-native-unistyles 2.0.0-alpha.1 → 2.0.0-alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +4 -4
- package/ios/UnistylesModule.h +12 -0
- package/ios/UnistylesModule.mm +163 -0
- package/ios/UnistylesRuntime.h +48 -0
- package/ios/UnistylesRuntime.mm +228 -0
- package/lib/commonjs/UnistyleRegistry.js +34 -0
- package/lib/commonjs/UnistyleRegistry.js.map +1 -0
- package/lib/commonjs/Unistyles.js +36 -0
- package/lib/commonjs/Unistyles.js.map +1 -0
- package/lib/commonjs/UnistylesEngine.js +22 -0
- package/lib/commonjs/UnistylesEngine.js.map +1 -0
- package/lib/commonjs/UnistylesModule.js +9 -0
- package/lib/commonjs/UnistylesModule.js.map +1 -0
- package/lib/commonjs/UnistylesRuntime.js +63 -0
- package/lib/commonjs/UnistylesRuntime.js.map +1 -0
- package/lib/commonjs/createStyleSheet.js +14 -0
- package/lib/commonjs/createStyleSheet.js.map +1 -0
- package/lib/commonjs/global.js +2 -0
- package/lib/commonjs/global.js.map +1 -0
- package/lib/commonjs/hooks/useDimensions.web.js +3 -2
- package/lib/commonjs/hooks/useDimensions.web.js.map +1 -1
- package/lib/commonjs/index.js +33 -6
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/cxx.js +23 -0
- package/lib/commonjs/types/cxx.js.map +1 -0
- package/lib/commonjs/types/index.js +26 -0
- package/lib/commonjs/types/index.js.map +1 -1
- package/lib/commonjs/types/normalizer.js +6 -0
- package/lib/commonjs/types/normalizer.js.map +1 -0
- package/lib/commonjs/useInitialTheme.js +13 -0
- package/lib/commonjs/useInitialTheme.js.map +1 -0
- package/lib/commonjs/useStyles.js +48 -0
- package/lib/commonjs/useStyles.js.map +1 -0
- package/lib/commonjs/useUnistyles.js +57 -0
- package/lib/commonjs/useUnistyles.js.map +1 -0
- package/lib/commonjs/utils/breakpoints.js +4 -2
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/common.js +3 -3
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +34 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/module.d.js +2 -0
- package/lib/commonjs/utils/module.d.js.map +1 -0
- package/lib/commonjs/utils/normalizeStyles.web.js +13 -13
- package/lib/commonjs/utils/normalizeStyles.web.js.map +1 -1
- package/lib/commonjs/utils/normalizer.js +89 -0
- package/lib/commonjs/utils/normalizer.js.map +1 -0
- package/lib/commonjs/utils/styles.js +7 -7
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/module/UnistyleRegistry.js +27 -0
- package/lib/module/UnistyleRegistry.js.map +1 -0
- package/lib/module/Unistyles.js +30 -0
- package/lib/module/Unistyles.js.map +1 -0
- package/lib/module/UnistylesEngine.js +15 -0
- package/lib/module/UnistylesEngine.js.map +1 -0
- package/lib/module/UnistylesModule.js +3 -0
- package/lib/module/UnistylesModule.js.map +1 -0
- package/lib/module/UnistylesRuntime.js +56 -0
- package/lib/module/UnistylesRuntime.js.map +1 -0
- package/lib/module/createStyleSheet.js +7 -0
- package/lib/module/createStyleSheet.js.map +1 -0
- package/lib/module/global.js +2 -0
- package/lib/module/global.js.map +1 -0
- package/lib/module/hooks/useDimensions.web.js +3 -2
- package/lib/module/hooks/useDimensions.web.js.map +1 -1
- package/lib/module/index.js +18 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/cxx.js +17 -0
- package/lib/module/types/cxx.js.map +1 -0
- package/lib/module/types/index.js +2 -1
- package/lib/module/types/index.js.map +1 -1
- package/lib/module/types/normalizer.js +2 -0
- package/lib/module/types/normalizer.js.map +1 -0
- package/lib/module/useInitialTheme.js +6 -0
- package/lib/module/useInitialTheme.js.map +1 -0
- package/lib/module/useStyles.js +42 -0
- package/lib/module/useStyles.js.map +1 -0
- package/lib/module/useUnistyles.js +50 -0
- package/lib/module/useUnistyles.js.map +1 -0
- package/lib/module/utils/breakpoints.js +4 -3
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +2 -1
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +2 -0
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/module.d.js +2 -0
- package/lib/module/utils/module.d.js.map +1 -0
- package/lib/module/utils/normalizeStyles.web.js +13 -13
- package/lib/module/utils/normalizeStyles.web.js.map +1 -1
- package/lib/module/utils/normalizer.js +79 -0
- package/lib/module/utils/normalizer.js.map +1 -0
- package/lib/module/utils/styles.js +7 -8
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/typescript/examples/expo/src/App.d.ts +3 -0
- package/lib/typescript/examples/expo/src/App.d.ts.map +1 -0
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts +3 -0
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map +1 -0
- package/lib/typescript/examples/expo/src/examples/index.d.ts +2 -0
- package/lib/typescript/examples/expo/src/examples/index.d.ts.map +1 -0
- package/lib/typescript/examples/expo/src/index.d.ts +2 -0
- package/lib/typescript/examples/expo/src/index.d.ts.map +1 -0
- package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts +8 -0
- package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts.map +1 -0
- package/lib/typescript/examples/expo/src/styles/index.d.ts +16 -0
- package/lib/typescript/examples/expo/src/styles/index.d.ts.map +1 -0
- package/lib/typescript/examples/expo/src/styles/theme.d.ts +40 -0
- package/lib/typescript/examples/expo/src/styles/theme.d.ts.map +1 -0
- package/lib/typescript/src/UnistyleRegistry.d.ts +14 -0
- package/lib/typescript/src/UnistyleRegistry.d.ts.map +1 -0
- package/lib/typescript/src/Unistyles.d.ts +16 -0
- package/lib/typescript/src/Unistyles.d.ts.map +1 -0
- package/lib/typescript/src/UnistylesEngine.d.ts +8 -0
- package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -0
- package/lib/typescript/src/UnistylesModule.d.ts +6 -0
- package/lib/typescript/src/UnistylesModule.d.ts.map +1 -0
- package/lib/typescript/src/UnistylesRuntime.d.ts +60 -0
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -0
- package/lib/typescript/src/createStyleSheet.d.ts +6 -0
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -0
- package/lib/typescript/src/global.d.ts +5 -0
- package/lib/typescript/src/global.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +14 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/breakpoints.d.ts +6 -7
- package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/types/core.d.ts +4 -4
- package/lib/typescript/src/types/core.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +53 -0
- package/lib/typescript/src/types/cxx.d.ts.map +1 -0
- package/lib/typescript/src/types/index.d.ts +4 -1
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/normalizer.d.ts +20 -0
- package/lib/typescript/src/types/normalizer.d.ts.map +1 -0
- package/lib/typescript/src/useInitialTheme.d.ts +3 -0
- package/lib/typescript/src/useInitialTheme.d.ts.map +1 -0
- package/lib/typescript/src/useStyles.d.ts +46 -0
- package/lib/typescript/src/useStyles.d.ts.map +1 -0
- package/lib/typescript/src/useUnistyles.d.ts +45 -0
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -0
- package/lib/typescript/src/utils/breakpoints.d.ts +5 -4
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +2 -1
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +2 -0
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts +4 -1
- package/lib/typescript/src/utils/normalizeStyles.web.d.ts.map +1 -1
- package/lib/typescript/src/utils/normalizer.d.ts +11 -0
- package/lib/typescript/src/utils/normalizer.d.ts.map +1 -0
- package/lib/typescript/src/utils/styles.d.ts +4 -3
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +13 -3
- package/react-native-unistyles.podspec +21 -0
- package/src/UnistyleRegistry.ts +35 -0
- package/src/Unistyles.ts +41 -0
- package/src/UnistylesEngine.ts +15 -0
- package/src/UnistylesModule.ts +7 -0
- package/src/UnistylesRuntime.ts +69 -0
- package/src/createStyleSheet.ts +12 -0
- package/src/global.ts +2 -0
- package/src/hooks/useDimensions.web.ts +3 -2
- package/src/index.ts +30 -2
- package/src/types/breakpoints.ts +9 -11
- package/src/types/core.ts +6 -6
- package/src/types/cxx.ts +65 -0
- package/src/types/index.ts +4 -3
- package/src/types/normalizer.ts +29 -0
- package/src/useInitialTheme.ts +7 -0
- package/src/useStyles.ts +49 -0
- package/src/useUnistyles.ts +66 -0
- package/src/utils/breakpoints.ts +16 -14
- package/src/utils/common.ts +2 -1
- package/src/utils/index.ts +2 -0
- package/src/utils/module.d.ts +3 -0
- package/src/utils/normalizeStyles.web.ts +21 -42
- package/src/utils/normalizer.ts +99 -0
- package/src/utils/styles.ts +17 -19
- package/lib/commonjs/UnistylesTheme.js +0 -21
- package/lib/commonjs/UnistylesTheme.js.map +0 -1
- package/lib/commonjs/createUnistyles.js +0 -57
- package/lib/commonjs/createUnistyles.js.map +0 -1
- package/lib/module/UnistylesTheme.js +0 -12
- package/lib/module/UnistylesTheme.js.map +0 -1
- package/lib/module/createUnistyles.js +0 -50
- package/lib/module/createUnistyles.js.map +0 -1
- package/lib/typescript/src/UnistylesTheme.d.ts +0 -9
- package/lib/typescript/src/UnistylesTheme.d.ts.map +0 -1
- package/lib/typescript/src/createUnistyles.d.ts +0 -10
- package/lib/typescript/src/createUnistyles.d.ts.map +0 -1
- package/src/UnistylesTheme.tsx +0 -17
- package/src/__tests__/createUnistyles.spec.tsx +0 -192
- package/src/createUnistyles.ts +0 -70
package/src/utils/styles.ts
CHANGED
@@ -1,7 +1,8 @@
|
|
1
|
-
import type {
|
1
|
+
import type { CustomNamedStyles, ScreenSize } from '../types'
|
2
2
|
import { getValueForBreakpoint } from './breakpoints'
|
3
3
|
import { normalizeStyles } from './normalizeStyles'
|
4
4
|
import { isWeb } from './common'
|
5
|
+
import type { UnistylesBreakpoints } from '../global'
|
5
6
|
|
6
7
|
/**
|
7
8
|
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
@@ -24,13 +25,12 @@ import { isWeb } from './common'
|
|
24
25
|
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
25
26
|
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
26
27
|
*/
|
27
|
-
export const proxifyFunction =
|
28
|
-
fn: Function, breakpoint: keyof
|
29
|
-
screenSize: ScreenSize
|
30
|
-
breakpointPairs: SortedBreakpointEntries<B>
|
28
|
+
export const proxifyFunction = (
|
29
|
+
fn: Function, breakpoint: keyof UnistylesBreakpoints & string,
|
30
|
+
screenSize: ScreenSize
|
31
31
|
): Function => new Proxy(fn, {
|
32
32
|
apply: (target, thisArg, argumentsList) =>
|
33
|
-
parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize
|
33
|
+
parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
|
34
34
|
})
|
35
35
|
|
36
36
|
/**
|
@@ -58,15 +58,14 @@ export const proxifyFunction = <B extends Breakpoints>(
|
|
58
58
|
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
59
59
|
* // { fontSize: '12px' }
|
60
60
|
*/
|
61
|
-
export const parseStyle = <T
|
62
|
-
style: CustomNamedStyles<T
|
63
|
-
breakpoint: keyof
|
64
|
-
screenSize: ScreenSize
|
65
|
-
breakpointPairs: SortedBreakpointEntries<B>
|
61
|
+
export const parseStyle = <T>(
|
62
|
+
style: CustomNamedStyles<T>,
|
63
|
+
breakpoint: keyof UnistylesBreakpoints & string,
|
64
|
+
screenSize: ScreenSize
|
66
65
|
): T => {
|
67
66
|
const entries = Object.entries(style) as [[
|
68
67
|
keyof T,
|
69
|
-
CustomNamedStyles<T
|
68
|
+
CustomNamedStyles<T> | Record<keyof UnistylesBreakpoints & string, string | number | undefined>]
|
70
69
|
]
|
71
70
|
|
72
71
|
const parsedStyles = Object
|
@@ -77,7 +76,7 @@ export const parseStyle = <T, B extends Breakpoints>(
|
|
77
76
|
if (hasNestedProperties) {
|
78
77
|
return [
|
79
78
|
key,
|
80
|
-
parseStyle(value as CustomNamedStyles<T
|
79
|
+
parseStyle(value as CustomNamedStyles<T>, breakpoint, screenSize)
|
81
80
|
]
|
82
81
|
}
|
83
82
|
|
@@ -86,7 +85,7 @@ export const parseStyle = <T, B extends Breakpoints>(
|
|
86
85
|
if (isTransform && Array.isArray(value)) {
|
87
86
|
return [
|
88
87
|
key,
|
89
|
-
value.map(value => parseStyle(value, breakpoint, screenSize
|
88
|
+
value.map(value => parseStyle(value, breakpoint, screenSize))
|
90
89
|
]
|
91
90
|
}
|
92
91
|
|
@@ -99,17 +98,16 @@ export const parseStyle = <T, B extends Breakpoints>(
|
|
99
98
|
|
100
99
|
return [
|
101
100
|
key,
|
102
|
-
getValueForBreakpoint
|
103
|
-
value as Record<keyof
|
101
|
+
getValueForBreakpoint(
|
102
|
+
value as Record<keyof UnistylesBreakpoints & string, string | number | undefined>,
|
104
103
|
breakpoint,
|
105
|
-
screenSize
|
106
|
-
breakpointPairs
|
104
|
+
screenSize
|
107
105
|
)
|
108
106
|
]
|
109
107
|
})
|
110
108
|
)
|
111
109
|
|
112
|
-
return isWeb
|
110
|
+
return isWeb
|
113
111
|
? normalizeStyles(parsedStyles)
|
114
112
|
: parsedStyles
|
115
113
|
}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.UnistylesTheme = exports.UnistylesContext = void 0;
|
7
|
-
var _react = _interopRequireWildcard(require("react"));
|
8
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
9
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
10
|
-
const UnistylesContext = exports.UnistylesContext = /*#__PURE__*/(0, _react.createContext)({});
|
11
|
-
const UnistylesTheme = _ref => {
|
12
|
-
let {
|
13
|
-
theme,
|
14
|
-
children
|
15
|
-
} = _ref;
|
16
|
-
return /*#__PURE__*/_react.default.createElement(UnistylesContext.Provider, {
|
17
|
-
value: theme
|
18
|
-
}, children);
|
19
|
-
};
|
20
|
-
exports.UnistylesTheme = UnistylesTheme;
|
21
|
-
//# sourceMappingURL=UnistylesTheme.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","UnistylesContext","exports","createContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAA4C,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOrC,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAG,IAAAE,oBAAa,EAAC,CAAC,CAAC,CAAC;AAE1C,MAAMC,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACG5B,MAAA,CAAAS,OAAA,CAAAsB,aAAA,CAACP,gBAAgB,CAACQ,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B;AAAAL,OAAA,CAAAE,cAAA,GAAAA,cAAA"}
|
@@ -1,57 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.createUnistyles = void 0;
|
7
|
-
var _react = require("react");
|
8
|
-
var _reactNative = require("react-native");
|
9
|
-
var _UnistylesTheme = require("./UnistylesTheme");
|
10
|
-
var _hooks = require("./hooks");
|
11
|
-
var _utils = require("./utils");
|
12
|
-
const createUnistyles = breakpoints => {
|
13
|
-
const sortedBreakpoints = (0, _utils.sortAndValidateBreakpoints)(breakpoints);
|
14
|
-
const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
|
15
|
-
return {
|
16
|
-
createStyleSheet: styles => {
|
17
|
-
if (typeof styles === 'function') {
|
18
|
-
return styles;
|
19
|
-
}
|
20
|
-
return styles;
|
21
|
-
},
|
22
|
-
useStyles: stylesheet => {
|
23
|
-
const theme = (0, _react.useContext)(_UnistylesTheme.UnistylesContext);
|
24
|
-
const screenSize = (0, _hooks.useDimensions)();
|
25
|
-
const breakpoint = (0, _utils.getBreakpointFromScreenWidth)(screenSize.width, sortedBreakpointEntries);
|
26
|
-
if (!stylesheet) {
|
27
|
-
return {
|
28
|
-
theme,
|
29
|
-
breakpoint,
|
30
|
-
styles: {}
|
31
|
-
};
|
32
|
-
}
|
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) => {
|
35
|
-
let [key, value] = _ref;
|
36
|
-
const style = value;
|
37
|
-
if (typeof value === 'function') {
|
38
|
-
return {
|
39
|
-
...acc,
|
40
|
-
[key]: (0, _utils.proxifyFunction)(value, breakpoint, screenSize, sortedBreakpointEntries)
|
41
|
-
};
|
42
|
-
}
|
43
|
-
return _reactNative.StyleSheet.create({
|
44
|
-
...acc,
|
45
|
-
[key]: (0, _utils.parseStyle)(style, breakpoint, screenSize, sortedBreakpointEntries)
|
46
|
-
});
|
47
|
-
}, {}), [breakpoint, screenSize, parsedStyles]);
|
48
|
-
return {
|
49
|
-
theme,
|
50
|
-
breakpoint,
|
51
|
-
styles: dynamicStyleSheet
|
52
|
-
};
|
53
|
-
}
|
54
|
-
};
|
55
|
-
};
|
56
|
-
exports.createUnistyles = createUnistyles;
|
57
|
-
//# sourceMappingURL=createUnistyles.js.map
|
@@ -1 +0,0 @@
|
|
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"}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import React, { createContext } from 'react';
|
2
|
-
export const UnistylesContext = /*#__PURE__*/createContext({});
|
3
|
-
export const UnistylesTheme = _ref => {
|
4
|
-
let {
|
5
|
-
theme,
|
6
|
-
children
|
7
|
-
} = _ref;
|
8
|
-
return /*#__PURE__*/React.createElement(UnistylesContext.Provider, {
|
9
|
-
value: theme
|
10
|
-
}, children);
|
11
|
-
};
|
12
|
-
//# sourceMappingURL=UnistylesTheme.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"names":["React","createContext","UnistylesContext","UnistylesTheme","_ref","theme","children","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesTheme.tsx"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,aAAa,QAAQ,OAAO;AAO5C,OAAO,MAAMC,gBAAgB,gBAAGD,aAAa,CAAC,CAAC,CAAC,CAAC;AAEjD,OAAO,MAAME,cAA4D,GAAGC,IAAA;EAAA,IAAC;IACzEC,KAAK;IACLC;EACJ,CAAC,GAAAF,IAAA;EAAA,oBACGJ,KAAA,CAAAO,aAAA,CAACL,gBAAgB,CAACM,QAAQ;IAACC,KAAK,EAAEJ;EAAM,GACnCC,QACsB,CAAC;AAAA,CAC/B"}
|
@@ -1,50 +0,0 @@
|
|
1
|
-
import { useContext, useMemo } from 'react';
|
2
|
-
import { StyleSheet } from 'react-native';
|
3
|
-
import { UnistylesContext } from './UnistylesTheme';
|
4
|
-
import { useDimensions } from './hooks';
|
5
|
-
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils';
|
6
|
-
export const createUnistyles = breakpoints => {
|
7
|
-
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints);
|
8
|
-
const sortedBreakpointEntries = Object.entries(sortedBreakpoints);
|
9
|
-
return {
|
10
|
-
createStyleSheet: styles => {
|
11
|
-
if (typeof styles === 'function') {
|
12
|
-
return styles;
|
13
|
-
}
|
14
|
-
return styles;
|
15
|
-
},
|
16
|
-
useStyles: stylesheet => {
|
17
|
-
const theme = useContext(UnistylesContext);
|
18
|
-
const screenSize = useDimensions();
|
19
|
-
const breakpoint = getBreakpointFromScreenWidth(screenSize.width, sortedBreakpointEntries);
|
20
|
-
if (!stylesheet) {
|
21
|
-
return {
|
22
|
-
theme,
|
23
|
-
breakpoint,
|
24
|
-
styles: {}
|
25
|
-
};
|
26
|
-
}
|
27
|
-
const parsedStyles = useMemo(() => typeof stylesheet === 'function' ? stylesheet(theme) : stylesheet, [theme, stylesheet]);
|
28
|
-
const dynamicStyleSheet = useMemo(() => Object.entries(parsedStyles).reduce((acc, _ref) => {
|
29
|
-
let [key, value] = _ref;
|
30
|
-
const style = value;
|
31
|
-
if (typeof value === 'function') {
|
32
|
-
return {
|
33
|
-
...acc,
|
34
|
-
[key]: proxifyFunction(value, breakpoint, screenSize, sortedBreakpointEntries)
|
35
|
-
};
|
36
|
-
}
|
37
|
-
return StyleSheet.create({
|
38
|
-
...acc,
|
39
|
-
[key]: parseStyle(style, breakpoint, screenSize, sortedBreakpointEntries)
|
40
|
-
});
|
41
|
-
}, {}), [breakpoint, screenSize, parsedStyles]);
|
42
|
-
return {
|
43
|
-
theme,
|
44
|
-
breakpoint,
|
45
|
-
styles: dynamicStyleSheet
|
46
|
-
};
|
47
|
-
}
|
48
|
-
};
|
49
|
-
};
|
50
|
-
//# sourceMappingURL=createUnistyles.js.map
|
@@ -1 +0,0 @@
|
|
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,9 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import type { PropsWithChildren } from 'react';
|
3
|
-
interface UnistylesThemeProps extends PropsWithChildren {
|
4
|
-
theme: any;
|
5
|
-
}
|
6
|
-
export declare const UnistylesContext: React.Context<{}>;
|
7
|
-
export declare const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps>;
|
8
|
-
export {};
|
9
|
-
//# sourceMappingURL=UnistylesTheme.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"UnistylesTheme.d.ts","sourceRoot":"","sources":["../../../src/UnistylesTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,UAAU,mBAAoB,SAAQ,iBAAiB;IACnD,KAAK,EAAE,GAAG,CAAA;CACb;AAED,eAAO,MAAM,gBAAgB,mBAAoB,CAAA;AAEjD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,iBAAiB,CAAC,mBAAmB,CAOvE,CAAA"}
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import type { Breakpoints, CreateStylesFactory, CustomNamedStyles, ExtractBreakpoints, RemoveKeysWithPrefix } from './types';
|
2
|
-
export declare const createUnistyles: <B extends Breakpoints, T = {}>(breakpoints: B) => {
|
3
|
-
createStyleSheet: <S extends CustomNamedStyles<S, B>, X>(styles: S | X | CustomNamedStyles<S, B> | ((theme: T) => X | CustomNamedStyles<X, B>)) => S | X;
|
4
|
-
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T> | undefined) => {
|
5
|
-
theme: T;
|
6
|
-
breakpoint: keyof B & string;
|
7
|
-
styles: ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>;
|
8
|
-
};
|
9
|
-
};
|
10
|
-
//# sourceMappingURL=createUnistyles.d.ts.map
|
@@ -1 +0,0 @@
|
|
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"}
|
package/src/UnistylesTheme.tsx
DELETED
@@ -1,17 +0,0 @@
|
|
1
|
-
import React, { createContext } from 'react'
|
2
|
-
import type { PropsWithChildren } from 'react'
|
3
|
-
|
4
|
-
interface UnistylesThemeProps extends PropsWithChildren {
|
5
|
-
theme: any
|
6
|
-
}
|
7
|
-
|
8
|
-
export const UnistylesContext = createContext({})
|
9
|
-
|
10
|
-
export const UnistylesTheme: React.FunctionComponent<UnistylesThemeProps> = ({
|
11
|
-
theme,
|
12
|
-
children
|
13
|
-
}) => (
|
14
|
-
<UnistylesContext.Provider value={theme}>
|
15
|
-
{children}
|
16
|
-
</UnistylesContext.Provider>
|
17
|
-
)
|
@@ -1,192 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import { StyleSheet } from 'react-native'
|
3
|
-
import type { ViewStyle } from 'react-native'
|
4
|
-
import { renderHook } from '@testing-library/react-hooks'
|
5
|
-
import { createUnistyles } from '../createUnistyles'
|
6
|
-
import { UnistylesTheme } from '../UnistylesTheme'
|
7
|
-
import type { CustomNamedStyles } from '../types'
|
8
|
-
|
9
|
-
jest.mock('../hooks', () => ({
|
10
|
-
useDimensions: jest.fn(() => ({
|
11
|
-
width: 500,
|
12
|
-
height: 1000
|
13
|
-
}))
|
14
|
-
}))
|
15
|
-
|
16
|
-
describe('createUnistyles', () => {
|
17
|
-
describe('createStyleSheet', () => {
|
18
|
-
it('should work exactly the same like StyleSheet.create', () => {
|
19
|
-
const breakpoints = {
|
20
|
-
xs: 0
|
21
|
-
}
|
22
|
-
const { createStyleSheet } = createUnistyles(breakpoints)
|
23
|
-
|
24
|
-
const styles = {
|
25
|
-
container: {
|
26
|
-
flex: 1,
|
27
|
-
justifyContent: 'center',
|
28
|
-
alignItems: 'center'
|
29
|
-
},
|
30
|
-
text: {
|
31
|
-
fontWeight: 'bold',
|
32
|
-
fontSize: 32
|
33
|
-
}
|
34
|
-
} as const
|
35
|
-
|
36
|
-
expect(createStyleSheet(styles)).toEqual(StyleSheet.create(styles))
|
37
|
-
})
|
38
|
-
|
39
|
-
it('should inject the theme to the createStyleSheet', () => {
|
40
|
-
const theme = {
|
41
|
-
colors: {
|
42
|
-
barbie: '#ff9ff3',
|
43
|
-
oak: '#1dd1a1',
|
44
|
-
sky: '#48dbfb',
|
45
|
-
fog: '#c8d6e5',
|
46
|
-
aloes: '#00d2d3'
|
47
|
-
}
|
48
|
-
}
|
49
|
-
const breakpoints = {
|
50
|
-
xs: 0
|
51
|
-
}
|
52
|
-
const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, typeof theme>(breakpoints)
|
53
|
-
const stylesheet = createStyleSheet(theme => ({
|
54
|
-
container: {
|
55
|
-
backgroundColor: theme.colors.barbie
|
56
|
-
}
|
57
|
-
}))
|
58
|
-
const { result } = renderHook(() => useStyles(stylesheet), {
|
59
|
-
// @ts-ignore
|
60
|
-
wrapper: ({ children }) => (
|
61
|
-
<UnistylesTheme theme={theme}>
|
62
|
-
{children}
|
63
|
-
</UnistylesTheme>
|
64
|
-
)
|
65
|
-
})
|
66
|
-
|
67
|
-
expect(result.current.theme).toEqual(theme)
|
68
|
-
expect(result.current.styles).not.toBe(Function)
|
69
|
-
expect(result.current.styles.container.backgroundColor).toEqual(theme.colors.barbie)
|
70
|
-
})
|
71
|
-
})
|
72
|
-
|
73
|
-
describe('useStyles', () => {
|
74
|
-
it('should return empty object for optional stylesheet', () => {
|
75
|
-
const breakpoints = {
|
76
|
-
xs: 0
|
77
|
-
}
|
78
|
-
const { useStyles } = createUnistyles(breakpoints)
|
79
|
-
const { result } = renderHook(() => useStyles())
|
80
|
-
|
81
|
-
expect(result.current.styles).toEqual({})
|
82
|
-
expect(result.current.theme).toEqual({})
|
83
|
-
})
|
84
|
-
|
85
|
-
it ('should choose single value from breakpoints', () => {
|
86
|
-
const breakpoints = {
|
87
|
-
xs: 0,
|
88
|
-
sm: 200,
|
89
|
-
md: 500,
|
90
|
-
lg: 1000
|
91
|
-
}
|
92
|
-
|
93
|
-
const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
|
94
|
-
const stylesheet = createStyleSheet({
|
95
|
-
container: {
|
96
|
-
flex: 1,
|
97
|
-
justifyContent: 'center',
|
98
|
-
alignItems: {
|
99
|
-
xs: 'row',
|
100
|
-
md: 'column'
|
101
|
-
}
|
102
|
-
}
|
103
|
-
})
|
104
|
-
const { result } = renderHook(() => useStyles(stylesheet))
|
105
|
-
|
106
|
-
expect(result.current.styles.container.alignItems).toEqual('column')
|
107
|
-
})
|
108
|
-
|
109
|
-
it ('should choose single value from media queries', () => {
|
110
|
-
const breakpoints = {
|
111
|
-
xs: 0
|
112
|
-
}
|
113
|
-
|
114
|
-
const { useStyles, createStyleSheet } = createUnistyles(breakpoints)
|
115
|
-
const stylesheet = createStyleSheet({
|
116
|
-
container: {
|
117
|
-
flex: 1,
|
118
|
-
justifyContent: 'center',
|
119
|
-
alignItems: {
|
120
|
-
xs: 'row',
|
121
|
-
':w[300, 490]': 'column',
|
122
|
-
':w[491]': 'row'
|
123
|
-
}
|
124
|
-
}
|
125
|
-
})
|
126
|
-
const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
|
127
|
-
|
128
|
-
expect(result.current.styles.container.alignItems).toEqual('row')
|
129
|
-
})
|
130
|
-
|
131
|
-
it ('should choose wrap dynamic functions in Proxy', () => {
|
132
|
-
const breakpoints = {
|
133
|
-
xs: 0
|
134
|
-
}
|
135
|
-
|
136
|
-
const { useStyles, createStyleSheet } = createUnistyles<typeof breakpoints, {}>(breakpoints)
|
137
|
-
const stylesheet = createStyleSheet({
|
138
|
-
container: (flex: number) => ({
|
139
|
-
flex,
|
140
|
-
justifyContent: 'center',
|
141
|
-
alignItems: {
|
142
|
-
xs: 'row',
|
143
|
-
':w[300, 490]': 'column',
|
144
|
-
':w[491]': 'row'
|
145
|
-
}
|
146
|
-
})
|
147
|
-
})
|
148
|
-
const { result } = renderHook(() => useStyles(stylesheet as CustomNamedStyles<typeof stylesheet, typeof breakpoints>))
|
149
|
-
|
150
|
-
expect(result.current.styles.container).toBeInstanceOf(Function)
|
151
|
-
expect((result.current.styles.container as (flex: number) => ViewStyle)(2)).toEqual({
|
152
|
-
flex: 2,
|
153
|
-
justifyContent: 'center',
|
154
|
-
alignItems: 'row'
|
155
|
-
})
|
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
|
-
})
|
191
|
-
})
|
192
|
-
})
|
package/src/createUnistyles.ts
DELETED
@@ -1,70 +0,0 @@
|
|
1
|
-
import { useContext, useMemo } from 'react'
|
2
|
-
import { StyleSheet } from 'react-native'
|
3
|
-
import type {
|
4
|
-
Breakpoints,
|
5
|
-
CreateStylesFactory,
|
6
|
-
CustomNamedStyles,
|
7
|
-
ExtractBreakpoints,
|
8
|
-
RemoveKeysWithPrefix,
|
9
|
-
SortedBreakpointEntries
|
10
|
-
} from './types'
|
11
|
-
import { UnistylesContext } from './UnistylesTheme'
|
12
|
-
import { useDimensions } from './hooks'
|
13
|
-
import { getBreakpointFromScreenWidth, proxifyFunction, parseStyle, sortAndValidateBreakpoints } from './utils'
|
14
|
-
|
15
|
-
export const createUnistyles = <B extends Breakpoints, T = {}>(breakpoints: B) => {
|
16
|
-
const sortedBreakpoints = sortAndValidateBreakpoints(breakpoints)
|
17
|
-
const sortedBreakpointEntries = Object
|
18
|
-
.entries(sortedBreakpoints) as SortedBreakpointEntries<B>
|
19
|
-
|
20
|
-
return {
|
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
|
-
},
|
28
|
-
useStyles: <ST extends CustomNamedStyles<ST, B>>(stylesheet?: ST | CreateStylesFactory<ST, T>) => {
|
29
|
-
const theme = useContext(UnistylesContext) as T
|
30
|
-
const screenSize = useDimensions()
|
31
|
-
const breakpoint = getBreakpointFromScreenWidth<B>(screenSize.width, sortedBreakpointEntries)
|
32
|
-
|
33
|
-
if (!stylesheet) {
|
34
|
-
return {
|
35
|
-
theme,
|
36
|
-
breakpoint,
|
37
|
-
styles: {} as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
|
38
|
-
}
|
39
|
-
}
|
40
|
-
|
41
|
-
const parsedStyles = useMemo(() => typeof stylesheet === 'function'
|
42
|
-
? stylesheet(theme)
|
43
|
-
: stylesheet, [theme, stylesheet])
|
44
|
-
|
45
|
-
const dynamicStyleSheet = useMemo(() => Object
|
46
|
-
.entries(parsedStyles)
|
47
|
-
.reduce((acc, [key, value]) => {
|
48
|
-
const style = value as CustomNamedStyles<ST, B>
|
49
|
-
|
50
|
-
if (typeof value === 'function') {
|
51
|
-
return {
|
52
|
-
...acc,
|
53
|
-
[key]: proxifyFunction<B>(value, breakpoint, screenSize, sortedBreakpointEntries)
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
return StyleSheet.create({
|
58
|
-
...acc,
|
59
|
-
[key]: parseStyle<ST, B>(style, breakpoint, screenSize, sortedBreakpointEntries)
|
60
|
-
})
|
61
|
-
}, {} as ST), [breakpoint, screenSize, parsedStyles])
|
62
|
-
|
63
|
-
return {
|
64
|
-
theme,
|
65
|
-
breakpoint,
|
66
|
-
styles: dynamicStyleSheet as ExtractBreakpoints<RemoveKeysWithPrefix<ST, B>, B>
|
67
|
-
}
|
68
|
-
}
|
69
|
-
}
|
70
|
-
}
|