react-native-unistyles 2.0.0-alpha.3 → 2.0.0-alpha.4
Sign up to get free protection for your applications and to get access to all the features.
- package/ios/UnistylesHelpers.h +4 -0
- package/ios/UnistylesHelpers.mm +20 -0
- package/ios/UnistylesModule.h +1 -3
- package/ios/UnistylesModule.mm +55 -65
- package/lib/commonjs/UnistyleRegistry.js +12 -1
- package/lib/commonjs/UnistyleRegistry.js.map +1 -1
- package/lib/commonjs/UnistylesRuntime.js +5 -2
- package/lib/commonjs/UnistylesRuntime.js.map +1 -1
- package/lib/commonjs/hooks/useDimensions.web.js +7 -5
- package/lib/commonjs/hooks/useDimensions.web.js.map +1 -1
- package/lib/commonjs/index.js +2 -1
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/cxx.js +4 -0
- package/lib/commonjs/types/cxx.js.map +1 -1
- package/lib/commonjs/useInitialTheme.js +1 -1
- package/lib/commonjs/useInitialTheme.js.map +1 -1
- package/lib/commonjs/utils/breakpoints.js.map +1 -1
- package/lib/module/UnistyleRegistry.js +12 -1
- package/lib/module/UnistyleRegistry.js.map +1 -1
- package/lib/module/UnistylesRuntime.js +5 -2
- package/lib/module/UnistylesRuntime.js.map +1 -1
- package/lib/module/hooks/useDimensions.web.js +8 -6
- package/lib/module/hooks/useDimensions.web.js.map +1 -1
- package/lib/module/index.js +1 -0
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/cxx.js +4 -0
- package/lib/module/types/cxx.js.map +1 -1
- package/lib/module/useInitialTheme.js +2 -2
- package/lib/module/useInitialTheme.js.map +1 -1
- package/lib/module/utils/breakpoints.js.map +1 -1
- package/lib/typescript/src/UnistyleRegistry.d.ts +2 -0
- package/lib/typescript/src/UnistyleRegistry.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesRuntime.d.ts +4 -40
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/global.d.ts +1 -0
- package/lib/typescript/src/global.d.ts.map +1 -1
- package/lib/typescript/src/hooks/useDimensions.web.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +1 -0
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +7 -2
- package/lib/typescript/src/types/cxx.d.ts.map +1 -1
- package/lib/typescript/src/useStyles.d.ts +3 -39
- package/lib/typescript/src/useStyles.d.ts.map +1 -1
- package/lib/typescript/src/useUnistyles.d.ts +2 -38
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
- package/package.json +12 -13
- package/react-native-unistyles.podspec +2 -1
- package/src/UnistyleRegistry.ts +16 -1
- package/src/UnistylesRuntime.ts +6 -2
- package/src/global.ts +3 -1
- package/src/hooks/useDimensions.web.ts +9 -6
- package/src/index.ts +2 -0
- package/src/types/cxx.ts +9 -2
- package/src/useInitialTheme.ts +2 -2
- package/src/utils/breakpoints.ts +1 -1
- package/ios/UnistylesRuntime.h +0 -48
- package/ios/UnistylesRuntime.mm +0 -228
- package/lib/typescript/examples/expo/src/App.d.ts +0 -3
- package/lib/typescript/examples/expo/src/App.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts +0 -3
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/examples/index.d.ts +0 -2
- package/lib/typescript/examples/expo/src/examples/index.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/index.d.ts +0 -2
- package/lib/typescript/examples/expo/src/index.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts +0 -8
- package/lib/typescript/examples/expo/src/styles/breakpoints.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/styles/index.d.ts +0 -16
- package/lib/typescript/examples/expo/src/styles/index.d.ts.map +0 -1
- package/lib/typescript/examples/expo/src/styles/theme.d.ts +0 -40
- package/lib/typescript/examples/expo/src/styles/theme.d.ts.map +0 -1
package/ios/UnistylesRuntime.mm
DELETED
@@ -1,228 +0,0 @@
|
|
1
|
-
#import "UnistylesRuntime.h"
|
2
|
-
|
3
|
-
std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& rt) {
|
4
|
-
std::vector<jsi::PropNameID> properties;
|
5
|
-
|
6
|
-
// getters
|
7
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("screenWidth")));
|
8
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("screenHeight")));
|
9
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("hasAdaptiveThemes")));
|
10
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("theme")));
|
11
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("breakpoint")));
|
12
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("colorScheme")));
|
13
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("sortedBreakpointPairs")));
|
14
|
-
|
15
|
-
// setters
|
16
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("themes")));
|
17
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useBreakpoints")));
|
18
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useTheme")));
|
19
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useAdaptiveThemes")));
|
20
|
-
|
21
|
-
return properties;
|
22
|
-
}
|
23
|
-
|
24
|
-
|
25
|
-
jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& propNameId) {
|
26
|
-
std::string propName = propNameId.utf8(runtime);
|
27
|
-
|
28
|
-
if (propName == "screenWidth") {
|
29
|
-
return jsi::Value(this->screenWidth);
|
30
|
-
}
|
31
|
-
|
32
|
-
if (propName == "screenHeight") {
|
33
|
-
return jsi::Value(this->screenHeight);
|
34
|
-
}
|
35
|
-
|
36
|
-
if (propName == "hasAdaptiveThemes") {
|
37
|
-
return jsi::Value(this->hasAdaptiveThemes);
|
38
|
-
}
|
39
|
-
|
40
|
-
if (propName == "theme") {
|
41
|
-
return !this->theme.empty()
|
42
|
-
? jsi::Value(jsi::String::createFromUtf8(runtime, this->theme))
|
43
|
-
: this->getThemeOrFail(runtime);
|
44
|
-
}
|
45
|
-
|
46
|
-
if (propName == "breakpoint") {
|
47
|
-
return !this->breakpoint.empty()
|
48
|
-
? jsi::Value(jsi::String::createFromUtf8(runtime, this->breakpoint))
|
49
|
-
: jsi::Value::undefined();
|
50
|
-
}
|
51
|
-
|
52
|
-
if (propName == "colorScheme") {
|
53
|
-
return jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme));
|
54
|
-
}
|
55
|
-
|
56
|
-
if (propName == "sortedBreakpointPairs") {
|
57
|
-
std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(runtime, this->sortedBreakpointEntries.size());
|
58
|
-
|
59
|
-
for (size_t i = 0; i < this->sortedBreakpointEntries.size(); ++i) {
|
60
|
-
std::unique_ptr<jsi::Array> pairArray = std::make_unique<jsi::Array>(runtime, 2);
|
61
|
-
jsi::String nameValue = jsi::String::createFromUtf8(runtime, this->sortedBreakpointEntries[i].first);
|
62
|
-
|
63
|
-
pairArray->setValueAtIndex(runtime, 0, nameValue);
|
64
|
-
pairArray->setValueAtIndex(runtime, 1, jsi::Value(this->sortedBreakpointEntries[i].second));
|
65
|
-
sortedBreakpointEntriesArray->setValueAtIndex(runtime, i, *pairArray);
|
66
|
-
}
|
67
|
-
|
68
|
-
return jsi::Value(runtime, *sortedBreakpointEntriesArray);
|
69
|
-
}
|
70
|
-
|
71
|
-
if (propName == "useBreakpoints") {
|
72
|
-
return jsi::Function::createFromHostFunction(
|
73
|
-
runtime,
|
74
|
-
jsi::PropNameID::forAscii(runtime, "useBreakpoints"),
|
75
|
-
1,
|
76
|
-
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
77
|
-
jsi::Object breakpointsObj = arguments[0].asObject(runtime);
|
78
|
-
jsi::Array propertyNames = breakpointsObj.getPropertyNames(runtime);
|
79
|
-
std::vector<std::pair<std::string, double>> sortedBreakpointEntriesVec;
|
80
|
-
|
81
|
-
for (size_t i = 0; i < propertyNames.size(runtime); ++i) {
|
82
|
-
jsi::Value propNameValue = propertyNames.getValueAtIndex(runtime, i);
|
83
|
-
std::string name = propNameValue.asString(runtime).utf8(runtime);
|
84
|
-
jsi::PropNameID propNameID = jsi::PropNameID::forUtf8(runtime, name);
|
85
|
-
jsi::Value value = breakpointsObj.getProperty(runtime, propNameID);
|
86
|
-
|
87
|
-
if (value.isNumber()) {
|
88
|
-
double breakpointValue = value.asNumber();
|
89
|
-
sortedBreakpointEntriesVec.push_back(std::make_pair(name, breakpointValue));
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
std::sort(sortedBreakpointEntriesVec.begin(), sortedBreakpointEntriesVec.end(), [](const std::pair<std::string, double>& a, const std::pair<std::string, double>& b) {
|
94
|
-
return a.second < b.second;
|
95
|
-
});
|
96
|
-
|
97
|
-
this->sortedBreakpointEntries = sortedBreakpointEntriesVec;
|
98
|
-
|
99
|
-
std::string breakpoint = this->getBreakpointFromScreenWidth(this->screenWidth, sortedBreakpointEntriesVec);
|
100
|
-
|
101
|
-
this->breakpoint = breakpoint;
|
102
|
-
|
103
|
-
return jsi::Value::undefined();
|
104
|
-
}
|
105
|
-
);
|
106
|
-
}
|
107
|
-
|
108
|
-
if (propName == "useTheme") {
|
109
|
-
return jsi::Function::createFromHostFunction(runtime,
|
110
|
-
jsi::PropNameID::forAscii(runtime, "useTheme"),
|
111
|
-
1,
|
112
|
-
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
113
|
-
std::string themeName = arguments[0].asString(runtime).utf8(runtime);
|
114
|
-
NSString *currentTheme = [NSString stringWithUTF8String:themeName.c_str()];
|
115
|
-
|
116
|
-
this->theme = themeName;
|
117
|
-
this->onThemeChange(themeName);
|
118
|
-
|
119
|
-
return jsi::Value::undefined();
|
120
|
-
}
|
121
|
-
);
|
122
|
-
}
|
123
|
-
|
124
|
-
if (propName == "useAdaptiveThemes") {
|
125
|
-
return jsi::Function::createFromHostFunction(runtime,
|
126
|
-
jsi::PropNameID::forAscii(runtime, "useAdaptiveThemes"),
|
127
|
-
1,
|
128
|
-
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
129
|
-
bool enableAdaptiveThemes = arguments[0].asBool();
|
130
|
-
|
131
|
-
this->hasAdaptiveThemes = enableAdaptiveThemes;
|
132
|
-
|
133
|
-
if (!enableAdaptiveThemes || !this->supportsAutomaticColorScheme) {
|
134
|
-
return jsi::Value::undefined();
|
135
|
-
}
|
136
|
-
|
137
|
-
this->theme = this->colorScheme;
|
138
|
-
// this->onThemeChange(this->theme);
|
139
|
-
|
140
|
-
return jsi::Value::undefined();
|
141
|
-
}
|
142
|
-
);
|
143
|
-
}
|
144
|
-
|
145
|
-
return jsi::Value::undefined();
|
146
|
-
}
|
147
|
-
|
148
|
-
void UnistylesRuntime::set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) {
|
149
|
-
std::string propName = propNameId.utf8(runtime);
|
150
|
-
|
151
|
-
if (propName == "themes" && value.isObject()) {
|
152
|
-
jsi::Array themes = value.asObject(runtime).asArray(runtime);
|
153
|
-
std::vector<std::string> themesVector;
|
154
|
-
size_t length = themes.size(runtime);
|
155
|
-
|
156
|
-
for (size_t i = 0; i < length; ++i) {
|
157
|
-
jsi::Value element = themes.getValueAtIndex(runtime, i);
|
158
|
-
|
159
|
-
if (element.isString()) {
|
160
|
-
std::string theme = element.asString(runtime).utf8(runtime);
|
161
|
-
themesVector.push_back(theme);
|
162
|
-
}
|
163
|
-
}
|
164
|
-
|
165
|
-
this->themes = themesVector;
|
166
|
-
|
167
|
-
bool hasLightTheme = std::find(themesVector.begin(), themesVector.end(), "light") != themesVector.end();
|
168
|
-
bool hasDarkTheme = std::find(themesVector.begin(), themesVector.end(), "dark") != themesVector.end();
|
169
|
-
|
170
|
-
this->supportsAutomaticColorScheme = hasLightTheme && hasDarkTheme;
|
171
|
-
|
172
|
-
return;
|
173
|
-
}
|
174
|
-
}
|
175
|
-
|
176
|
-
std::string UnistylesRuntime::getBreakpointFromScreenWidth(double width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries) {
|
177
|
-
for (size_t i = 0; i < sortedBreakpointEntries.size(); ++i) {
|
178
|
-
const auto& [key, value] = sortedBreakpointEntries[i];
|
179
|
-
const double maxVal = (i + 1 < sortedBreakpointEntries.size()) ? sortedBreakpointEntries[i + 1].second : std::numeric_limits<double>::infinity();
|
180
|
-
|
181
|
-
if (width >= value && width < maxVal) {
|
182
|
-
return key;
|
183
|
-
}
|
184
|
-
}
|
185
|
-
|
186
|
-
return sortedBreakpointEntries.empty() ? "" : sortedBreakpointEntries.back().first;
|
187
|
-
}
|
188
|
-
|
189
|
-
void UnistylesRuntime::handleScreenSizeChange(int width, int height) {
|
190
|
-
if (width != this->screenWidth) {
|
191
|
-
this->screenWidth = width;
|
192
|
-
}
|
193
|
-
|
194
|
-
if (height != this->screenHeight) {
|
195
|
-
this->screenHeight = height;
|
196
|
-
}
|
197
|
-
|
198
|
-
std::string currentBreakpoint = this->breakpoint;
|
199
|
-
std::string nextBreakpoint = this->getBreakpointFromScreenWidth(width, this->sortedBreakpointEntries);
|
200
|
-
|
201
|
-
if (currentBreakpoint != nextBreakpoint) {
|
202
|
-
this->breakpoint = nextBreakpoint;
|
203
|
-
this->onBreakpointChange(nextBreakpoint);
|
204
|
-
}
|
205
|
-
}
|
206
|
-
|
207
|
-
void UnistylesRuntime::handleAppearanceChange(std::string colorScheme) {
|
208
|
-
this->colorScheme = colorScheme;
|
209
|
-
|
210
|
-
if (!this->supportsAutomaticColorScheme || !this->hasAdaptiveThemes) {
|
211
|
-
return;
|
212
|
-
}
|
213
|
-
|
214
|
-
this->theme = this->colorScheme;
|
215
|
-
this->onThemeChange(this->theme);
|
216
|
-
}
|
217
|
-
|
218
|
-
jsi::Value UnistylesRuntime::getThemeOrFail(jsi::Runtime& runtime) {
|
219
|
-
if (this->themes.size() == 1) {
|
220
|
-
std::string themeName = this->themes.at(0);
|
221
|
-
|
222
|
-
this->theme = themeName;
|
223
|
-
|
224
|
-
return jsi::String::createFromUtf8(runtime, themeName);
|
225
|
-
}
|
226
|
-
|
227
|
-
return jsi::Value().undefined();
|
228
|
-
}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../../examples/expo/src/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAgBzB,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,iBAMvB,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"Cxx.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/Cxx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,eAAO,MAAM,GAAG,yBA8Ef,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/examples/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../examples/expo/src/index.ts"],"names":[],"mappings":""}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/styles/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAA"}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import { breakpoints } from './breakpoints';
|
2
|
-
import { lightTheme, darkTheme, premiumTheme } from './theme';
|
3
|
-
type AppBreakpoints = typeof breakpoints;
|
4
|
-
type AppThemes = {
|
5
|
-
light: typeof lightTheme;
|
6
|
-
dark: typeof darkTheme;
|
7
|
-
premium: typeof premiumTheme;
|
8
|
-
};
|
9
|
-
declare module 'react-native-unistyles' {
|
10
|
-
interface UnistylesThemes extends AppThemes {
|
11
|
-
}
|
12
|
-
interface UnistylesBreakpoints extends AppBreakpoints {
|
13
|
-
}
|
14
|
-
}
|
15
|
-
export { lightTheme, darkTheme, premiumTheme, breakpoints };
|
16
|
-
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/styles/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE7D,KAAK,cAAc,GAAG,OAAO,WAAW,CAAA;AACxC,KAAK,SAAS,GAAG;IACb,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,IAAI,EAAE,OAAO,SAAS,CAAA;IACtB,OAAO,EAAE,OAAO,YAAY,CAAA;CAC/B,CAAA;AAED,OAAO,QAAQ,wBAAwB,CAAC;IACpC,UAAiB,eAAgB,SAAQ,SAAS;KAAG;IAErD,UAAiB,oBAAqB,SAAQ,cAAc;KAAG;CAClE;AAED,OAAO,EACH,UAAU,EACV,SAAS,EACT,YAAY,EACZ,WAAW,EACd,CAAA"}
|
@@ -1,40 +0,0 @@
|
|
1
|
-
export declare const lightTheme: {
|
2
|
-
colors: {
|
3
|
-
backgroundColor: string;
|
4
|
-
typography: string;
|
5
|
-
accent: string;
|
6
|
-
barbie: string;
|
7
|
-
oak: string;
|
8
|
-
sky: string;
|
9
|
-
fog: string;
|
10
|
-
aloes: string;
|
11
|
-
blood: string;
|
12
|
-
};
|
13
|
-
};
|
14
|
-
export declare const darkTheme: {
|
15
|
-
colors: {
|
16
|
-
backgroundColor: string;
|
17
|
-
typography: string;
|
18
|
-
accent: string;
|
19
|
-
barbie: string;
|
20
|
-
oak: string;
|
21
|
-
sky: string;
|
22
|
-
fog: string;
|
23
|
-
aloes: string;
|
24
|
-
blood: string;
|
25
|
-
};
|
26
|
-
};
|
27
|
-
export declare const premiumTheme: {
|
28
|
-
colors: {
|
29
|
-
backgroundColor: string;
|
30
|
-
typography: string;
|
31
|
-
accent: string;
|
32
|
-
barbie: string;
|
33
|
-
oak: string;
|
34
|
-
sky: string;
|
35
|
-
fog: string;
|
36
|
-
aloes: string;
|
37
|
-
blood: string;
|
38
|
-
};
|
39
|
-
};
|
40
|
-
//# sourceMappingURL=theme.d.ts.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../../examples/expo/src/styles/theme.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU;;;;;;;;;;;;CAQtB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;CAQrB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;;;;;;CAQxB,CAAA"}
|