react-native-unistyles 2.0.0-alpha.5 → 2.0.0-alpha.6
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/cxx/UnistylesRuntime.cpp +262 -0
- package/cxx/UnistylesRuntime.h +61 -0
- 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.map +1 -1
- package/lib/commonjs/useStyles.js +0 -2
- package/lib/commonjs/useStyles.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js +11 -68
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/commonjs/utils/common.js +3 -1
- package/lib/commonjs/utils/common.js.map +1 -1
- package/lib/commonjs/utils/mediaQueries.js +57 -155
- 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.map +1 -1
- package/lib/module/useStyles.js +0 -3
- package/lib/module/useStyles.js.map +1 -1
- package/lib/module/utils/breakpoints.js +11 -68
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/module/utils/common.js +2 -0
- package/lib/module/utils/common.js.map +1 -1
- package/lib/module/utils/mediaQueries.js +57 -155
- 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/createStyleSheet.d.ts +2 -5
- package/lib/typescript/src/createStyleSheet.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 +7 -1
- 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 +1 -3
- package/lib/typescript/src/useStyles.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 +2 -0
- package/lib/typescript/src/utils/common.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/types/breakpoints.ts +6 -3
- package/src/types/core.ts +25 -22
- package/src/types/cxx.ts +8 -1
- package/src/types/index.ts +1 -1
- package/src/types/mediaQueries.ts +9 -4
- package/src/useStyles.ts +3 -6
- package/src/utils/breakpoints.ts +14 -71
- package/src/utils/common.ts +2 -0
- package/src/utils/mediaQueries.ts +102 -163
- package/src/utils/styles.ts +13 -55
@@ -4,191 +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
|
-
* @example
|
17
|
-
* extractValues("w[100,200]") // returns [100, 200]
|
18
|
-
* extractValues("h[300]") // returns [300]
|
19
|
-
* extractValues("h[,300]") // returns [0,300]
|
20
|
-
* extractValues("h[100,]") // returns [100]
|
21
|
-
*/
|
22
|
-
const extractValues = codedValue => {
|
23
|
-
const cleanedValue = codedValue.replace(/[wh ]/g, '');
|
24
|
-
const [left, right] = cleanedValue.split(',');
|
25
|
-
if (!right) {
|
26
|
-
const lh = left.startsWith('[') ? Number(left.replace(/[[\]()]/g, '')) : Number(left.replace(/[[\]()]/g, '')) + 1;
|
27
|
-
return [lh];
|
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];
|
28
15
|
}
|
29
|
-
const
|
30
|
-
|
31
|
-
|
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];
|
32
47
|
};
|
33
|
-
|
34
|
-
/**
|
35
|
-
* Determines if the given screen size matches the specified breakpoint query.
|
36
|
-
*
|
37
|
-
* The function checks if the screen size (width and/or height) falls within the range
|
38
|
-
* specified by the breakpoint query. The query can specify width (using 'w'), height (using 'h'),
|
39
|
-
* or both.
|
40
|
-
*
|
41
|
-
* @param {string} query - The breakpoint query string. Examples: 'w[100,200]', 'h[300]', 'w[100,200]h[300,400]'.
|
42
|
-
* @param {ScreenSize} screenSize - The screen size to check against the breakpoint query.
|
43
|
-
* @returns {boolean} True if the screen size matches the breakpoint query, false otherwise.
|
44
|
-
*
|
45
|
-
* @example
|
46
|
-
* const screenSize = { width: 150, height: 350 }
|
47
|
-
* isWithinBreakpoint('w[100,200]', screenSize) // returns true
|
48
|
-
* isWithinBreakpoint('h[400]', screenSize) // returns false
|
49
|
-
*/
|
50
48
|
exports.extractValues = extractValues;
|
51
|
-
const isWithinBreakpoint = (query, screenSize) => {
|
52
|
-
|
53
|
-
|
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);
|
54
54
|
}
|
55
|
-
if (
|
56
|
-
return isWithinTheWidth(query, screenSize.width);
|
55
|
+
if (hasWidthBreakpoint) {
|
56
|
+
return isWithinTheWidth(query, screenSize.width, breakpoints);
|
57
57
|
}
|
58
|
-
if (
|
59
|
-
return isWithinTheHeight(query, screenSize.height);
|
58
|
+
if (hasHeightBreakpoint) {
|
59
|
+
return isWithinTheHeight(query, screenSize.height, breakpoints);
|
60
60
|
}
|
61
61
|
return false;
|
62
62
|
};
|
63
|
-
|
64
|
-
/**
|
65
|
-
* Determines if the given width matches the specified width range in the query.
|
66
|
-
*
|
67
|
-
* The function checks if the provided width falls within the range specified by the query.
|
68
|
-
* The query specifies a width range using a format like 'w[100,200]'. If only one value is provided,
|
69
|
-
* it's treated as a minimum width.
|
70
|
-
*
|
71
|
-
* @param {string} query - The width query string. Examples: 'w[100,200]' or 'w[100]'.
|
72
|
-
* @param {number} width - The width to check against the query.
|
73
|
-
* @returns {boolean} True if the width matches the query range, false otherwise.
|
74
|
-
*
|
75
|
-
* @example
|
76
|
-
* isWithinTheWidth('w[100,200]', 150) // returns true
|
77
|
-
* isWithinTheWidth('w[100]', 50) // returns false
|
78
|
-
* isWithinTheWidth('w[100]', 150) // returns true
|
79
|
-
*/
|
80
63
|
exports.isWithinBreakpoint = isWithinBreakpoint;
|
81
|
-
const isWithinTheWidth = (query, width) => {
|
82
|
-
const [minWidth, maxWidth] = extractValues(query);
|
64
|
+
const isWithinTheWidth = (query, width, breakpoints) => {
|
65
|
+
const [minWidth, maxWidth] = extractValues(query, breakpoints);
|
83
66
|
if (maxWidth && width >= minWidth && width <= maxWidth) {
|
84
67
|
return true;
|
85
68
|
}
|
86
69
|
return !maxWidth && width >= minWidth;
|
87
70
|
};
|
88
|
-
|
89
|
-
/**
|
90
|
-
* Determines if the given height matches the specified height range in the query.
|
91
|
-
*
|
92
|
-
* The function checks if the provided height falls within the range specified by the query.
|
93
|
-
* The query specifies a height range using a format like 'h[100,200]'. If only one value is provided,
|
94
|
-
* it's treated as a minimum height.
|
95
|
-
*
|
96
|
-
* @param {string} query - The height query string. Examples: 'h[100,200]' or 'h[100]'.
|
97
|
-
* @param {number} height - The height to check against the query.
|
98
|
-
* @returns {boolean} True if the height matches the query range, false otherwise.
|
99
|
-
*
|
100
|
-
* @example
|
101
|
-
* isWithinTheHeight('h[100,200]', 150) // returns true
|
102
|
-
* isWithinTheHeight('h[100]', 50) // returns false
|
103
|
-
* isWithinTheHeight('h[100]', 150) // returns true
|
104
|
-
*/
|
105
71
|
exports.isWithinTheWidth = isWithinTheWidth;
|
106
|
-
const isWithinTheHeight = (query, height) => {
|
107
|
-
const [minHeight, maxHeight] = extractValues(query);
|
72
|
+
const isWithinTheHeight = (query, height, breakpoints) => {
|
73
|
+
const [minHeight, maxHeight] = extractValues(query, breakpoints);
|
108
74
|
if (maxHeight && height >= minHeight && height <= maxHeight) {
|
109
75
|
return true;
|
110
76
|
}
|
111
77
|
return !maxHeight && height >= minHeight;
|
112
78
|
};
|
113
|
-
|
114
|
-
/**
|
115
|
-
* Determines if the given screen size matches both the specified width and height ranges in the query.
|
116
|
-
*
|
117
|
-
* The function checks if the provided screen size (both width and height) falls within the ranges
|
118
|
-
* specified by the query. The query can specify both width and height using a format like 'w[100,200]:h[300,400]'.
|
119
|
-
*
|
120
|
-
* @param {string} query - The combined width and height query string. Example: 'w[100,200]:h[300,400]'.
|
121
|
-
* @param {ScreenSize} screenSize - The screen size to check against the query.
|
122
|
-
* @returns {boolean} True if the screen size matches both the width and height ranges in the query, false otherwise.
|
123
|
-
*
|
124
|
-
* @example
|
125
|
-
* const screenSize = { width: 150, height: 350 }
|
126
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[300,400]', screenSize) // returns true
|
127
|
-
* isWithinTheWidthAndHeight('w[100,200]:h[400,500]', screenSize) // returns false
|
128
|
-
*/
|
129
79
|
exports.isWithinTheHeight = isWithinTheHeight;
|
130
|
-
const isWithinTheWidthAndHeight = (query, screenSize) => {
|
131
|
-
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);
|
132
82
|
return result.length === 2;
|
133
83
|
};
|
134
|
-
|
135
|
-
/**
|
136
|
-
* Checks if the given query string is a valid custom media query.
|
137
|
-
*
|
138
|
-
* The valid custom media query formats include:
|
139
|
-
* - :w[200]
|
140
|
-
* - :w[0, 200]
|
141
|
-
* - :w[, 300]
|
142
|
-
* - :h[200]
|
143
|
-
* - :h[0, 500]
|
144
|
-
* - :h[,200]
|
145
|
-
* - :w[100, 300]:h[200,500]
|
146
|
-
* - :h[200,500]:w[100, 300]
|
147
|
-
*
|
148
|
-
* @param {string} query - The query string to be checked.
|
149
|
-
* @returns {boolean} Returns `true` if the query is a valid custom media query, otherwise `false`.
|
150
|
-
* @example
|
151
|
-
*
|
152
|
-
* isMediaQuery(':w[200]') // true
|
153
|
-
* isMediaQuery(':w100]') // false
|
154
|
-
*/
|
155
84
|
exports.isWithinTheWidthAndHeight = isWithinTheWidthAndHeight;
|
156
85
|
const isMediaQuery = query => {
|
157
|
-
const regex =
|
86
|
+
const regex = /(:w|:h)/;
|
158
87
|
return query.length > 0 && regex.test(query);
|
159
88
|
};
|
160
|
-
|
161
|
-
/**
|
162
|
-
* Retrieves the first matching custom media query key based on the provided screen size.
|
163
|
-
*
|
164
|
-
* The function processes an array of media queries and returns the first query that matches
|
165
|
-
* the given screen size. The media queries can be in formats like:
|
166
|
-
* - w[200]
|
167
|
-
* - w[0, 200]
|
168
|
-
* - w[, 300]
|
169
|
-
* - h[200]
|
170
|
-
* - h[0, 500]
|
171
|
-
* - h[,200]
|
172
|
-
* - w[100, 300]:h[200,500]
|
173
|
-
* - h[200,500]:w[100, 300]
|
174
|
-
*
|
175
|
-
* @param {Array<[string, string | number]>} mediaQueries - An array of tuples containing media query keys and associated values.
|
176
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
177
|
-
* @returns {string | undefined} Returns the first matching media query key or `undefined` if no match is found.
|
178
|
-
* @example
|
179
|
-
*
|
180
|
-
* const queries = [[':w[200]', 'value1'], [':h[300,500]', 'value2']]
|
181
|
-
* const size = { width: 250, height: 400 }
|
182
|
-
* getKeyForCustomMediaQuery(queries, size) // ':w[200]
|
183
|
-
*/
|
184
89
|
exports.isMediaQuery = isMediaQuery;
|
185
|
-
const getKeyForCustomMediaQuery = (mediaQueries, screenSize) => {
|
90
|
+
const getKeyForCustomMediaQuery = (mediaQueries, screenSize, breakpoints) => {
|
186
91
|
const [matchedQuery] = mediaQueries.flatMap(_ref => {
|
187
92
|
let [key] = _ref;
|
188
|
-
|
189
|
-
return isWithinBreakpoint(key, screenSize) ? key : undefined;
|
190
|
-
}
|
191
|
-
return key.split(':').filter(Boolean).map(query => isWithinBreakpoint(query, screenSize) ? key : undefined);
|
93
|
+
return isWithinBreakpoint(key, screenSize, breakpoints) ? key : undefined;
|
192
94
|
}).filter(Boolean);
|
193
95
|
return matchedQuery;
|
194
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"}
|
@@ -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"}
|
@@ -1,26 +1,6 @@
|
|
1
1
|
import { unistyles } from '../Unistyles';
|
2
2
|
import { isMobile, Orientation, throwError } from './common';
|
3
3
|
import { ScreenOrientation } from '../types';
|
4
|
-
import { getKeyForCustomMediaQuery, isMediaQuery } from './mediaQueries';
|
5
|
-
/**
|
6
|
-
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
7
|
-
*
|
8
|
-
* This function takes an object where keys represent breakpoint names and values are numeric.
|
9
|
-
* It returns a new object with the same keys but sorted based on their corresponding numeric values.
|
10
|
-
* Additionally, it validates that:
|
11
|
-
* 1. The first breakpoint starts with a value of 0.
|
12
|
-
* 2. No duplicate breakpoint values exist.
|
13
|
-
*
|
14
|
-
* If the validation fails, appropriate error messages are logged to the console.
|
15
|
-
*
|
16
|
-
* @template B - An object type where keys are strings and values are numbers.
|
17
|
-
* @param {B} breakpoints - The breakpoints object to be sorted and validated.
|
18
|
-
* @returns {B} A new object with sorted and validated breakpoints.
|
19
|
-
*
|
20
|
-
* @example
|
21
|
-
* const input = { md: 768, lg: 1024, sm: 0 }
|
22
|
-
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
23
|
-
*/
|
24
4
|
export const sortAndValidateBreakpoints = breakpoints => {
|
25
5
|
const sortedPairs = Object.entries(breakpoints).sort((breakpoint1, breakpoint2) => {
|
26
6
|
const [, value1] = breakpoint1;
|
@@ -38,22 +18,6 @@ export const sortAndValidateBreakpoints = breakpoints => {
|
|
38
18
|
}
|
39
19
|
return sortedBreakpoints;
|
40
20
|
};
|
41
|
-
|
42
|
-
/**
|
43
|
-
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
44
|
-
*
|
45
|
-
* This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
|
46
|
-
* that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
|
47
|
-
*
|
48
|
-
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
49
|
-
* @param {number} width - The screen width to determine the breakpoint for.
|
50
|
-
* @param breakpointEntries - sorted pairs of breakpoints
|
51
|
-
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
52
|
-
*
|
53
|
-
* @example
|
54
|
-
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
55
|
-
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
56
|
-
*/
|
57
21
|
export const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
|
58
22
|
const [key] = breakpointEntries.find((_ref, index, otherBreakpoints) => {
|
59
23
|
let [, value] = _ref;
|
@@ -66,38 +30,14 @@ export const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
|
|
66
30
|
});
|
67
31
|
return key;
|
68
32
|
};
|
69
|
-
|
70
|
-
/**
|
71
|
-
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
72
|
-
*
|
73
|
-
* The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
|
74
|
-
* If no custom media query matches, the function then checks for a direct breakpoint match.
|
75
|
-
* If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
|
76
|
-
*
|
77
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
78
|
-
*
|
79
|
-
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
80
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
81
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
82
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
83
|
-
*
|
84
|
-
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
85
|
-
*
|
86
|
-
* @example
|
87
|
-
*
|
88
|
-
* const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
|
89
|
-
* const screenSize = { width: 250, height: 400 }
|
90
|
-
* const breakpoints = { sm: 300, md: 600, lg: 900 }
|
91
|
-
*
|
92
|
-
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
93
|
-
*/
|
94
|
-
export const getValueForBreakpoint = (value, breakpoint, screenSize) => {
|
33
|
+
export const getValueForBreakpoint = value => {
|
95
34
|
// the highest priority is for custom media queries
|
96
35
|
const customMediaQueries = Object.entries(value).filter(_ref2 => {
|
97
36
|
let [key] = _ref2;
|
98
|
-
return isMediaQuery(key);
|
37
|
+
return unistyles.engine.isMediaQuery(key);
|
99
38
|
});
|
100
|
-
const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize)
|
39
|
+
// const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
|
40
|
+
const customMediaQueryKey = unistyles.engine.didMatchMediaQuery(customMediaQueries);
|
101
41
|
if (customMediaQueryKey && customMediaQueryKey in value) {
|
102
42
|
return value[customMediaQueryKey];
|
103
43
|
}
|
@@ -110,13 +50,16 @@ export const getValueForBreakpoint = (value, breakpoint, screenSize) => {
|
|
110
50
|
if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
|
111
51
|
return value[unistyles.runtime.orientation === ScreenOrientation.Portrait ? Orientation.Portrait : Orientation.Landscape];
|
112
52
|
}
|
53
|
+
const breakpoint = unistyles.runtime.breakpoint;
|
54
|
+
if (!breakpoint) {
|
55
|
+
return undefined;
|
56
|
+
}
|
113
57
|
|
114
58
|
// if user defined breakpoints, then we look for the valid one
|
115
|
-
const
|
116
|
-
const directBreakpoint = value[unifiedKey];
|
59
|
+
const directBreakpoint = value[breakpoint];
|
117
60
|
|
118
61
|
// if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
|
119
|
-
if (directBreakpoint ||
|
62
|
+
if (directBreakpoint || breakpoint in value) {
|
120
63
|
return directBreakpoint;
|
121
64
|
}
|
122
65
|
|
@@ -124,7 +67,7 @@ export const getValueForBreakpoint = (value, breakpoint, screenSize) => {
|
|
124
67
|
const breakpointPairs = unistyles.runtime.sortedBreakpoints;
|
125
68
|
const currentBreakpoint = breakpointPairs.findIndex(_ref3 => {
|
126
69
|
let [key] = _ref3;
|
127
|
-
return key ===
|
70
|
+
return key === breakpoint;
|
128
71
|
});
|
129
72
|
const availableBreakpoints = breakpointPairs.filter((_ref4, index) => {
|
130
73
|
let [key] = _ref4;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unistyles","isMobile","Orientation","throwError","ScreenOrientation","
|
1
|
+
{"version":3,"names":["unistyles","isMobile","Orientation","throwError","ScreenOrientation","sortAndValidateBreakpoints","breakpoints","sortedPairs","Object","entries","sort","breakpoint1","breakpoint2","value1","value2","sortedBreakpoints","freeze","fromEntries","breakpointValues","values","firstBreakpoint","length","Set","size","getBreakpointFromScreenWidth","width","breakpointEntries","key","find","_ref","index","otherBreakpoints","value","minVal","maxVal","getValueForBreakpoint","customMediaQueries","filter","_ref2","engine","isMediaQuery","customMediaQueryKey","didMatchMediaQuery","hasBreakpoints","runtime","Landscape","Portrait","orientation","breakpoint","undefined","directBreakpoint","breakpointPairs","currentBreakpoint","findIndex","_ref3","availableBreakpoints","_ref4","map","_ref5"],"sourceRoot":"../../../src","sources":["utils/breakpoints.ts"],"mappings":"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"}
|
@@ -7,6 +7,8 @@ export const warn = message => {
|
|
7
7
|
};
|
8
8
|
export const isMobile = Platform.OS === 'android' || Platform.OS === 'ios';
|
9
9
|
export const isWeb = Platform.OS === 'web';
|
10
|
+
export const isIOS = Platform.OS === 'ios';
|
11
|
+
export const isAndroid = Platform.OS === 'android';
|
10
12
|
export const isServer = typeof window === 'undefined';
|
11
13
|
export const Orientation = {
|
12
14
|
Landscape: 'landscape',
|