@gravity-ui/dashkit 3.1.0-alpha.1 → 3.1.0
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/CHANGELOG.md +7 -0
- package/build/cjs/components/DashKitView/DashKitView.js +2 -2
- package/build/cjs/components/GridItem/GridItem.js +4 -2
- package/build/cjs/components/GridLayout/GridLayout.js +1 -1
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +1 -0
- package/build/cjs/components/OverlayControls/OverlayControls.js +1 -1
- package/build/cjs/hocs/withContext.d.ts +0 -2
- package/build/cjs/hocs/withContext.js +2 -5
- package/build/esm/components/DashKitView/DashKitView.js +2 -2
- package/build/esm/components/GridItem/GridItem.js +4 -2
- package/build/esm/components/GridLayout/GridLayout.js +1 -1
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +1 -0
- package/build/esm/components/OverlayControls/OverlayControls.js +1 -1
- package/build/esm/hocs/withContext.d.ts +0 -2
- package/build/esm/hocs/withContext.js +2 -5
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [3.1.0](https://github.com/gravity-ui/dashkit/compare/v3.0.2...v3.1.0) (2022-10-27)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* add experimental props for use memo context ([#21](https://github.com/gravity-ui/dashkit/issues/21)) ([b1fd5dd](https://github.com/gravity-ui/dashkit/commit/b1fd5ddfb212e4c1402244184f5e436896ef24d6))
|
|
9
|
+
|
|
3
10
|
## [3.0.2](https://github.com/gravity-ui/dashkit/compare/v3.0.1...v3.0.2) (2022-10-04)
|
|
4
11
|
|
|
5
12
|
|
|
@@ -9,10 +9,10 @@ const MobileLayout_1 = tslib_1.__importDefault(require("../MobileLayout/MobileLa
|
|
|
9
9
|
const withContext_1 = require("../../hocs/withContext");
|
|
10
10
|
const useCalcLayout_1 = require("../../hooks/useCalcLayout");
|
|
11
11
|
const b = (0, bem_cn_lite_1.default)('dashkit');
|
|
12
|
-
function DashKitView() {
|
|
12
|
+
function DashKitView(props) {
|
|
13
13
|
const context = react_1.default.useContext(DashKitContext_1.DashKitContext);
|
|
14
14
|
const { registerManager, forwardedMetaRef } = context;
|
|
15
|
-
return (react_1.default.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (react_1.default.createElement(MobileLayout_1.default, null)) : (react_1.default.createElement(GridLayout_1.default, { ref: forwardedMetaRef }))));
|
|
15
|
+
return (react_1.default.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (react_1.default.createElement(MobileLayout_1.default, null)) : (react_1.default.createElement(GridLayout_1.default, { ref: forwardedMetaRef, overlayControls: props.overlayControls }))));
|
|
16
16
|
}
|
|
17
17
|
const DashKitViewWithContext = (0, withContext_1.withContext)(DashKitView);
|
|
18
18
|
const DashKitViewWithMemoContext = (0, withContext_1.withMemoContext)(DashKitView);
|
|
@@ -10,7 +10,8 @@ const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/Ov
|
|
|
10
10
|
const b = (0, bem_cn_lite_1.default)('dashkit-grid-item');
|
|
11
11
|
class GridItem extends react_1.default.PureComponent {
|
|
12
12
|
renderOverlay() {
|
|
13
|
-
const {
|
|
13
|
+
const { overlayControls } = this.props;
|
|
14
|
+
const { editMode } = this.context;
|
|
14
15
|
if (!editMode || this.props.item.data._editActive) {
|
|
15
16
|
return null;
|
|
16
17
|
}
|
|
@@ -18,7 +19,7 @@ class GridItem extends react_1.default.PureComponent {
|
|
|
18
19
|
const controls = overlayControls && overlayControls[item.type];
|
|
19
20
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
20
21
|
react_1.default.createElement("div", { className: b('overlay') }),
|
|
21
|
-
react_1.default.createElement(OverlayControls_1.default, { configItem: item, items: controls })));
|
|
22
|
+
react_1.default.createElement(OverlayControls_1.default, { configItem: item, items: controls, overlayControls: overlayControls })));
|
|
22
23
|
}
|
|
23
24
|
render() {
|
|
24
25
|
// из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
|
|
@@ -52,6 +53,7 @@ GridItem.propTypes = {
|
|
|
52
53
|
item: prop_types_1.default.object,
|
|
53
54
|
isDragging: prop_types_1.default.bool,
|
|
54
55
|
layout: prop_types_1.default.array,
|
|
56
|
+
overlayControls: prop_types_1.default.object,
|
|
55
57
|
forwardedPluginRef: prop_types_1.default.any,
|
|
56
58
|
// from react-grid-layout:
|
|
57
59
|
children: prop_types_1.default.node,
|
|
@@ -81,7 +81,7 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
81
81
|
: null)), config.items.map((item, i) => {
|
|
82
82
|
return (react_1.default.createElement(GridItem_1.default, { ref: (pluginRef) => {
|
|
83
83
|
this.pluginsRefs[i] = pluginRef;
|
|
84
|
-
}, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
|
|
84
|
+
}, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
|
|
85
85
|
})));
|
|
86
86
|
}
|
|
87
87
|
}
|
|
@@ -33,6 +33,7 @@ interface OverlayControlsDefaultProps {
|
|
|
33
33
|
interface OverlayControlsProps extends OverlayControlsDefaultProps {
|
|
34
34
|
configItem: ConfigItem;
|
|
35
35
|
items?: OverlayControlItem[];
|
|
36
|
+
overlayControls?: Record<string, OverlayControlItem[]>;
|
|
36
37
|
}
|
|
37
38
|
declare class OverlayControls extends React.Component<OverlayControlsProps> {
|
|
38
39
|
static contextType: React.Context<any>;
|
|
@@ -35,7 +35,7 @@ class OverlayControls extends react_1.default.Component {
|
|
|
35
35
|
// выбираем только items-ы у которых проставлено поле `allWidgetsControls:true`
|
|
36
36
|
// те контролы, которые будут показываться слева от меню
|
|
37
37
|
let controls = [];
|
|
38
|
-
for (const controlItem of Object.values(this.
|
|
38
|
+
for (const controlItem of Object.values(this.props.overlayControls || {})) {
|
|
39
39
|
controls = controls.concat((controlItem.filter((item) => {
|
|
40
40
|
var _a;
|
|
41
41
|
// если тип виджета-плагина в списке исключаемых, то не показываем такой контрол
|
|
@@ -26,7 +26,6 @@ export function withContext(Component: any): {
|
|
|
26
26
|
getLayout: () => any;
|
|
27
27
|
config: any;
|
|
28
28
|
context: any;
|
|
29
|
-
overlayControls: any;
|
|
30
29
|
noOverlay: any;
|
|
31
30
|
defaultGlobalParams: any;
|
|
32
31
|
globalParams: any;
|
|
@@ -98,7 +97,6 @@ export function withContext(Component: any): {
|
|
|
98
97
|
getLayout: () => any;
|
|
99
98
|
config: any;
|
|
100
99
|
context: any;
|
|
101
|
-
overlayControls: any;
|
|
102
100
|
noOverlay: any;
|
|
103
101
|
defaultGlobalParams: any;
|
|
104
102
|
globalParams: any;
|
|
@@ -154,7 +154,6 @@ function withContext(Component) {
|
|
|
154
154
|
getLayout: this._getLayout,
|
|
155
155
|
config: this.props.config,
|
|
156
156
|
context: this.props.context,
|
|
157
|
-
overlayControls: this.props.overlayControls,
|
|
158
157
|
noOverlay: this.props.noOverlay,
|
|
159
158
|
defaultGlobalParams: this.props.globalParams,
|
|
160
159
|
globalParams: this.props.globalParams,
|
|
@@ -177,7 +176,7 @@ function withContext(Component) {
|
|
|
177
176
|
}
|
|
178
177
|
render() {
|
|
179
178
|
return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: this._contextValue },
|
|
180
|
-
react_1.default.createElement(Component,
|
|
179
|
+
react_1.default.createElement(Component, { overlayControls: this.props.overlayControls })));
|
|
181
180
|
}
|
|
182
181
|
},
|
|
183
182
|
_a.propTypes = {
|
|
@@ -332,7 +331,6 @@ function useMemoStateContext(props) {
|
|
|
332
331
|
getLayout,
|
|
333
332
|
config: props.config,
|
|
334
333
|
context: props.context,
|
|
335
|
-
overlayControls: props.overlayControls,
|
|
336
334
|
noOverlay: props.noOverlay,
|
|
337
335
|
defaultGlobalParams: props.globalParams,
|
|
338
336
|
globalParams: props.globalParams,
|
|
@@ -355,7 +353,6 @@ function useMemoStateContext(props) {
|
|
|
355
353
|
getLayout,
|
|
356
354
|
props.config,
|
|
357
355
|
props.context,
|
|
358
|
-
props.overlayControls,
|
|
359
356
|
props.noOverlay,
|
|
360
357
|
props.globalParams,
|
|
361
358
|
props.editMode,
|
|
@@ -379,7 +376,7 @@ function withMemoContext(Component) {
|
|
|
379
376
|
const WithMemoContext = (props) => {
|
|
380
377
|
const contextValue = useMemoStateContext(props);
|
|
381
378
|
return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: contextValue },
|
|
382
|
-
react_1.default.createElement(Component,
|
|
379
|
+
react_1.default.createElement(Component, { overlayControls: props.overlayControls })));
|
|
383
380
|
};
|
|
384
381
|
WithMemoContext.displayName = `withMemoContext(${Component.displayName || Component.name || 'Component'}`;
|
|
385
382
|
return WithMemoContext;
|
|
@@ -7,10 +7,10 @@ import { withContext, withMemoContext } from '../../hocs/withContext';
|
|
|
7
7
|
import { useCalcPropsLayout } from '../../hooks/useCalcLayout';
|
|
8
8
|
import './DashKitView.css';
|
|
9
9
|
const b = block('dashkit');
|
|
10
|
-
function DashKitView() {
|
|
10
|
+
function DashKitView(props) {
|
|
11
11
|
const context = React.useContext(DashKitContext);
|
|
12
12
|
const { registerManager, forwardedMetaRef } = context;
|
|
13
|
-
return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef }))));
|
|
13
|
+
return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef, overlayControls: props.overlayControls }))));
|
|
14
14
|
}
|
|
15
15
|
const DashKitViewWithContext = withContext(DashKitView);
|
|
16
16
|
const DashKitViewWithMemoContext = withMemoContext(DashKitView);
|
|
@@ -8,7 +8,8 @@ import OverlayControls from '../OverlayControls/OverlayControls';
|
|
|
8
8
|
const b = block('dashkit-grid-item');
|
|
9
9
|
class GridItem extends React.PureComponent {
|
|
10
10
|
renderOverlay() {
|
|
11
|
-
const {
|
|
11
|
+
const { overlayControls } = this.props;
|
|
12
|
+
const { editMode } = this.context;
|
|
12
13
|
if (!editMode || this.props.item.data._editActive) {
|
|
13
14
|
return null;
|
|
14
15
|
}
|
|
@@ -16,7 +17,7 @@ class GridItem extends React.PureComponent {
|
|
|
16
17
|
const controls = overlayControls && overlayControls[item.type];
|
|
17
18
|
return (React.createElement(React.Fragment, null,
|
|
18
19
|
React.createElement("div", { className: b('overlay') }),
|
|
19
|
-
React.createElement(OverlayControls, { configItem: item, items: controls })));
|
|
20
|
+
React.createElement(OverlayControls, { configItem: item, items: controls, overlayControls: overlayControls })));
|
|
20
21
|
}
|
|
21
22
|
render() {
|
|
22
23
|
// из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
|
|
@@ -50,6 +51,7 @@ GridItem.propTypes = {
|
|
|
50
51
|
item: PropTypes.object,
|
|
51
52
|
isDragging: PropTypes.bool,
|
|
52
53
|
layout: PropTypes.array,
|
|
54
|
+
overlayControls: PropTypes.object,
|
|
53
55
|
forwardedPluginRef: PropTypes.any,
|
|
54
56
|
// from react-grid-layout:
|
|
55
57
|
children: PropTypes.node,
|
|
@@ -78,7 +78,7 @@ export default class GridLayout extends React.PureComponent {
|
|
|
78
78
|
: null)), config.items.map((item, i) => {
|
|
79
79
|
return (React.createElement(GridItem, { ref: (pluginRef) => {
|
|
80
80
|
this.pluginsRefs[i] = pluginRef;
|
|
81
|
-
}, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
|
|
81
|
+
}, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
|
|
82
82
|
})));
|
|
83
83
|
}
|
|
84
84
|
}
|
|
@@ -34,6 +34,7 @@ interface OverlayControlsDefaultProps {
|
|
|
34
34
|
interface OverlayControlsProps extends OverlayControlsDefaultProps {
|
|
35
35
|
configItem: ConfigItem;
|
|
36
36
|
items?: OverlayControlItem[];
|
|
37
|
+
overlayControls?: Record<string, OverlayControlItem[]>;
|
|
37
38
|
}
|
|
38
39
|
declare class OverlayControls extends React.Component<OverlayControlsProps> {
|
|
39
40
|
static contextType: React.Context<any>;
|
|
@@ -32,7 +32,7 @@ class OverlayControls extends React.Component {
|
|
|
32
32
|
// выбираем только items-ы у которых проставлено поле `allWidgetsControls:true`
|
|
33
33
|
// те контролы, которые будут показываться слева от меню
|
|
34
34
|
let controls = [];
|
|
35
|
-
for (const controlItem of Object.values(this.
|
|
35
|
+
for (const controlItem of Object.values(this.props.overlayControls || {})) {
|
|
36
36
|
controls = controls.concat((controlItem.filter((item) => {
|
|
37
37
|
var _a;
|
|
38
38
|
// если тип виджета-плагина в списке исключаемых, то не показываем такой контрол
|
|
@@ -26,7 +26,6 @@ export function withContext(Component: any): {
|
|
|
26
26
|
getLayout: () => any;
|
|
27
27
|
config: any;
|
|
28
28
|
context: any;
|
|
29
|
-
overlayControls: any;
|
|
30
29
|
noOverlay: any;
|
|
31
30
|
defaultGlobalParams: any;
|
|
32
31
|
globalParams: any;
|
|
@@ -98,7 +97,6 @@ export function withContext(Component: any): {
|
|
|
98
97
|
getLayout: () => any;
|
|
99
98
|
config: any;
|
|
100
99
|
context: any;
|
|
101
|
-
overlayControls: any;
|
|
102
100
|
noOverlay: any;
|
|
103
101
|
defaultGlobalParams: any;
|
|
104
102
|
globalParams: any;
|
|
@@ -150,7 +150,6 @@ export function withContext(Component) {
|
|
|
150
150
|
getLayout: this._getLayout,
|
|
151
151
|
config: this.props.config,
|
|
152
152
|
context: this.props.context,
|
|
153
|
-
overlayControls: this.props.overlayControls,
|
|
154
153
|
noOverlay: this.props.noOverlay,
|
|
155
154
|
defaultGlobalParams: this.props.globalParams,
|
|
156
155
|
globalParams: this.props.globalParams,
|
|
@@ -173,7 +172,7 @@ export function withContext(Component) {
|
|
|
173
172
|
}
|
|
174
173
|
render() {
|
|
175
174
|
return (React.createElement(DashKitContext.Provider, { value: this._contextValue },
|
|
176
|
-
React.createElement(Component,
|
|
175
|
+
React.createElement(Component, { overlayControls: this.props.overlayControls })));
|
|
177
176
|
}
|
|
178
177
|
},
|
|
179
178
|
_a.propTypes = {
|
|
@@ -327,7 +326,6 @@ function useMemoStateContext(props) {
|
|
|
327
326
|
getLayout,
|
|
328
327
|
config: props.config,
|
|
329
328
|
context: props.context,
|
|
330
|
-
overlayControls: props.overlayControls,
|
|
331
329
|
noOverlay: props.noOverlay,
|
|
332
330
|
defaultGlobalParams: props.globalParams,
|
|
333
331
|
globalParams: props.globalParams,
|
|
@@ -350,7 +348,6 @@ function useMemoStateContext(props) {
|
|
|
350
348
|
getLayout,
|
|
351
349
|
props.config,
|
|
352
350
|
props.context,
|
|
353
|
-
props.overlayControls,
|
|
354
351
|
props.noOverlay,
|
|
355
352
|
props.globalParams,
|
|
356
353
|
props.editMode,
|
|
@@ -374,7 +371,7 @@ export function withMemoContext(Component) {
|
|
|
374
371
|
const WithMemoContext = (props) => {
|
|
375
372
|
const contextValue = useMemoStateContext(props);
|
|
376
373
|
return (React.createElement(DashKitContext.Provider, { value: contextValue },
|
|
377
|
-
React.createElement(Component,
|
|
374
|
+
React.createElement(Component, { overlayControls: props.overlayControls })));
|
|
378
375
|
};
|
|
379
376
|
WithMemoContext.displayName = `withMemoContext(${Component.displayName || Component.name || 'Component'}`;
|
|
380
377
|
return WithMemoContext;
|