@rescui/ui-contexts 0.5.3 → 0.5.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/layering-provider.js +12 -11
- package/lib/parts/layering-context.js +42 -73
- package/lib/parts/theme-context.js +28 -42
- package/lib/theme-provider.js +7 -6
- package/package.json +4 -5
package/lib/layering-provider.js
CHANGED
|
@@ -3,17 +3,18 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { useLayeringContext, LayeringContextValue, LayeringContext } from './parts/layering-context.js';
|
|
4
4
|
|
|
5
5
|
function LayeringProvider(_ref) {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
6
|
+
let {
|
|
7
|
+
baseLayer,
|
|
8
|
+
children
|
|
9
|
+
} = _ref;
|
|
10
|
+
const {
|
|
11
|
+
popupZIndex,
|
|
12
|
+
dropdownZIndex,
|
|
13
|
+
tooltipZIndex,
|
|
14
|
+
baseZIndex,
|
|
15
|
+
isInPortal
|
|
16
|
+
} = useLayeringContext();
|
|
17
|
+
const contextValue = useMemo(() => {
|
|
17
18
|
switch (baseLayer) {
|
|
18
19
|
case 'popup':
|
|
19
20
|
return new LayeringContextValue(popupZIndex, true);
|
|
@@ -1,86 +1,55 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _createClass from "@babel/runtime-corejs3/helpers/esm/createClass";
|
|
9
|
-
import _classCallCheck from "@babel/runtime-corejs3/helpers/esm/classCallCheck";
|
|
10
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
11
|
-
import "core-js/modules/es.function.name.js";
|
|
12
|
-
|
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
-
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
-
|
|
17
1
|
import React, { createContext, useContext } from 'react';
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
2
|
+
const LAYER_STEP = 500;
|
|
3
|
+
|
|
4
|
+
class LayeringContextValue {
|
|
5
|
+
baseZIndex;
|
|
6
|
+
isInPortal;
|
|
7
|
+
popupZIndex;
|
|
8
|
+
dropdownZIndex;
|
|
9
|
+
tooltipZIndex;
|
|
10
|
+
|
|
11
|
+
constructor(baseZIndex, isInPortal) {
|
|
12
|
+
Object.defineProperty(this, 'baseZIndex', {
|
|
13
|
+
writable: false,
|
|
14
|
+
enumerable: true,
|
|
15
|
+
value: baseZIndex
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(this, 'isInPortal', {
|
|
18
|
+
writable: false,
|
|
19
|
+
enumerable: true,
|
|
20
|
+
value: Boolean(isInPortal)
|
|
21
|
+
});
|
|
22
|
+
Object.defineProperty(this, 'popupZIndex', {
|
|
23
|
+
enumerable: true,
|
|
24
|
+
get: () => this.baseZIndex + 3 * LAYER_STEP
|
|
25
|
+
});
|
|
26
|
+
Object.defineProperty(this, 'dropdownZIndex', {
|
|
27
|
+
enumerable: true,
|
|
28
|
+
get: () => this.baseZIndex + 2 * LAYER_STEP
|
|
29
|
+
});
|
|
30
|
+
Object.defineProperty(this, 'tooltipZIndex', {
|
|
31
|
+
enumerable: true,
|
|
32
|
+
get: () => this.baseZIndex + LAYER_STEP
|
|
33
|
+
});
|
|
34
|
+
}
|
|
34
35
|
|
|
35
|
-
|
|
36
|
-
writable: false,
|
|
37
|
-
enumerable: true,
|
|
38
|
-
value: baseZIndex
|
|
39
|
-
});
|
|
40
|
-
Object.defineProperty(this, 'isInPortal', {
|
|
41
|
-
writable: false,
|
|
42
|
-
enumerable: true,
|
|
43
|
-
value: Boolean(isInPortal)
|
|
44
|
-
});
|
|
45
|
-
Object.defineProperty(this, 'popupZIndex', {
|
|
46
|
-
enumerable: true,
|
|
47
|
-
get: function get() {
|
|
48
|
-
return _this.baseZIndex + 3 * LAYER_STEP;
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
Object.defineProperty(this, 'dropdownZIndex', {
|
|
52
|
-
enumerable: true,
|
|
53
|
-
get: function get() {
|
|
54
|
-
return _this.baseZIndex + 2 * LAYER_STEP;
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
Object.defineProperty(this, 'tooltipZIndex', {
|
|
58
|
-
enumerable: true,
|
|
59
|
-
get: function get() {
|
|
60
|
-
return _this.baseZIndex + LAYER_STEP;
|
|
61
|
-
}
|
|
62
|
-
});
|
|
63
|
-
});
|
|
36
|
+
}
|
|
64
37
|
|
|
65
|
-
|
|
66
|
-
|
|
38
|
+
const LayeringContext = /*#__PURE__*/createContext(new LayeringContextValue(0));
|
|
39
|
+
const LayeringConsumer = LayeringContext.Consumer;
|
|
67
40
|
|
|
68
|
-
|
|
69
|
-
return useContext(LayeringContext);
|
|
70
|
-
};
|
|
41
|
+
const useLayeringContext = () => useContext(LayeringContext);
|
|
71
42
|
/**
|
|
72
43
|
* @deprecated use `useLayeringContext` hook instead
|
|
73
44
|
* */
|
|
74
45
|
|
|
75
46
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
});
|
|
81
|
-
};
|
|
47
|
+
const withLayering = WrappedComponent => {
|
|
48
|
+
const component = props => /*#__PURE__*/React.createElement(LayeringContext.Consumer, null, layering => /*#__PURE__*/React.createElement(WrappedComponent, { ...layering,
|
|
49
|
+
...props
|
|
50
|
+
}));
|
|
82
51
|
|
|
83
|
-
component.displayName =
|
|
52
|
+
component.displayName = `WithLayering(${WrappedComponent.displayName || WrappedComponent.name})`;
|
|
84
53
|
return component;
|
|
85
54
|
};
|
|
86
55
|
|
|
@@ -1,47 +1,29 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["theme"];
|
|
11
|
-
import "core-js/modules/es.function.name.js";
|
|
12
|
-
|
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
-
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
-
|
|
17
1
|
import React, { createContext, useContext } from 'react';
|
|
18
|
-
|
|
2
|
+
const ThemeContext = /*#__PURE__*/createContext({
|
|
19
3
|
theme: 'light',
|
|
20
4
|
noProvider: true
|
|
21
5
|
});
|
|
22
|
-
|
|
6
|
+
const ThemeConsumer = ThemeContext.Consumer;
|
|
23
7
|
|
|
24
|
-
|
|
25
|
-
return theme === 'light' ? 'dark' : 'light';
|
|
26
|
-
};
|
|
8
|
+
const getInverseTheme = theme => theme === 'light' ? 'dark' : 'light';
|
|
27
9
|
/**
|
|
28
10
|
* @deprecated please support --rs-theme-dark and --rs-theme-flip css variables and don't use react context for theme
|
|
29
11
|
* If you need to maintain backward compatibility use `useThemeWithUndefined` hook instead, rely on --rs-theme-dark and --rs-theme-flip css variables when theme is undefined
|
|
30
12
|
* */
|
|
31
13
|
|
|
32
14
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
15
|
+
const useTheme = overwriteValue => {
|
|
16
|
+
const {
|
|
17
|
+
theme
|
|
18
|
+
} = useContext(ThemeContext);
|
|
37
19
|
return overwriteValue || theme;
|
|
38
20
|
};
|
|
39
21
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
22
|
+
const useThemeWithUndefined = overwriteValue => {
|
|
23
|
+
const {
|
|
24
|
+
theme,
|
|
25
|
+
noProvider
|
|
26
|
+
} = useContext(ThemeContext);
|
|
45
27
|
return overwriteValue || (noProvider ? undefined : theme);
|
|
46
28
|
};
|
|
47
29
|
/**
|
|
@@ -50,21 +32,25 @@ var useThemeWithUndefined = function useThemeWithUndefined(overwriteValue) {
|
|
|
50
32
|
* */
|
|
51
33
|
|
|
52
34
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
35
|
+
const withTheme = wrappedComponent => {
|
|
36
|
+
const WrappedComponent = wrappedComponent;
|
|
37
|
+
const ComponentWithTheme = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
38
|
+
let {
|
|
39
|
+
theme,
|
|
40
|
+
...restProps
|
|
41
|
+
} = _ref;
|
|
42
|
+
return /*#__PURE__*/React.createElement(ThemeConsumer, null, _ref2 => {
|
|
43
|
+
let {
|
|
44
|
+
theme: themeFromContext
|
|
45
|
+
} = _ref2;
|
|
46
|
+
return /*#__PURE__*/React.createElement(WrappedComponent, {
|
|
62
47
|
ref: ref,
|
|
63
|
-
theme: theme || themeFromContext
|
|
64
|
-
|
|
48
|
+
theme: theme || themeFromContext,
|
|
49
|
+
...restProps
|
|
50
|
+
});
|
|
65
51
|
});
|
|
66
52
|
});
|
|
67
|
-
ComponentWithTheme.displayName =
|
|
53
|
+
ComponentWithTheme.displayName = `WithTheme(${WrappedComponent.displayName || WrappedComponent.name})`;
|
|
68
54
|
return ComponentWithTheme;
|
|
69
55
|
};
|
|
70
56
|
|
package/lib/theme-provider.js
CHANGED
|
@@ -2,14 +2,15 @@ import React from 'react';
|
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { ThemeContext } from './parts/theme-context.js';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
5
|
+
const ThemeProvider = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
theme,
|
|
8
|
+
children,
|
|
9
|
+
ignoreThemeValueForCSSApi = false
|
|
10
|
+
} = _ref;
|
|
10
11
|
return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
|
11
12
|
value: {
|
|
12
|
-
theme
|
|
13
|
+
theme,
|
|
13
14
|
noProvider: ignoreThemeValueForCSSApi
|
|
14
15
|
}
|
|
15
16
|
}, children);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/ui-contexts",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -15,19 +15,18 @@
|
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@babel/runtime-corejs3": "^7.
|
|
19
|
-
"core-js": "^3.9.1"
|
|
18
|
+
"@babel/runtime-corejs3": "^7.26.0"
|
|
20
19
|
},
|
|
21
20
|
"peerDependencies": {
|
|
22
21
|
"prop-types": "^15.7.2",
|
|
23
22
|
"react": ">=16.8.0 <19"
|
|
24
23
|
},
|
|
25
24
|
"devDependencies": {
|
|
26
|
-
"@rescui/scripts": "^0.3.
|
|
25
|
+
"@rescui/scripts": "^0.3.5"
|
|
27
26
|
},
|
|
28
27
|
"scripts": {
|
|
29
28
|
"build": "rescui-scripts build"
|
|
30
29
|
},
|
|
31
30
|
"nx": {},
|
|
32
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
|
|
33
32
|
}
|