react-native-unistyles 2.0.0-alpha.4 → 2.0.0-alpha.6
Sign up to get free protection for your applications and to get access to all the features.
- package/cxx/UnistylesRuntime.cpp +262 -0
- package/cxx/UnistylesRuntime.h +61 -0
- package/ios/UnistylesModule.mm +8 -3
- package/lib/commonjs/Unistyles.js +1 -1
- package/lib/commonjs/Unistyles.js.map +1 -1
- package/lib/commonjs/UnistylesEngine.js +9 -5
- package/lib/commonjs/UnistylesEngine.js.map +1 -1
- package/lib/commonjs/createStyleSheet.js.map +1 -1
- package/lib/commonjs/types/cxx.js +1 -2
- package/lib/commonjs/types/cxx.js.map +1 -1
- package/lib/commonjs/useStyles.js +0 -2
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/useUnistyles.js +9 -15
- package/lib/commonjs/useUnistyles.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +23 -70
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/common.js +8 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/index.js +7 -0
- package/lib/commonjs/utils/index.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.js +58 -149
- package/lib/commonjs/utils/mediaQueries.js.map +1 -1
- package/lib/commonjs/utils/styles.js +11 -51
- package/lib/commonjs/utils/styles.js.map +1 -1
- package/lib/module/Unistyles.js +2 -2
- package/lib/module/Unistyles.js.map +1 -1
- package/lib/module/UnistylesEngine.js +7 -3
- package/lib/module/UnistylesEngine.js.map +1 -1
- package/lib/module/createStyleSheet.js.map +1 -1
- package/lib/module/types/cxx.js +1 -2
- package/lib/module/types/cxx.js.map +1 -1
- package/lib/module/useStyles.js +0 -3
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/useUnistyles.js +9 -15
- package/lib/module/useUnistyles.js.map +1 -1
- package/lib/module/utils/breakpoints.js +24 -71
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +7 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/index.js +1 -1
- package/lib/module/utils/index.js.map +1 -1
- package/lib/module/utils/mediaQueries.js +58 -149
- package/lib/module/utils/mediaQueries.js.map +1 -1
- package/lib/module/utils/styles.js +10 -51
- package/lib/module/utils/styles.js.map +1 -1
- package/lib/typescript/src/Unistyles.d.ts +2 -2
- package/lib/typescript/src/Unistyles.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesEngine.d.ts +4 -1
- package/lib/typescript/src/UnistylesEngine.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesRuntime.d.ts +2 -2
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/createStyleSheet.d.ts +2 -5
- package/lib/typescript/src/createStyleSheet.d.ts.map +1 -1
- package/lib/typescript/src/global.d.ts +2 -1
- package/lib/typescript/src/global.d.ts.map +1 -1
- package/lib/typescript/src/types/breakpoints.d.ts +2 -1
- package/lib/typescript/src/types/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/types/core.d.ts +18 -16
- package/lib/typescript/src/types/core.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +15 -14
- package/lib/typescript/src/types/cxx.d.ts.map +1 -1
- package/lib/typescript/src/types/index.d.ts +1 -1
- package/lib/typescript/src/types/index.d.ts.map +1 -1
- package/lib/typescript/src/types/mediaQueries.d.ts +5 -3
- package/lib/typescript/src/types/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +2 -4
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/useUnistyles.d.ts +3 -1
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/utils/breakpoints.d.ts +2 -60
- package/lib/typescript/src/utils/breakpoints.d.ts.map +1 -1
- package/lib/typescript/src/utils/common.d.ts +7 -0
- package/lib/typescript/src/utils/common.d.ts.map +1 -1
- package/lib/typescript/src/utils/index.d.ts +1 -1
- package/lib/typescript/src/utils/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/mediaQueries.d.ts +8 -127
- package/lib/typescript/src/utils/mediaQueries.d.ts.map +1 -1
- package/lib/typescript/src/utils/styles.d.ts +1 -46
- package/lib/typescript/src/utils/styles.d.ts.map +1 -1
- package/package.json +10 -1
- package/src/Unistyles.ts +3 -3
- package/src/UnistylesEngine.ts +12 -3
- package/src/createStyleSheet.ts +2 -5
- package/src/global.ts +2 -1
- package/src/types/breakpoints.ts +6 -3
- package/src/types/core.ts +25 -22
- package/src/types/cxx.ts +17 -16
- package/src/types/index.ts +1 -1
- package/src/types/mediaQueries.ts +9 -4
- package/src/useStyles.ts +5 -8
- package/src/useUnistyles.ts +12 -24
- package/src/utils/breakpoints.ts +31 -74
- package/src/utils/common.ts +8 -0
- package/src/utils/index.ts +1 -1
- package/src/utils/mediaQueries.ts +105 -154
- package/src/utils/styles.ts +13 -55
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_Unistyles","require","_common","
|
1
|
+
{"version":3,"names":["_Unistyles","require","_common","_types","sortAndValidateBreakpoints","breakpoints","sortedPairs","Object","entries","sort","breakpoint1","breakpoint2","value1","value2","sortedBreakpoints","freeze","fromEntries","breakpointValues","values","firstBreakpoint","throwError","length","Set","size","exports","getBreakpointFromScreenWidth","width","breakpointEntries","key","find","_ref","index","otherBreakpoints","value","minVal","maxVal","getValueForBreakpoint","customMediaQueries","filter","_ref2","unistyles","engine","isMediaQuery","customMediaQueryKey","didMatchMediaQuery","hasBreakpoints","runtime","isMobile","Orientation","Landscape","Portrait","orientation","ScreenOrientation","breakpoint","undefined","directBreakpoint","breakpointPairs","currentBreakpoint","findIndex","_ref3","availableBreakpoints","_ref4","map","_ref5"],"sourceRoot":"../../../src","sources":["utils/breakpoints.ts"],"mappings":"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"}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.warn = exports.throwError = exports.isWeb = exports.isServer = void 0;
|
6
|
+
exports.warn = exports.throwError = exports.isWeb = exports.isServer = exports.isMobile = exports.isIOS = exports.isAndroid = exports.Orientation = void 0;
|
7
7
|
var _reactNative = require("react-native");
|
8
8
|
const throwError = message => {
|
9
9
|
throw new Error(`🦄 [react-native-unistyles]: ${message}`);
|
@@ -13,6 +13,13 @@ const warn = message => {
|
|
13
13
|
console.warn(`🦄 [react-native-unistyles]: ${message}`);
|
14
14
|
};
|
15
15
|
exports.warn = warn;
|
16
|
+
const isMobile = exports.isMobile = _reactNative.Platform.OS === 'android' || _reactNative.Platform.OS === 'ios';
|
16
17
|
const isWeb = exports.isWeb = _reactNative.Platform.OS === 'web';
|
18
|
+
const isIOS = exports.isIOS = _reactNative.Platform.OS === 'ios';
|
19
|
+
const isAndroid = exports.isAndroid = _reactNative.Platform.OS === 'android';
|
17
20
|
const isServer = exports.isServer = typeof window === 'undefined';
|
21
|
+
const Orientation = exports.Orientation = {
|
22
|
+
Landscape: 'landscape',
|
23
|
+
Portrait: 'portrait'
|
24
|
+
};
|
18
25
|
//# sourceMappingURL=common.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_reactNative","require","throwError","message","Error","exports","warn","console","
|
1
|
+
{"version":3,"names":["_reactNative","require","throwError","message","Error","exports","warn","console","isMobile","Platform","OS","isWeb","isIOS","isAndroid","isServer","window","Orientation","Landscape","Portrait"],"sourceRoot":"../../../src","sources":["utils/common.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAEO,MAAMC,UAAU,GAAIC,OAAe,IAAK;EAC3C,MAAM,IAAIC,KAAK,CAAE,gCAA+BD,OAAQ,EAAC,CAAC;AAC9D,CAAC;AAAAE,OAAA,CAAAH,UAAA,GAAAA,UAAA;AAEM,MAAMI,IAAI,GAAIH,OAAe,IAAK;EACrCI,OAAO,CAACD,IAAI,CAAE,gCAA+BH,OAAQ,EAAC,CAAC;AAC3D,CAAC;AAAAE,OAAA,CAAAC,IAAA,GAAAA,IAAA;AAEM,MAAME,QAAQ,GAAAH,OAAA,CAAAG,QAAA,GAAGC,qBAAQ,CAACC,EAAE,KAAK,SAAS,IAAID,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnE,MAAMC,KAAK,GAAAN,OAAA,CAAAM,KAAA,GAAGF,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAME,KAAK,GAAAP,OAAA,CAAAO,KAAA,GAAGH,qBAAQ,CAACC,EAAE,KAAK,KAAK;AACnC,MAAMG,SAAS,GAAAR,OAAA,CAAAQ,SAAA,GAAGJ,qBAAQ,CAACC,EAAE,KAAK,SAAS;AAC3C,MAAMI,QAAQ,GAAAT,OAAA,CAAAS,QAAA,GAAG,OAAOC,MAAM,KAAK,WAAW;AAE9C,MAAMC,WAAW,GAAAX,OAAA,CAAAW,WAAA,GAAG;EACvBC,SAAS,EAAE,WAAW;EACtBC,QAAQ,EAAE;AACd,CAAU"}
|
@@ -11,6 +11,7 @@ var _exportNames = {
|
|
11
11
|
proxifyFunction: true,
|
12
12
|
parseStyle: true,
|
13
13
|
isServer: true,
|
14
|
+
Orientation: true,
|
14
15
|
extractValues: true,
|
15
16
|
getKeyForCustomMediaQuery: true,
|
16
17
|
isMediaQuery: true,
|
@@ -18,6 +19,12 @@ var _exportNames = {
|
|
18
19
|
isWithinTheWidth: true,
|
19
20
|
isWithinTheWidthAndHeight: true
|
20
21
|
};
|
22
|
+
Object.defineProperty(exports, "Orientation", {
|
23
|
+
enumerable: true,
|
24
|
+
get: function () {
|
25
|
+
return _common.Orientation;
|
26
|
+
}
|
27
|
+
});
|
21
28
|
Object.defineProperty(exports, "extractValues", {
|
22
29
|
enumerable: true,
|
23
30
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_normalizeStyles","require","_normalizer","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_breakpoints","_styles","_common","_mediaQueries"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":"
|
1
|
+
{"version":3,"names":["_normalizeStyles","require","_normalizer","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_breakpoints","_styles","_common","_mediaQueries"],"sourceRoot":"../../../src","sources":["utils/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,WAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,WAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,WAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,YAAA,GAAAd,OAAA;AACA,IAAAe,OAAA,GAAAf,OAAA;AACA,IAAAgB,OAAA,GAAAhB,OAAA;AACA,IAAAiB,aAAA,GAAAjB,OAAA"}
|
@@ -4,184 +4,93 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.isWithinTheWidthAndHeight = exports.isWithinTheWidth = exports.isWithinTheHeight = exports.isWithinBreakpoint = exports.isMediaQuery = exports.getKeyForCustomMediaQuery = exports.extractValues = void 0;
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
const
|
23
|
-
|
24
|
-
|
7
|
+
const parseLhs = (lhs, breakpoints, hasRhs) => {
|
8
|
+
const matches = lhs.match(/([([])|([^[\]()]+)|([\])])/g);
|
9
|
+
if (!hasRhs) {
|
10
|
+
const [openBracket, value, closeBracket] = matches;
|
11
|
+
const spacelessValue = value?.trim();
|
12
|
+
const parsedNumber = Number(spacelessValue);
|
13
|
+
const parsedValue = isNaN(parsedNumber) ? breakpoints[spacelessValue] : parsedNumber;
|
14
|
+
return [Number(openBracket === '('), closeBracket === ')' ? parsedValue - 1 : parsedValue];
|
15
|
+
}
|
16
|
+
const [openBracket, value] = matches;
|
17
|
+
if (!value) {
|
18
|
+
return [Number(openBracket === '(')];
|
19
|
+
}
|
20
|
+
const spacelessValue = value?.trim();
|
21
|
+
const parsedNumber = Number(spacelessValue);
|
22
|
+
const parsedValue = isNaN(parsedNumber) ? breakpoints[spacelessValue] : parsedNumber;
|
23
|
+
return openBracket === '(' ? [parsedValue - 1] : [parsedValue];
|
24
|
+
};
|
25
|
+
const parseRhs = (rhs, breakpoints) => {
|
26
|
+
const matches = rhs.match(/([([])|([^[\]()]+)|([\])])/g);
|
27
|
+
const [value, closeBrackets] = matches;
|
28
|
+
const spacelessValue = value.trim();
|
29
|
+
const parsedNumber = Number(spacelessValue);
|
30
|
+
const parsedValue = isNaN(parsedNumber) ? breakpoints[spacelessValue] : parsedNumber;
|
31
|
+
return [closeBrackets === ')' ? parsedValue - 1 : parsedValue];
|
32
|
+
};
|
33
|
+
const extractValues = (pattern, breakpoints) => {
|
34
|
+
const [lhs, rhs] = pattern.replace(/(:w|:h)/g, '').split(',');
|
35
|
+
if (!rhs) {
|
36
|
+
return parseLhs(lhs, breakpoints, false);
|
37
|
+
}
|
38
|
+
const [parsedLhs] = parseLhs(lhs, breakpoints, true);
|
39
|
+
if (parsedLhs === undefined || isNaN(parsedLhs)) {
|
40
|
+
return [];
|
41
|
+
}
|
42
|
+
const [parsedRhs] = parseRhs(rhs, breakpoints);
|
43
|
+
if (parsedRhs === undefined || isNaN(parsedRhs)) {
|
44
|
+
return [];
|
45
|
+
}
|
46
|
+
return [parsedLhs, parsedRhs];
|
25
47
|
};
|
26
|
-
|
27
|
-
/**
|
28
|
-
* Determines if the given screen size matches the specified breakpoint query.
|
29
|
-
*
|
30
|
-
* The function checks if the screen size (width and/or height) falls within the range
|
31
|
-
* specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
|
32
|
-
* or both.
|
33
|
-
*
|
34
|
-
* @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
|
35
|
-
* @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
|
36
|
-
* @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
|
37
|
-
*
|
38
|
-
* @example
|
39
|
-
* const screenSize = { width: 150, height: 350 }
|
40
|
-
* isWithinBreakpoint('w[100,200]', screenSize) // returns true
|
41
|
-
* isWithinBreakpoint('h[400]', screenSize) // returns false
|
42
|
-
*/
|
43
48
|
exports.extractValues = extractValues;
|
44
|
-
const isWithinBreakpoint = (query, screenSize) => {
|
45
|
-
|
46
|
-
|
49
|
+
const isWithinBreakpoint = (query, screenSize, breakpoints) => {
|
50
|
+
const hasWidthBreakpoint = query.includes(':w');
|
51
|
+
const hasHeightBreakpoint = query.includes(':h');
|
52
|
+
if (hasWidthBreakpoint && hasHeightBreakpoint) {
|
53
|
+
return isWithinTheWidthAndHeight(query, screenSize, breakpoints);
|
47
54
|
}
|
48
|
-
if (
|
49
|
-
return isWithinTheWidth(query, screenSize.width);
|
55
|
+
if (hasWidthBreakpoint) {
|
56
|
+
return isWithinTheWidth(query, screenSize.width, breakpoints);
|
50
57
|
}
|
51
|
-
if (
|
52
|
-
return isWithinTheHeight(query, screenSize.height);
|
58
|
+
if (hasHeightBreakpoint) {
|
59
|
+
return isWithinTheHeight(query, screenSize.height, breakpoints);
|
53
60
|
}
|
54
61
|
return false;
|
55
62
|
};
|
56
|
-
|
57
|
-
/**
|
58
|
-
* Determines if the given width matches the specified width range in the query.
|
59
|
-
*
|
60
|
-
* The function checks if the provided width falls within the range specified by the query.
|
61
|
-
* The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
|
62
|
-
* it's treated as a minimum width.
|
63
|
-
*
|
64
|
-
* @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
|
65
|
-
* @param {number} width - The width to check against the query.
|
66
|
-
* @returns {boolean} True if the width matches the query range, false otherwise.
|
67
|
-
*
|
68
|
-
* @example
|
69
|
-
* isWithinTheWidth('w[100,200]', 150) // returns true
|
70
|
-
* isWithinTheWidth('w[100]', 50) // returns false
|
71
|
-
* isWithinTheWidth('w[100]', 150) // returns true
|
72
|
-
*/
|
73
63
|
exports.isWithinBreakpoint = isWithinBreakpoint;
|
74
|
-
const isWithinTheWidth = (query, width) => {
|
75
|
-
const [minWidth, maxWidth] = extractValues(query);
|
64
|
+
const isWithinTheWidth = (query, width, breakpoints) => {
|
65
|
+
const [minWidth, maxWidth] = extractValues(query, breakpoints);
|
76
66
|
if (maxWidth && width >= minWidth && width <= maxWidth) {
|
77
67
|
return true;
|
78
68
|
}
|
79
69
|
return !maxWidth && width >= minWidth;
|
80
70
|
};
|
81
|
-
|
82
|
-
/**
|
83
|
-
* Determines if the given height matches the specified height range in the query.
|
84
|
-
*
|
85
|
-
* The function checks if the provided height falls within the range specified by the query.
|
86
|
-
* The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
|
87
|
-
* it's treated as a minimum height.
|
88
|
-
*
|
89
|
-
* @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
|
90
|
-
* @param {number} height - The height to check against the query.
|
91
|
-
* @returns {boolean} True if the height matches the query range, false otherwise.
|
92
|
-
*
|
93
|
-
* @example
|
94
|
-
* isWithinTheHeight('h[100,200]', 150) // returns true
|
95
|
-
* isWithinTheHeight('h[100]', 50) // returns false
|
96
|
-
* isWithinTheHeight('h[100]', 150) // returns true
|
97
|
-
*/
|
98
71
|
exports.isWithinTheWidth = isWithinTheWidth;
|
99
|
-
const isWithinTheHeight = (query, height) => {
|
100
|
-
const [minHeight, maxHeight] = extractValues(query);
|
72
|
+
const isWithinTheHeight = (query, height, breakpoints) => {
|
73
|
+
const [minHeight, maxHeight] = extractValues(query, breakpoints);
|
101
74
|
if (maxHeight && height >= minHeight && height <= maxHeight) {
|
102
75
|
return true;
|
103
76
|
}
|
104
77
|
return !maxHeight && height >= minHeight;
|
105
78
|
};
|
106
|
-
|
107
|
-
/**
|
108
|
-
* Determines if the given screen size matches both the specified width and height ranges in the query.
|
109
|
-
*
|
110
|
-
* The function checks if the provided screen size (both width and height) falls within the ranges
|
111
|
-
* specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
|
112
|
-
*
|
113
|
-
* @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
|
114
|
-
* @param {ScreenSize} screenSize - The screen size to check against the query.
|
115
|
-
* @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
|
116
|
-
*
|
117
|
-
* @example
|
118
|
-
* const screenSize = { width: 150, height: 350 }
|
119
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
|
120
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
|
121
|
-
*/
|
122
79
|
exports.isWithinTheHeight = isWithinTheHeight;
|
123
|
-
const isWithinTheWidthAndHeight = (query, screenSize) => {
|
124
|
-
const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(q,
|
80
|
+
const isWithinTheWidthAndHeight = (query, screenSize, breakpoints) => {
|
81
|
+
const result = query.split(':').filter(Boolean).map(q => isWithinBreakpoint(`:${q}`, screenSize, breakpoints)).filter(Boolean);
|
125
82
|
return result.length === 2;
|
126
83
|
};
|
127
|
-
|
128
|
-
/**
|
129
|
-
* Checks if the given query string is a valid custom media query.
|
130
|
-
*
|
131
|
-
* The valid custom media query formats include:
|
132
|
-
* - :w[200]
|
133
|
-
* - :w[0, 200]
|
134
|
-
* - :w[, 300]
|
135
|
-
* - :h[200]
|
136
|
-
* - :h[0, 500]
|
137
|
-
* - :h[,200]
|
138
|
-
* - :w[100, 300]:h[200,500]
|
139
|
-
* - :h[200,500]:w[100, 300]
|
140
|
-
*
|
141
|
-
* @param {string} query - The query string to be checked.
|
142
|
-
* @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
|
143
|
-
* @example
|
144
|
-
*
|
145
|
-
* isMediaQuery(':w[200]') // true
|
146
|
-
* isMediaQuery(':w100]') // false
|
147
|
-
*/
|
148
84
|
exports.isWithinTheWidthAndHeight = isWithinTheWidthAndHeight;
|
149
85
|
const isMediaQuery = query => {
|
150
|
-
const regex =
|
86
|
+
const regex = /(:w|:h)/;
|
151
87
|
return query.length > 0 && regex.test(query);
|
152
88
|
};
|
153
|
-
|
154
|
-
/**
|
155
|
-
* Retrieves the first matching custom media query key based on the provided screen size.
|
156
|
-
*
|
157
|
-
* The function processes an array of media queries and returns the first query that matches
|
158
|
-
* the given screen size. The media queries can be in formats like:
|
159
|
-
* - w[200]
|
160
|
-
* - w[0, 200]
|
161
|
-
* - w[, 300]
|
162
|
-
* - h[200]
|
163
|
-
* - h[0, 500]
|
164
|
-
* - h[,200]
|
165
|
-
* - w[100, 300]:h[200,500]
|
166
|
-
* - h[200,500]:w[100, 300]
|
167
|
-
*
|
168
|
-
* @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
|
169
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
170
|
-
* @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
|
171
|
-
* @example
|
172
|
-
*
|
173
|
-
* const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
|
174
|
-
* const size = { width: 250, height: 400 }
|
175
|
-
* getKeyForCustomMediaQuery(queries, size) // ':w[200]
|
176
|
-
*/
|
177
89
|
exports.isMediaQuery = isMediaQuery;
|
178
|
-
const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
|
90
|
+
const getKeyForCustomMediaQuery = (mediaQueries, screenSize, breakpoints) => {
|
179
91
|
const [matchedQuery] = mediaQueries.flatMap(_ref => {
|
180
92
|
let [key] = _ref;
|
181
|
-
|
182
|
-
return isWithinBreakpoint(key, screenSize) ? key : undefined;
|
183
|
-
}
|
184
|
-
return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
|
93
|
+
return isWithinBreakpoint(key, screenSize, breakpoints) ? key : undefined;
|
185
94
|
}).filter(Boolean);
|
186
95
|
return matchedQuery;
|
187
96
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["parseLhs","lhs","breakpoints","hasRhs","matches","match","openBracket","value","closeBracket","spacelessValue","trim","parsedNumber","Number","parsedValue","isNaN","parseRhs","rhs","closeBrackets","extractValues","pattern","replace","split","parsedLhs","undefined","parsedRhs","exports","isWithinBreakpoint","query","screenSize","hasWidthBreakpoint","includes","hasHeightBreakpoint","isWithinTheWidthAndHeight","isWithinTheWidth","width","isWithinTheHeight","height","minWidth","maxWidth","minHeight","maxHeight","result","filter","Boolean","map","q","length","isMediaQuery","regex","test","getKeyForCustomMediaQuery","mediaQueries","matchedQuery","flatMap","_ref","key"],"sourceRoot":"../../../src","sources":["utils/mediaQueries.ts"],"mappings":"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"}
|
@@ -3,63 +3,23 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.proxifyFunction = exports.parseStyle = void 0;
|
6
|
+
exports.proxifyFunction = exports.parseStyle = exports.isPlatformColor = void 0;
|
7
7
|
var _breakpoints = require("./breakpoints");
|
8
8
|
var _normalizeStyles = require("./normalizeStyles");
|
9
9
|
var _common = require("./common");
|
10
|
-
/**
|
11
|
-
* Proxies a function to parse its return value for custom media queries or breakpoints.
|
12
|
-
*
|
13
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
14
|
-
*
|
15
|
-
* @param {Function} fn - The function to be proxified.
|
16
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
17
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
18
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
19
|
-
*
|
20
|
-
* @returns {Function} Returns the proxified function
|
21
|
-
*
|
22
|
-
* @example
|
23
|
-
*
|
24
|
-
* const myFunction = () => ({ ':w[200]': 'value1', sm: 'value2' })
|
25
|
-
* const screenSize = { width: 250, height: 400 }
|
26
|
-
* const breakpoints = { sm: 300, md: 600 }
|
27
|
-
*
|
28
|
-
* const proxifiedFunction = proxifyFunction(myFunction, 'sm', screenSize, breakpoints)
|
29
|
-
* proxifiedFunction() // parsed style based on screenSize and breakpoints
|
30
|
-
*/
|
31
10
|
const proxifyFunction = (fn, breakpoint, screenSize) => new Proxy(fn, {
|
32
11
|
apply: (target, thisArg, argumentsList) => parseStyle(target.apply(thisArg, argumentsList), breakpoint, screenSize)
|
33
12
|
});
|
34
|
-
|
35
|
-
/**
|
36
|
-
* Parses a style object to resolve custom media queries or breakpoints based on the provided screen size and breakpoints.
|
37
|
-
*
|
38
|
-
* The function processes each key-value pair in the style object. If the value is a function or a valid style (not an object or a 'transform' key),
|
39
|
-
* it is returned as-is. Otherwise, the function attempts to resolve the value based on the provided breakpoint, screen size, and defined breakpoints.
|
40
|
-
*
|
41
|
-
* @template T - The type of the style object.
|
42
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
43
|
-
*
|
44
|
-
* @param {CustomNamedStyles<T, B>} style - The style object to be parsed.
|
45
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
46
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
47
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
48
|
-
*
|
49
|
-
* @returns {Record<string, string | number | Function>} Returns the parsed style object with resolved custom media queries or breakpoints.
|
50
|
-
*
|
51
|
-
* @example
|
52
|
-
*
|
53
|
-
* const style = { fontSize: { sm: '12px', md: '16px' } }
|
54
|
-
* const screenSize = { width: 300, height: 400 }
|
55
|
-
* const breakpoints = { xs: 0, sm: 300, md: 600 }
|
56
|
-
*
|
57
|
-
* const parsedStyle = parseStyle(style, 'sm', screenSize, breakpoints)
|
58
|
-
* // { fontSize: '12px' }
|
59
|
-
*/
|
60
13
|
exports.proxifyFunction = proxifyFunction;
|
14
|
+
const isPlatformColor = value => {
|
15
|
+
if (_common.isIOS) {
|
16
|
+
return 'semantic' in value && typeof value.semantic === 'object';
|
17
|
+
}
|
18
|
+
return _common.isAndroid && 'resource_paths' in value && typeof value.resource_paths === 'object';
|
19
|
+
};
|
20
|
+
exports.isPlatformColor = isPlatformColor;
|
61
21
|
const parseStyle = (style, breakpoint, screenSize) => {
|
62
|
-
const entries = Object.entries(style);
|
22
|
+
const entries = Object.entries(style || {});
|
63
23
|
const parsedStyles = Object.fromEntries(entries.map(_ref => {
|
64
24
|
let [key, value] = _ref;
|
65
25
|
const hasNestedProperties = key === 'shadowOffset' || key === 'textShadowOffset';
|
@@ -71,11 +31,11 @@ const parseStyle = (style, breakpoint, screenSize) => {
|
|
71
31
|
return [key, value.map(value => parseStyle(value, breakpoint, screenSize))];
|
72
32
|
}
|
73
33
|
const isDynamicFunction = typeof value === 'function';
|
74
|
-
const isValidStyle = typeof value !== 'object';
|
34
|
+
const isValidStyle = typeof value !== 'object' || isPlatformColor(value);
|
75
35
|
if (isDynamicFunction || isValidStyle) {
|
76
36
|
return [key, value];
|
77
37
|
}
|
78
|
-
return [key, (0, _breakpoints.getValueForBreakpoint)(value
|
38
|
+
return [key, (0, _breakpoints.getValueForBreakpoint)(value)];
|
79
39
|
}));
|
80
40
|
return _common.isWeb ? (0, _normalizeStyles.normalizeStyles)(parsedStyles) : parsedStyles;
|
81
41
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_breakpoints","require","_normalizeStyles","_common","proxifyFunction","fn","breakpoint","screenSize","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","style","entries","Object","parsedStyles","fromEntries","map","_ref","key","
|
1
|
+
{"version":3,"names":["_breakpoints","require","_normalizeStyles","_common","proxifyFunction","fn","breakpoint","screenSize","Proxy","apply","target","thisArg","argumentsList","parseStyle","exports","isPlatformColor","value","isIOS","semantic","isAndroid","resource_paths","style","entries","Object","parsedStyles","fromEntries","map","_ref","key","hasNestedProperties","isTransform","Array","isArray","isDynamicFunction","isValidStyle","getValueForBreakpoint","isWeb","normalizeStyles"],"sourceRoot":"../../../src","sources":["utils/styles.ts"],"mappings":";;;;;;AACA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAEO,MAAMG,eAAe,GAAGA,CAC3BC,EAAY,EAAEC,UAA+C,EAC7DC,UAAsB,KACX,IAAIC,KAAK,CAACH,EAAE,EAAE;EACzBI,KAAK,EAAEA,CAACC,MAAM,EAAEC,OAAO,EAAEC,aAAa,KAClCC,UAAU,CAACH,MAAM,CAACD,KAAK,CAACE,OAAO,EAAEC,aAAa,CAAC,EAAEN,UAAU,EAAEC,UAAU;AAC/E,CAAC,CAAC;AAAAO,OAAA,CAAAV,eAAA,GAAAA,eAAA;AAEK,MAAMW,eAAe,GAAkBC,KAAQ,IAAc;EAChE,IAAIC,aAAK,EAAE;IACP,OAAO,UAAU,IAAID,KAAK,IAAI,OAAOA,KAAK,CAACE,QAAQ,KAAK,QAAQ;EACpE;EAEA,OAAOC,iBAAS,IAAI,gBAAgB,IAAIH,KAAK,IAAI,OAAOA,KAAK,CAACI,cAAc,KAAK,QAAQ;AAC7F,CAAC;AAAAN,OAAA,CAAAC,eAAA,GAAAA,eAAA;AAEM,MAAMF,UAAU,GAAGA,CACtBQ,KAA2B,EAC3Bf,UAA+C,EAC/CC,UAAsB,KAClB;EACJ,MAAMe,OAAO,GAAGC,MAAM,CAACD,OAAO,CAACD,KAAK,IAAI,CAAC,CAAC,CAGzC;EAED,MAAMG,YAAY,GAAGD,MAAM,CACtBE,WAAW,CAACH,OAAO,CACfI,GAAG,CAACC,IAAA,IAAkB;IAAA,IAAjB,CAACC,GAAG,EAAEZ,KAAK,CAAC,GAAAW,IAAA;IACd,MAAME,mBAAmB,GAAGD,GAAG,KAAK,cAAc,IAAIA,GAAG,KAAK,kBAAkB;IAEhF,IAAIC,mBAAmB,EAAE;MACrB,OAAO,CACHD,GAAG,EACHf,UAAU,CAACG,KAAK,EAA0BV,UAAU,EAAEC,UAAU,CAAC,CACpE;IACL;IAEA,MAAMuB,WAAW,GAAGF,GAAG,KAAK,WAAW;IAEvC,IAAIE,WAAW,IAAIC,KAAK,CAACC,OAAO,CAAChB,KAAK,CAAC,EAAE;MACrC,OAAO,CACHY,GAAG,EACHZ,KAAK,CAACU,GAAG,CAACV,KAAK,IAAIH,UAAU,CAACG,KAAK,EAAEV,UAAU,EAAEC,UAAU,CAAC,CAAC,CAChE;IACL;IAEA,MAAM0B,iBAAiB,GAAG,OAAOjB,KAAK,KAAK,UAAU;IACrD,MAAMkB,YAAY,GAAG,OAAOlB,KAAK,KAAK,QAAQ,IAAID,eAAe,CAACC,KAAK,CAAC;IAExE,IAAIiB,iBAAiB,IAAIC,YAAY,EAAE;MACnC,OAAO,CAACN,GAAG,EAAEZ,KAAK,CAAC;IACvB;IAEA,OAAO,CACHY,GAAG,EACH,IAAAO,kCAAqB,EAACnB,KAAuF,CAAC,CACjH;EACL,CAAC,CACL,CAAC;EAEL,OAAOoB,aAAK,GACN,IAAAC,gCAAe,EAACb,YAAY,CAAC,GAC7BA,YAAY;AACtB,CAAC;AAAAV,OAAA,CAAAD,UAAA,GAAAA,UAAA"}
|
package/lib/module/Unistyles.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { UnistylesModule } from './UnistylesModule';
|
2
2
|
import { UnistylesRuntime } from './UnistylesRuntime';
|
3
|
-
import {
|
3
|
+
import { UnistylesBuiltInEngine } from './UnistylesEngine';
|
4
4
|
import { UnistyleRegistry } from './UnistyleRegistry';
|
5
5
|
import { UnistylesError } from './types';
|
6
6
|
class Unistyles {
|
@@ -14,7 +14,7 @@ class Unistyles {
|
|
14
14
|
this._bridge = global.__UNISTYLES__;
|
15
15
|
this._registry = new UnistyleRegistry(this._bridge);
|
16
16
|
this._runtime = new UnistylesRuntime(this._bridge, this._registry);
|
17
|
-
this._engine = new
|
17
|
+
this._engine = new UnistylesBuiltInEngine(this._registry, this._runtime);
|
18
18
|
}
|
19
19
|
get registry() {
|
20
20
|
return this._registry;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["UnistylesModule","UnistylesRuntime","
|
1
|
+
{"version":3,"names":["UnistylesModule","UnistylesRuntime","UnistylesBuiltInEngine","UnistyleRegistry","UnistylesError","Unistyles","constructor","isInstalled","install","Error","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","_runtime","_engine","registry","runtime","engine","unistyles"],"sourceRoot":"../../src","sources":["Unistyles.ts"],"mappings":"AAAA,SAASA,eAAe,QAAQ,mBAAmB;AACnD,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,SAASC,cAAc,QAAQ,SAAS;AAExC,MAAMC,SAAS,CAAC;EAMZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGP,eAAe,EAAEQ,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACD,WAAW,EAAE;MACd,MAAM,IAAIE,KAAK,CAACL,cAAc,CAACM,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIX,gBAAgB,CAAC,IAAI,CAACQ,OAAO,CAAC;IACnD,IAAI,CAACI,QAAQ,GAAG,IAAId,gBAAgB,CAAC,IAAI,CAACU,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;IAClE,IAAI,CAACE,OAAO,GAAG,IAAId,sBAAsB,CAAC,IAAI,CAACY,SAAS,EAAE,IAAI,CAACC,QAAQ,CAAC;EAC5E;EAEA,IAAWE,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACH,SAAS;EACzB;EAEA,IAAWI,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACH,QAAQ;EACxB;EAEA,IAAWI,MAAMA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACH,OAAO;EACvB;AACJ;AAEA,OAAO,MAAMI,SAAS,GAAG,IAAIf,SAAS,CAAC,CAAC"}
|
@@ -1,12 +1,16 @@
|
|
1
|
-
|
2
|
-
export class
|
3
|
-
// @ts-ignore
|
1
|
+
import { getKeyForCustomMediaQuery } from './utils';
|
2
|
+
export class UnistylesBuiltInEngine {
|
4
3
|
constructor(registry, runtime) {
|
5
4
|
this.registry = registry;
|
6
5
|
this.runtime = runtime;
|
7
6
|
this.registry = registry;
|
8
7
|
this.runtime = runtime;
|
9
8
|
}
|
9
|
+
isMediaQuery = key => {
|
10
|
+
const regex = /(:w|:h)/;
|
11
|
+
return key.length > 0 && regex.test(key);
|
12
|
+
};
|
13
|
+
didMatchMediaQuery = keys => getKeyForCustomMediaQuery(keys, this.runtime.screen, this.registry.breakpoints);
|
10
14
|
|
11
15
|
// UnistylesEngine.parseStyleSheet
|
12
16
|
// UnistylesEngine.parseStyle
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["getKeyForCustomMediaQuery","UnistylesBuiltInEngine","constructor","registry","runtime","isMediaQuery","key","regex","length","test","didMatchMediaQuery","keys","screen","breakpoints"],"sourceRoot":"../../src","sources":["UnistylesEngine.ts"],"mappings":"AAEA,SAASA,yBAAyB,QAAQ,SAAS;AAGnD,OAAO,MAAMC,sBAAsB,CAA4B;EAC3DC,WAAWA,CAASC,QAA0B,EAAUC,OAAyB,EAAE;IAAA,KAA/DD,QAA0B,GAA1BA,QAA0B;IAAA,KAAUC,OAAyB,GAAzBA,OAAyB;IAC7E,IAAI,CAACD,QAAQ,GAAGA,QAAQ;IACxB,IAAI,CAACC,OAAO,GAAGA,OAAO;EAC1B;EAEOC,YAAY,GAAIC,GAAW,IAAK;IACnC,MAAMC,KAAK,GAAG,SAAS;IAEvB,OAAOD,GAAG,CAACE,MAAM,GAAG,CAAC,IAAID,KAAK,CAACE,IAAI,CAACH,GAAG,CAAC;EAC5C,CAAC;EAEMI,kBAAkB,GAAIC,IAAgB,IACzCX,yBAAyB,CAACW,IAAI,EAAE,IAAI,CAACP,OAAO,CAACQ,MAAM,EAAE,IAAI,CAACT,QAAQ,CAACU,WAAW,CAAC;;EAEnF;EACA;EACA;AACJ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createStyleSheet","styles"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":"
|
1
|
+
{"version":3,"names":["createStyleSheet","styles"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":"AAEA,OAAO,MAAMA,gBAAgB,GAAUC,MAA4F,IAAY;EAC3I,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAC9B,OAAOA,MAAM;EACjB;EAEA,OAAOA,MAAM;AACjB,CAAC"}
|
package/lib/module/types/cxx.js
CHANGED
@@ -5,8 +5,7 @@ export let ScreenOrientation = /*#__PURE__*/function (ScreenOrientation) {
|
|
5
5
|
}({});
|
6
6
|
export let CxxUnistylesEventTypes = /*#__PURE__*/function (CxxUnistylesEventTypes) {
|
7
7
|
CxxUnistylesEventTypes["Theme"] = "theme";
|
8
|
-
CxxUnistylesEventTypes["
|
9
|
-
CxxUnistylesEventTypes["Breakpoint"] = "breakpoint";
|
8
|
+
CxxUnistylesEventTypes["Layout"] = "layout";
|
10
9
|
return CxxUnistylesEventTypes;
|
11
10
|
}({});
|
12
11
|
export let UnistylesError = /*#__PURE__*/function (UnistylesError) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["ScreenOrientation","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":"
|
1
|
+
{"version":3,"names":["ScreenOrientation","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":"AAYA,WAAYA,iBAAiB,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAyB7B,WAAYC,sBAAsB,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAuBlC,WAAYC,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}
|
package/lib/module/useStyles.js
CHANGED
@@ -2,9 +2,6 @@ import { useMemo } from 'react';
|
|
2
2
|
import { StyleSheet } from 'react-native';
|
3
3
|
import { parseStyle, proxifyFunction } from './utils';
|
4
4
|
import { useUnistyles } from './useUnistyles';
|
5
|
-
|
6
|
-
// todo types
|
7
|
-
|
8
5
|
export const useStyles = stylesheet => {
|
9
6
|
const {
|
10
7
|
theme,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["useMemo","StyleSheet","parseStyle","proxifyFunction","useUnistyles","useStyles","stylesheet","theme","breakpoint","screenSize","styles","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,eAAe,QAAQ,SAAS;AAErD,SAASC,YAAY,QAAQ,gBAAgB
|
1
|
+
{"version":3,"names":["useMemo","StyleSheet","parseStyle","proxifyFunction","useUnistyles","useStyles","stylesheet","theme","breakpoint","screenSize","styles","parsedStyles","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","style","create"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,UAAU,EAAEC,eAAe,QAAQ,SAAS;AAErD,SAASC,YAAY,QAAQ,gBAAgB;AAG7C,OAAO,MAAMC,SAAS,GAAsCC,UAAyD,IAAK;EACtH,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAGL,YAAY,CAAC,CAAC;EAExD,IAAI,CAACE,UAAU,EAAE;IACb,OAAO;MACHC,KAAK;MACLC,UAAU;MACVE,MAAM,EAAE,CAAC;IACb,CAAC;EACL;EAEA,MAAMC,YAAY,GAAGX,OAAO,CAAC,MAAM,OAAOM,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;EAEtC,MAAMM,iBAAiB,GAAGZ,OAAO,CAAC,MAAMa,MAAM,CACzCC,OAAO,CAACH,YAAY,CAAC,CACrBI,MAAM,CAAC,CAACC,GAAG,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAAF,IAAA;IACtB,MAAMG,KAAK,GAAGD,KAA8B;IAE5C,IAAI,OAAOA,KAAK,KAAK,UAAU,EAAE;MAC7B,OAAO;QACH,GAAGH,GAAG;QACN,CAACE,GAAG,GAAGf,eAAe,CAACgB,KAAK,EAAEX,UAAU,EAAEC,UAAU;MACxD,CAAC;IACL;IAEA,OAAOR,UAAU,CAACoB,MAAM,CAAC;MACrB,GAAGL,GAAG;MACN,CAACE,GAAG,GAAGhB,UAAU,CAAKkB,KAAK,EAAEZ,UAAU,EAAEC,UAAU;IACvD,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACD,UAAU,EAAEC,UAAU,EAAEE,YAAY,CAAC,CAAC;EAEzD,OAAO;IACHJ,KAAK;IACLC,UAAU;IACVE,MAAM,EAAEE;EACZ,CAAC;AACL,CAAC"}
|
@@ -4,11 +4,12 @@ import { CxxUnistylesEventTypes } from './types';
|
|
4
4
|
import { unistyles } from './Unistyles';
|
5
5
|
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
|
6
6
|
export const useUnistyles = () => {
|
7
|
+
const [orientation, setOrientation] = useState(unistyles.runtime.orientation);
|
7
8
|
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName));
|
8
9
|
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint);
|
9
10
|
const [screenSize, setScreenSize] = useState({
|
10
|
-
width:
|
11
|
-
height:
|
11
|
+
width: unistyles.runtime.screen.width,
|
12
|
+
height: unistyles.runtime.screen.height
|
12
13
|
});
|
13
14
|
useEffect(() => {
|
14
15
|
const subscription = unistylesEvents.addListener('onChange', event => {
|
@@ -19,20 +20,12 @@ export const useUnistyles = () => {
|
|
19
20
|
setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName));
|
20
21
|
return;
|
21
22
|
}
|
22
|
-
|
23
|
-
case CxxUnistylesEventTypes.Size:
|
23
|
+
case CxxUnistylesEventTypes.Layout:
|
24
24
|
{
|
25
|
-
const
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
});
|
30
|
-
return;
|
31
|
-
}
|
32
|
-
case CxxUnistylesEventTypes.Breakpoint:
|
33
|
-
{
|
34
|
-
const breakpointEvent = event;
|
35
|
-
setBreakpoint(breakpointEvent.payload.breakpoint);
|
25
|
+
const layoutEvent = event;
|
26
|
+
setBreakpoint(layoutEvent.payload.breakpoint);
|
27
|
+
setOrientation(layoutEvent.payload.orientation);
|
28
|
+
setScreenSize(layoutEvent.payload.screen);
|
36
29
|
return;
|
37
30
|
}
|
38
31
|
default:
|
@@ -43,6 +36,7 @@ export const useUnistyles = () => {
|
|
43
36
|
}, []);
|
44
37
|
return {
|
45
38
|
theme,
|
39
|
+
orientation,
|
46
40
|
breakpoint,
|
47
41
|
screenSize
|
48
42
|
};
|