react-native-unistyles 2.0.0-alpha.4 → 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/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
@@ -0,0 +1,262 @@
|
|
1
|
+
#include "UnistylesRuntime.h"
|
2
|
+
|
3
|
+
#include <string>
|
4
|
+
#include <vector>
|
5
|
+
|
6
|
+
#pragma region HostObject
|
7
|
+
|
8
|
+
std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& runtime) {
|
9
|
+
std::vector<jsi::PropNameID> properties;
|
10
|
+
|
11
|
+
// getters
|
12
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("screenWidth")));
|
13
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("screenHeight")));
|
14
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("hasAdaptiveThemes")));
|
15
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("themeName")));
|
16
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("breakpoint")));
|
17
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("colorScheme")));
|
18
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("sortedBreakpointPairs")));
|
19
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("useBreakpoints")));
|
20
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("useTheme")));
|
21
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("useAdaptiveThemes")));
|
22
|
+
|
23
|
+
// setters
|
24
|
+
properties.push_back(jsi::PropNameID::forUtf8(runtime, std::string("themes")));
|
25
|
+
|
26
|
+
return properties;
|
27
|
+
}
|
28
|
+
|
29
|
+
|
30
|
+
jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& propNameId) {
|
31
|
+
std::string propName = propNameId.utf8(runtime);
|
32
|
+
|
33
|
+
if (propName == "screenWidth") {
|
34
|
+
return jsi::Value(this->screenWidth);
|
35
|
+
}
|
36
|
+
|
37
|
+
if (propName == "screenHeight") {
|
38
|
+
return jsi::Value(this->screenHeight);
|
39
|
+
}
|
40
|
+
|
41
|
+
if (propName == "hasAdaptiveThemes") {
|
42
|
+
return jsi::Value(this->hasAdaptiveThemes);
|
43
|
+
}
|
44
|
+
|
45
|
+
if (propName == "themeName") {
|
46
|
+
return !this->themeName.empty()
|
47
|
+
? jsi::Value(jsi::String::createFromUtf8(runtime, this->themeName))
|
48
|
+
: this->getThemeOrFail(runtime);
|
49
|
+
}
|
50
|
+
|
51
|
+
if (propName == "breakpoint") {
|
52
|
+
return !this->breakpoint.empty()
|
53
|
+
? jsi::Value(jsi::String::createFromUtf8(runtime, this->breakpoint))
|
54
|
+
: jsi::Value::undefined();
|
55
|
+
}
|
56
|
+
|
57
|
+
if (propName == "colorScheme") {
|
58
|
+
return jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme));
|
59
|
+
}
|
60
|
+
|
61
|
+
if (propName == "sortedBreakpointPairs") {
|
62
|
+
std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(runtime, this->sortedBreakpointPairs.size());
|
63
|
+
|
64
|
+
for (size_t i = 0; i < this->sortedBreakpointPairs.size(); ++i) {
|
65
|
+
std::unique_ptr<jsi::Array> pairArray = std::make_unique<jsi::Array>(runtime, 2);
|
66
|
+
jsi::String nameValue = jsi::String::createFromUtf8(runtime, this->sortedBreakpointPairs[i].first);
|
67
|
+
|
68
|
+
pairArray->setValueAtIndex(runtime, 0, nameValue);
|
69
|
+
pairArray->setValueAtIndex(runtime, 1, jsi::Value(this->sortedBreakpointPairs[i].second));
|
70
|
+
sortedBreakpointEntriesArray->setValueAtIndex(runtime, i, *pairArray);
|
71
|
+
}
|
72
|
+
|
73
|
+
return jsi::Value(runtime, *sortedBreakpointEntriesArray);
|
74
|
+
}
|
75
|
+
|
76
|
+
if (propName == "useBreakpoints") {
|
77
|
+
return jsi::Function::createFromHostFunction(
|
78
|
+
runtime,
|
79
|
+
jsi::PropNameID::forAscii(runtime, "useBreakpoints"),
|
80
|
+
1,
|
81
|
+
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
82
|
+
jsi::Object breakpointsObj = arguments[0].asObject(runtime);
|
83
|
+
jsi::Array propertyNames = breakpointsObj.getPropertyNames(runtime);
|
84
|
+
std::vector<std::pair<std::string, double>> sortedBreakpointEntriesVec;
|
85
|
+
|
86
|
+
for (size_t i = 0; i < propertyNames.size(runtime); ++i) {
|
87
|
+
jsi::Value propNameValue = propertyNames.getValueAtIndex(runtime, i);
|
88
|
+
std::string name = propNameValue.asString(runtime).utf8(runtime);
|
89
|
+
jsi::PropNameID propNameID = jsi::PropNameID::forUtf8(runtime, name);
|
90
|
+
jsi::Value value = breakpointsObj.getProperty(runtime, propNameID);
|
91
|
+
|
92
|
+
if (value.isNumber()) {
|
93
|
+
double breakpointValue = value.asNumber();
|
94
|
+
sortedBreakpointEntriesVec.push_back(std::make_pair(name, breakpointValue));
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
std::sort(sortedBreakpointEntriesVec.begin(), sortedBreakpointEntriesVec.end(), [](const std::pair<std::string, double>& a, const std::pair<std::string, double>& b) {
|
99
|
+
return a.second < b.second;
|
100
|
+
});
|
101
|
+
|
102
|
+
if (sortedBreakpointEntriesVec.size() == 0) {
|
103
|
+
throw jsi::JSError(runtime, UnistylesErrorBreakpointsCannotBeEmpty);
|
104
|
+
}
|
105
|
+
|
106
|
+
if (sortedBreakpointEntriesVec.at(0).second != 0) {
|
107
|
+
throw jsi::JSError(runtime, UnistylesErrorBreakpointsMustStartFromZero);
|
108
|
+
}
|
109
|
+
|
110
|
+
this->sortedBreakpointPairs = sortedBreakpointEntriesVec;
|
111
|
+
|
112
|
+
std::string breakpoint = this->getBreakpointFromScreenWidth(this->screenWidth, sortedBreakpointEntriesVec);
|
113
|
+
|
114
|
+
this->breakpoint = breakpoint;
|
115
|
+
|
116
|
+
return jsi::Value::undefined();
|
117
|
+
}
|
118
|
+
);
|
119
|
+
}
|
120
|
+
|
121
|
+
if (propName == "useTheme") {
|
122
|
+
return jsi::Function::createFromHostFunction(runtime,
|
123
|
+
jsi::PropNameID::forAscii(runtime, "useTheme"),
|
124
|
+
1,
|
125
|
+
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
126
|
+
std::string themeName = arguments[0].asString(runtime).utf8(runtime);
|
127
|
+
|
128
|
+
this->themeName = themeName;
|
129
|
+
this->onThemeChange(themeName);
|
130
|
+
|
131
|
+
return jsi::Value::undefined();
|
132
|
+
}
|
133
|
+
);
|
134
|
+
}
|
135
|
+
|
136
|
+
if (propName == "useAdaptiveThemes") {
|
137
|
+
return jsi::Function::createFromHostFunction(runtime,
|
138
|
+
jsi::PropNameID::forAscii(runtime, "useAdaptiveThemes"),
|
139
|
+
1,
|
140
|
+
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
141
|
+
bool enableAdaptiveThemes = arguments[0].asBool();
|
142
|
+
|
143
|
+
this->hasAdaptiveThemes = enableAdaptiveThemes;
|
144
|
+
|
145
|
+
if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
|
146
|
+
return jsi::Value::undefined();
|
147
|
+
}
|
148
|
+
|
149
|
+
this->themeName = this->colorScheme;
|
150
|
+
this->onThemeChange(this->themeName);
|
151
|
+
|
152
|
+
return jsi::Value::undefined();
|
153
|
+
}
|
154
|
+
);
|
155
|
+
}
|
156
|
+
|
157
|
+
if (propName == "unregister") {
|
158
|
+
return jsi::Function::createFromHostFunction(runtime,
|
159
|
+
jsi::PropNameID::forAscii(runtime, "unregister"),
|
160
|
+
1,
|
161
|
+
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
162
|
+
this->hasAdaptiveThemes = false;
|
163
|
+
this->supportsAutomaticColorScheme = false;
|
164
|
+
this->themeName = "";
|
165
|
+
this->breakpoint = "";
|
166
|
+
this->themes.clear();
|
167
|
+
this->sortedBreakpointPairs.clear();
|
168
|
+
|
169
|
+
return jsi::Value::undefined();
|
170
|
+
}
|
171
|
+
);
|
172
|
+
}
|
173
|
+
|
174
|
+
return jsi::Value::undefined();
|
175
|
+
}
|
176
|
+
|
177
|
+
void UnistylesRuntime::set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) {
|
178
|
+
std::string propName = propNameId.utf8(runtime);
|
179
|
+
|
180
|
+
if (propName == "themes" && value.isObject()) {
|
181
|
+
jsi::Array themes = value.asObject(runtime).asArray(runtime);
|
182
|
+
std::vector<std::string> themesVector;
|
183
|
+
size_t length = themes.size(runtime);
|
184
|
+
|
185
|
+
for (size_t i = 0; i < length; ++i) {
|
186
|
+
jsi::Value element = themes.getValueAtIndex(runtime, i);
|
187
|
+
|
188
|
+
if (element.isString()) {
|
189
|
+
std::string theme = element.asString(runtime).utf8(runtime);
|
190
|
+
themesVector.push_back(theme);
|
191
|
+
}
|
192
|
+
}
|
193
|
+
|
194
|
+
if (themesVector.size() == 0) {
|
195
|
+
throw jsi::JSError(runtime, UnistylesErrorThemesCannotBeEmpty);
|
196
|
+
}
|
197
|
+
|
198
|
+
this->themes = themesVector;
|
199
|
+
|
200
|
+
bool hasLightTheme = std::find(themesVector.begin(), themesVector.end(), "light") != themesVector.end();
|
201
|
+
bool hasDarkTheme = std::find(themesVector.begin(), themesVector.end(), "dark") != themesVector.end();
|
202
|
+
|
203
|
+
this->supportsAutomaticColorScheme = hasLightTheme && hasDarkTheme;
|
204
|
+
|
205
|
+
return;
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
209
|
+
#pragma endregion
|
210
|
+
#pragma region Helpers
|
211
|
+
|
212
|
+
std::string UnistylesRuntime::getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointPairs) {
|
213
|
+
for (size_t i = 0; i < sortedBreakpointPairs.size(); ++i) {
|
214
|
+
const auto& [key, value] = sortedBreakpointPairs[i];
|
215
|
+
const double maxVal = (i + 1 < sortedBreakpointPairs.size()) ? sortedBreakpointPairs[i + 1].second : std::numeric_limits<double>::infinity();
|
216
|
+
|
217
|
+
if (width >= value && width < maxVal) {
|
218
|
+
return key;
|
219
|
+
}
|
220
|
+
}
|
221
|
+
|
222
|
+
return sortedBreakpointPairs.empty() ? "" : sortedBreakpointPairs.back().first;
|
223
|
+
}
|
224
|
+
|
225
|
+
void UnistylesRuntime::handleScreenSizeChange(int width, int height) {
|
226
|
+
std::string breakpoint = this->getBreakpointFromScreenWidth(width, this->sortedBreakpointPairs);
|
227
|
+
|
228
|
+
this->breakpoint = breakpoint;
|
229
|
+
this->screenWidth = width;
|
230
|
+
this->screenHeight = height;
|
231
|
+
|
232
|
+
int orientation = width > height
|
233
|
+
? UnistylesOrientationLandscape
|
234
|
+
: UnistylesOrientationPortrait;
|
235
|
+
|
236
|
+
this->onBreakpointChange(breakpoint, orientation, width, height);
|
237
|
+
}
|
238
|
+
|
239
|
+
void UnistylesRuntime::handleAppearanceChange(std::string colorScheme) {
|
240
|
+
this->colorScheme = colorScheme;
|
241
|
+
|
242
|
+
if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
|
243
|
+
return;
|
244
|
+
}
|
245
|
+
|
246
|
+
this->themeName = this->colorScheme;
|
247
|
+
this->onThemeChange(this->themeName);
|
248
|
+
}
|
249
|
+
|
250
|
+
jsi::Value UnistylesRuntime::getThemeOrFail(jsi::Runtime& runtime) {
|
251
|
+
if (this->themes.size() == 1) {
|
252
|
+
std::string themeName = this->themes.at(0);
|
253
|
+
|
254
|
+
this->themeName = themeName;
|
255
|
+
|
256
|
+
return jsi::String::createFromUtf8(runtime, themeName);
|
257
|
+
}
|
258
|
+
|
259
|
+
return jsi::Value().undefined();
|
260
|
+
}
|
261
|
+
|
262
|
+
#pragma endregion
|
@@ -0,0 +1,61 @@
|
|
1
|
+
#pragma once
|
2
|
+
|
3
|
+
#include <jsi/jsi.h>
|
4
|
+
#include <vector>
|
5
|
+
|
6
|
+
using namespace facebook;
|
7
|
+
|
8
|
+
const int UnistylesOrientationPortrait = 1;
|
9
|
+
const int UnistylesOrientationLandscape = 2;
|
10
|
+
|
11
|
+
const std::string UnistylesDarkScheme = "dark";
|
12
|
+
const std::string UnistylesLightScheme = "light";
|
13
|
+
const std::string UnistylesUnspecifiedScheme = "unspecified";
|
14
|
+
|
15
|
+
const std::string UnistylesErrorBreakpointsCannotBeEmpty = "UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY'";
|
16
|
+
const std::string UnistylesErrorBreakpointsMustStartFromZero = "UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZER0";
|
17
|
+
const std::string UnistylesErrorThemesCannotBeEmpty = "UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY";
|
18
|
+
|
19
|
+
typedef void(^UnistylesThemeChangeEvent)(std::string themeName);
|
20
|
+
typedef void(^UnistylesBreakpointChangeEvent)(std::string breakpoint, int layout, int screenWidth, int screenHeight);
|
21
|
+
|
22
|
+
class JSI_EXPORT UnistylesRuntime : public jsi::HostObject {
|
23
|
+
private:
|
24
|
+
UnistylesThemeChangeEvent onThemeChange;
|
25
|
+
UnistylesBreakpointChangeEvent onBreakpointChange;
|
26
|
+
|
27
|
+
int screenWidth;
|
28
|
+
int screenHeight;
|
29
|
+
std::string colorScheme;
|
30
|
+
|
31
|
+
public:
|
32
|
+
UnistylesRuntime(
|
33
|
+
UnistylesThemeChangeEvent onThemeChange,
|
34
|
+
UnistylesBreakpointChangeEvent onBreakpointChange,
|
35
|
+
int screenWidth,
|
36
|
+
int screenHeight,
|
37
|
+
std::string colorScheme
|
38
|
+
): onThemeChange(onThemeChange),
|
39
|
+
onBreakpointChange(onBreakpointChange),
|
40
|
+
screenWidth(screenWidth),
|
41
|
+
screenHeight(screenHeight),
|
42
|
+
colorScheme(colorScheme) {}
|
43
|
+
|
44
|
+
bool hasAdaptiveThemes;
|
45
|
+
bool supportsAutomaticColorScheme;
|
46
|
+
|
47
|
+
std::string themeName;
|
48
|
+
std::string breakpoint;
|
49
|
+
std::vector<std::string> themes;
|
50
|
+
std::vector<std::pair<std::string, double>> sortedBreakpointPairs;
|
51
|
+
|
52
|
+
jsi::Value get(jsi::Runtime&, const jsi::PropNameID& name) override;
|
53
|
+
void set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) override;
|
54
|
+
std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override;
|
55
|
+
|
56
|
+
void handleScreenSizeChange(int width, int height);
|
57
|
+
void handleAppearanceChange(std::string colorScheme);
|
58
|
+
|
59
|
+
jsi::Value getThemeOrFail(jsi::Runtime&);
|
60
|
+
std::string getBreakpointFromScreenWidth(int width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries);
|
61
|
+
};
|
package/ios/UnistylesModule.mm
CHANGED
@@ -122,11 +122,16 @@ void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSel
|
|
122
122
|
|
123
123
|
[weakSelf emitEvent:@"onChange" withBody:body];
|
124
124
|
};
|
125
|
-
UnistylesBreakpointChangeEvent onBreakpointChange = ^(std::string breakpoint) {
|
125
|
+
UnistylesBreakpointChangeEvent onBreakpointChange = ^(std::string breakpoint, int orientation, int width, int height) {
|
126
126
|
NSDictionary *body = @{
|
127
|
-
@"type": @"
|
127
|
+
@"type": @"layout",
|
128
128
|
@"payload": @{
|
129
|
-
@"breakpoint": cxxStringToNSString(breakpoint)
|
129
|
+
@"breakpoint": cxxStringToNSString(breakpoint),
|
130
|
+
@"orientation": @(orientation),
|
131
|
+
@"screen": @{
|
132
|
+
@"width": @(width),
|
133
|
+
@"height": @(height)
|
134
|
+
}
|
130
135
|
}
|
131
136
|
};
|
132
137
|
|
@@ -20,7 +20,7 @@ class Unistyles {
|
|
20
20
|
this._bridge = global.__UNISTYLES__;
|
21
21
|
this._registry = new _UnistyleRegistry.UnistyleRegistry(this._bridge);
|
22
22
|
this._runtime = new _UnistylesRuntime.UnistylesRuntime(this._bridge, this._registry);
|
23
|
-
this._engine = new _UnistylesEngine.
|
23
|
+
this._engine = new _UnistylesEngine.UnistylesBuiltInEngine(this._registry, this._runtime);
|
24
24
|
}
|
25
25
|
get registry() {
|
26
26
|
return this._registry;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistylesEngine","_UnistyleRegistry","_types","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","_engine","
|
1
|
+
{"version":3,"names":["_UnistylesModule","require","_UnistylesRuntime","_UnistylesEngine","_UnistyleRegistry","_types","Unistyles","constructor","isInstalled","UnistylesModule","install","Error","UnistylesError","RuntimeUnavailable","_bridge","global","__UNISTYLES__","_registry","UnistyleRegistry","_runtime","UnistylesRuntime","_engine","UnistylesBuiltInEngine","registry","runtime","engine","unistyles","exports"],"sourceRoot":"../../src","sources":["Unistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AAEA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,SAAS,CAAC;EAMZC,WAAWA,CAAA,EAAG;IACV,MAAMC,WAAW,GAAGC,gCAAe,EAAEC,OAAO,CAAC,CAAC,IAAI,KAAK;IAEvD,IAAI,CAACF,WAAW,EAAE;MACd,MAAM,IAAIG,KAAK,CAACC,qBAAc,CAACC,kBAAkB,CAAC;IACtD;;IAEA;IACA,IAAI,CAACC,OAAO,GAAGC,MAAM,CAACC,aAAgC;IACtD,IAAI,CAACC,SAAS,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACJ,OAAO,CAAC;IACnD,IAAI,CAACK,QAAQ,GAAG,IAAIC,kCAAgB,CAAC,IAAI,CAACN,OAAO,EAAE,IAAI,CAACG,SAAS,CAAC;IAClE,IAAI,CAACI,OAAO,GAAG,IAAIC,uCAAsB,CAAC,IAAI,CAACL,SAAS,EAAE,IAAI,CAACE,QAAQ,CAAC;EAC5E;EAEA,IAAWI,QAAQA,CAAA,EAAG;IAClB,OAAO,IAAI,CAACN,SAAS;EACzB;EAEA,IAAWO,OAAOA,CAAA,EAAG;IACjB,OAAO,IAAI,CAACL,QAAQ;EACxB;EAEA,IAAWM,MAAMA,CAAA,EAAG;IAChB,OAAO,IAAI,CAACJ,OAAO;EACvB;AACJ;AAEO,MAAMK,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAG,IAAIpB,SAAS,CAAC,CAAC"}
|
@@ -3,20 +3,24 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.
|
7
|
-
|
8
|
-
class
|
9
|
-
// @ts-ignore
|
6
|
+
exports.UnistylesBuiltInEngine = void 0;
|
7
|
+
var _utils = require("./utils");
|
8
|
+
class UnistylesBuiltInEngine {
|
10
9
|
constructor(registry, runtime) {
|
11
10
|
this.registry = registry;
|
12
11
|
this.runtime = runtime;
|
13
12
|
this.registry = registry;
|
14
13
|
this.runtime = runtime;
|
15
14
|
}
|
15
|
+
isMediaQuery = key => {
|
16
|
+
const regex = /(:w|:h)/;
|
17
|
+
return key.length > 0 && regex.test(key);
|
18
|
+
};
|
19
|
+
didMatchMediaQuery = keys => (0, _utils.getKeyForCustomMediaQuery)(keys, this.runtime.screen, this.registry.breakpoints);
|
16
20
|
|
17
21
|
// UnistylesEngine.parseStyleSheet
|
18
22
|
// UnistylesEngine.parseStyle
|
19
23
|
// UnistylesEngine.proxify
|
20
24
|
}
|
21
|
-
exports.
|
25
|
+
exports.UnistylesBuiltInEngine = UnistylesBuiltInEngine;
|
22
26
|
//# sourceMappingURL=UnistylesEngine.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["_utils","require","UnistylesBuiltInEngine","constructor","registry","runtime","isMediaQuery","key","regex","length","test","didMatchMediaQuery","keys","getKeyForCustomMediaQuery","screen","breakpoints","exports"],"sourceRoot":"../../src","sources":["UnistylesEngine.ts"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAGO,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,IACzC,IAAAC,gCAAyB,EAACD,IAAI,EAAE,IAAI,CAACP,OAAO,CAACS,MAAM,EAAE,IAAI,CAACV,QAAQ,CAACW,WAAW,CAAC;;EAEnF;EACA;EACA;AACJ;AAACC,OAAA,CAAAd,sBAAA,GAAAA,sBAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["createStyleSheet","styles","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;
|
1
|
+
{"version":3,"names":["createStyleSheet","styles","exports"],"sourceRoot":"../../src","sources":["createStyleSheet.ts"],"mappings":";;;;;;AAEO,MAAMA,gBAAgB,GAAUC,MAA4F,IAAY;EAC3I,IAAI,OAAOA,MAAM,KAAK,UAAU,EAAE;IAC9B,OAAOA,MAAM;EACjB;EAEA,OAAOA,MAAM;AACjB,CAAC;AAAAC,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}
|
@@ -11,8 +11,7 @@ let ScreenOrientation = exports.ScreenOrientation = /*#__PURE__*/function (Scree
|
|
11
11
|
}({});
|
12
12
|
let CxxUnistylesEventTypes = exports.CxxUnistylesEventTypes = /*#__PURE__*/function (CxxUnistylesEventTypes) {
|
13
13
|
CxxUnistylesEventTypes["Theme"] = "theme";
|
14
|
-
CxxUnistylesEventTypes["
|
15
|
-
CxxUnistylesEventTypes["Breakpoint"] = "breakpoint";
|
14
|
+
CxxUnistylesEventTypes["Layout"] = "layout";
|
16
15
|
return CxxUnistylesEventTypes;
|
17
16
|
}({});
|
18
17
|
let UnistylesError = exports.UnistylesError = /*#__PURE__*/function (UnistylesError) {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["ScreenOrientation","exports","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":";;;;;;
|
1
|
+
{"version":3,"names":["ScreenOrientation","exports","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":";;;;;;IAYYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAAA,IAyBjBE,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAAA,IAuBtBC,cAAc,GAAAF,OAAA,CAAAE,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_react","require","_reactNative","_utils","_useUnistyles","useStyles","stylesheet","theme","breakpoint","screenSize","useUnistyles","styles","parsedStyles","useMemo","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAH,OAAA;
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_utils","_useUnistyles","useStyles","stylesheet","theme","breakpoint","screenSize","useUnistyles","styles","parsedStyles","useMemo","dynamicStyleSheet","Object","entries","reduce","acc","_ref","key","value","style","proxifyFunction","StyleSheet","create","parseStyle","exports"],"sourceRoot":"../../src","sources":["useStyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,IAAAG,aAAA,GAAAH,OAAA;AAGO,MAAMI,SAAS,GAAsCC,UAAyD,IAAK;EACtH,MAAM;IAAEC,KAAK;IAAEC,UAAU;IAAEC;EAAW,CAAC,GAAG,IAAAC,0BAAY,EAAC,CAAC;EAExD,IAAI,CAACJ,UAAU,EAAE;IACb,OAAO;MACHC,KAAK;MACLC,UAAU;MACVG,MAAM,EAAE,CAAC;IACb,CAAC;EACL;EAEA,MAAMC,YAAY,GAAG,IAAAC,cAAO,EAAC,MAAM,OAAOP,UAAU,KAAK,UAAU,GAC7DA,UAAU,CAACC,KAAK,CAAC,GACjBD,UAAU,EAAE,CAACC,KAAK,EAAED,UAAU,CAAC,CAAC;EAEtC,MAAMQ,iBAAiB,GAAG,IAAAD,cAAO,EAAC,MAAME,MAAM,CACzCC,OAAO,CAACJ,YAAY,CAAC,CACrBK,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,GAAG,IAAAG,sBAAe,EAACF,KAAK,EAAEb,UAAU,EAAEC,UAAU;MACxD,CAAC;IACL;IAEA,OAAOe,uBAAU,CAACC,MAAM,CAAC;MACrB,GAAGP,GAAG;MACN,CAACE,GAAG,GAAG,IAAAM,iBAAU,EAAKJ,KAAK,EAAEd,UAAU,EAAEC,UAAU;IACvD,CAAC,CAAC;EACN,CAAC,EAAE,CAAC,CAAO,CAAC,EAAE,CAACD,UAAU,EAAEC,UAAU,EAAEG,YAAY,CAAC,CAAC;EAEzD,OAAO;IACHL,KAAK;IACLC,UAAU;IACVG,MAAM,EAAEG;EACZ,CAAC;AACL,CAAC;AAAAa,OAAA,CAAAtB,SAAA,GAAAA,SAAA"}
|
@@ -10,11 +10,12 @@ var _types = require("./types");
|
|
10
10
|
var _Unistyles = require("./Unistyles");
|
11
11
|
const unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
|
12
12
|
const useUnistyles = () => {
|
13
|
+
const [orientation, setOrientation] = (0, _react.useState)(_Unistyles.unistyles.runtime.orientation);
|
13
14
|
const [theme, setTheme] = (0, _react.useState)(_Unistyles.unistyles.runtime.getTheme(_Unistyles.unistyles.runtime.themeName));
|
14
15
|
const [breakpoint, setBreakpoint] = (0, _react.useState)(_Unistyles.unistyles.runtime.breakpoint);
|
15
16
|
const [screenSize, setScreenSize] = (0, _react.useState)({
|
16
|
-
width:
|
17
|
-
height:
|
17
|
+
width: _Unistyles.unistyles.runtime.screen.width,
|
18
|
+
height: _Unistyles.unistyles.runtime.screen.height
|
18
19
|
});
|
19
20
|
(0, _react.useEffect)(() => {
|
20
21
|
const subscription = unistylesEvents.addListener('onChange', event => {
|
@@ -25,20 +26,12 @@ const useUnistyles = () => {
|
|
25
26
|
setTheme(_Unistyles.unistyles.runtime.getTheme(themeEvent.payload.themeName));
|
26
27
|
return;
|
27
28
|
}
|
28
|
-
|
29
|
-
case _types.CxxUnistylesEventTypes.Size:
|
29
|
+
case _types.CxxUnistylesEventTypes.Layout:
|
30
30
|
{
|
31
|
-
const
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
});
|
36
|
-
return;
|
37
|
-
}
|
38
|
-
case _types.CxxUnistylesEventTypes.Breakpoint:
|
39
|
-
{
|
40
|
-
const breakpointEvent = event;
|
41
|
-
setBreakpoint(breakpointEvent.payload.breakpoint);
|
31
|
+
const layoutEvent = event;
|
32
|
+
setBreakpoint(layoutEvent.payload.breakpoint);
|
33
|
+
setOrientation(layoutEvent.payload.orientation);
|
34
|
+
setScreenSize(layoutEvent.payload.screen);
|
42
35
|
return;
|
43
36
|
}
|
44
37
|
default:
|
@@ -49,6 +42,7 @@ const useUnistyles = () => {
|
|
49
42
|
}, []);
|
50
43
|
return {
|
51
44
|
theme,
|
45
|
+
orientation,
|
52
46
|
breakpoint,
|
53
47
|
screenSize
|
54
48
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","
|
1
|
+
{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","orientation","setOrientation","useState","unistyles","runtime","theme","setTheme","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","screen","height","useEffect","subscription","addListener","event","type","CxxUnistylesEventTypes","Theme","themeEvent","payload","Layout","layoutEvent","remove","exports"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AAEA,MAAMI,eAAe,GAAG,IAAIC,+BAAkB,CAACC,0BAAa,CAACC,SAAS,CAAC;AAEhE,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAoBC,oBAAS,CAACC,OAAO,CAACJ,WAAW,CAAC;EAChG,MAAM,CAACK,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAJ,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACG,QAAQ,CAACJ,oBAAS,CAACC,OAAO,CAACI,SAAS,CAAC,CAAC;EAC3F,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAR,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACK,UAAU,CAAC;EAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAV,eAAQ,EAAC;IACzCW,KAAK,EAAEV,oBAAS,CAACC,OAAO,CAACU,MAAM,CAACD,KAAK;IACrCE,MAAM,EAAEZ,oBAAS,CAACC,OAAO,CAACU,MAAM,CAACC;EACrC,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGtB,eAAe,CAACuB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,6BAAsB,CAACC,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGJ,KAA4B;YAE/Cb,QAAQ,CAACH,oBAAS,CAACC,OAAO,CAACG,QAAQ,CAACgB,UAAU,CAACC,OAAO,CAAChB,SAAS,CAAC,CAAC;YAElE;UACJ;QACA,KAAKa,6BAAsB,CAACI,MAAM;UAAE;YAChC,MAAMC,WAAW,GAAGP,KAAmC;YAEvDT,aAAa,CAACgB,WAAW,CAACF,OAAO,CAACf,UAAU,CAAC;YAC7CR,cAAc,CAACyB,WAAW,CAACF,OAAO,CAACxB,WAAW,CAAC;YAC/CY,aAAa,CAACc,WAAW,CAACF,OAAO,CAACV,MAAM,CAAC;YAEzC;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOG,YAAY,CAACU,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHtB,KAAK;IACLL,WAAW;IACXS,UAAU;IACVE;EACJ,CAAC;AACL,CAAC;AAAAiB,OAAA,CAAA7B,YAAA,GAAAA,YAAA"}
|
@@ -6,26 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.sortAndValidateBreakpoints = exports.getValueForBreakpoint = exports.getBreakpointFromScreenWidth = void 0;
|
7
7
|
var _Unistyles = require("../Unistyles");
|
8
8
|
var _common = require("./common");
|
9
|
-
var
|
10
|
-
/**
|
11
|
-
* Sorts the breakpoints object based on its numeric values in ascending order and validates them.
|
12
|
-
*
|
13
|
-
* This function takes an object where keys represent breakpoint names and values are numeric.
|
14
|
-
* It returns a new object with the same keys but sorted based on their corresponding numeric values.
|
15
|
-
* Additionally, it validates that:
|
16
|
-
* 1. The first breakpoint starts with a value of 0.
|
17
|
-
* 2. No duplicate breakpoint values exist.
|
18
|
-
*
|
19
|
-
* If the validation fails, appropriate error messages are logged to the console.
|
20
|
-
*
|
21
|
-
* @template B - An object type where keys are strings and values are numbers.
|
22
|
-
* @param {B} breakpoints - The breakpoints object to be sorted and validated.
|
23
|
-
* @returns {B} A new object with sorted and validated breakpoints.
|
24
|
-
*
|
25
|
-
* @example
|
26
|
-
* const input = { md: 768, lg: 1024, sm: 0 }
|
27
|
-
* sortAndValidateBreakpoints(input) // returns { sm: 0, md: 768, lg: 1024 }
|
28
|
-
*/
|
9
|
+
var _types = require("../types");
|
29
10
|
const sortAndValidateBreakpoints = breakpoints => {
|
30
11
|
const sortedPairs = Object.entries(breakpoints).sort((breakpoint1, breakpoint2) => {
|
31
12
|
const [, value1] = breakpoint1;
|
@@ -43,22 +24,6 @@ const sortAndValidateBreakpoints = breakpoints => {
|
|
43
24
|
}
|
44
25
|
return sortedBreakpoints;
|
45
26
|
};
|
46
|
-
|
47
|
-
/**
|
48
|
-
* Determines the appropriate breakpoint key for a given screen width based on provided breakpoints.
|
49
|
-
*
|
50
|
-
* This function takes a screen width and an object of breakpoints. It returns the key of the breakpoint
|
51
|
-
* that the screen width falls into. The breakpoints are assumed to be sorted in ascending order.
|
52
|
-
*
|
53
|
-
* @template B - An object type where keys are strings and values are numbers representing screen widths.
|
54
|
-
* @param {number} width - The screen width to determine the breakpoint for.
|
55
|
-
* @param breakpointEntries - sorted pairs of breakpoints
|
56
|
-
* @returns {keyof B & string} The key of the breakpoint that the screen width falls into.
|
57
|
-
*
|
58
|
-
* @example
|
59
|
-
* const breakpoints = { sm: 0, md: 768, lg: 1024 }
|
60
|
-
* getBreakpointFromScreenWidth(800, breakpoints) // returns 'md'
|
61
|
-
*/
|
62
27
|
exports.sortAndValidateBreakpoints = sortAndValidateBreakpoints;
|
63
28
|
const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
|
64
29
|
const [key] = breakpointEntries.find((_ref, index, otherBreakpoints) => {
|
@@ -72,57 +37,45 @@ const getBreakpointFromScreenWidth = (width, breakpointEntries) => {
|
|
72
37
|
});
|
73
38
|
return key;
|
74
39
|
};
|
75
|
-
|
76
|
-
/**
|
77
|
-
* Retrieves the value associated with a given breakpoint or custom media query based on the provided screen size.
|
78
|
-
*
|
79
|
-
* The function first checks for custom media queries. If a matching custom media query is found, its associated value is returned.
|
80
|
-
* If no custom media query matches, the function then checks for a direct breakpoint match.
|
81
|
-
* If there's no direct breakpoint match, the function simulates CSS cascading to find the closest matching breakpoint.
|
82
|
-
*
|
83
|
-
* @template B - An object type where keys represent breakpoint names and values represent breakpoint values.
|
84
|
-
*
|
85
|
-
* @param {Record<keyof B & string, string | number>} value - An object containing values associated with breakpoints or custom media queries.
|
86
|
-
* @param {keyof B & string} breakpoint - The breakpoint name to check against.
|
87
|
-
* @param {ScreenSize} screenSize - An object representing the screen size to be checked against the media queries.
|
88
|
-
* @param breakpointPairs - sorted pairs of breakpoints
|
89
|
-
*
|
90
|
-
* @returns {string | number | undefined} Returns the value associated with the matching breakpoint or custom media query, or `undefined` if no match is found.
|
91
|
-
*
|
92
|
-
* @example
|
93
|
-
*
|
94
|
-
* const values = { ':w[200]': 'value1', sm: 'value2', md: 'value3' }
|
95
|
-
* const screenSize = { width: 250, height: 400 }
|
96
|
-
* const breakpoints = { sm: 300, md: 600, lg: 900 }
|
97
|
-
*
|
98
|
-
* getValueForBreakpoint(values, 'sm', screenSize, breakpoints); // 'value1'
|
99
|
-
*/
|
100
40
|
exports.getBreakpointFromScreenWidth = getBreakpointFromScreenWidth;
|
101
|
-
const getValueForBreakpoint =
|
41
|
+
const getValueForBreakpoint = value => {
|
102
42
|
// the highest priority is for custom media queries
|
103
43
|
const customMediaQueries = Object.entries(value).filter(_ref2 => {
|
104
44
|
let [key] = _ref2;
|
105
|
-
return
|
45
|
+
return _Unistyles.unistyles.engine.isMediaQuery(key);
|
106
46
|
});
|
107
|
-
const customMediaQueryKey =
|
47
|
+
// const customMediaQueryKey = getKeyForCustomMediaQuery(customMediaQueries, screenSize) as keyof typeof value
|
48
|
+
const customMediaQueryKey = _Unistyles.unistyles.engine.didMatchMediaQuery(customMediaQueries);
|
108
49
|
if (customMediaQueryKey && customMediaQueryKey in value) {
|
109
50
|
return value[customMediaQueryKey];
|
110
51
|
}
|
111
52
|
|
112
|
-
//
|
113
|
-
|
114
|
-
const
|
53
|
+
// at this point user didn't use custom media queries (:w, :h)
|
54
|
+
// check if user defined any breakpoints
|
55
|
+
const hasBreakpoints = _Unistyles.unistyles.runtime.sortedBreakpoints.length > 0;
|
56
|
+
|
57
|
+
// if not then we can fallback to horizontal and portrait (mobile only)
|
58
|
+
if (!hasBreakpoints && _common.isMobile && (_common.Orientation.Landscape in value || _common.Orientation.Portrait in value)) {
|
59
|
+
return value[_Unistyles.unistyles.runtime.orientation === _types.ScreenOrientation.Portrait ? _common.Orientation.Portrait : _common.Orientation.Landscape];
|
60
|
+
}
|
61
|
+
const breakpoint = _Unistyles.unistyles.runtime.breakpoint;
|
62
|
+
if (!breakpoint) {
|
63
|
+
return undefined;
|
64
|
+
}
|
65
|
+
|
66
|
+
// if user defined breakpoints, then we look for the valid one
|
67
|
+
const directBreakpoint = value[breakpoint];
|
115
68
|
|
116
69
|
// if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
|
117
|
-
if (directBreakpoint ||
|
70
|
+
if (directBreakpoint || breakpoint in value) {
|
118
71
|
return directBreakpoint;
|
119
72
|
}
|
120
73
|
|
121
|
-
// there is no direct hit for breakpoint nor media-query,
|
74
|
+
// there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
|
122
75
|
const breakpointPairs = _Unistyles.unistyles.runtime.sortedBreakpoints;
|
123
76
|
const currentBreakpoint = breakpointPairs.findIndex(_ref3 => {
|
124
77
|
let [key] = _ref3;
|
125
|
-
return key ===
|
78
|
+
return key === breakpoint;
|
126
79
|
});
|
127
80
|
const availableBreakpoints = breakpointPairs.filter((_ref4, index) => {
|
128
81
|
let [key] = _ref4;
|