@plesk/ui-library 3.40.6 → 3.40.8
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/cjs/components/Badge/Badge.js +2 -2
- package/cjs/components/SegmentedControl/SegmentedControl.js +12 -10
- package/cjs/components/Subnav/Subnav.js +1 -1
- package/cjs/components/Toolbar/RegistryContext.js +95 -31
- package/cjs/components/Toolbar/Toolbar.js +5 -80
- package/cjs/components/Toolbar/ToolbarGroup.js +6 -159
- package/cjs/components/Toolbar/ToolbarItem.js +15 -59
- package/cjs/index.js +1 -1
- package/dist/plesk-ui-library-rtl.css +1 -1
- package/dist/plesk-ui-library-rtl.css.map +1 -1
- package/dist/plesk-ui-library.css +1 -1
- package/dist/plesk-ui-library.css.map +1 -1
- package/dist/plesk-ui-library.js +61 -387
- package/dist/plesk-ui-library.js.map +1 -1
- package/dist/plesk-ui-library.min.js +6 -6
- package/dist/plesk-ui-library.min.js.map +1 -1
- package/esm/components/Badge/Badge.js +2 -2
- package/esm/components/SegmentedControl/SegmentedControl.js +12 -10
- package/esm/components/Subnav/Subnav.js +1 -1
- package/esm/components/Toolbar/RegistryContext.js +92 -30
- package/esm/components/Toolbar/Toolbar.js +7 -82
- package/esm/components/Toolbar/ToolbarGroup.js +7 -160
- package/esm/components/Toolbar/ToolbarItem.js +15 -59
- package/esm/index.js +1 -1
- package/package.json +23 -25
- package/styleguide/build/bundle.265c8e0c.js +2 -0
- package/styleguide/index.html +2 -2
- package/types/src/components/Toolbar/RegistryContext.d.ts +22 -13
- package/types/src/components/Toolbar/Toolbar.d.ts +8 -8
- package/types/src/components/Toolbar/ToolbarGroup.d.ts +6 -16
- package/types/src/components/Toolbar/ToolbarItem.d.ts +1 -1
- package/cjs/components/Toolbar/RegistryContextBeta.js +0 -112
- package/esm/components/Toolbar/RegistryContextBeta.js +0 -103
- package/styleguide/build/bundle.9eeb2c9d.js +0 -2
- package/types/src/components/Toolbar/RegistryContextBeta.d.ts +0 -25
- /package/styleguide/build/{bundle.9eeb2c9d.js.LICENSE.txt → bundle.265c8e0c.js.LICENSE.txt} +0 -0
|
@@ -27,7 +27,7 @@ const Badge = _ref => {
|
|
|
27
27
|
hidden,
|
|
28
28
|
...props
|
|
29
29
|
} = _ref;
|
|
30
|
-
const
|
|
30
|
+
const isEmpty = !label && label !== 0;
|
|
31
31
|
if (_react.Children.toArray(children).length && !hidden) {
|
|
32
32
|
if (! /*#__PURE__*/(0, _react.isValidElement)(label)) {
|
|
33
33
|
label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.default, {
|
|
@@ -38,7 +38,7 @@ const Badge = _ref => {
|
|
|
38
38
|
if ( /*#__PURE__*/(0, _react.isValidElement)(label)) {
|
|
39
39
|
const cloneProps = {
|
|
40
40
|
className: (0, _classnames.default)(`${baseClassName}__value`, {
|
|
41
|
-
[`${baseClassName}__value--dot`]:
|
|
41
|
+
[`${baseClassName}__value--dot`]: isEmpty
|
|
42
42
|
}, label.props.className)
|
|
43
43
|
};
|
|
44
44
|
if (intent && (label.type === _Label.default || label.type === _Icon.default)) {
|
|
@@ -63,26 +63,28 @@ class SegmentedControl extends _react.Component {
|
|
|
63
63
|
const {
|
|
64
64
|
selected
|
|
65
65
|
} = this.state;
|
|
66
|
+
let prevSelected = selected;
|
|
66
67
|
let newSelected;
|
|
67
68
|
if (multiple) {
|
|
68
|
-
|
|
69
|
-
|
|
69
|
+
const isSelectedArray = Array.isArray(selected);
|
|
70
|
+
newSelected = isSelectedArray ? [...selected] : [];
|
|
71
|
+
if (!isSelectedArray || selected.indexOf(value) === -1) {
|
|
70
72
|
newSelected.push(value);
|
|
71
73
|
} else {
|
|
72
74
|
newSelected.splice(selected.indexOf(value), 1);
|
|
73
75
|
}
|
|
74
76
|
newSelected.sort(alphaSort);
|
|
75
|
-
|
|
76
|
-
selected
|
|
77
|
-
});
|
|
78
|
-
if (JSON.stringify(newSelected) !== JSON.stringify(selected)) {
|
|
79
|
-
onChange?.(newSelected);
|
|
77
|
+
if (isSelectedArray) {
|
|
78
|
+
prevSelected = [...selected].sort(alphaSort);
|
|
80
79
|
}
|
|
81
80
|
} else {
|
|
82
81
|
newSelected = value;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
}
|
|
83
|
+
if (JSON.stringify(prevSelected) !== JSON.stringify(newSelected)) {
|
|
84
|
+
this.setState({
|
|
85
|
+
selected: newSelected
|
|
86
|
+
});
|
|
87
|
+
onChange?.(newSelected);
|
|
86
88
|
}
|
|
87
89
|
});
|
|
88
90
|
(0, _defineProperty2.default)(this, "compact", () => {
|
|
@@ -105,7 +105,7 @@ const SubnavItem = _ref2 => {
|
|
|
105
105
|
} = _ref2;
|
|
106
106
|
return /*#__PURE__*/(0, _react.cloneElement)(children, {
|
|
107
107
|
className: (0, _classnames.default)(baseClassName, active && `${baseClassName}--active`, className),
|
|
108
|
-
tabIndex:
|
|
108
|
+
tabIndex: 0,
|
|
109
109
|
...props
|
|
110
110
|
});
|
|
111
111
|
};
|
|
@@ -1,53 +1,117 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
|
-
exports.
|
|
7
|
+
exports.useRegistryItem = exports.useRegistry = exports.default = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
7
9
|
var _react = require("react");
|
|
8
10
|
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
|
|
9
11
|
|
|
10
12
|
const RegistryContext = /*#__PURE__*/(0, _react.createContext)(undefined);
|
|
11
13
|
RegistryContext.displayName = 'RegistryContext';
|
|
14
|
+
const useRegistryContext = () => (0, _react.useContext)(RegistryContext);
|
|
12
15
|
var _default = exports.default = RegistryContext;
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
class Registry {
|
|
17
|
+
constructor() {
|
|
18
|
+
(0, _defineProperty2.default)(this, "items", []);
|
|
19
|
+
}
|
|
15
20
|
register(item) {
|
|
16
|
-
this.
|
|
17
|
-
}
|
|
21
|
+
this.items.push(item);
|
|
22
|
+
}
|
|
18
23
|
unregister(item) {
|
|
19
|
-
this.
|
|
20
|
-
}
|
|
21
|
-
|
|
24
|
+
this.items = this.items.filter(i => i !== item);
|
|
25
|
+
}
|
|
26
|
+
compact() {
|
|
22
27
|
let changed = false;
|
|
23
|
-
this.
|
|
24
|
-
if (item.isCompact
|
|
25
|
-
item.
|
|
28
|
+
for (const item of [...this.items].reverse()) {
|
|
29
|
+
if (!item.isCompact) {
|
|
30
|
+
item.compact();
|
|
26
31
|
changed = true;
|
|
27
|
-
|
|
32
|
+
break;
|
|
28
33
|
}
|
|
29
|
-
|
|
30
|
-
});
|
|
34
|
+
}
|
|
31
35
|
return changed;
|
|
32
|
-
}
|
|
33
|
-
|
|
36
|
+
}
|
|
37
|
+
expand() {
|
|
34
38
|
let changed = false;
|
|
35
|
-
|
|
36
|
-
if (
|
|
37
|
-
item.
|
|
39
|
+
for (const item of this.items) {
|
|
40
|
+
if (item.isExpandable) {
|
|
41
|
+
item.expand();
|
|
38
42
|
changed = true;
|
|
39
|
-
|
|
43
|
+
break;
|
|
40
44
|
}
|
|
41
|
-
return true;
|
|
42
|
-
});
|
|
43
|
-
return changed;
|
|
44
|
-
},
|
|
45
|
-
isCompact() {
|
|
46
|
-
let one = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
47
|
-
if (one) {
|
|
48
|
-
return this.stack.some(item => item.isCompact(one));
|
|
49
45
|
}
|
|
50
|
-
return
|
|
46
|
+
return changed;
|
|
51
47
|
}
|
|
52
|
-
|
|
53
|
-
|
|
48
|
+
get isCompact() {
|
|
49
|
+
return this.items.every(_ref => {
|
|
50
|
+
let {
|
|
51
|
+
isCompact
|
|
52
|
+
} = _ref;
|
|
53
|
+
return isCompact;
|
|
54
|
+
});
|
|
55
|
+
}
|
|
56
|
+
get isExpandable() {
|
|
57
|
+
return this.items.some(_ref2 => {
|
|
58
|
+
let {
|
|
59
|
+
isExpandable
|
|
60
|
+
} = _ref2;
|
|
61
|
+
return isExpandable;
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
class RegistryItem {
|
|
66
|
+
constructor(_ref3) {
|
|
67
|
+
let {
|
|
68
|
+
onCompactStateChange
|
|
69
|
+
} = _ref3;
|
|
70
|
+
(0, _defineProperty2.default)(this, "_isCompact", false);
|
|
71
|
+
(0, _defineProperty2.default)(this, "onCompactStateChange", void 0);
|
|
72
|
+
this.onCompactStateChange = onCompactStateChange;
|
|
73
|
+
}
|
|
74
|
+
compact() {
|
|
75
|
+
this._isCompact = true;
|
|
76
|
+
this.onCompactStateChange(true);
|
|
77
|
+
}
|
|
78
|
+
expand() {
|
|
79
|
+
this._isCompact = false;
|
|
80
|
+
this.onCompactStateChange(false);
|
|
81
|
+
}
|
|
82
|
+
get isCompact() {
|
|
83
|
+
return this._isCompact;
|
|
84
|
+
}
|
|
85
|
+
get isExpandable() {
|
|
86
|
+
return this._isCompact;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
const useRegistry = () => {
|
|
90
|
+
const parentRegistry = useRegistryContext();
|
|
91
|
+
const [registry] = (0, _react.useState)(() => new Registry());
|
|
92
|
+
(0, _react.useLayoutEffect)(() => {
|
|
93
|
+
if (!parentRegistry) return undefined;
|
|
94
|
+
parentRegistry.register(registry);
|
|
95
|
+
return () => {
|
|
96
|
+
parentRegistry.unregister(registry);
|
|
97
|
+
};
|
|
98
|
+
}, [parentRegistry, registry]);
|
|
99
|
+
return registry;
|
|
100
|
+
};
|
|
101
|
+
exports.useRegistry = useRegistry;
|
|
102
|
+
const useRegistryItem = () => {
|
|
103
|
+
const registry = useRegistryContext();
|
|
104
|
+
const [isCompact, setIsCompact] = (0, _react.useState)(false);
|
|
105
|
+
const [registryItem] = (0, _react.useState)(() => new RegistryItem({
|
|
106
|
+
onCompactStateChange: setIsCompact
|
|
107
|
+
}));
|
|
108
|
+
(0, _react.useLayoutEffect)(() => {
|
|
109
|
+
if (!registry) return undefined;
|
|
110
|
+
registry.register(registryItem);
|
|
111
|
+
return () => {
|
|
112
|
+
registry.unregister(registryItem);
|
|
113
|
+
};
|
|
114
|
+
}, [registry, registryItem]);
|
|
115
|
+
return [isCompact];
|
|
116
|
+
};
|
|
117
|
+
exports.useRegistryItem = useRegistryItem;
|
|
@@ -5,17 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
8
|
var _react = require("react");
|
|
10
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
10
|
var _constants = require("../../constants");
|
|
12
11
|
var _RegistryContext = _interopRequireWildcard(require("./RegistryContext"));
|
|
13
|
-
var _RegistryContextBeta = _interopRequireWildcard(require("./RegistryContextBeta"));
|
|
14
12
|
var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
|
|
15
13
|
var _ToolbarItem = require("./ToolbarItem");
|
|
16
|
-
var _Squeezer = _interopRequireDefault(require("../Squeezer"));
|
|
17
14
|
var _hooks = require("../../hooks");
|
|
18
|
-
var _ToolbarBetaProvider = require("./ToolbarBetaProvider");
|
|
19
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
16
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
21
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -28,94 +24,31 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
28
24
|
* and controls for changing the way the content block looks.
|
|
29
25
|
* @since 0.0.57
|
|
30
26
|
*/
|
|
31
|
-
|
|
32
|
-
class ToolbarClassComponent extends _react.Component {
|
|
33
|
-
constructor(props) {
|
|
34
|
-
super(props);
|
|
35
|
-
(0, _defineProperty2.default)(this, "state", {
|
|
36
|
-
distractionFreeMode: {
|
|
37
|
-
enabled: false,
|
|
38
|
-
toggle: () => {
|
|
39
|
-
this.setState(prevState => ({
|
|
40
|
-
distractionFreeMode: {
|
|
41
|
-
...prevState.distractionFreeMode,
|
|
42
|
-
enabled: !prevState.distractionFreeMode.enabled
|
|
43
|
-
}
|
|
44
|
-
}), () => {
|
|
45
|
-
this.measure();
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
(0, _defineProperty2.default)(this, "registry", void 0);
|
|
51
|
-
(0, _defineProperty2.default)(this, "measure", void 0);
|
|
52
|
-
this.registry = (0, _RegistryContext.createRegistry)();
|
|
53
|
-
this.measure = () => {};
|
|
54
|
-
}
|
|
55
|
-
render() {
|
|
56
|
-
const {
|
|
57
|
-
baseClassName,
|
|
58
|
-
className,
|
|
59
|
-
children,
|
|
60
|
-
...props
|
|
61
|
-
} = this.props;
|
|
62
|
-
const toolbarItems = (0, _ToolbarItem.toToolbarItems)(children);
|
|
63
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Squeezer.default, {
|
|
64
|
-
compact: () => this.registry.compact(),
|
|
65
|
-
uncompact: () => this.registry.uncompact(),
|
|
66
|
-
innerMeasure: measure => {
|
|
67
|
-
this.measure = measure;
|
|
68
|
-
},
|
|
69
|
-
children: _ref => {
|
|
70
|
-
let {
|
|
71
|
-
ref
|
|
72
|
-
} = _ref;
|
|
73
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
74
|
-
ref: ref,
|
|
75
|
-
className: (0, _classnames.default)(baseClassName, className),
|
|
76
|
-
...props,
|
|
77
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContext.default.Provider, {
|
|
78
|
-
value: this.registry,
|
|
79
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
|
|
80
|
-
value: this.state.distractionFreeMode,
|
|
81
|
-
children: toolbarItems
|
|
82
|
-
})
|
|
83
|
-
})
|
|
84
|
-
});
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
(0, _defineProperty2.default)(ToolbarClassComponent, "defaultProps", {
|
|
90
|
-
children: null,
|
|
91
|
-
className: null,
|
|
92
|
-
baseClassName: `${_constants.CLS_PREFIX}toolbar`
|
|
93
|
-
});
|
|
94
|
-
const ToolbarBeta = _ref2 => {
|
|
27
|
+
const Toolbar = _ref => {
|
|
95
28
|
let {
|
|
96
29
|
children,
|
|
97
30
|
className,
|
|
98
31
|
baseClassName = `${_constants.CLS_PREFIX}toolbar`,
|
|
99
32
|
...props
|
|
100
|
-
} =
|
|
33
|
+
} = _ref;
|
|
101
34
|
const containerRef = (0, _react.useRef)(null);
|
|
102
35
|
const [isDistractionFreeModeEnabled, setIsDistractionFreeModeEnabled] = (0, _react.useState)(false);
|
|
103
36
|
const distractionFreeModeContextValue = (0, _react.useMemo)(() => ({
|
|
104
37
|
enabled: isDistractionFreeModeEnabled,
|
|
105
38
|
toggle: () => setIsDistractionFreeModeEnabled(current => !current)
|
|
106
39
|
}), [isDistractionFreeModeEnabled]);
|
|
107
|
-
const registry = (0,
|
|
40
|
+
const registry = (0, _RegistryContext.useRegistry)();
|
|
108
41
|
(0, _hooks.useSqueeze)({
|
|
109
42
|
ref: containerRef,
|
|
110
43
|
compact: () => registry.compact(),
|
|
111
44
|
expand: () => registry.expand()
|
|
112
45
|
});
|
|
113
|
-
const toolbarItems = (0, _ToolbarItem.toToolbarItems)(children
|
|
46
|
+
const toolbarItems = (0, _ToolbarItem.toToolbarItems)(children);
|
|
114
47
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
115
48
|
ref: containerRef,
|
|
116
49
|
className: (0, _classnames.default)(baseClassName, className),
|
|
117
50
|
...props,
|
|
118
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
51
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContext.default.Provider, {
|
|
119
52
|
value: registry,
|
|
120
53
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
|
|
121
54
|
value: distractionFreeModeContextValue,
|
|
@@ -124,12 +57,4 @@ const ToolbarBeta = _ref2 => {
|
|
|
124
57
|
})
|
|
125
58
|
});
|
|
126
59
|
};
|
|
127
|
-
const Toolbar = props => {
|
|
128
|
-
const isToolbarBeta = (0, _ToolbarBetaProvider.useToolbarBetaContext)();
|
|
129
|
-
return isToolbarBeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarBeta, {
|
|
130
|
-
...props
|
|
131
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarClassComponent, {
|
|
132
|
-
...props
|
|
133
|
-
});
|
|
134
|
-
};
|
|
135
60
|
var _default = exports.default = Toolbar;
|
|
@@ -5,18 +5,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
8
|
var _react = require("react");
|
|
10
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
10
|
var _constants = require("../../constants");
|
|
12
11
|
var _Dropdown = _interopRequireDefault(require("../Dropdown"));
|
|
13
12
|
var _ToolbarMenu = _interopRequireDefault(require("./ToolbarMenu"));
|
|
14
13
|
var _RegistryContext = _interopRequireWildcard(require("./RegistryContext"));
|
|
15
|
-
var _RegistryContextBeta = _interopRequireWildcard(require("./RegistryContextBeta"));
|
|
16
14
|
var _DistractionFreeModeContext = _interopRequireDefault(require("../DistractionFreeModeContext"));
|
|
17
15
|
var _ToolbarItem = require("./ToolbarItem");
|
|
18
16
|
var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
|
|
19
|
-
var _ToolbarBetaProvider = require("./ToolbarBetaProvider");
|
|
20
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
22
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -27,149 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
27
24
|
* It is used for grouping several toolbar controls together.
|
|
28
25
|
* @since 0.0.57
|
|
29
26
|
*/
|
|
30
|
-
|
|
31
|
-
class ToolbarGroupClassComponent extends _react.Component {
|
|
32
|
-
constructor(props) {
|
|
33
|
-
super(props);
|
|
34
|
-
(0, _defineProperty2.default)(this, "state", {
|
|
35
|
-
compact: false,
|
|
36
|
-
availableInDistractionFreeMode: false,
|
|
37
|
-
distractionFreeMode: {
|
|
38
|
-
enabled: false,
|
|
39
|
-
toggle: () => {
|
|
40
|
-
if (this.props.distractionFreeMode) {
|
|
41
|
-
this.props.distractionFreeMode.toggle();
|
|
42
|
-
this.setState({
|
|
43
|
-
availableInDistractionFreeMode: !this.props.distractionFreeMode.enabled
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
(0, _defineProperty2.default)(this, "registry", void 0);
|
|
50
|
-
(0, _defineProperty2.default)(this, "selfApi", void 0);
|
|
51
|
-
(0, _defineProperty2.default)(this, "childrenApi", void 0);
|
|
52
|
-
this.registry = (0, _RegistryContext.createRegistry)();
|
|
53
|
-
this.selfApi = {
|
|
54
|
-
isCompact: () => this.state.compact,
|
|
55
|
-
setCompact: compact => {
|
|
56
|
-
this.setState({
|
|
57
|
-
compact
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
this.childrenApi = {
|
|
62
|
-
isCompact: one => this.registry.isCompact(one),
|
|
63
|
-
setCompact: compact => {
|
|
64
|
-
if (compact) {
|
|
65
|
-
this.registry.compact();
|
|
66
|
-
} else {
|
|
67
|
-
this.registry.uncompact();
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
static getDerivedStateFromProps(props, state) {
|
|
73
|
-
if (props.distractionFreeMode) {
|
|
74
|
-
return {
|
|
75
|
-
distractionFreeMode: {
|
|
76
|
-
...state.distractionFreeMode,
|
|
77
|
-
enabled: props.distractionFreeMode.enabled
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
return null;
|
|
82
|
-
}
|
|
83
|
-
componentDidMount() {
|
|
84
|
-
const {
|
|
85
|
-
registry
|
|
86
|
-
} = this.props;
|
|
87
|
-
if (registry) {
|
|
88
|
-
registry.register(this.selfApi);
|
|
89
|
-
registry.register(this.childrenApi);
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
componentWillUnmount() {
|
|
93
|
-
const {
|
|
94
|
-
registry
|
|
95
|
-
} = this.props;
|
|
96
|
-
if (registry) {
|
|
97
|
-
registry.unregister(this.selfApi);
|
|
98
|
-
registry.unregister(this.childrenApi);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
render() {
|
|
102
|
-
const {
|
|
103
|
-
baseClassName,
|
|
104
|
-
className,
|
|
105
|
-
title,
|
|
106
|
-
children: childrenProp,
|
|
107
|
-
distractionFreeMode: distractionFreeModeProp,
|
|
108
|
-
registry,
|
|
109
|
-
groupable,
|
|
110
|
-
...props
|
|
111
|
-
} = this.props;
|
|
112
|
-
let {
|
|
113
|
-
children
|
|
114
|
-
} = this.props;
|
|
115
|
-
const {
|
|
116
|
-
compact,
|
|
117
|
-
distractionFreeMode,
|
|
118
|
-
availableInDistractionFreeMode
|
|
119
|
-
} = this.state;
|
|
120
|
-
let hasExpander = _react.Children.toArray(children).some(child => /*#__PURE__*/(0, _react.isValidElement)(child) && child.type === _ToolbarExpander.default);
|
|
121
|
-
if (groupable && compact && _react.Children.count(children) > 1) {
|
|
122
|
-
hasExpander = false;
|
|
123
|
-
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.default, {
|
|
124
|
-
menu: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToolbarMenu.default, {
|
|
125
|
-
onItemClick: () => {},
|
|
126
|
-
children: children
|
|
127
|
-
}),
|
|
128
|
-
children: title
|
|
129
|
-
});
|
|
130
|
-
} else {
|
|
131
|
-
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContext.default.Provider, {
|
|
132
|
-
value: this.registry,
|
|
133
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
|
|
134
|
-
value: distractionFreeMode,
|
|
135
|
-
children: (0, _ToolbarItem.toToolbarItems)(children)
|
|
136
|
-
})
|
|
137
|
-
});
|
|
138
|
-
}
|
|
139
|
-
if (distractionFreeMode.enabled && !availableInDistractionFreeMode) {
|
|
140
|
-
return null;
|
|
141
|
-
}
|
|
142
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
143
|
-
className: (0, _classnames.default)(baseClassName, className, {
|
|
144
|
-
[`${baseClassName}--grow`]: hasExpander || distractionFreeMode.enabled && availableInDistractionFreeMode
|
|
145
|
-
}),
|
|
146
|
-
...props,
|
|
147
|
-
children: children
|
|
148
|
-
});
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
(0, _defineProperty2.default)(ToolbarGroupClassComponent, "defaultProps", {
|
|
152
|
-
registry: undefined,
|
|
153
|
-
distractionFreeMode: undefined
|
|
154
|
-
});
|
|
155
|
-
const ToolbarGroupWrapper = _ref => {
|
|
156
|
-
let {
|
|
157
|
-
groupable = true,
|
|
158
|
-
baseClassName = `${_constants.CLS_PREFIX}toolbar__group`,
|
|
159
|
-
...props
|
|
160
|
-
} = _ref;
|
|
161
|
-
const registry = (0, _react.useContext)(_RegistryContext.default);
|
|
162
|
-
const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
|
|
163
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupClassComponent, {
|
|
164
|
-
groupable: groupable,
|
|
165
|
-
baseClassName: baseClassName,
|
|
166
|
-
...props,
|
|
167
|
-
registry: registry,
|
|
168
|
-
distractionFreeMode: distractionFreeMode
|
|
169
|
-
});
|
|
170
|
-
};
|
|
171
|
-
ToolbarGroupWrapper.displayName = 'ToolbarGroup';
|
|
172
|
-
const ToolbarGroupBeta = _ref2 => {
|
|
27
|
+
const ToolbarGroup = _ref => {
|
|
173
28
|
let {
|
|
174
29
|
baseClassName = `${_constants.CLS_PREFIX}toolbar__group`,
|
|
175
30
|
className,
|
|
@@ -177,9 +32,9 @@ const ToolbarGroupBeta = _ref2 => {
|
|
|
177
32
|
children,
|
|
178
33
|
groupable = true,
|
|
179
34
|
...props
|
|
180
|
-
} =
|
|
181
|
-
const [compact] = (0,
|
|
182
|
-
const registry = (0,
|
|
35
|
+
} = _ref;
|
|
36
|
+
const [compact] = (0, _RegistryContext.useRegistryItem)();
|
|
37
|
+
const registry = (0, _RegistryContext.useRegistry)();
|
|
183
38
|
const [availableInDistractionFreeMode, setAvailableInDistractionFreeMode] = (0, _react.useState)(false);
|
|
184
39
|
const distractionFreeMode = (0, _react.useContext)(_DistractionFreeModeContext.default);
|
|
185
40
|
const distractionFreeModeContextValue = {
|
|
@@ -202,11 +57,11 @@ const ToolbarGroupBeta = _ref2 => {
|
|
|
202
57
|
children: title
|
|
203
58
|
});
|
|
204
59
|
} else {
|
|
205
|
-
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
60
|
+
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_RegistryContext.default.Provider, {
|
|
206
61
|
value: registry,
|
|
207
62
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DistractionFreeModeContext.default.Provider, {
|
|
208
63
|
value: distractionFreeModeContextValue,
|
|
209
|
-
children: (0, _ToolbarItem.toToolbarItems)(children
|
|
64
|
+
children: (0, _ToolbarItem.toToolbarItems)(children)
|
|
210
65
|
})
|
|
211
66
|
});
|
|
212
67
|
}
|
|
@@ -221,12 +76,4 @@ const ToolbarGroupBeta = _ref2 => {
|
|
|
221
76
|
children: children
|
|
222
77
|
});
|
|
223
78
|
};
|
|
224
|
-
const ToolbarGroup = props => {
|
|
225
|
-
const isToolbarBeta = (0, _ToolbarBetaProvider.useToolbarBetaContext)();
|
|
226
|
-
return isToolbarBeta ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupBeta, {
|
|
227
|
-
...props
|
|
228
|
-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarGroupWrapper, {
|
|
229
|
-
...props
|
|
230
|
-
});
|
|
231
|
-
};
|
|
232
79
|
var _default = exports.default = ToolbarGroup;
|
|
@@ -5,81 +5,37 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.toToolbarItems = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
8
|
var _react = require("react");
|
|
10
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
10
|
var _constants = require("../../constants");
|
|
12
11
|
var _ResponsiveContext = _interopRequireDefault(require("../ResponsiveContext"));
|
|
13
|
-
var _RegistryContext = _interopRequireDefault(require("./RegistryContext"));
|
|
14
12
|
var _ToolbarGroup = _interopRequireDefault(require("./ToolbarGroup"));
|
|
15
13
|
var _ToolbarExpander = _interopRequireDefault(require("./ToolbarExpander"));
|
|
16
|
-
var
|
|
14
|
+
var _RegistryContext = require("./RegistryContext");
|
|
17
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
16
|
// Copyright 1999-2023. Plesk International GmbH. All rights reserved.
|
|
19
17
|
|
|
20
|
-
|
|
21
|
-
constructor() {
|
|
22
|
-
super(...arguments);
|
|
23
|
-
(0, _defineProperty2.default)(this, "state", {
|
|
24
|
-
compact: false
|
|
25
|
-
});
|
|
26
|
-
(0, _defineProperty2.default)(this, "context", void 0);
|
|
27
|
-
}
|
|
28
|
-
componentDidMount() {
|
|
29
|
-
const registry = this.context;
|
|
30
|
-
registry.register(this);
|
|
31
|
-
}
|
|
32
|
-
componentWillUnmount() {
|
|
33
|
-
const registry = this.context;
|
|
34
|
-
registry.unregister(this);
|
|
35
|
-
}
|
|
36
|
-
isCompact() {
|
|
37
|
-
return this.state.compact;
|
|
38
|
-
}
|
|
39
|
-
setCompact(compact) {
|
|
40
|
-
this.setState({
|
|
41
|
-
compact
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
render() {
|
|
45
|
-
const {
|
|
46
|
-
children
|
|
47
|
-
} = this.props;
|
|
48
|
-
const {
|
|
49
|
-
compact
|
|
50
|
-
} = this.state;
|
|
51
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
|
|
52
|
-
value: compact,
|
|
53
|
-
children: children
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
ToolbarItem.contextType = _RegistryContext.default;
|
|
58
|
-
const ToolbarItemBeta = _ref => {
|
|
18
|
+
const ToolbarItem = _ref => {
|
|
59
19
|
let {
|
|
60
20
|
children
|
|
61
21
|
} = _ref;
|
|
62
|
-
const [isCompact] = (0,
|
|
22
|
+
const [isCompact] = (0, _RegistryContext.useRegistryItem)();
|
|
63
23
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveContext.default.Provider, {
|
|
64
24
|
value: isCompact,
|
|
65
25
|
children: children
|
|
66
26
|
});
|
|
67
27
|
};
|
|
68
|
-
const toToolbarItems =
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
children: /*#__PURE__*/(0, _react.cloneElement)(child, {
|
|
80
|
-
className: (0, _classnames.default)(child.props.className, `${_constants.CLS_PREFIX}toolbar__group-item`)
|
|
81
|
-
})
|
|
82
|
-
});
|
|
28
|
+
const toToolbarItems = children => _react.Children.map(children, child => {
|
|
29
|
+
if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
|
|
30
|
+
return child;
|
|
31
|
+
}
|
|
32
|
+
if (child.type === _ToolbarGroup.default || child.type === _ToolbarExpander.default) {
|
|
33
|
+
return child;
|
|
34
|
+
}
|
|
35
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ToolbarItem, {
|
|
36
|
+
children: /*#__PURE__*/(0, _react.cloneElement)(child, {
|
|
37
|
+
className: (0, _classnames.default)(child.props.className, `${_constants.CLS_PREFIX}toolbar__group-item`)
|
|
38
|
+
})
|
|
83
39
|
});
|
|
84
|
-
};
|
|
40
|
+
});
|
|
85
41
|
exports.toToolbarItems = toToolbarItems;
|
package/cjs/index.js
CHANGED