react-native-unistyles 2.11.0 → 2.20.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +6 -0
- package/android/build.gradle +1 -0
- package/lib/commonjs/UnistylesProvider.js +32 -0
- package/lib/commonjs/UnistylesProvider.js.map +1 -0
- package/lib/commonjs/hooks/useSharedContext.js +77 -0
- package/lib/commonjs/hooks/useSharedContext.js.map +1 -0
- package/lib/commonjs/hooks/useUnistyles.js +17 -57
- package/lib/commonjs/hooks/useUnistyles.js.map +1 -1
- package/lib/commonjs/index.js +7 -0
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/UnistylesProvider.js +24 -0
- package/lib/module/UnistylesProvider.js.map +1 -0
- package/lib/module/hooks/useSharedContext.js +70 -0
- package/lib/module/hooks/useSharedContext.js.map +1 -0
- package/lib/module/hooks/useUnistyles.js +18 -58
- package/lib/module/hooks/useUnistyles.js.map +1 -1
- package/lib/module/index.js +2 -2
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/src/UnistylesProvider.d.ts +20 -0
- package/lib/typescript/src/UnistylesProvider.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useSharedContext.d.ts +33 -0
- package/lib/typescript/src/hooks/useSharedContext.d.ts.map +1 -0
- package/lib/typescript/src/hooks/useUnistyles.d.ts +4 -18
- package/lib/typescript/src/hooks/useUnistyles.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +2 -1
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/UnistylesProvider.tsx +33 -0
- package/src/hooks/useSharedContext.ts +83 -0
- package/src/hooks/useUnistyles.ts +14 -63
- package/src/index.ts +3 -2
package/README.md
CHANGED
@@ -75,6 +75,12 @@ npx expo prebuild
|
|
75
75
|
<a href="https://github.com/happyfloat">
|
76
76
|
<img src="https://avatars.githubusercontent.com/u/186333704?s=200&v=4" height="70px" width="70px" alt="happyfloat" />
|
77
77
|
</a>
|
78
|
+
<a href="https://github.com">
|
79
|
+
<img src="https://avatars.githubusercontent.com/u/138339?v=4" height="70px" width="70px" alt="anonymous" />
|
80
|
+
</a>
|
81
|
+
<a href="https://github.com/hyoban">
|
82
|
+
<img src="https://avatars.githubusercontent.com/u/38493346?v=4" height="70px" width="70px" alt="hyoban" />
|
83
|
+
</a>
|
78
84
|
|
79
85
|
## Past sponsors
|
80
86
|
|
package/android/build.gradle
CHANGED
@@ -0,0 +1,32 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.UnistylesProvider = exports.UnistylesContext = void 0;
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
8
|
+
var _useSharedContext = require("./hooks/useSharedContext");
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
10
|
+
const UnistylesContext = exports.UnistylesContext = /*#__PURE__*/_react.default.createContext(undefined);
|
11
|
+
const UnistylesProvider = ({
|
12
|
+
children
|
13
|
+
}) => {
|
14
|
+
const {
|
15
|
+
plugins,
|
16
|
+
theme,
|
17
|
+
layout
|
18
|
+
} = (0, _useSharedContext.useSharedContext)({
|
19
|
+
// intentionally false, we want to listen for changes in the provider
|
20
|
+
useContext: false,
|
21
|
+
deps: []
|
22
|
+
});
|
23
|
+
return /*#__PURE__*/_react.default.createElement(UnistylesContext.Provider, {
|
24
|
+
value: {
|
25
|
+
theme,
|
26
|
+
layout,
|
27
|
+
plugins
|
28
|
+
}
|
29
|
+
}, children);
|
30
|
+
};
|
31
|
+
exports.UnistylesProvider = UnistylesProvider;
|
32
|
+
//# sourceMappingURL=UnistylesProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_useSharedContext","e","__esModule","default","UnistylesContext","exports","React","createContext","undefined","UnistylesProvider","children","plugins","theme","layout","useSharedContext","useContext","deps","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesProvider.tsx"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAGA,IAAAC,iBAAA,GAAAD,OAAA;AAA2D,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAepD,MAAMG,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAGE,cAAK,CAACC,aAAa,CAAgCC,SAAS,CAAC;AAEtF,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EAC9E,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAG,IAAAC,kCAAgB,EAAC;IAChD;IACAC,UAAU,EAAE,KAAK;IACjBC,IAAI,EAAE;EACV,CAAC,CAAC;EAEF,oBACInB,MAAA,CAAAM,OAAA,CAAAc,aAAA,CAACb,gBAAgB,CAACc,QAAQ;IAACC,KAAK,EAAE;MAAEP,KAAK;MAAEC,MAAM;MAAEF;IAAQ;EAAE,GACxDD,QACsB,CAAC;AAEpC,CAAC;AAAAL,OAAA,CAAAI,iBAAA,GAAAA,iBAAA","ignoreList":[]}
|
@@ -0,0 +1,77 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.useSharedContext = void 0;
|
7
|
+
var _react = require("react");
|
8
|
+
var _reactNative = require("react-native");
|
9
|
+
var _core = require("../core");
|
10
|
+
var _common = require("../common");
|
11
|
+
const unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
|
12
|
+
const useSharedContext = config => {
|
13
|
+
const [plugins, setPlugins] = (0, _react.useState)(_core.unistyles.runtime.enabledPlugins);
|
14
|
+
const [theme, setTheme] = (0, _react.useState)(_core.unistyles.registry.getTheme(_core.unistyles.runtime.themeName));
|
15
|
+
const [layout, setLayout] = (0, _react.useState)({
|
16
|
+
breakpoint: _core.unistyles.runtime.breakpoint,
|
17
|
+
orientation: _core.unistyles.runtime.orientation,
|
18
|
+
screen: {
|
19
|
+
width: _core.unistyles.runtime.screen.width,
|
20
|
+
height: _core.unistyles.runtime.screen.height
|
21
|
+
},
|
22
|
+
statusBar: {
|
23
|
+
width: _core.unistyles.runtime.statusBar.width,
|
24
|
+
height: _core.unistyles.runtime.statusBar.height
|
25
|
+
},
|
26
|
+
navigationBar: {
|
27
|
+
width: _core.unistyles.runtime.navigationBar.width,
|
28
|
+
height: _core.unistyles.runtime.navigationBar.height
|
29
|
+
},
|
30
|
+
insets: {
|
31
|
+
top: _core.unistyles.runtime.insets.top,
|
32
|
+
bottom: _core.unistyles.runtime.insets.bottom,
|
33
|
+
left: _core.unistyles.runtime.insets.left,
|
34
|
+
right: _core.unistyles.runtime.insets.right
|
35
|
+
}
|
36
|
+
});
|
37
|
+
(0, _react.useEffect)(() => {
|
38
|
+
if (config.useContext) {
|
39
|
+
return;
|
40
|
+
}
|
41
|
+
const subscription = unistylesEvents.addListener('__unistylesOnChange', event => {
|
42
|
+
switch (event.type) {
|
43
|
+
case _common.UnistylesEventType.Theme:
|
44
|
+
{
|
45
|
+
const themeEvent = event;
|
46
|
+
return setTheme(_core.unistyles.registry.getTheme(themeEvent.payload.themeName));
|
47
|
+
}
|
48
|
+
case _common.UnistylesEventType.Layout:
|
49
|
+
{
|
50
|
+
const layoutEvent = event;
|
51
|
+
return setLayout({
|
52
|
+
breakpoint: layoutEvent.payload.breakpoint,
|
53
|
+
orientation: layoutEvent.payload.orientation,
|
54
|
+
screen: layoutEvent.payload.screen,
|
55
|
+
statusBar: layoutEvent.payload.statusBar,
|
56
|
+
insets: layoutEvent.payload.insets,
|
57
|
+
navigationBar: layoutEvent.payload.navigationBar
|
58
|
+
});
|
59
|
+
}
|
60
|
+
case _common.UnistylesEventType.Plugin:
|
61
|
+
{
|
62
|
+
return setPlugins(_core.unistyles.runtime.enabledPlugins);
|
63
|
+
}
|
64
|
+
default:
|
65
|
+
return;
|
66
|
+
}
|
67
|
+
});
|
68
|
+
return subscription.remove;
|
69
|
+
}, config.deps);
|
70
|
+
return {
|
71
|
+
plugins,
|
72
|
+
theme,
|
73
|
+
layout
|
74
|
+
};
|
75
|
+
};
|
76
|
+
exports.useSharedContext = useSharedContext;
|
77
|
+
//# sourceMappingURL=useSharedContext.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["_react","require","_reactNative","_core","_common","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","useSharedContext","config","plugins","setPlugins","useState","unistyles","runtime","enabledPlugins","theme","setTheme","registry","getTheme","themeName","layout","setLayout","breakpoint","orientation","screen","width","height","statusBar","navigationBar","insets","top","bottom","left","right","useEffect","useContext","subscription","addListener","event","type","UnistylesEventType","Theme","themeEvent","payload","Layout","layoutEvent","Plugin","remove","deps","exports"],"sourceRoot":"../../../src","sources":["hooks/useSharedContext.ts"],"mappings":"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","ignoreList":[]}
|
@@ -4,66 +4,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useUnistyles = void 0;
|
7
|
-
var _reactNative = require("react-native");
|
8
7
|
var _react = require("react");
|
9
|
-
var
|
10
|
-
var
|
11
|
-
const unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
|
8
|
+
var _UnistylesProvider = require("../UnistylesProvider");
|
9
|
+
var _useSharedContext = require("./useSharedContext");
|
12
10
|
const useUnistyles = () => {
|
13
|
-
const
|
14
|
-
const
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
},
|
22
|
-
statusBar: {
|
23
|
-
width: _core.unistyles.runtime.statusBar.width,
|
24
|
-
height: _core.unistyles.runtime.statusBar.height
|
25
|
-
},
|
26
|
-
navigationBar: {
|
27
|
-
width: _core.unistyles.runtime.navigationBar.width,
|
28
|
-
height: _core.unistyles.runtime.navigationBar.height
|
29
|
-
},
|
30
|
-
insets: {
|
31
|
-
top: _core.unistyles.runtime.insets.top,
|
32
|
-
bottom: _core.unistyles.runtime.insets.bottom,
|
33
|
-
left: _core.unistyles.runtime.insets.left,
|
34
|
-
right: _core.unistyles.runtime.insets.right
|
35
|
-
}
|
11
|
+
const unistylesContext = (0, _react.useContext)(_UnistylesProvider.UnistylesContext);
|
12
|
+
const {
|
13
|
+
theme,
|
14
|
+
layout,
|
15
|
+
plugins
|
16
|
+
} = (0, _useSharedContext.useSharedContext)({
|
17
|
+
useContext: unistylesContext !== undefined,
|
18
|
+
deps: unistylesContext ? [unistylesContext] : []
|
36
19
|
});
|
37
|
-
(
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
}
|
45
|
-
case _common.UnistylesEventType.Layout:
|
46
|
-
{
|
47
|
-
const layoutEvent = event;
|
48
|
-
return setLayout({
|
49
|
-
breakpoint: layoutEvent.payload.breakpoint,
|
50
|
-
orientation: layoutEvent.payload.orientation,
|
51
|
-
screen: layoutEvent.payload.screen,
|
52
|
-
statusBar: layoutEvent.payload.statusBar,
|
53
|
-
insets: layoutEvent.payload.insets,
|
54
|
-
navigationBar: layoutEvent.payload.navigationBar
|
55
|
-
});
|
56
|
-
}
|
57
|
-
case _common.UnistylesEventType.Plugin:
|
58
|
-
{
|
59
|
-
return setPlugins(_core.unistyles.runtime.enabledPlugins);
|
60
|
-
}
|
61
|
-
default:
|
62
|
-
return;
|
63
|
-
}
|
64
|
-
});
|
65
|
-
return subscription.remove;
|
66
|
-
}, []);
|
20
|
+
if (unistylesContext !== undefined) {
|
21
|
+
return {
|
22
|
+
plugins: unistylesContext.plugins,
|
23
|
+
theme: unistylesContext.theme,
|
24
|
+
layout: unistylesContext.layout
|
25
|
+
};
|
26
|
+
}
|
67
27
|
return {
|
68
28
|
plugins,
|
69
29
|
theme,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["_react","require","_UnistylesProvider","_useSharedContext","useUnistyles","unistylesContext","useContext","UnistylesContext","theme","layout","plugins","useSharedContext","undefined","deps","exports"],"sourceRoot":"../../../src","sources":["hooks/useUnistyles.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AAEO,MAAMG,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAMC,gBAAgB,GAAG,IAAAC,iBAAU,EAACC,mCAAgB,CAAC;EACrD,MAAM;IAAEC,KAAK;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,kCAAgB,EAAC;IAChDL,UAAU,EAAED,gBAAgB,KAAKO,SAAS;IAC1CC,IAAI,EAAER,gBAAgB,GAAG,CAACA,gBAAgB,CAAC,GAAG;EAClD,CAAC,CAAC;EAEF,IAAIA,gBAAgB,KAAKO,SAAS,EAAE;IAChC,OAAO;MACHF,OAAO,EAAEL,gBAAgB,CAACK,OAAO;MACjCF,KAAK,EAAEH,gBAAgB,CAACG,KAAK;MAC7BC,MAAM,EAAEJ,gBAAgB,CAACI;IAC7B,CAAC;EACL;EAEA,OAAO;IACHC,OAAO;IACPF,KAAK;IACLC;EACJ,CAAC;AACL,CAAC;AAAAK,OAAA,CAAAV,YAAA,GAAAA,YAAA","ignoreList":[]}
|
package/lib/commonjs/index.js
CHANGED
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ScreenOrientation", {
|
|
21
21
|
return _common.ScreenOrientation;
|
22
22
|
}
|
23
23
|
});
|
24
|
+
Object.defineProperty(exports, "UnistylesProvider", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function () {
|
27
|
+
return _UnistylesProvider.UnistylesProvider;
|
28
|
+
}
|
29
|
+
});
|
24
30
|
exports.UnistylesRuntime = exports.UnistylesRegistry = void 0;
|
25
31
|
Object.defineProperty(exports, "createStyleSheet", {
|
26
32
|
enumerable: true,
|
@@ -52,6 +58,7 @@ var _hooks = require("./hooks");
|
|
52
58
|
var _common = require("./common");
|
53
59
|
var _useStyles = require("./useStyles");
|
54
60
|
var _createStyleSheet = require("./createStyleSheet");
|
61
|
+
var _UnistylesProvider = require("./UnistylesProvider");
|
55
62
|
/**
|
56
63
|
* Utility to interact with the Unistyles
|
57
64
|
* (should be called only once)
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["_core","require","_utils","_hooks","_common","_useStyles","_createStyleSheet","UnistylesRegistry","exports","addThemes","unistyles","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"
|
1
|
+
{"version":3,"names":["_core","require","_utils","_hooks","_common","_useStyles","_createStyleSheet","_UnistylesProvider","UnistylesRegistry","exports","addThemes","unistyles","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAGA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,UAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AACA;AACA;AACA;AACA;AACA,MAAMO,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAG;EACtB;AACJ;AACA;AACA;EACIE,SAAS,EAAEC,eAAS,CAACC,QAAQ,CAACF,SAAS;EACvC;AACJ;AACA;AACA;EACIG,cAAc,EAAEF,eAAS,CAACC,QAAQ,CAACC,cAAc;EACjD;AACJ;AACA;AACA;EACIC,SAAS,EAAEH,eAAS,CAACC,QAAQ,CAACE;AAClC,CAAC;AAED,MAAMC,gBAAgB,GAAAN,OAAA,CAAAM,gBAAA,GAAGJ,eAAS,CAACK,OAAO","ignoreList":[]}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { useSharedContext } from './hooks/useSharedContext';
|
3
|
+
export const UnistylesContext = /*#__PURE__*/React.createContext(undefined);
|
4
|
+
export const UnistylesProvider = ({
|
5
|
+
children
|
6
|
+
}) => {
|
7
|
+
const {
|
8
|
+
plugins,
|
9
|
+
theme,
|
10
|
+
layout
|
11
|
+
} = useSharedContext({
|
12
|
+
// intentionally false, we want to listen for changes in the provider
|
13
|
+
useContext: false,
|
14
|
+
deps: []
|
15
|
+
});
|
16
|
+
return /*#__PURE__*/React.createElement(UnistylesContext.Provider, {
|
17
|
+
value: {
|
18
|
+
theme,
|
19
|
+
layout,
|
20
|
+
plugins
|
21
|
+
}
|
22
|
+
}, children);
|
23
|
+
};
|
24
|
+
//# sourceMappingURL=UnistylesProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["React","useSharedContext","UnistylesContext","createContext","undefined","UnistylesProvider","children","plugins","theme","layout","useContext","deps","createElement","Provider","value"],"sourceRoot":"../../src","sources":["UnistylesProvider.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,gBAAgB,QAAQ,0BAA0B;AAe3D,OAAO,MAAMC,gBAAgB,gBAAGF,KAAK,CAACG,aAAa,CAAgCC,SAAS,CAAC;AAE7F,OAAO,MAAMC,iBAAiB,GAAGA,CAAC;EAAEC;AAAwC,CAAC,KAAK;EAC9E,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC;EAAO,CAAC,GAAGR,gBAAgB,CAAC;IAChD;IACAS,UAAU,EAAE,KAAK;IACjBC,IAAI,EAAE;EACV,CAAC,CAAC;EAEF,oBACIX,KAAA,CAAAY,aAAA,CAACV,gBAAgB,CAACW,QAAQ;IAACC,KAAK,EAAE;MAAEN,KAAK;MAAEC,MAAM;MAAEF;IAAQ;EAAE,GACxDD,QACsB,CAAC;AAEpC,CAAC","ignoreList":[]}
|
@@ -0,0 +1,70 @@
|
|
1
|
+
import { useEffect, useState } from 'react';
|
2
|
+
import { NativeEventEmitter, NativeModules } from 'react-native';
|
3
|
+
import { unistyles } from '../core';
|
4
|
+
import { UnistylesEventType } from '../common';
|
5
|
+
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
|
6
|
+
export const useSharedContext = config => {
|
7
|
+
const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins);
|
8
|
+
const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName));
|
9
|
+
const [layout, setLayout] = useState({
|
10
|
+
breakpoint: unistyles.runtime.breakpoint,
|
11
|
+
orientation: unistyles.runtime.orientation,
|
12
|
+
screen: {
|
13
|
+
width: unistyles.runtime.screen.width,
|
14
|
+
height: unistyles.runtime.screen.height
|
15
|
+
},
|
16
|
+
statusBar: {
|
17
|
+
width: unistyles.runtime.statusBar.width,
|
18
|
+
height: unistyles.runtime.statusBar.height
|
19
|
+
},
|
20
|
+
navigationBar: {
|
21
|
+
width: unistyles.runtime.navigationBar.width,
|
22
|
+
height: unistyles.runtime.navigationBar.height
|
23
|
+
},
|
24
|
+
insets: {
|
25
|
+
top: unistyles.runtime.insets.top,
|
26
|
+
bottom: unistyles.runtime.insets.bottom,
|
27
|
+
left: unistyles.runtime.insets.left,
|
28
|
+
right: unistyles.runtime.insets.right
|
29
|
+
}
|
30
|
+
});
|
31
|
+
useEffect(() => {
|
32
|
+
if (config.useContext) {
|
33
|
+
return;
|
34
|
+
}
|
35
|
+
const subscription = unistylesEvents.addListener('__unistylesOnChange', event => {
|
36
|
+
switch (event.type) {
|
37
|
+
case UnistylesEventType.Theme:
|
38
|
+
{
|
39
|
+
const themeEvent = event;
|
40
|
+
return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName));
|
41
|
+
}
|
42
|
+
case UnistylesEventType.Layout:
|
43
|
+
{
|
44
|
+
const layoutEvent = event;
|
45
|
+
return setLayout({
|
46
|
+
breakpoint: layoutEvent.payload.breakpoint,
|
47
|
+
orientation: layoutEvent.payload.orientation,
|
48
|
+
screen: layoutEvent.payload.screen,
|
49
|
+
statusBar: layoutEvent.payload.statusBar,
|
50
|
+
insets: layoutEvent.payload.insets,
|
51
|
+
navigationBar: layoutEvent.payload.navigationBar
|
52
|
+
});
|
53
|
+
}
|
54
|
+
case UnistylesEventType.Plugin:
|
55
|
+
{
|
56
|
+
return setPlugins(unistyles.runtime.enabledPlugins);
|
57
|
+
}
|
58
|
+
default:
|
59
|
+
return;
|
60
|
+
}
|
61
|
+
});
|
62
|
+
return subscription.remove;
|
63
|
+
}, config.deps);
|
64
|
+
return {
|
65
|
+
plugins,
|
66
|
+
theme,
|
67
|
+
layout
|
68
|
+
};
|
69
|
+
};
|
70
|
+
//# sourceMappingURL=useSharedContext.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"names":["useEffect","useState","NativeEventEmitter","NativeModules","unistyles","UnistylesEventType","unistylesEvents","Unistyles","useSharedContext","config","plugins","setPlugins","runtime","enabledPlugins","theme","setTheme","registry","getTheme","themeName","layout","setLayout","breakpoint","orientation","screen","width","height","statusBar","navigationBar","insets","top","bottom","left","right","useContext","subscription","addListener","event","type","Theme","themeEvent","payload","Layout","layoutEvent","Plugin","remove","deps"],"sourceRoot":"../../../src","sources":["hooks/useSharedContext.ts"],"mappings":"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","ignoreList":[]}
|
@@ -1,63 +1,23 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { UnistylesEventType } from '../common';
|
5
|
-
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles);
|
1
|
+
import { useContext } from 'react';
|
2
|
+
import { UnistylesContext } from '../UnistylesProvider';
|
3
|
+
import { useSharedContext } from './useSharedContext';
|
6
4
|
export const useUnistyles = () => {
|
7
|
-
const
|
8
|
-
const
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
},
|
16
|
-
statusBar: {
|
17
|
-
width: unistyles.runtime.statusBar.width,
|
18
|
-
height: unistyles.runtime.statusBar.height
|
19
|
-
},
|
20
|
-
navigationBar: {
|
21
|
-
width: unistyles.runtime.navigationBar.width,
|
22
|
-
height: unistyles.runtime.navigationBar.height
|
23
|
-
},
|
24
|
-
insets: {
|
25
|
-
top: unistyles.runtime.insets.top,
|
26
|
-
bottom: unistyles.runtime.insets.bottom,
|
27
|
-
left: unistyles.runtime.insets.left,
|
28
|
-
right: unistyles.runtime.insets.right
|
29
|
-
}
|
5
|
+
const unistylesContext = useContext(UnistylesContext);
|
6
|
+
const {
|
7
|
+
theme,
|
8
|
+
layout,
|
9
|
+
plugins
|
10
|
+
} = useSharedContext({
|
11
|
+
useContext: unistylesContext !== undefined,
|
12
|
+
deps: unistylesContext ? [unistylesContext] : []
|
30
13
|
});
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
}
|
39
|
-
case UnistylesEventType.Layout:
|
40
|
-
{
|
41
|
-
const layoutEvent = event;
|
42
|
-
return setLayout({
|
43
|
-
breakpoint: layoutEvent.payload.breakpoint,
|
44
|
-
orientation: layoutEvent.payload.orientation,
|
45
|
-
screen: layoutEvent.payload.screen,
|
46
|
-
statusBar: layoutEvent.payload.statusBar,
|
47
|
-
insets: layoutEvent.payload.insets,
|
48
|
-
navigationBar: layoutEvent.payload.navigationBar
|
49
|
-
});
|
50
|
-
}
|
51
|
-
case UnistylesEventType.Plugin:
|
52
|
-
{
|
53
|
-
return setPlugins(unistyles.runtime.enabledPlugins);
|
54
|
-
}
|
55
|
-
default:
|
56
|
-
return;
|
57
|
-
}
|
58
|
-
});
|
59
|
-
return subscription.remove;
|
60
|
-
}, []);
|
14
|
+
if (unistylesContext !== undefined) {
|
15
|
+
return {
|
16
|
+
plugins: unistylesContext.plugins,
|
17
|
+
theme: unistylesContext.theme,
|
18
|
+
layout: unistylesContext.layout
|
19
|
+
};
|
20
|
+
}
|
61
21
|
return {
|
62
22
|
plugins,
|
63
23
|
theme,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["
|
1
|
+
{"version":3,"names":["useContext","UnistylesContext","useSharedContext","useUnistyles","unistylesContext","theme","layout","plugins","undefined","deps"],"sourceRoot":"../../../src","sources":["hooks/useUnistyles.ts"],"mappings":"AAAA,SAASA,UAAU,QAAQ,OAAO;AAClC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,oBAAoB;AAErD,OAAO,MAAMC,YAAY,GAAGA,CAAA,KAAM;EAC9B,MAAMC,gBAAgB,GAAGJ,UAAU,CAACC,gBAAgB,CAAC;EACrD,MAAM;IAAEI,KAAK;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGL,gBAAgB,CAAC;IAChDF,UAAU,EAAEI,gBAAgB,KAAKI,SAAS;IAC1CC,IAAI,EAAEL,gBAAgB,GAAG,CAACA,gBAAgB,CAAC,GAAG;EAClD,CAAC,CAAC;EAEF,IAAIA,gBAAgB,KAAKI,SAAS,EAAE;IAChC,OAAO;MACHD,OAAO,EAAEH,gBAAgB,CAACG,OAAO;MACjCF,KAAK,EAAED,gBAAgB,CAACC,KAAK;MAC7BC,MAAM,EAAEF,gBAAgB,CAACE;IAC7B,CAAC;EACL;EAEA,OAAO;IACHC,OAAO;IACPF,KAAK;IACLC;EACJ,CAAC;AACL,CAAC","ignoreList":[]}
|
package/lib/module/index.js
CHANGED
@@ -4,7 +4,7 @@ import { useInitialTheme } from './hooks';
|
|
4
4
|
import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common';
|
5
5
|
import { useStyles } from './useStyles';
|
6
6
|
import { createStyleSheet } from './createStyleSheet';
|
7
|
-
|
7
|
+
import { UnistylesProvider } from './UnistylesProvider';
|
8
8
|
/**
|
9
9
|
* Utility to interact with the Unistyles
|
10
10
|
* (should be called only once)
|
@@ -27,5 +27,5 @@ const UnistylesRegistry = {
|
|
27
27
|
addConfig: unistyles.registry.addConfig
|
28
28
|
};
|
29
29
|
const UnistylesRuntime = unistyles.runtime;
|
30
|
-
export { mq, useStyles, useInitialTheme, createStyleSheet, ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesRegistry, UnistylesRuntime };
|
30
|
+
export { mq, useStyles, useInitialTheme, createStyleSheet, ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesRegistry, UnistylesRuntime, UnistylesProvider };
|
31
31
|
//# sourceMappingURL=index.js.map
|
package/lib/module/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["unistyles","mq","useInitialTheme","ScreenOrientation","AndroidContentSizeCategory","IOSContentSizeCategory","useStyles","createStyleSheet","UnistylesRegistry","addThemes","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,EAAE,QAAQ,SAAS;AAC5B,SAASC,eAAe,QAAQ,SAAS;AAGzC,SAASC,iBAAiB,EAAEC,0BAA0B,EAAEC,sBAAsB,QAAQ,UAAU;AAChG,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB
|
1
|
+
{"version":3,"names":["unistyles","mq","useInitialTheme","ScreenOrientation","AndroidContentSizeCategory","IOSContentSizeCategory","useStyles","createStyleSheet","UnistylesProvider","UnistylesRegistry","addThemes","registry","addBreakpoints","addConfig","UnistylesRuntime","runtime"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,SAASA,SAAS,QAAQ,QAAQ;AAClC,SAASC,EAAE,QAAQ,SAAS;AAC5B,SAASC,eAAe,QAAQ,SAAS;AAGzC,SAASC,iBAAiB,EAAEC,0BAA0B,EAAEC,sBAAsB,QAAQ,UAAU;AAChG,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAG;EACtB;AACJ;AACA;AACA;EACIC,SAAS,EAAEV,SAAS,CAACW,QAAQ,CAACD,SAAS;EACvC;AACJ;AACA;AACA;EACIE,cAAc,EAAEZ,SAAS,CAACW,QAAQ,CAACC,cAAc;EACjD;AACJ;AACA;AACA;EACIC,SAAS,EAAEb,SAAS,CAACW,QAAQ,CAACE;AAClC,CAAC;AAED,MAAMC,gBAAgB,GAAGd,SAAS,CAACe,OAAO;AAE1C,SACId,EAAE,EACFK,SAAS,EACTJ,eAAe,EACfK,gBAAgB,EAChBJ,iBAAiB,EACjBC,0BAA0B,EAC1BC,sBAAsB,EACtBI,iBAAiB,EACjBK,gBAAgB,EAChBN,iBAAiB","ignoreList":[]}
|
@@ -0,0 +1,20 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import type { UnistylesBreakpoints } from './global';
|
3
|
+
import type { ScreenDimensions, ScreenInsets, ScreenSize, UnistylesTheme } from './types';
|
4
|
+
export type TUnistylesContext = {
|
5
|
+
plugins: Array<string>;
|
6
|
+
theme: UnistylesTheme;
|
7
|
+
layout: {
|
8
|
+
screen: ScreenSize;
|
9
|
+
statusBar: ScreenDimensions;
|
10
|
+
navigationBar: ScreenDimensions;
|
11
|
+
insets: ScreenInsets;
|
12
|
+
breakpoint: keyof UnistylesBreakpoints;
|
13
|
+
orientation: 'landscape' | 'portrait';
|
14
|
+
};
|
15
|
+
};
|
16
|
+
export declare const UnistylesContext: React.Context<TUnistylesContext | undefined>;
|
17
|
+
export declare const UnistylesProvider: ({ children }: {
|
18
|
+
children: React.ReactNode;
|
19
|
+
}) => React.JSX.Element;
|
20
|
+
//# sourceMappingURL=UnistylesProvider.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"UnistylesProvider.d.ts","sourceRoot":"","sources":["../../../src/UnistylesProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAGzF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACvB,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE;QACJ,MAAM,EAAE,UAAU,CAAC;QACnB,SAAS,EAAE,gBAAgB,CAAC;QAC5B,aAAa,EAAE,gBAAgB,CAAC;QAChC,MAAM,EAAE,YAAY,CAAC;QACrB,UAAU,EAAE,MAAM,oBAAoB,CAAA;QACtC,WAAW,EAAE,WAAW,GAAG,UAAU,CAAA;KACxC,CAAA;CACJ,CAAA;AAED,eAAO,MAAM,gBAAgB,8CAAgE,CAAA;AAE7F,eAAO,MAAM,iBAAiB,iBAAkB;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAY5E,CAAA"}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { type DependencyList } from 'react';
|
2
|
+
type SharedContextConfig = {
|
3
|
+
useContext: boolean;
|
4
|
+
deps: DependencyList;
|
5
|
+
};
|
6
|
+
export declare const useSharedContext: (config: SharedContextConfig) => {
|
7
|
+
plugins: string[];
|
8
|
+
theme: never;
|
9
|
+
layout: {
|
10
|
+
breakpoint: keyof import("..").UnistylesBreakpoints;
|
11
|
+
orientation: "landscape" | "portrait";
|
12
|
+
screen: {
|
13
|
+
width: number;
|
14
|
+
height: number;
|
15
|
+
};
|
16
|
+
statusBar: {
|
17
|
+
width: number;
|
18
|
+
height: number;
|
19
|
+
};
|
20
|
+
navigationBar: {
|
21
|
+
width: number;
|
22
|
+
height: number;
|
23
|
+
};
|
24
|
+
insets: {
|
25
|
+
top: number;
|
26
|
+
bottom: number;
|
27
|
+
left: number;
|
28
|
+
right: number;
|
29
|
+
};
|
30
|
+
};
|
31
|
+
};
|
32
|
+
export {};
|
33
|
+
//# sourceMappingURL=useSharedContext.d.ts.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useSharedContext.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSharedContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAuB,MAAM,OAAO,CAAA;AAMhE,KAAK,mBAAmB,GAAG;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,cAAc,CAAA;CACvB,CAAA;AAID,eAAO,MAAM,gBAAgB,WAAY,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;CAqE3D,CAAA"}
|
@@ -2,26 +2,12 @@ export declare const useUnistyles: () => {
|
|
2
2
|
plugins: string[];
|
3
3
|
theme: never;
|
4
4
|
layout: {
|
5
|
+
screen: import("../types").ScreenSize;
|
6
|
+
statusBar: import("../types").ScreenDimensions;
|
7
|
+
navigationBar: import("../types").ScreenDimensions;
|
8
|
+
insets: import("../types").ScreenInsets;
|
5
9
|
breakpoint: keyof import("..").UnistylesBreakpoints;
|
6
10
|
orientation: "landscape" | "portrait";
|
7
|
-
screen: {
|
8
|
-
width: number;
|
9
|
-
height: number;
|
10
|
-
};
|
11
|
-
statusBar: {
|
12
|
-
width: number;
|
13
|
-
height: number;
|
14
|
-
};
|
15
|
-
navigationBar: {
|
16
|
-
width: number;
|
17
|
-
height: number;
|
18
|
-
};
|
19
|
-
insets: {
|
20
|
-
top: number;
|
21
|
-
bottom: number;
|
22
|
-
left: number;
|
23
|
-
right: number;
|
24
|
-
};
|
25
11
|
};
|
26
12
|
};
|
27
13
|
//# sourceMappingURL=useUnistyles.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useUnistyles.ts"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"useUnistyles.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useUnistyles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY;;;;;;;;;;;CAoBxB,CAAA"}
|
@@ -5,6 +5,7 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global';
|
|
5
5
|
import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common';
|
6
6
|
import { useStyles } from './useStyles';
|
7
7
|
import { createStyleSheet } from './createStyleSheet';
|
8
|
+
import { UnistylesProvider } from './UnistylesProvider';
|
8
9
|
/**
|
9
10
|
* Utility to interact with the Unistyles
|
10
11
|
* (should be called only once)
|
@@ -63,6 +64,6 @@ declare const UnistylesRegistry: {
|
|
63
64
|
};
|
64
65
|
};
|
65
66
|
declare const UnistylesRuntime: import("./core").UnistylesRuntime;
|
66
|
-
export { mq, useStyles, useInitialTheme, createStyleSheet, ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesRegistry, UnistylesRuntime };
|
67
|
+
export { mq, useStyles, useInitialTheme, createStyleSheet, ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory, UnistylesRegistry, UnistylesRuntime, UnistylesProvider };
|
67
68
|
export type { UnistylesTheme, UnistylesThemes, UnistylesBreakpoints, UnistylesPlugin, UnistylesValues, UnistyleText, UnistyleView, UnistyleImage, ExtractVariantNames as UnistylesVariants };
|
68
69
|
//# sourceMappingURL=index.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC/I,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AACzC,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAC/I,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AACrE,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAA;AAChG,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD;;;GAGG;AACH,QAAA,MAAM,iBAAiB;IACnB;;;OAGG;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;IAEH;;;OAGG;;;;;;;;;;;;;;CAEN,CAAA;AAED,QAAA,MAAM,gBAAgB,mCAAoB,CAAA;AAE1C,OAAO,EACH,EAAE,EACF,SAAS,EACT,eAAe,EACf,gBAAgB,EAChB,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACpB,CAAA;AAED,YAAY,EACR,cAAc,EACd,eAAe,EACf,oBAAoB,EACpB,eAAe,EACf,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,mBAAmB,IAAI,iBAAiB,EAC3C,CAAA"}
|
package/package.json
CHANGED
@@ -0,0 +1,33 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import type { UnistylesBreakpoints } from './global'
|
3
|
+
import type { ScreenDimensions, ScreenInsets, ScreenSize, UnistylesTheme } from './types'
|
4
|
+
import { useSharedContext } from './hooks/useSharedContext'
|
5
|
+
|
6
|
+
export type TUnistylesContext = {
|
7
|
+
plugins: Array<string>,
|
8
|
+
theme: UnistylesTheme,
|
9
|
+
layout: {
|
10
|
+
screen: ScreenSize,
|
11
|
+
statusBar: ScreenDimensions,
|
12
|
+
navigationBar: ScreenDimensions,
|
13
|
+
insets: ScreenInsets,
|
14
|
+
breakpoint: keyof UnistylesBreakpoints
|
15
|
+
orientation: 'landscape' | 'portrait'
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
export const UnistylesContext = React.createContext<TUnistylesContext | undefined>(undefined)
|
20
|
+
|
21
|
+
export const UnistylesProvider = ({ children }: { children: React.ReactNode }) => {
|
22
|
+
const { plugins, theme, layout } = useSharedContext({
|
23
|
+
// intentionally false, we want to listen for changes in the provider
|
24
|
+
useContext: false,
|
25
|
+
deps: []
|
26
|
+
})
|
27
|
+
|
28
|
+
return (
|
29
|
+
<UnistylesContext.Provider value={{ theme, layout, plugins }}>
|
30
|
+
{children}
|
31
|
+
</UnistylesContext.Provider>
|
32
|
+
)
|
33
|
+
}
|
@@ -0,0 +1,83 @@
|
|
1
|
+
import { type DependencyList, useEffect, useState } from 'react'
|
2
|
+
import { NativeEventEmitter, NativeModules } from 'react-native'
|
3
|
+
import { unistyles } from '../core'
|
4
|
+
import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
|
5
|
+
import { UnistylesEventType } from '../common'
|
6
|
+
|
7
|
+
type SharedContextConfig = {
|
8
|
+
useContext: boolean,
|
9
|
+
deps: DependencyList
|
10
|
+
}
|
11
|
+
|
12
|
+
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
13
|
+
|
14
|
+
export const useSharedContext = (config: SharedContextConfig) => {
|
15
|
+
const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
|
16
|
+
const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
|
17
|
+
const [layout, setLayout] = useState({
|
18
|
+
breakpoint: unistyles.runtime.breakpoint,
|
19
|
+
orientation: unistyles.runtime.orientation,
|
20
|
+
screen: {
|
21
|
+
width: unistyles.runtime.screen.width,
|
22
|
+
height: unistyles.runtime.screen.height
|
23
|
+
},
|
24
|
+
statusBar: {
|
25
|
+
width: unistyles.runtime.statusBar.width,
|
26
|
+
height: unistyles.runtime.statusBar.height
|
27
|
+
},
|
28
|
+
navigationBar: {
|
29
|
+
width: unistyles.runtime.navigationBar.width,
|
30
|
+
height: unistyles.runtime.navigationBar.height
|
31
|
+
},
|
32
|
+
insets: {
|
33
|
+
top: unistyles.runtime.insets.top,
|
34
|
+
bottom: unistyles.runtime.insets.bottom,
|
35
|
+
left: unistyles.runtime.insets.left,
|
36
|
+
right: unistyles.runtime.insets.right
|
37
|
+
}
|
38
|
+
})
|
39
|
+
|
40
|
+
useEffect(() => {
|
41
|
+
if (config.useContext) {
|
42
|
+
return
|
43
|
+
}
|
44
|
+
|
45
|
+
const subscription = unistylesEvents.addListener(
|
46
|
+
'__unistylesOnChange',
|
47
|
+
(event: UnistylesEvents) => {
|
48
|
+
switch (event.type) {
|
49
|
+
case UnistylesEventType.Theme: {
|
50
|
+
const themeEvent = event as UnistylesThemeEvent
|
51
|
+
|
52
|
+
return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
|
53
|
+
}
|
54
|
+
case UnistylesEventType.Layout: {
|
55
|
+
const layoutEvent = event as UnistylesMobileLayoutEvent
|
56
|
+
|
57
|
+
return setLayout({
|
58
|
+
breakpoint: layoutEvent.payload.breakpoint,
|
59
|
+
orientation: layoutEvent.payload.orientation,
|
60
|
+
screen: layoutEvent.payload.screen,
|
61
|
+
statusBar: layoutEvent.payload.statusBar,
|
62
|
+
insets: layoutEvent.payload.insets,
|
63
|
+
navigationBar: layoutEvent.payload.navigationBar
|
64
|
+
})
|
65
|
+
}
|
66
|
+
case UnistylesEventType.Plugin: {
|
67
|
+
return setPlugins(unistyles.runtime.enabledPlugins)
|
68
|
+
}
|
69
|
+
default:
|
70
|
+
return
|
71
|
+
}
|
72
|
+
}
|
73
|
+
)
|
74
|
+
|
75
|
+
return subscription.remove
|
76
|
+
}, config.deps)
|
77
|
+
|
78
|
+
return {
|
79
|
+
plugins,
|
80
|
+
theme,
|
81
|
+
layout
|
82
|
+
}
|
83
|
+
}
|
@@ -1,70 +1,21 @@
|
|
1
|
-
import {
|
2
|
-
import {
|
3
|
-
import {
|
4
|
-
import { UnistylesEventType } from '../common'
|
5
|
-
import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
|
6
|
-
|
7
|
-
const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
|
1
|
+
import { useContext } from 'react'
|
2
|
+
import { UnistylesContext } from '../UnistylesProvider'
|
3
|
+
import { useSharedContext } from './useSharedContext'
|
8
4
|
|
9
5
|
export const useUnistyles = () => {
|
10
|
-
const
|
11
|
-
const
|
12
|
-
|
13
|
-
|
14
|
-
orientation: unistyles.runtime.orientation,
|
15
|
-
screen: {
|
16
|
-
width: unistyles.runtime.screen.width,
|
17
|
-
height: unistyles.runtime.screen.height
|
18
|
-
},
|
19
|
-
statusBar: {
|
20
|
-
width: unistyles.runtime.statusBar.width,
|
21
|
-
height: unistyles.runtime.statusBar.height
|
22
|
-
},
|
23
|
-
navigationBar: {
|
24
|
-
width: unistyles.runtime.navigationBar.width,
|
25
|
-
height: unistyles.runtime.navigationBar.height
|
26
|
-
},
|
27
|
-
insets: {
|
28
|
-
top: unistyles.runtime.insets.top,
|
29
|
-
bottom: unistyles.runtime.insets.bottom,
|
30
|
-
left: unistyles.runtime.insets.left,
|
31
|
-
right: unistyles.runtime.insets.right
|
32
|
-
}
|
6
|
+
const unistylesContext = useContext(UnistylesContext)
|
7
|
+
const { theme, layout, plugins } = useSharedContext({
|
8
|
+
useContext: unistylesContext !== undefined,
|
9
|
+
deps: unistylesContext ? [unistylesContext] : []
|
33
10
|
})
|
34
11
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
|
44
|
-
}
|
45
|
-
case UnistylesEventType.Layout: {
|
46
|
-
const layoutEvent = event as UnistylesMobileLayoutEvent
|
47
|
-
|
48
|
-
return setLayout({
|
49
|
-
breakpoint: layoutEvent.payload.breakpoint,
|
50
|
-
orientation: layoutEvent.payload.orientation,
|
51
|
-
screen: layoutEvent.payload.screen,
|
52
|
-
statusBar: layoutEvent.payload.statusBar,
|
53
|
-
insets: layoutEvent.payload.insets,
|
54
|
-
navigationBar: layoutEvent.payload.navigationBar
|
55
|
-
})
|
56
|
-
}
|
57
|
-
case UnistylesEventType.Plugin: {
|
58
|
-
return setPlugins(unistyles.runtime.enabledPlugins)
|
59
|
-
}
|
60
|
-
default:
|
61
|
-
return
|
62
|
-
}
|
63
|
-
}
|
64
|
-
)
|
65
|
-
|
66
|
-
return subscription.remove
|
67
|
-
}, [])
|
12
|
+
if (unistylesContext !== undefined) {
|
13
|
+
return {
|
14
|
+
plugins: unistylesContext.plugins,
|
15
|
+
theme: unistylesContext.theme,
|
16
|
+
layout: unistylesContext.layout
|
17
|
+
}
|
18
|
+
}
|
68
19
|
|
69
20
|
return {
|
70
21
|
plugins,
|
package/src/index.ts
CHANGED
@@ -6,7 +6,7 @@ import type { UnistylesThemes, UnistylesBreakpoints } from './global'
|
|
6
6
|
import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
|
7
7
|
import { useStyles } from './useStyles'
|
8
8
|
import { createStyleSheet } from './createStyleSheet'
|
9
|
-
|
9
|
+
import { UnistylesProvider } from './UnistylesProvider'
|
10
10
|
/**
|
11
11
|
* Utility to interact with the Unistyles
|
12
12
|
* (should be called only once)
|
@@ -40,7 +40,8 @@ export {
|
|
40
40
|
AndroidContentSizeCategory,
|
41
41
|
IOSContentSizeCategory,
|
42
42
|
UnistylesRegistry,
|
43
|
-
UnistylesRuntime
|
43
|
+
UnistylesRuntime,
|
44
|
+
UnistylesProvider
|
44
45
|
}
|
45
46
|
|
46
47
|
export type {
|