react-native-unistyles 2.0.0-alpha.2 → 2.0.0-alpha.3
Sign up to get free protection for your applications and to get access to all the features.
- package/ios/UnistylesModule.h +3 -1
- package/ios/UnistylesModule.mm +59 -4
- package/ios/UnistylesRuntime.h +27 -9
- package/ios/UnistylesRuntime.mm +91 -54
- package/lib/commonjs/UnistyleRegistry.js +4 -7
- package/lib/commonjs/UnistyleRegistry.js.map +1 -1
- package/lib/commonjs/UnistylesRuntime.js +24 -13
- package/lib/commonjs/UnistylesRuntime.js.map +1 -1
- package/lib/commonjs/index.js +2 -2
- package/lib/commonjs/types/cxx.js +5 -5
- package/lib/commonjs/types/cxx.js.map +1 -1
- package/lib/commonjs/useUnistyles.js +5 -7
- package/lib/commonjs/useUnistyles.js.map +1 -1
- package/lib/module/UnistyleRegistry.js +4 -7
- package/lib/module/UnistyleRegistry.js.map +1 -1
- package/lib/module/UnistylesRuntime.js +25 -14
- package/lib/module/UnistylesRuntime.js.map +1 -1
- package/lib/module/index.js +2 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/cxx.js +4 -4
- package/lib/module/types/cxx.js.map +1 -1
- package/lib/module/useUnistyles.js +5 -7
- package/lib/module/useUnistyles.js.map +1 -1
- package/lib/typescript/examples/expo/src/examples/Cxx.d.ts.map +1 -1
- package/lib/typescript/src/UnistyleRegistry.d.ts +1 -2
- package/lib/typescript/src/UnistyleRegistry.d.ts.map +1 -1
- package/lib/typescript/src/UnistylesRuntime.d.ts +12 -8
- package/lib/typescript/src/UnistylesRuntime.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +2 -2
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/types/cxx.d.ts +14 -11
- package/lib/typescript/src/types/cxx.d.ts.map +1 -1
- package/lib/typescript/src/useUnistyles.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/UnistyleRegistry.ts +4 -8
- package/src/UnistylesRuntime.ts +26 -15
- package/src/index.ts +2 -2
- package/src/types/cxx.ts +17 -13
- package/src/useUnistyles.ts +5 -6
package/ios/UnistylesModule.h
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
#import <React/RCTBridgeModule.h>
|
2
2
|
#import <React/RCTEventEmitter.h>
|
3
|
+
#import <string>
|
3
4
|
|
4
|
-
typedef void(^
|
5
|
+
typedef void(^UnistylesThemeChangeEvent)(std::string);
|
6
|
+
typedef void(^UnistylesBreakpointChangeEvent)(std::string);
|
5
7
|
|
6
8
|
@interface UnistylesModule : RCTEventEmitter<RCTBridgeModule>
|
7
9
|
|
package/ios/UnistylesModule.mm
CHANGED
@@ -1,8 +1,10 @@
|
|
1
1
|
#import "UnistylesModule.h"
|
2
2
|
#import "UnistylesRuntime.h"
|
3
|
+
#import "UnistylesModule.h"
|
4
|
+
|
3
5
|
|
6
|
+
#import <React/RCTAppearance.h>
|
4
7
|
#import <React/RCTBridge+Private.h>
|
5
|
-
#import <React/RCTUtils.h>
|
6
8
|
#import <jsi/jsi.h>
|
7
9
|
|
8
10
|
@implementation UnistylesModule
|
@@ -19,6 +21,11 @@ RCT_EXPORT_MODULE(Unistyles)
|
|
19
21
|
selector:@selector(handleOrientationChange:)
|
20
22
|
name:UIDeviceOrientationDidChangeNotification
|
21
23
|
object:nil];
|
24
|
+
// todo from iOS 13
|
25
|
+
[[NSNotificationCenter defaultCenter] addObserver:self
|
26
|
+
selector:@selector(appearanceChanged:)
|
27
|
+
name:RCTUserInterfaceStyleDidChangeNotification
|
28
|
+
object:nil];
|
22
29
|
}
|
23
30
|
return self;
|
24
31
|
}
|
@@ -28,10 +35,32 @@ RCT_EXPORT_MODULE(Unistyles)
|
|
28
35
|
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
|
29
36
|
CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
|
30
37
|
|
31
|
-
((UnistylesRuntime*)self.unistylesRuntime)->
|
38
|
+
((UnistylesRuntime*)self.unistylesRuntime)->handleScreenSizeChange((int)screenWidth, (int)screenHeight);
|
32
39
|
});
|
33
40
|
}
|
34
41
|
|
42
|
+
- (void)appearanceChanged:(NSNotification *)notification
|
43
|
+
{
|
44
|
+
std::string colorScheme = [self getColorScheme];
|
45
|
+
|
46
|
+
((UnistylesRuntime*)self.unistylesRuntime)->handleAppearanceChange(colorScheme);
|
47
|
+
}
|
48
|
+
|
49
|
+
- (std::string)getColorScheme {
|
50
|
+
UIUserInterfaceStyle colorScheme = [UIScreen mainScreen].traitCollection.userInterfaceStyle;
|
51
|
+
|
52
|
+
// todo enums
|
53
|
+
switch (colorScheme) {
|
54
|
+
case UIUserInterfaceStyleLight:
|
55
|
+
return "light";
|
56
|
+
case UIUserInterfaceStyleDark:
|
57
|
+
return "dark";
|
58
|
+
case UIUserInterfaceStyleUnspecified:
|
59
|
+
default:
|
60
|
+
return "";
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
35
64
|
- (void)dealloc {
|
36
65
|
delete (UnistylesRuntime*)self.unistylesRuntime;
|
37
66
|
[[NSNotificationCenter defaultCenter] removeObserver:self];
|
@@ -92,11 +121,37 @@ RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install)
|
|
92
121
|
void registerUnistylesHostObject(jsi::Runtime &runtime, UnistylesModule* weakSelf) {
|
93
122
|
CGFloat initialScreenWidth = [UIScreen mainScreen].bounds.size.width;
|
94
123
|
CGFloat initialScreenHeight = [UIScreen mainScreen].bounds.size.height;
|
95
|
-
|
124
|
+
std::string initalColorScheme = [weakSelf getColorScheme];
|
125
|
+
UnistylesThemeChangeEvent onThemeChange = ^(std::string theme) {
|
126
|
+
NSString *nextTheme = [NSString stringWithUTF8String:theme.c_str()];
|
127
|
+
NSDictionary *body = @{
|
128
|
+
@"type": @"theme",
|
129
|
+
@"payload": @{
|
130
|
+
@"themeName": nextTheme
|
131
|
+
}
|
132
|
+
};
|
133
|
+
|
134
|
+
[weakSelf emitEvent:@"onChange" withBody:body];
|
135
|
+
};
|
136
|
+
UnistylesBreakpointChangeEvent onBreakpointChange = ^(std::string breakpoint) {
|
137
|
+
NSString *nextBreakpoint = [NSString stringWithUTF8String:breakpoint.c_str()];
|
138
|
+
NSDictionary *body = @{
|
139
|
+
@"type": @"breakpoint",
|
140
|
+
@"payload": @{
|
141
|
+
@"breakpoint": nextBreakpoint
|
142
|
+
}
|
143
|
+
};
|
144
|
+
|
96
145
|
[weakSelf emitEvent:@"onChange" withBody:body];
|
97
146
|
};
|
98
147
|
|
99
|
-
auto unistylesRuntime = std::make_shared<UnistylesRuntime>(
|
148
|
+
auto unistylesRuntime = std::make_shared<UnistylesRuntime>(
|
149
|
+
onThemeChange,
|
150
|
+
onBreakpointChange,
|
151
|
+
(int)initialScreenWidth,
|
152
|
+
(int)initialScreenHeight,
|
153
|
+
initalColorScheme
|
154
|
+
);
|
100
155
|
|
101
156
|
weakSelf.unistylesRuntime = unistylesRuntime.get();
|
102
157
|
|
package/ios/UnistylesRuntime.h
CHANGED
@@ -8,23 +8,41 @@ using namespace facebook;
|
|
8
8
|
|
9
9
|
class JSI_EXPORT UnistylesRuntime : public jsi::HostObject {
|
10
10
|
private:
|
11
|
-
|
12
|
-
|
13
|
-
|
11
|
+
UnistylesThemeChangeEvent onThemeChange;
|
12
|
+
UnistylesBreakpointChangeEvent onBreakpointChange;
|
13
|
+
|
14
|
+
int screenWidth;
|
15
|
+
int screenHeight;
|
16
|
+
std::string colorScheme;
|
14
17
|
|
15
18
|
public:
|
16
|
-
UnistylesRuntime(
|
17
|
-
|
19
|
+
UnistylesRuntime(
|
20
|
+
UnistylesThemeChangeEvent onThemeChange,
|
21
|
+
UnistylesBreakpointChangeEvent onBreakpointChange,
|
22
|
+
float screenWidth,
|
23
|
+
float screenHeight,
|
24
|
+
std::string colorScheme
|
25
|
+
): onThemeChange(onThemeChange),
|
26
|
+
onBreakpointChange(onBreakpointChange),
|
27
|
+
screenWidth(screenWidth),
|
28
|
+
screenHeight(screenHeight),
|
29
|
+
colorScheme(colorScheme) {}
|
30
|
+
|
31
|
+
bool hasAdaptiveThemes;
|
32
|
+
bool supportsAutomaticColorScheme;
|
18
33
|
|
19
34
|
std::string theme;
|
20
35
|
std::string breakpoint;
|
21
|
-
std::string
|
22
|
-
std::vector<std::string> featureFlags;
|
36
|
+
std::vector<std::string> themes;
|
23
37
|
std::vector<std::pair<std::string, double>> sortedBreakpointEntries;
|
24
38
|
|
25
39
|
jsi::Value get(jsi::Runtime&, const jsi::PropNameID& name) override;
|
26
|
-
|
40
|
+
void set(jsi::Runtime& runtime, const jsi::PropNameID& propNameId, const jsi::Value& value) override;
|
41
|
+
std::vector<jsi::PropNameID> getPropertyNames(jsi::Runtime& runtime) override;
|
42
|
+
|
43
|
+
void handleScreenSizeChange(int width, int height);
|
44
|
+
void handleAppearanceChange(std::string colorScheme);
|
27
45
|
|
28
|
-
|
46
|
+
jsi::Value getThemeOrFail(jsi::Runtime&);
|
29
47
|
std::string getBreakpointFromScreenWidth(double width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries);
|
30
48
|
};
|
package/ios/UnistylesRuntime.mm
CHANGED
@@ -4,17 +4,20 @@ std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& rt
|
|
4
4
|
std::vector<jsi::PropNameID> properties;
|
5
5
|
|
6
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")));
|
7
10
|
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("theme")));
|
8
11
|
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("breakpoint")));
|
9
12
|
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("colorScheme")));
|
10
13
|
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("sortedBreakpointPairs")));
|
11
|
-
|
14
|
+
|
12
15
|
// setters
|
16
|
+
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("themes")));
|
13
17
|
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useBreakpoints")));
|
14
18
|
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useTheme")));
|
15
|
-
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("
|
16
|
-
|
17
|
-
|
19
|
+
properties.push_back(jsi::PropNameID::forUtf8(rt, std::string("useAdaptiveThemes")));
|
20
|
+
|
18
21
|
return properties;
|
19
22
|
}
|
20
23
|
|
@@ -22,10 +25,22 @@ std::vector<jsi::PropNameID> UnistylesRuntime::getPropertyNames(jsi::Runtime& rt
|
|
22
25
|
jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& propNameId) {
|
23
26
|
std::string propName = propNameId.utf8(runtime);
|
24
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
|
+
|
25
40
|
if (propName == "theme") {
|
26
41
|
return !this->theme.empty()
|
27
42
|
? jsi::Value(jsi::String::createFromUtf8(runtime, this->theme))
|
28
|
-
:
|
43
|
+
: this->getThemeOrFail(runtime);
|
29
44
|
}
|
30
45
|
|
31
46
|
if (propName == "breakpoint") {
|
@@ -35,11 +50,9 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
|
|
35
50
|
}
|
36
51
|
|
37
52
|
if (propName == "colorScheme") {
|
38
|
-
return
|
39
|
-
? jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme))
|
40
|
-
: jsi::Value::undefined();
|
53
|
+
return jsi::Value(jsi::String::createFromUtf8(runtime, this->colorScheme));
|
41
54
|
}
|
42
|
-
|
55
|
+
|
43
56
|
if (propName == "sortedBreakpointPairs") {
|
44
57
|
std::unique_ptr<jsi::Array> sortedBreakpointEntriesArray = std::make_unique<jsi::Array>(runtime, this->sortedBreakpointEntries.size());
|
45
58
|
|
@@ -101,61 +114,63 @@ jsi::Value UnistylesRuntime::get(jsi::Runtime& runtime, const jsi::PropNameID& p
|
|
101
114
|
NSString *currentTheme = [NSString stringWithUTF8String:themeName.c_str()];
|
102
115
|
|
103
116
|
this->theme = themeName;
|
104
|
-
|
105
|
-
NSDictionary *body = @{
|
106
|
-
@"type": @"theme",
|
107
|
-
@"payload": @{
|
108
|
-
@"currentTheme": currentTheme
|
109
|
-
}
|
110
|
-
};
|
111
|
-
this->eventHandler(body);
|
117
|
+
this->onThemeChange(themeName);
|
112
118
|
|
113
119
|
return jsi::Value::undefined();
|
114
120
|
}
|
115
121
|
);
|
116
122
|
}
|
117
123
|
|
118
|
-
if (propName == "
|
124
|
+
if (propName == "useAdaptiveThemes") {
|
119
125
|
return jsi::Function::createFromHostFunction(runtime,
|
120
|
-
jsi::PropNameID::forAscii(runtime, "
|
126
|
+
jsi::PropNameID::forAscii(runtime, "useAdaptiveThemes"),
|
121
127
|
1,
|
122
128
|
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
123
|
-
|
129
|
+
bool enableAdaptiveThemes = arguments[0].asBool();
|
124
130
|
|
125
|
-
this->
|
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);
|
126
139
|
|
127
140
|
return jsi::Value::undefined();
|
128
141
|
}
|
129
142
|
);
|
130
143
|
}
|
131
144
|
|
132
|
-
|
133
|
-
|
134
|
-
jsi::PropNameID::forAscii(runtime, "useFeatureFlags"),
|
135
|
-
1,
|
136
|
-
[this](jsi::Runtime &runtime, const jsi::Value &thisVal, const jsi::Value *arguments, size_t count) -> jsi::Value {
|
137
|
-
jsi::Array featureFlagsArray = arguments[0].asObject(runtime).asArray(runtime);
|
138
|
-
size_t length = featureFlagsArray.size(runtime);
|
139
|
-
std::vector<std::string> featureFlags;
|
140
|
-
featureFlags.reserve(length);
|
141
|
-
|
142
|
-
for (size_t i = 0; i < length; ++i) {
|
143
|
-
jsi::Value element = featureFlagsArray.getValueAtIndex(runtime, i);
|
144
|
-
|
145
|
-
if (element.isString()) {
|
146
|
-
std::string featureFlag = element.asString(runtime).utf8(runtime);
|
147
|
-
featureFlags.push_back(featureFlag);
|
148
|
-
}
|
149
|
-
}
|
145
|
+
return jsi::Value::undefined();
|
146
|
+
}
|
150
147
|
|
151
|
-
|
152
|
-
|
153
|
-
|
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);
|
154
162
|
}
|
155
|
-
|
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;
|
156
173
|
}
|
157
|
-
|
158
|
-
return jsi::Value::undefined();
|
159
174
|
}
|
160
175
|
|
161
176
|
std::string UnistylesRuntime::getBreakpointFromScreenWidth(double width, const std::vector<std::pair<std::string, double>>& sortedBreakpointEntries) {
|
@@ -171,21 +186,43 @@ std::string UnistylesRuntime::getBreakpointFromScreenWidth(double width, const s
|
|
171
186
|
return sortedBreakpointEntries.empty() ? "" : sortedBreakpointEntries.back().first;
|
172
187
|
}
|
173
188
|
|
174
|
-
void UnistylesRuntime::
|
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
|
+
|
175
198
|
std::string currentBreakpoint = this->breakpoint;
|
176
199
|
std::string nextBreakpoint = this->getBreakpointFromScreenWidth(width, this->sortedBreakpointEntries);
|
177
200
|
|
178
201
|
if (currentBreakpoint != nextBreakpoint) {
|
179
202
|
this->breakpoint = nextBreakpoint;
|
203
|
+
this->onBreakpointChange(nextBreakpoint);
|
204
|
+
}
|
205
|
+
}
|
180
206
|
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
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;
|
188
223
|
|
189
|
-
|
224
|
+
return jsi::String::createFromUtf8(runtime, themeName);
|
190
225
|
}
|
226
|
+
|
227
|
+
return jsi::Value().undefined();
|
191
228
|
}
|
@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.UnistyleRegistry = void 0;
|
7
7
|
class UnistyleRegistry {
|
8
|
-
|
8
|
+
config = {};
|
9
9
|
themes = {};
|
10
10
|
breakpoints = {};
|
11
11
|
sortedBreakpointPairs = [];
|
12
|
-
config = {};
|
13
12
|
constructor(unistylesBridge) {
|
14
13
|
this.unistylesBridge = unistylesBridge;
|
15
14
|
}
|
16
15
|
addThemes = themes => {
|
17
16
|
this.themes = themes;
|
17
|
+
this.unistylesBridge.themes = Object.keys(themes);
|
18
18
|
return this;
|
19
19
|
};
|
20
20
|
addBreakpoints = breakpoints => {
|
@@ -24,11 +24,8 @@ class UnistyleRegistry {
|
|
24
24
|
};
|
25
25
|
addConfig = config => {
|
26
26
|
this.config = config;
|
27
|
-
if (config.
|
28
|
-
this.unistylesBridge.
|
29
|
-
}
|
30
|
-
if (config.colorScheme) {
|
31
|
-
this.unistylesBridge.useColorScheme(config.colorScheme);
|
27
|
+
if (config.adaptiveThemes) {
|
28
|
+
this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes);
|
32
29
|
}
|
33
30
|
return this;
|
34
31
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["UnistyleRegistry","
|
1
|
+
{"version":3,"names":["UnistyleRegistry","config","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","Object","keys","addBreakpoints","useBreakpoints","addConfig","adaptiveThemes","useAdaptiveThemes","exports"],"sourceRoot":"../../src","sources":["UnistyleRegistry.ts"],"mappings":";;;;;;AAGO,MAAMA,gBAAgB,CAAC;EACnBC,MAAM,GAAoB,CAAC,CAAC;EAC5BC,MAAM,GAAoB,CAAC,CAAC;EAC5BC,WAAW,GAAyB,CAAC,CAAC;EACtCC,qBAAqB,GAA0F,EAAE;EAExHC,WAAWA,CAASC,eAAgC,EAAE;IAAA,KAAlCA,eAAgC,GAAhCA,eAAgC;EAAG;EAEhDC,SAAS,GAAIL,MAAuB,IAAK;IAC5C,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACI,eAAe,CAACJ,MAAM,GAAGM,MAAM,CAACC,IAAI,CAACP,MAAM,CAAiC;IAEjF,OAAO,IAAI;EACf,CAAC;EAEMQ,cAAc,GAAIP,WAAiC,IAAK;IAC3D,IAAI,CAACG,eAAe,CAACK,cAAc,CAACR,WAAW,CAAC;IAChD,IAAI,CAACC,qBAAqB,GAAG,IAAI,CAACE,eAAe,CAACF,qBAAqB;IAEvE,OAAO,IAAI;EACf,CAAC;EAEMQ,SAAS,GAAIX,MAAuB,IAAK;IAC5C,IAAI,CAACA,MAAM,GAAGA,MAAM;IAEpB,IAAIA,MAAM,CAACY,cAAc,EAAE;MACvB,IAAI,CAACP,eAAe,CAACQ,iBAAiB,CAACb,MAAM,CAACY,cAAc,CAAC;IACjE;IAEA,OAAO,IAAI;EACf,CAAC;AACL;AAACE,OAAA,CAAAf,gBAAA,GAAAA,gBAAA"}
|
@@ -13,40 +13,51 @@ class UnistylesRuntime {
|
|
13
13
|
get colorScheme() {
|
14
14
|
return this.unistylesBridge.colorScheme;
|
15
15
|
}
|
16
|
-
get
|
17
|
-
return this.
|
16
|
+
get hasAdaptiveThemes() {
|
17
|
+
return this.unistylesBridge.hasAdaptiveThemes;
|
18
18
|
}
|
19
19
|
get sortedBreakpoints() {
|
20
20
|
return this.registry.sortedBreakpointPairs;
|
21
21
|
}
|
22
|
-
get
|
23
|
-
return this.registry.config;
|
24
|
-
}
|
25
|
-
get theme() {
|
22
|
+
get themeName() {
|
26
23
|
return this.unistylesBridge.theme;
|
27
24
|
}
|
28
|
-
get
|
25
|
+
get breakpoint() {
|
29
26
|
return this.unistylesBridge.breakpoint;
|
30
27
|
}
|
31
|
-
|
32
|
-
|
33
|
-
this.unistylesBridge.
|
28
|
+
get screen() {
|
29
|
+
return {
|
30
|
+
width: this.unistylesBridge.screenWidth,
|
31
|
+
height: this.unistylesBridge.screenHeight
|
32
|
+
};
|
33
|
+
}
|
34
|
+
get orientation() {
|
35
|
+
const {
|
36
|
+
width,
|
37
|
+
height
|
38
|
+
} = this.screen;
|
39
|
+
if (width > height) {
|
40
|
+
return _types.ScreenOrientation.Landscape;
|
34
41
|
}
|
35
|
-
|
42
|
+
return _types.ScreenOrientation.Portrait;
|
43
|
+
}
|
36
44
|
setTheme = name => {
|
37
|
-
if (name !== this.
|
45
|
+
if (name !== this.themeName && this.hasTheme(name)) {
|
38
46
|
this.unistylesBridge.useTheme(name);
|
39
47
|
return true;
|
40
48
|
}
|
41
49
|
return false;
|
42
50
|
};
|
43
|
-
hasTheme = name => name in this.registry.themes;
|
44
51
|
getTheme = forName => {
|
45
52
|
if (!this.hasTheme(forName)) {
|
46
53
|
throw new Error(_types.UnistylesError.ThemeNotFound);
|
47
54
|
}
|
48
55
|
return this.registry.themes[forName];
|
49
56
|
};
|
57
|
+
setAdaptiveThemes = enable => {
|
58
|
+
this.unistylesBridge.useAdaptiveThemes(enable);
|
59
|
+
};
|
60
|
+
hasTheme = name => name in this.registry.themes;
|
50
61
|
}
|
51
62
|
exports.UnistylesRuntime = UnistylesRuntime;
|
52
63
|
//# sourceMappingURL=UnistylesRuntime.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_types","require","UnistylesRuntime","constructor","unistylesBridge","registry","colorScheme","
|
1
|
+
{"version":3,"names":["_types","require","UnistylesRuntime","constructor","unistylesBridge","registry","colorScheme","hasAdaptiveThemes","sortedBreakpoints","sortedBreakpointPairs","themeName","theme","breakpoint","screen","width","screenWidth","height","screenHeight","orientation","ScreenOrientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","getTheme","forName","Error","UnistylesError","ThemeNotFound","themes","setAdaptiveThemes","enable","useAdaptiveThemes","exports"],"sourceRoot":"../../src","sources":["UnistylesRuntime.ts"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAGO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,QAA0B,EAAE;IAAA,KAAtED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,QAA0B,GAA1BA,QAA0B;EAAG;EAE3F,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,eAAe,CAACE,WAAW;EAC3C;EAEA,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,eAAe,CAACG,iBAAiB;EACjD;EAEA,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,QAAQ,CAACI,qBAAqB;EAC9C;EAEA,IAAWC,SAASA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACN,eAAe,CAACO,KAAK;EACrC;EAEA,IAAWC,UAAUA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACR,eAAe,CAACQ,UAAU;EAC1C;EAEA,IAAWC,MAAMA,CAAA,EAAG;IAChB,OAAO;MACHC,KAAK,EAAE,IAAI,CAACV,eAAe,CAACW,WAAW;MACvCC,MAAM,EAAE,IAAI,CAACZ,eAAe,CAACa;IACjC,CAAC;EACL;EAEA,IAAWC,WAAWA,CAAA,EAAG;IACrB,MAAM;MAAEJ,KAAK;MAAEE;IAAO,CAAC,GAAG,IAAI,CAACH,MAAM;IAErC,IAAIC,KAAK,GAAGE,MAAM,EAAE;MAChB,OAAOG,wBAAiB,CAACC,SAAS;IACtC;IAEA,OAAOD,wBAAiB,CAACE,QAAQ;EACrC;EAEOC,QAAQ,GAAIC,IAA2B,IAAK;IAC/C,IAAIA,IAAI,KAAK,IAAI,CAACb,SAAS,IAAI,IAAI,CAACc,QAAQ,CAACD,IAAI,CAAC,EAAE;MAChD,IAAI,CAACnB,eAAe,CAACqB,QAAQ,CAACF,IAAI,CAAC;MAEnC,OAAO,IAAI;IACf;IAEA,OAAO,KAAK;EAChB,CAAC;EAEMG,QAAQ,GAAIC,OAA8B,IAAK;IAClD,IAAI,CAAC,IAAI,CAACH,QAAQ,CAACG,OAAO,CAAC,EAAE;MACzB,MAAM,IAAIC,KAAK,CAACC,qBAAc,CAACC,aAAa,CAAC;IACjD;IAEA,OAAO,IAAI,CAACzB,QAAQ,CAAC0B,MAAM,CAACJ,OAAO,CAAC;EACxC,CAAC;EAEMK,iBAAiB,GAAIC,MAAe,IAAK;IAC5C,IAAI,CAAC7B,eAAe,CAAC8B,iBAAiB,CAACD,MAAM,CAAC;EAClD,CAAC;EAEOT,QAAQ,GAAID,IAA2B,IAAKA,IAAI,IAAI,IAAI,CAAClB,QAAQ,CAAC0B,MAAM;AACpF;AAACI,OAAA,CAAAjC,gBAAA,GAAAA,gBAAA"}
|
package/lib/commonjs/index.js
CHANGED
@@ -3,10 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
Object.defineProperty(exports, "
|
6
|
+
Object.defineProperty(exports, "ScreenOrientation", {
|
7
7
|
enumerable: true,
|
8
8
|
get: function () {
|
9
|
-
return _types.
|
9
|
+
return _types.ScreenOrientation;
|
10
10
|
}
|
11
11
|
});
|
12
12
|
exports.UnistylesRuntime = exports.UnistylesRegistry = void 0;
|
@@ -3,11 +3,11 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.UnistylesError = exports.
|
7
|
-
let
|
8
|
-
|
9
|
-
|
10
|
-
return
|
6
|
+
exports.UnistylesError = exports.ScreenOrientation = exports.CxxUnistylesEventTypes = void 0;
|
7
|
+
let ScreenOrientation = exports.ScreenOrientation = /*#__PURE__*/function (ScreenOrientation) {
|
8
|
+
ScreenOrientation[ScreenOrientation["Portrait"] = 1] = "Portrait";
|
9
|
+
ScreenOrientation[ScreenOrientation["Landscape"] = 2] = "Landscape";
|
10
|
+
return ScreenOrientation;
|
11
11
|
}({});
|
12
12
|
let CxxUnistylesEventTypes = exports.CxxUnistylesEventTypes = /*#__PURE__*/function (CxxUnistylesEventTypes) {
|
13
13
|
CxxUnistylesEventTypes["Theme"] = "theme";
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["ScreenOrientation","exports","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":";;;;;;IASYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAAA,IAsBjBE,sBAAsB,GAAAD,OAAA,CAAAC,sBAAA,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AAAA,IA8BtBC,cAAc,GAAAF,OAAA,CAAAE,cAAA,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}
|
@@ -10,8 +10,8 @@ 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 [theme, setTheme] = (0, _react.useState)(_Unistyles.unistyles.runtime.getTheme(_Unistyles.unistyles.runtime.
|
14
|
-
const [breakpoint, setBreakpoint] = (0, _react.useState)(_Unistyles.unistyles.runtime.
|
13
|
+
const [theme, setTheme] = (0, _react.useState)(_Unistyles.unistyles.runtime.getTheme(_Unistyles.unistyles.runtime.themeName));
|
14
|
+
const [breakpoint, setBreakpoint] = (0, _react.useState)(_Unistyles.unistyles.runtime.breakpoint);
|
15
15
|
const [screenSize, setScreenSize] = (0, _react.useState)({
|
16
16
|
width: 0,
|
17
17
|
height: 0
|
@@ -22,9 +22,10 @@ const useUnistyles = () => {
|
|
22
22
|
case _types.CxxUnistylesEventTypes.Theme:
|
23
23
|
{
|
24
24
|
const themeEvent = event;
|
25
|
-
setTheme(_Unistyles.unistyles.runtime.getTheme(themeEvent.payload.
|
25
|
+
setTheme(_Unistyles.unistyles.runtime.getTheme(themeEvent.payload.themeName));
|
26
26
|
return;
|
27
27
|
}
|
28
|
+
// this event is not available on mobile
|
28
29
|
case _types.CxxUnistylesEventTypes.Size:
|
29
30
|
{
|
30
31
|
const sizeEvent = event;
|
@@ -32,15 +33,12 @@ const useUnistyles = () => {
|
|
32
33
|
width: sizeEvent.payload.width,
|
33
34
|
height: sizeEvent.payload.height
|
34
35
|
});
|
35
|
-
// todo
|
36
|
-
// setBreakpoint(unistyles.runtime.currentBreakpoint)
|
37
|
-
|
38
36
|
return;
|
39
37
|
}
|
40
38
|
case _types.CxxUnistylesEventTypes.Breakpoint:
|
41
39
|
{
|
42
40
|
const breakpointEvent = event;
|
43
|
-
setBreakpoint(breakpointEvent.payload.
|
41
|
+
setBreakpoint(breakpointEvent.payload.breakpoint);
|
44
42
|
return;
|
45
43
|
}
|
46
44
|
default:
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","theme","setTheme","useState","unistyles","runtime","getTheme","
|
1
|
+
{"version":3,"names":["_reactNative","require","_react","_types","_Unistyles","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useUnistyles","theme","setTheme","useState","unistyles","runtime","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","height","useEffect","subscription","addListener","event","type","CxxUnistylesEventTypes","Theme","themeEvent","payload","Size","sizeEvent","Breakpoint","breakpointEvent","remove","exports"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAOA,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,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAC,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACC,QAAQ,CAACF,oBAAS,CAACC,OAAO,CAACE,SAAS,CAAC,CAAC;EAC3F,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAN,eAAQ,EAACC,oBAAS,CAACC,OAAO,CAACG,UAAU,CAAC;EAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAR,eAAQ,EAAC;IACzCS,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGnB,eAAe,CAACoB,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKC,6BAAsB,CAACC,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGJ,KAA+B;YAElDf,QAAQ,CAACE,oBAAS,CAACC,OAAO,CAACC,QAAQ,CAACe,UAAU,CAACC,OAAO,CAACf,SAAS,CAAC,CAAC;YAElE;UACJ;QACA;QACA,KAAKY,6BAAsB,CAACI,IAAI;UAAE;YAC9B,MAAMC,SAAS,GAAGP,KAA8B;YAEhDN,aAAa,CAAC;cACVC,KAAK,EAAEY,SAAS,CAACF,OAAO,CAACV,KAAK;cAC9BC,MAAM,EAAEW,SAAS,CAACF,OAAO,CAACT;YAC9B,CAAC,CAAC;YAEF;UACJ;QACA,KAAKM,6BAAsB,CAACM,UAAU;UAAE;YACpC,MAAMC,eAAe,GAAGT,KAAoC;YAE5DR,aAAa,CAACiB,eAAe,CAACJ,OAAO,CAACd,UAAU,CAAC;YAEjD;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOO,YAAY,CAACY,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACH1B,KAAK;IACLO,UAAU;IACVE;EACJ,CAAC;AACL,CAAC;AAAAkB,OAAA,CAAA5B,YAAA,GAAAA,YAAA"}
|
@@ -1,14 +1,14 @@
|
|
1
1
|
export class UnistyleRegistry {
|
2
|
-
|
2
|
+
config = {};
|
3
3
|
themes = {};
|
4
4
|
breakpoints = {};
|
5
5
|
sortedBreakpointPairs = [];
|
6
|
-
config = {};
|
7
6
|
constructor(unistylesBridge) {
|
8
7
|
this.unistylesBridge = unistylesBridge;
|
9
8
|
}
|
10
9
|
addThemes = themes => {
|
11
10
|
this.themes = themes;
|
11
|
+
this.unistylesBridge.themes = Object.keys(themes);
|
12
12
|
return this;
|
13
13
|
};
|
14
14
|
addBreakpoints = breakpoints => {
|
@@ -18,11 +18,8 @@ export class UnistyleRegistry {
|
|
18
18
|
};
|
19
19
|
addConfig = config => {
|
20
20
|
this.config = config;
|
21
|
-
if (config.
|
22
|
-
this.unistylesBridge.
|
23
|
-
}
|
24
|
-
if (config.colorScheme) {
|
25
|
-
this.unistylesBridge.useColorScheme(config.colorScheme);
|
21
|
+
if (config.adaptiveThemes) {
|
22
|
+
this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes);
|
26
23
|
}
|
27
24
|
return this;
|
28
25
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["UnistyleRegistry","
|
1
|
+
{"version":3,"names":["UnistyleRegistry","config","themes","breakpoints","sortedBreakpointPairs","constructor","unistylesBridge","addThemes","Object","keys","addBreakpoints","useBreakpoints","addConfig","adaptiveThemes","useAdaptiveThemes"],"sourceRoot":"../../src","sources":["UnistyleRegistry.ts"],"mappings":"AAGA,OAAO,MAAMA,gBAAgB,CAAC;EACnBC,MAAM,GAAoB,CAAC,CAAC;EAC5BC,MAAM,GAAoB,CAAC,CAAC;EAC5BC,WAAW,GAAyB,CAAC,CAAC;EACtCC,qBAAqB,GAA0F,EAAE;EAExHC,WAAWA,CAASC,eAAgC,EAAE;IAAA,KAAlCA,eAAgC,GAAhCA,eAAgC;EAAG;EAEhDC,SAAS,GAAIL,MAAuB,IAAK;IAC5C,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACI,eAAe,CAACJ,MAAM,GAAGM,MAAM,CAACC,IAAI,CAACP,MAAM,CAAiC;IAEjF,OAAO,IAAI;EACf,CAAC;EAEMQ,cAAc,GAAIP,WAAiC,IAAK;IAC3D,IAAI,CAACG,eAAe,CAACK,cAAc,CAACR,WAAW,CAAC;IAChD,IAAI,CAACC,qBAAqB,GAAG,IAAI,CAACE,eAAe,CAACF,qBAAqB;IAEvE,OAAO,IAAI;EACf,CAAC;EAEMQ,SAAS,GAAIX,MAAuB,IAAK;IAC5C,IAAI,CAACA,MAAM,GAAGA,MAAM;IAEpB,IAAIA,MAAM,CAACY,cAAc,EAAE;MACvB,IAAI,CAACP,eAAe,CAACQ,iBAAiB,CAACb,MAAM,CAACY,cAAc,CAAC;IACjE;IAEA,OAAO,IAAI;EACf,CAAC;AACL"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import { UnistylesError } from './types';
|
1
|
+
import { ScreenOrientation, UnistylesError } from './types';
|
2
2
|
export class UnistylesRuntime {
|
3
3
|
constructor(unistylesBridge, registry) {
|
4
4
|
this.unistylesBridge = unistylesBridge;
|
@@ -7,39 +7,50 @@ export class UnistylesRuntime {
|
|
7
7
|
get colorScheme() {
|
8
8
|
return this.unistylesBridge.colorScheme;
|
9
9
|
}
|
10
|
-
get
|
11
|
-
return this.
|
10
|
+
get hasAdaptiveThemes() {
|
11
|
+
return this.unistylesBridge.hasAdaptiveThemes;
|
12
12
|
}
|
13
13
|
get sortedBreakpoints() {
|
14
14
|
return this.registry.sortedBreakpointPairs;
|
15
15
|
}
|
16
|
-
get
|
17
|
-
return this.registry.config;
|
18
|
-
}
|
19
|
-
get theme() {
|
16
|
+
get themeName() {
|
20
17
|
return this.unistylesBridge.theme;
|
21
18
|
}
|
22
|
-
get
|
19
|
+
get breakpoint() {
|
23
20
|
return this.unistylesBridge.breakpoint;
|
24
21
|
}
|
25
|
-
|
26
|
-
|
27
|
-
this.unistylesBridge.
|
22
|
+
get screen() {
|
23
|
+
return {
|
24
|
+
width: this.unistylesBridge.screenWidth,
|
25
|
+
height: this.unistylesBridge.screenHeight
|
26
|
+
};
|
27
|
+
}
|
28
|
+
get orientation() {
|
29
|
+
const {
|
30
|
+
width,
|
31
|
+
height
|
32
|
+
} = this.screen;
|
33
|
+
if (width > height) {
|
34
|
+
return ScreenOrientation.Landscape;
|
28
35
|
}
|
29
|
-
|
36
|
+
return ScreenOrientation.Portrait;
|
37
|
+
}
|
30
38
|
setTheme = name => {
|
31
|
-
if (name !== this.
|
39
|
+
if (name !== this.themeName && this.hasTheme(name)) {
|
32
40
|
this.unistylesBridge.useTheme(name);
|
33
41
|
return true;
|
34
42
|
}
|
35
43
|
return false;
|
36
44
|
};
|
37
|
-
hasTheme = name => name in this.registry.themes;
|
38
45
|
getTheme = forName => {
|
39
46
|
if (!this.hasTheme(forName)) {
|
40
47
|
throw new Error(UnistylesError.ThemeNotFound);
|
41
48
|
}
|
42
49
|
return this.registry.themes[forName];
|
43
50
|
};
|
51
|
+
setAdaptiveThemes = enable => {
|
52
|
+
this.unistylesBridge.useAdaptiveThemes(enable);
|
53
|
+
};
|
54
|
+
hasTheme = name => name in this.registry.themes;
|
44
55
|
}
|
45
56
|
//# sourceMappingURL=UnistylesRuntime.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["UnistylesError","UnistylesRuntime","constructor","unistylesBridge","registry","colorScheme","
|
1
|
+
{"version":3,"names":["ScreenOrientation","UnistylesError","UnistylesRuntime","constructor","unistylesBridge","registry","colorScheme","hasAdaptiveThemes","sortedBreakpoints","sortedBreakpointPairs","themeName","theme","breakpoint","screen","width","screenWidth","height","screenHeight","orientation","Landscape","Portrait","setTheme","name","hasTheme","useTheme","getTheme","forName","Error","ThemeNotFound","themes","setAdaptiveThemes","enable","useAdaptiveThemes"],"sourceRoot":"../../src","sources":["UnistylesRuntime.ts"],"mappings":"AAEA,SAASA,iBAAiB,EAAEC,cAAc,QAAQ,SAAS;AAG3D,OAAO,MAAMC,gBAAgB,CAAC;EAC1BC,WAAWA,CAASC,eAAgC,EAAUC,QAA0B,EAAE;IAAA,KAAtED,eAAgC,GAAhCA,eAAgC;IAAA,KAAUC,QAA0B,GAA1BA,QAA0B;EAAG;EAE3F,IAAWC,WAAWA,CAAA,EAAG;IACrB,OAAO,IAAI,CAACF,eAAe,CAACE,WAAW;EAC3C;EAEA,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,eAAe,CAACG,iBAAiB;EACjD;EAEA,IAAWC,iBAAiBA,CAAA,EAAG;IAC3B,OAAO,IAAI,CAACH,QAAQ,CAACI,qBAAqB;EAC9C;EAEA,IAAWC,SAASA,CAAA,EAAG;IACnB,OAAO,IAAI,CAACN,eAAe,CAACO,KAAK;EACrC;EAEA,IAAWC,UAAUA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACR,eAAe,CAACQ,UAAU;EAC1C;EAEA,IAAWC,MAAMA,CAAA,EAAG;IAChB,OAAO;MACHC,KAAK,EAAE,IAAI,CAACV,eAAe,CAACW,WAAW;MACvCC,MAAM,EAAE,IAAI,CAACZ,eAAe,CAACa;IACjC,CAAC;EACL;EAEA,IAAWC,WAAWA,CAAA,EAAG;IACrB,MAAM;MAAEJ,KAAK;MAAEE;IAAO,CAAC,GAAG,IAAI,CAACH,MAAM;IAErC,IAAIC,KAAK,GAAGE,MAAM,EAAE;MAChB,OAAOhB,iBAAiB,CAACmB,SAAS;IACtC;IAEA,OAAOnB,iBAAiB,CAACoB,QAAQ;EACrC;EAEOC,QAAQ,GAAIC,IAA2B,IAAK;IAC/C,IAAIA,IAAI,KAAK,IAAI,CAACZ,SAAS,IAAI,IAAI,CAACa,QAAQ,CAACD,IAAI,CAAC,EAAE;MAChD,IAAI,CAAClB,eAAe,CAACoB,QAAQ,CAACF,IAAI,CAAC;MAEnC,OAAO,IAAI;IACf;IAEA,OAAO,KAAK;EAChB,CAAC;EAEMG,QAAQ,GAAIC,OAA8B,IAAK;IAClD,IAAI,CAAC,IAAI,CAACH,QAAQ,CAACG,OAAO,CAAC,EAAE;MACzB,MAAM,IAAIC,KAAK,CAAC1B,cAAc,CAAC2B,aAAa,CAAC;IACjD;IAEA,OAAO,IAAI,CAACvB,QAAQ,CAACwB,MAAM,CAACH,OAAO,CAAC;EACxC,CAAC;EAEMI,iBAAiB,GAAIC,MAAe,IAAK;IAC5C,IAAI,CAAC3B,eAAe,CAAC4B,iBAAiB,CAACD,MAAM,CAAC;EAClD,CAAC;EAEOR,QAAQ,GAAID,IAA2B,IAAKA,IAAI,IAAI,IAAI,CAACjB,QAAQ,CAACwB,MAAM;AACpF"}
|
package/lib/module/index.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
import { unistyles } from './Unistyles';
|
2
|
-
import {
|
2
|
+
import { ScreenOrientation } from './types';
|
3
3
|
export { useInitialTheme } from './useInitialTheme';
|
4
4
|
export { useStyles } from './useStyles';
|
5
5
|
export { createStyleSheet } from './createStyleSheet';
|
@@ -15,5 +15,5 @@ const UnistylesRegistry = {
|
|
15
15
|
addConfig
|
16
16
|
};
|
17
17
|
export { UnistylesRuntime, UnistylesRegistry };
|
18
|
-
export {
|
18
|
+
export { ScreenOrientation };
|
19
19
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unistyles","
|
1
|
+
{"version":3,"names":["unistyles","ScreenOrientation","useInitialTheme","useStyles","createStyleSheet","addThemes","addBreakpoints","addConfig","registry","UnistylesRuntime","runtime","UnistylesRegistry"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,SAAS,QAAQ,aAAa;AAEvC,SAASC,iBAAiB,QAAQ,SAAS;AAE3C,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,MAAM;EAAEC,SAAS;EAAEC,cAAc;EAAEC;AAAW,CAAC,GAAGP,SAAS,CAACQ,QAAQ;AACpE,MAAMC,gBAAgB,GAAGT,SAAS,CAACU,OAAO;AAC1C,MAAMC,iBAAiB,GAAG;EACtBN,SAAS;EACTC,cAAc;EACdC;AACJ,CAAC;AAED,SACIE,gBAAgB,EAChBE,iBAAiB;AAGrB,SACIV,iBAAiB"}
|
package/lib/module/types/cxx.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
export let
|
2
|
-
|
3
|
-
|
4
|
-
return
|
1
|
+
export let ScreenOrientation = /*#__PURE__*/function (ScreenOrientation) {
|
2
|
+
ScreenOrientation[ScreenOrientation["Portrait"] = 1] = "Portrait";
|
3
|
+
ScreenOrientation[ScreenOrientation["Landscape"] = 2] = "Landscape";
|
4
|
+
return ScreenOrientation;
|
5
5
|
}({});
|
6
6
|
export let CxxUnistylesEventTypes = /*#__PURE__*/function (CxxUnistylesEventTypes) {
|
7
7
|
CxxUnistylesEventTypes["Theme"] = "theme";
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["ScreenOrientation","CxxUnistylesEventTypes","UnistylesError"],"sourceRoot":"../../../src","sources":["types/cxx.ts"],"mappings":"AASA,WAAYA,iBAAiB,0BAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAjBA,iBAAiB,CAAjBA,iBAAiB;EAAA,OAAjBA,iBAAiB;AAAA;AAsB7B,WAAYC,sBAAsB,0BAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAtBA,sBAAsB;EAAA,OAAtBA,sBAAsB;AAAA;AA8BlC,WAAYC,cAAc,0BAAdA,cAAc;EAAdA,cAAc;EAAdA,cAAc;EAAA,OAAdA,cAAc;AAAA"}
|
@@ -4,8 +4,8 @@ import { CxxUnistylesEventTypes } from './types';
|
|
4
4
|
import { unistyles } from './Unistyles';
|
5
5
|
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
|
6
6
|
export const useUnistyles = () => {
|
7
|
-
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.
|
8
|
-
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.
|
7
|
+
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName));
|
8
|
+
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint);
|
9
9
|
const [screenSize, setScreenSize] = useState({
|
10
10
|
width: 0,
|
11
11
|
height: 0
|
@@ -16,9 +16,10 @@ export const useUnistyles = () => {
|
|
16
16
|
case CxxUnistylesEventTypes.Theme:
|
17
17
|
{
|
18
18
|
const themeEvent = event;
|
19
|
-
setTheme(unistyles.runtime.getTheme(themeEvent.payload.
|
19
|
+
setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName));
|
20
20
|
return;
|
21
21
|
}
|
22
|
+
// this event is not available on mobile
|
22
23
|
case CxxUnistylesEventTypes.Size:
|
23
24
|
{
|
24
25
|
const sizeEvent = event;
|
@@ -26,15 +27,12 @@ export const useUnistyles = () => {
|
|
26
27
|
width: sizeEvent.payload.width,
|
27
28
|
height: sizeEvent.payload.height
|
28
29
|
});
|
29
|
-
// todo
|
30
|
-
// setBreakpoint(unistyles.runtime.currentBreakpoint)
|
31
|
-
|
32
30
|
return;
|
33
31
|
}
|
34
32
|
case CxxUnistylesEventTypes.Breakpoint:
|
35
33
|
{
|
36
34
|
const breakpointEvent = event;
|
37
|
-
setBreakpoint(breakpointEvent.payload.
|
35
|
+
setBreakpoint(breakpointEvent.payload.breakpoint);
|
38
36
|
return;
|
39
37
|
}
|
40
38
|
default:
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["NativeEventEmitter","NativeModules","useEffect","useState","CxxUnistylesEventTypes","unistyles","unistylesEvents","Unistyles","useUnistyles","theme","setTheme","runtime","getTheme","
|
1
|
+
{"version":3,"names":["NativeEventEmitter","NativeModules","useEffect","useState","CxxUnistylesEventTypes","unistyles","unistylesEvents","Unistyles","useUnistyles","theme","setTheme","runtime","getTheme","themeName","breakpoint","setBreakpoint","screenSize","setScreenSize","width","height","subscription","addListener","event","type","Theme","themeEvent","payload","Size","sizeEvent","Breakpoint","breakpointEvent","remove"],"sourceRoot":"../../src","sources":["useUnistyles.ts"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,aAAa,QAAQ,cAAc;AAChE,SAASC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAO3C,SAASC,sBAAsB,QAAQ,SAAS;AAChD,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,eAAe,GAAG,IAAIN,kBAAkB,CAACC,aAAa,CAACM,SAAS,CAAC;AAEvE,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGP,QAAQ,CAACE,SAAS,CAACM,OAAO,CAACC,QAAQ,CAACP,SAAS,CAACM,OAAO,CAACE,SAAS,CAAC,CAAC;EAC3F,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGZ,QAAQ,CAACE,SAAS,CAACM,OAAO,CAACG,UAAU,CAAC;EAC1E,MAAM,CAACE,UAAU,EAAEC,aAAa,CAAC,GAAGd,QAAQ,CAAC;IACzCe,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE;EACZ,CAAC,CAAC;EAEFjB,SAAS,CAAC,MAAM;IACZ,MAAMkB,YAAY,GAAGd,eAAe,CAACe,WAAW,CAC5C,UAAU,EACTC,KAAsB,IAAK;MACxB,QAAQA,KAAK,CAACC,IAAI;QACd,KAAKnB,sBAAsB,CAACoB,KAAK;UAAE;YAC/B,MAAMC,UAAU,GAAGH,KAA+B;YAElDZ,QAAQ,CAACL,SAAS,CAACM,OAAO,CAACC,QAAQ,CAACa,UAAU,CAACC,OAAO,CAACb,SAAS,CAAC,CAAC;YAElE;UACJ;QACA;QACA,KAAKT,sBAAsB,CAACuB,IAAI;UAAE;YAC9B,MAAMC,SAAS,GAAGN,KAA8B;YAEhDL,aAAa,CAAC;cACVC,KAAK,EAAEU,SAAS,CAACF,OAAO,CAACR,KAAK;cAC9BC,MAAM,EAAES,SAAS,CAACF,OAAO,CAACP;YAC9B,CAAC,CAAC;YAEF;UACJ;QACA,KAAKf,sBAAsB,CAACyB,UAAU;UAAE;YACpC,MAAMC,eAAe,GAAGR,KAAoC;YAE5DP,aAAa,CAACe,eAAe,CAACJ,OAAO,CAACZ,UAAU,CAAC;YAEjD;UACJ;QACA;UACI;MACR;IACJ,CACJ,CAAC;IAED,OAAOM,YAAY,CAACW,MAAM;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACHtB,KAAK;IACLK,UAAU;IACVE;EACJ,CAAC;AACL,CAAC"}
|
@@ -1 +1 @@
|
|
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,
|
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"}
|
@@ -2,11 +2,10 @@ import type { UnistylesBridge, UnistylesConfig } from './types';
|
|
2
2
|
import type { UnistylesThemes, UnistylesBreakpoints } from './global';
|
3
3
|
export declare class UnistyleRegistry {
|
4
4
|
private unistylesBridge;
|
5
|
-
|
5
|
+
config: UnistylesConfig;
|
6
6
|
themes: UnistylesThemes;
|
7
7
|
breakpoints: UnistylesBreakpoints;
|
8
8
|
sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>;
|
9
|
-
config: UnistylesConfig;
|
10
9
|
constructor(unistylesBridge: UnistylesBridge);
|
11
10
|
addThemes: (themes: UnistylesThemes) => this;
|
12
11
|
addBreakpoints: (breakpoints: UnistylesBreakpoints) => this;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UnistyleRegistry.d.ts","sourceRoot":"","sources":["../../../src/UnistyleRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAErE,qBAAa,gBAAgB;
|
1
|
+
{"version":3,"file":"UnistyleRegistry.d.ts","sourceRoot":"","sources":["../../../src/UnistyleRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC/D,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAErE,qBAAa,gBAAgB;IAMb,OAAO,CAAC,eAAe;IAL5B,MAAM,EAAE,eAAe,CAAK;IAC5B,MAAM,EAAE,eAAe,CAAwB;IAC/C,WAAW,EAAE,oBAAoB,CAA6B;IAC9D,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAK;gBAEpG,eAAe,EAAE,eAAe;IAE7C,SAAS,WAAY,eAAe,UAK1C;IAEM,cAAc,gBAAiB,oBAAoB,UAKzD;IAEM,SAAS,WAAY,eAAe,UAQ1C;CACJ"}
|
@@ -1,20 +1,22 @@
|
|
1
1
|
import type { UnistylesBridge } from './types';
|
2
2
|
import type { UnistyleRegistry } from './UnistyleRegistry';
|
3
|
-
import {
|
3
|
+
import { ScreenOrientation } from './types';
|
4
4
|
import type { UnistylesThemes } from './global';
|
5
5
|
export declare class UnistylesRuntime {
|
6
6
|
private unistylesBridge;
|
7
7
|
private registry;
|
8
8
|
constructor(unistylesBridge: UnistylesBridge, registry: UnistyleRegistry);
|
9
|
-
get colorScheme():
|
10
|
-
get
|
9
|
+
get colorScheme(): import("./types").ColorSchemeName;
|
10
|
+
get hasAdaptiveThemes(): boolean;
|
11
11
|
get sortedBreakpoints(): [keyof import("./global").UnistylesBreakpoints, number][];
|
12
|
-
get
|
13
|
-
get
|
14
|
-
get
|
15
|
-
|
12
|
+
get themeName(): keyof UnistylesThemes;
|
13
|
+
get breakpoint(): keyof import("./global").UnistylesBreakpoints;
|
14
|
+
get screen(): {
|
15
|
+
width: number;
|
16
|
+
height: number;
|
17
|
+
};
|
18
|
+
get orientation(): ScreenOrientation;
|
16
19
|
setTheme: (name: keyof UnistylesThemes) => boolean;
|
17
|
-
hasTheme: (name: keyof UnistylesThemes) => boolean;
|
18
20
|
getTheme: (forName: keyof UnistylesThemes) => {
|
19
21
|
colors: {
|
20
22
|
backgroundColor: string;
|
@@ -52,5 +54,7 @@ export declare class UnistylesRuntime {
|
|
52
54
|
blood: string;
|
53
55
|
};
|
54
56
|
};
|
57
|
+
setAdaptiveThemes: (enable: boolean) => void;
|
58
|
+
private hasTheme;
|
55
59
|
}
|
56
60
|
//# sourceMappingURL=UnistylesRuntime.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"UnistylesRuntime.d.ts","sourceRoot":"","sources":["../../../src/UnistylesRuntime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"UnistylesRuntime.d.ts","sourceRoot":"","sources":["../../../src/UnistylesRuntime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAC9C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,EAAE,iBAAiB,EAAkB,MAAM,SAAS,CAAA;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAE/C,qBAAa,gBAAgB;IACb,OAAO,CAAC,eAAe;IAAmB,OAAO,CAAC,QAAQ;gBAAlD,eAAe,EAAE,eAAe,EAAU,QAAQ,EAAE,gBAAgB;IAExF,IAAW,WAAW,sCAErB;IAED,IAAW,iBAAiB,YAE3B;IAED,IAAW,iBAAiB,8DAE3B;IAED,IAAW,SAAS,0BAEnB;IAED,IAAW,UAAU,kDAEpB;IAED,IAAW,MAAM;;;MAKhB;IAED,IAAW,WAAW,sBAQrB;IAEM,QAAQ,SAAU,MAAM,eAAe,aAQ7C;IAEM,QAAQ,YAAa,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMhD;IAEM,iBAAiB,WAAY,OAAO,UAE1C;IAED,OAAO,CAAC,QAAQ,CAAgE;CACnF"}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from './global';
|
2
|
-
import {
|
2
|
+
import { ScreenOrientation } from './types';
|
3
3
|
export { useInitialTheme } from './useInitialTheme';
|
4
4
|
export { useStyles } from './useStyles';
|
5
5
|
export { createStyleSheet } from './createStyleSheet';
|
@@ -10,6 +10,6 @@ declare const UnistylesRegistry: {
|
|
10
10
|
addConfig: (config: import("./types").UnistylesConfig) => import("./UnistyleRegistry").UnistyleRegistry;
|
11
11
|
};
|
12
12
|
export { UnistylesRuntime, UnistylesRegistry };
|
13
|
-
export {
|
13
|
+
export { ScreenOrientation };
|
14
14
|
export type { UnistylesThemes, UnistylesBreakpoints };
|
15
15
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGrD,QAAA,MAAM,gBAAgB,+CAAoB,CAAA;AAC1C,QAAA,MAAM,iBAAiB;;;;CAItB,CAAA;AAED,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACpB,CAAA;AAED,OAAO,EACH,iBAAiB,EACpB,CAAA;AAED,YAAY,EACR,eAAe,EACf,oBAAoB,EACvB,CAAA"}
|
@@ -1,22 +1,25 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from '../global';
|
2
2
|
export type Nullable<T> = T | null;
|
3
|
-
export
|
4
|
-
System = "system",
|
5
|
-
Manual = "manual"
|
6
|
-
}
|
3
|
+
export type ColorSchemeName = 'light' | 'dark' | undefined;
|
7
4
|
export type UnistylesConfig = {
|
8
|
-
|
9
|
-
featureFlags?: Array<string>;
|
5
|
+
adaptiveThemes?: boolean;
|
10
6
|
};
|
7
|
+
export declare enum ScreenOrientation {
|
8
|
+
Portrait = 1,
|
9
|
+
Landscape = 2
|
10
|
+
}
|
11
11
|
export type UnistylesBridge = {
|
12
|
+
screenWidth: number;
|
13
|
+
screenHeight: number;
|
14
|
+
hasAdaptiveThemes: boolean;
|
12
15
|
theme: keyof UnistylesThemes;
|
13
16
|
breakpoint: keyof UnistylesBreakpoints;
|
14
|
-
colorScheme:
|
17
|
+
colorScheme: ColorSchemeName;
|
15
18
|
sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>;
|
19
|
+
themes: Array<keyof UnistylesThemes>;
|
16
20
|
useBreakpoints(breakpoints: UnistylesBreakpoints): void;
|
17
21
|
useTheme(name: keyof UnistylesThemes): void;
|
18
|
-
|
19
|
-
useFeatureFlags(flags: Array<string>): void;
|
22
|
+
useAdaptiveThemes(enable: boolean): void;
|
20
23
|
};
|
21
24
|
export declare enum CxxUnistylesEventTypes {
|
22
25
|
Theme = "theme",
|
@@ -26,7 +29,7 @@ export declare enum CxxUnistylesEventTypes {
|
|
26
29
|
export type CxxUnistylesThemeEvent = {
|
27
30
|
type: CxxUnistylesEventTypes.Theme;
|
28
31
|
payload: {
|
29
|
-
|
32
|
+
themeName: keyof UnistylesThemes;
|
30
33
|
};
|
31
34
|
};
|
32
35
|
export type CxxUnistylesSizeEvent = {
|
@@ -39,7 +42,7 @@ export type CxxUnistylesSizeEvent = {
|
|
39
42
|
export type CxxUnistylesBreakpointEvent = {
|
40
43
|
type: CxxUnistylesEventTypes.Breakpoint;
|
41
44
|
payload: {
|
42
|
-
|
45
|
+
breakpoint: keyof UnistylesBreakpoints;
|
43
46
|
};
|
44
47
|
};
|
45
48
|
export type UnistylesEvents = CxxUnistylesThemeEvent | CxxUnistylesSizeEvent | CxxUnistylesBreakpointEvent;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,
|
1
|
+
{"version":3,"file":"cxx.d.ts","sourceRoot":"","sources":["../../../../src/types/cxx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAA;AAEtE,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;AAClC,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAED,oBAAY,iBAAiB;IACzB,QAAQ,IAAI;IACZ,SAAS,IAAI;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAE1B,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,KAAK,EAAE,MAAM,eAAe,CAAC;IAC7B,UAAU,EAAE,MAAM,oBAAoB,CAAC;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,qBAAqB,EAAE,KAAK,CAAC,CAAC,MAAM,oBAAoB,EAAE,oBAAoB,CAAC,MAAM,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAG7G,MAAM,EAAE,KAAK,CAAC,MAAM,eAAe,CAAC,CAAC;IACrC,cAAc,CAAC,WAAW,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACxD,QAAQ,CAAC,IAAI,EAAE,MAAM,eAAe,GAAG,IAAI,CAAC;IAC5C,iBAAiB,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;CAC5C,CAAA;AAED,oBAAY,sBAAsB;IAC9B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,UAAU,eAAe;CAC5B;AAED,MAAM,MAAM,sBAAsB,GAAG;IACjC,IAAI,EAAE,sBAAsB,CAAC,KAAK,CAAC;IACnC,OAAO,EAAE;QACL,SAAS,EAAE,MAAM,eAAe,CAAA;KACnC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAChC,IAAI,EAAE,sBAAsB,CAAC,IAAI,CAAC;IAClC,OAAO,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAA;KACjB,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,2BAA2B,GAAG;IACtC,IAAI,EAAE,sBAAsB,CAAC,UAAU,CAAC;IACxC,OAAO,EAAE;QACL,UAAU,EAAE,MAAM,oBAAoB,CAAA;KACzC,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,eAAe,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,2BAA2B,CAAA;AAE1G,oBAAY,cAAc;IACtB,kBAAkB,wCAAwC;IAC1D,aAAa,oCAAoC;CACpD"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
1
|
+
{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../src/useUnistyles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,CAAA"}
|
package/package.json
CHANGED
package/src/UnistyleRegistry.ts
CHANGED
@@ -2,16 +2,16 @@ import type { UnistylesBridge, UnistylesConfig } from './types'
|
|
2
2
|
import type { UnistylesThemes, UnistylesBreakpoints } from './global'
|
3
3
|
|
4
4
|
export class UnistyleRegistry {
|
5
|
-
public
|
5
|
+
public config: UnistylesConfig = {}
|
6
6
|
public themes: UnistylesThemes = {} as UnistylesThemes
|
7
7
|
public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
|
8
8
|
public sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]> = []
|
9
|
-
public config: UnistylesConfig = {}
|
10
9
|
|
11
10
|
constructor(private unistylesBridge: UnistylesBridge) {}
|
12
11
|
|
13
12
|
public addThemes = (themes: UnistylesThemes) => {
|
14
13
|
this.themes = themes
|
14
|
+
this.unistylesBridge.themes = Object.keys(themes) as Array<keyof UnistylesThemes>
|
15
15
|
|
16
16
|
return this
|
17
17
|
}
|
@@ -26,12 +26,8 @@ export class UnistyleRegistry {
|
|
26
26
|
public addConfig = (config: UnistylesConfig) => {
|
27
27
|
this.config = config
|
28
28
|
|
29
|
-
if (config.
|
30
|
-
this.unistylesBridge.
|
31
|
-
}
|
32
|
-
|
33
|
-
if (config.colorScheme) {
|
34
|
-
this.unistylesBridge.useColorScheme(config.colorScheme)
|
29
|
+
if (config.adaptiveThemes) {
|
30
|
+
this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
|
35
31
|
}
|
36
32
|
|
37
33
|
return this
|
package/src/UnistylesRuntime.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { UnistylesBridge } from './types'
|
2
2
|
import type { UnistyleRegistry } from './UnistyleRegistry'
|
3
|
-
import {
|
3
|
+
import { ScreenOrientation, UnistylesError } from './types'
|
4
4
|
import type { UnistylesThemes } from './global'
|
5
5
|
|
6
6
|
export class UnistylesRuntime {
|
@@ -10,34 +10,41 @@ export class UnistylesRuntime {
|
|
10
10
|
return this.unistylesBridge.colorScheme
|
11
11
|
}
|
12
12
|
|
13
|
-
public get
|
14
|
-
return this.
|
13
|
+
public get hasAdaptiveThemes() {
|
14
|
+
return this.unistylesBridge.hasAdaptiveThemes
|
15
15
|
}
|
16
16
|
|
17
17
|
public get sortedBreakpoints() {
|
18
18
|
return this.registry.sortedBreakpointPairs
|
19
19
|
}
|
20
20
|
|
21
|
-
public get
|
22
|
-
return this.registry.config
|
23
|
-
}
|
24
|
-
|
25
|
-
public get theme() {
|
21
|
+
public get themeName() {
|
26
22
|
return this.unistylesBridge.theme
|
27
23
|
}
|
28
24
|
|
29
|
-
public get
|
25
|
+
public get breakpoint() {
|
30
26
|
return this.unistylesBridge.breakpoint
|
31
27
|
}
|
32
28
|
|
33
|
-
public
|
34
|
-
|
35
|
-
this.unistylesBridge.
|
29
|
+
public get screen() {
|
30
|
+
return {
|
31
|
+
width: this.unistylesBridge.screenWidth,
|
32
|
+
height: this.unistylesBridge.screenHeight
|
36
33
|
}
|
37
34
|
}
|
38
35
|
|
36
|
+
public get orientation() {
|
37
|
+
const { width, height } = this.screen
|
38
|
+
|
39
|
+
if (width > height) {
|
40
|
+
return ScreenOrientation.Landscape
|
41
|
+
}
|
42
|
+
|
43
|
+
return ScreenOrientation.Portrait
|
44
|
+
}
|
45
|
+
|
39
46
|
public setTheme = (name: keyof UnistylesThemes) => {
|
40
|
-
if (name !== this.
|
47
|
+
if (name !== this.themeName && this.hasTheme(name)) {
|
41
48
|
this.unistylesBridge.useTheme(name)
|
42
49
|
|
43
50
|
return true
|
@@ -46,8 +53,6 @@ export class UnistylesRuntime {
|
|
46
53
|
return false
|
47
54
|
}
|
48
55
|
|
49
|
-
public hasTheme = (name: keyof UnistylesThemes) => name in this.registry.themes
|
50
|
-
|
51
56
|
public getTheme = (forName: keyof UnistylesThemes) => {
|
52
57
|
if (!this.hasTheme(forName)) {
|
53
58
|
throw new Error(UnistylesError.ThemeNotFound)
|
@@ -55,4 +60,10 @@ export class UnistylesRuntime {
|
|
55
60
|
|
56
61
|
return this.registry.themes[forName]
|
57
62
|
}
|
63
|
+
|
64
|
+
public setAdaptiveThemes = (enable: boolean) => {
|
65
|
+
this.unistylesBridge.useAdaptiveThemes(enable)
|
66
|
+
}
|
67
|
+
|
68
|
+
private hasTheme = (name: keyof UnistylesThemes) => name in this.registry.themes
|
58
69
|
}
|
package/src/index.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import { unistyles } from './Unistyles'
|
2
2
|
import type { UnistylesThemes, UnistylesBreakpoints } from './global'
|
3
|
-
import {
|
3
|
+
import { ScreenOrientation } from './types'
|
4
4
|
|
5
5
|
export { useInitialTheme } from './useInitialTheme'
|
6
6
|
|
@@ -21,7 +21,7 @@ export {
|
|
21
21
|
}
|
22
22
|
|
23
23
|
export {
|
24
|
-
|
24
|
+
ScreenOrientation
|
25
25
|
}
|
26
26
|
|
27
27
|
export type {
|
package/src/types/cxx.ts
CHANGED
@@ -1,28 +1,32 @@
|
|
1
1
|
import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
|
2
2
|
|
3
3
|
export type Nullable<T> = T | null
|
4
|
-
export
|
5
|
-
System = 'system',
|
6
|
-
Manual = 'manual'
|
7
|
-
}
|
4
|
+
export type ColorSchemeName = 'light' | 'dark' | undefined
|
8
5
|
|
9
6
|
export type UnistylesConfig = {
|
10
|
-
|
11
|
-
|
7
|
+
adaptiveThemes?: boolean
|
8
|
+
}
|
9
|
+
|
10
|
+
export enum ScreenOrientation {
|
11
|
+
Portrait = 1,
|
12
|
+
Landscape = 2
|
12
13
|
}
|
13
14
|
|
14
15
|
export type UnistylesBridge = {
|
15
16
|
// getters
|
16
|
-
|
17
|
+
screenWidth: number,
|
18
|
+
screenHeight: number,
|
19
|
+
hasAdaptiveThemes: boolean,
|
20
|
+
theme: keyof UnistylesThemes,
|
17
21
|
breakpoint: keyof UnistylesBreakpoints,
|
18
|
-
colorScheme:
|
19
|
-
sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]
|
22
|
+
colorScheme: ColorSchemeName,
|
23
|
+
sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
|
20
24
|
|
21
25
|
// setters
|
26
|
+
themes: Array<keyof UnistylesThemes>,
|
22
27
|
useBreakpoints(breakpoints: UnistylesBreakpoints): void,
|
23
28
|
useTheme(name: keyof UnistylesThemes): void,
|
24
|
-
|
25
|
-
useFeatureFlags(flags: Array<string>): void
|
29
|
+
useAdaptiveThemes(enable: boolean): void,
|
26
30
|
}
|
27
31
|
|
28
32
|
export enum CxxUnistylesEventTypes {
|
@@ -34,7 +38,7 @@ export enum CxxUnistylesEventTypes {
|
|
34
38
|
export type CxxUnistylesThemeEvent = {
|
35
39
|
type: CxxUnistylesEventTypes.Theme,
|
36
40
|
payload: {
|
37
|
-
|
41
|
+
themeName: keyof UnistylesThemes
|
38
42
|
}
|
39
43
|
}
|
40
44
|
|
@@ -49,7 +53,7 @@ export type CxxUnistylesSizeEvent = {
|
|
49
53
|
export type CxxUnistylesBreakpointEvent = {
|
50
54
|
type: CxxUnistylesEventTypes.Breakpoint,
|
51
55
|
payload: {
|
52
|
-
|
56
|
+
breakpoint: keyof UnistylesBreakpoints
|
53
57
|
}
|
54
58
|
}
|
55
59
|
|
package/src/useUnistyles.ts
CHANGED
@@ -12,8 +12,8 @@ import { unistyles } from './Unistyles'
|
|
12
12
|
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
13
13
|
|
14
14
|
export const useUnistyles = () => {
|
15
|
-
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.
|
16
|
-
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.
|
15
|
+
const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
|
16
|
+
const [breakpoint, setBreakpoint] = useState(unistyles.runtime.breakpoint)
|
17
17
|
const [screenSize, setScreenSize] = useState({
|
18
18
|
width: 0,
|
19
19
|
height: 0
|
@@ -27,10 +27,11 @@ export const useUnistyles = () => {
|
|
27
27
|
case CxxUnistylesEventTypes.Theme: {
|
28
28
|
const themeEvent = event as CxxUnistylesThemeEvent
|
29
29
|
|
30
|
-
setTheme(unistyles.runtime.getTheme(themeEvent.payload.
|
30
|
+
setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
|
31
31
|
|
32
32
|
return
|
33
33
|
}
|
34
|
+
// this event is not available on mobile
|
34
35
|
case CxxUnistylesEventTypes.Size: {
|
35
36
|
const sizeEvent = event as CxxUnistylesSizeEvent
|
36
37
|
|
@@ -38,15 +39,13 @@ export const useUnistyles = () => {
|
|
38
39
|
width: sizeEvent.payload.width,
|
39
40
|
height: sizeEvent.payload.height
|
40
41
|
})
|
41
|
-
// todo
|
42
|
-
// setBreakpoint(unistyles.runtime.currentBreakpoint)
|
43
42
|
|
44
43
|
return
|
45
44
|
}
|
46
45
|
case CxxUnistylesEventTypes.Breakpoint: {
|
47
46
|
const breakpointEvent = event as CxxUnistylesBreakpointEvent
|
48
47
|
|
49
|
-
setBreakpoint(breakpointEvent.payload.
|
48
|
+
setBreakpoint(breakpointEvent.payload.breakpoint)
|
50
49
|
|
51
50
|
return
|
52
51
|
}
|