@gravity-ui/dashkit 6.5.0-beta.1 → 6.5.1
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/build/cjs/components/DashKit/DashKit.d.ts +0 -13
- package/build/cjs/components/DashKit/DashKit.js +0 -10
- package/build/cjs/components/GridLayout/GridLayout.d.ts +0 -1
- package/build/cjs/components/GridLayout/GridLayout.js +2 -6
- package/build/cjs/components/OverlayControls/OverlayControls.js +1 -1
- package/build/cjs/constants/common.d.ts +1 -0
- package/build/cjs/constants/common.js +2 -1
- package/build/cjs/hocs/withContext.js +1 -11
- package/build/esm/components/DashKit/DashKit.d.ts +0 -13
- package/build/esm/components/DashKit/DashKit.js +0 -10
- package/build/esm/components/GridLayout/GridLayout.d.ts +0 -1
- package/build/esm/components/GridLayout/GridLayout.js +2 -6
- package/build/esm/components/OverlayControls/OverlayControls.js +2 -2
- package/build/esm/constants/common.d.ts +1 -0
- package/build/esm/constants/common.js +1 -0
- package/build/esm/hocs/withContext.js +1 -11
- package/package.json +1 -1
|
@@ -21,10 +21,6 @@ interface DashKitDefaultProps {
|
|
|
21
21
|
settings: SettingsProps;
|
|
22
22
|
context: ContextProps;
|
|
23
23
|
noOverlay: boolean;
|
|
24
|
-
hideWidgetOverlayControl: (args: {
|
|
25
|
-
id: string;
|
|
26
|
-
controlId: string;
|
|
27
|
-
}) => void;
|
|
28
24
|
}
|
|
29
25
|
export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
|
|
30
26
|
}
|
|
@@ -50,14 +46,5 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
|
|
|
50
46
|
metaRef: React.RefObject<GridLayout>;
|
|
51
47
|
render(): JSX.Element;
|
|
52
48
|
getItemsMeta(): any;
|
|
53
|
-
/**
|
|
54
|
-
* public method for hiding overlayControl item by id
|
|
55
|
-
* for ex. can be triggered after data render
|
|
56
|
-
* @param args
|
|
57
|
-
*/
|
|
58
|
-
hideWidgetOverlayControl(args: {
|
|
59
|
-
id: string;
|
|
60
|
-
controlId: string;
|
|
61
|
-
}): any;
|
|
62
49
|
}
|
|
63
50
|
export {};
|
|
@@ -54,21 +54,11 @@ class DashKit extends react_1.default.PureComponent {
|
|
|
54
54
|
var _a;
|
|
55
55
|
return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
|
|
56
56
|
}
|
|
57
|
-
/**
|
|
58
|
-
* public method for hiding overlayControl item by id
|
|
59
|
-
* for ex. can be triggered after data render
|
|
60
|
-
* @param args
|
|
61
|
-
*/
|
|
62
|
-
hideWidgetOverlayControl(args) {
|
|
63
|
-
var _a;
|
|
64
|
-
return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.hideWidgetOverlayControl(args);
|
|
65
|
-
}
|
|
66
57
|
}
|
|
67
58
|
exports.DashKit = DashKit;
|
|
68
59
|
DashKit.defaultProps = {
|
|
69
60
|
onItemEdit: noop_1.default,
|
|
70
61
|
onChange: noop_1.default,
|
|
71
|
-
hideWidgetOverlayControl: noop_1.default,
|
|
72
62
|
defaultGlobalParams: {},
|
|
73
63
|
globalParams: {},
|
|
74
64
|
itemsStateAndParams: {},
|
|
@@ -18,7 +18,6 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
18
18
|
adjustedWidgetLayout: any;
|
|
19
19
|
}) => void;
|
|
20
20
|
getItemsMeta: () => any;
|
|
21
|
-
hideWidgetOverlayControl: (args: any) => any;
|
|
22
21
|
reloadItems(): void;
|
|
23
22
|
_onStart: () => void;
|
|
24
23
|
_onStop: (newLayout: any) => void;
|
|
@@ -5,6 +5,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
|
|
|
5
5
|
const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
|
|
6
6
|
const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
|
|
7
7
|
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
8
|
+
const constants_1 = require("../../constants");
|
|
8
9
|
const Layout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.default); // eslint-disable-line new-cap
|
|
9
10
|
class GridLayout extends react_1.default.PureComponent {
|
|
10
11
|
constructor(props, context) {
|
|
@@ -30,11 +31,6 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
30
31
|
const { getItemsMeta } = this.context;
|
|
31
32
|
return getItemsMeta(this.pluginsRefs);
|
|
32
33
|
};
|
|
33
|
-
this.hideWidgetOverlayControl = (args) => {
|
|
34
|
-
const { hideWidgetOverlayControl } = this.context;
|
|
35
|
-
const plugin = this.pluginsRefs.find((item) => item.props.id);
|
|
36
|
-
return hideWidgetOverlayControl(Object.assign(Object.assign({}, args), { plugin }));
|
|
37
|
-
};
|
|
38
34
|
this._onStart = () => {
|
|
39
35
|
this.setState({ isDragging: true });
|
|
40
36
|
};
|
|
@@ -80,7 +76,7 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
80
76
|
this.pluginsRefs.length = config.items.length;
|
|
81
77
|
return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
|
|
82
78
|
? { draggableHandle: `.${draggableHandleClassName}` }
|
|
83
|
-
: null)), config.items.map((item, i) => {
|
|
79
|
+
: null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
|
|
84
80
|
return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
|
|
85
81
|
this.pluginsRefs[i] = pluginRef;
|
|
86
82
|
}, 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 }));
|
|
@@ -12,7 +12,7 @@ const DotsIcon_1 = require("../../icons/DotsIcon");
|
|
|
12
12
|
const CogIcon_1 = require("../../icons/CogIcon");
|
|
13
13
|
const CloseIcon_1 = require("../../icons/CloseIcon");
|
|
14
14
|
const cn_1 = require("../../utils/cn");
|
|
15
|
-
const b = (0, cn_1.cn)(
|
|
15
|
+
const b = (0, cn_1.cn)(constants_1.OVERLAY_CONTROLS_CLASS_NAME);
|
|
16
16
|
var OverlayControlsPosition;
|
|
17
17
|
(function (OverlayControlsPosition) {
|
|
18
18
|
OverlayControlsPosition["TopRight"] = "top_right";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
|
|
2
2
|
export declare const DEFAULT_NAMESPACE = "default";
|
|
3
|
+
export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
|
|
3
4
|
export declare const MenuItems: {
|
|
4
5
|
readonly Copy: "copy";
|
|
5
6
|
readonly Delete: "delete";
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.MenuItems = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
|
|
3
|
+
exports.MenuItems = exports.OVERLAY_CONTROLS_CLASS_NAME = exports.DEFAULT_NAMESPACE = exports.COPIED_WIDGET_STORE_KEY = void 0;
|
|
4
4
|
exports.COPIED_WIDGET_STORE_KEY = 'dashCopiedItem';
|
|
5
5
|
exports.DEFAULT_NAMESPACE = 'default';
|
|
6
|
+
exports.OVERLAY_CONTROLS_CLASS_NAME = 'dashkit-overlay-controls';
|
|
6
7
|
exports.MenuItems = {
|
|
7
8
|
Copy: 'copy',
|
|
8
9
|
Delete: 'delete',
|
|
@@ -15,7 +15,6 @@ function useMemoStateContext(props) {
|
|
|
15
15
|
// (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
|
|
16
16
|
const originalLayouts = react_1.default.useRef({});
|
|
17
17
|
const adjustedLayouts = react_1.default.useRef({});
|
|
18
|
-
const [filteredOverlayControls, setFilteredOverlayControls] = react_1.default.useState(props.overlayControls || []);
|
|
19
18
|
// TODO: need move originalLayouts, adjustedLayouts to state
|
|
20
19
|
const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
|
|
21
20
|
const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
|
|
@@ -111,10 +110,6 @@ function useMemoStateContext(props) {
|
|
|
111
110
|
})
|
|
112
111
|
.filter(Boolean);
|
|
113
112
|
}, []);
|
|
114
|
-
const hideWidgetOverlayControl = react_1.default.useCallback((args) => {
|
|
115
|
-
const newOverlayControls = props.overlayControls.allWidgetsControls.filter((item) => item.id !== args.controlId);
|
|
116
|
-
setFilteredOverlayControls(Object.assign(Object.assign({}, props.overlayControls), { allWidgetsControls: newOverlayControls }));
|
|
117
|
-
}, [props.overlayControls]);
|
|
118
113
|
const resultLayout = react_1.default.useMemo(() => {
|
|
119
114
|
return props.layout.map((item) => {
|
|
120
115
|
if (item.i in adjustedLayouts.current) {
|
|
@@ -145,8 +140,6 @@ function useMemoStateContext(props) {
|
|
|
145
140
|
editItem: props.onItemEdit,
|
|
146
141
|
layoutChange: onLayoutChange,
|
|
147
142
|
getItemsMeta,
|
|
148
|
-
hideWidgetOverlayControl,
|
|
149
|
-
filteredOverlayControls,
|
|
150
143
|
reloadItems,
|
|
151
144
|
memorizeOriginalLayout,
|
|
152
145
|
revertToOriginalLayout,
|
|
@@ -168,8 +161,6 @@ function useMemoStateContext(props) {
|
|
|
168
161
|
props.onItemEdit,
|
|
169
162
|
onLayoutChange,
|
|
170
163
|
getItemsMeta,
|
|
171
|
-
hideWidgetOverlayControl,
|
|
172
|
-
filteredOverlayControls,
|
|
173
164
|
reloadItems,
|
|
174
165
|
memorizeOriginalLayout,
|
|
175
166
|
revertToOriginalLayout,
|
|
@@ -180,9 +171,8 @@ function useMemoStateContext(props) {
|
|
|
180
171
|
function withContext(Component) {
|
|
181
172
|
const WithContext = (props) => {
|
|
182
173
|
const contextValue = useMemoStateContext(props);
|
|
183
|
-
const overlayControls = contextValue.filteredOverlayControls;
|
|
184
174
|
return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: contextValue },
|
|
185
|
-
react_1.default.createElement(Component, { overlayControls: overlayControls })));
|
|
175
|
+
react_1.default.createElement(Component, { overlayControls: props.overlayControls })));
|
|
186
176
|
};
|
|
187
177
|
WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
|
|
188
178
|
return WithContext;
|
|
@@ -21,10 +21,6 @@ interface DashKitDefaultProps {
|
|
|
21
21
|
settings: SettingsProps;
|
|
22
22
|
context: ContextProps;
|
|
23
23
|
noOverlay: boolean;
|
|
24
|
-
hideWidgetOverlayControl: (args: {
|
|
25
|
-
id: string;
|
|
26
|
-
controlId: string;
|
|
27
|
-
}) => void;
|
|
28
24
|
}
|
|
29
25
|
export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
|
|
30
26
|
}
|
|
@@ -50,14 +46,5 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
|
|
|
50
46
|
metaRef: React.RefObject<GridLayout>;
|
|
51
47
|
render(): JSX.Element;
|
|
52
48
|
getItemsMeta(): any;
|
|
53
|
-
/**
|
|
54
|
-
* public method for hiding overlayControl item by id
|
|
55
|
-
* for ex. can be triggered after data render
|
|
56
|
-
* @param args
|
|
57
|
-
*/
|
|
58
|
-
hideWidgetOverlayControl(args: {
|
|
59
|
-
id: string;
|
|
60
|
-
controlId: string;
|
|
61
|
-
}): any;
|
|
62
49
|
}
|
|
63
50
|
export {};
|
|
@@ -50,20 +50,10 @@ export class DashKit extends React.PureComponent {
|
|
|
50
50
|
var _a;
|
|
51
51
|
return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
|
|
52
52
|
}
|
|
53
|
-
/**
|
|
54
|
-
* public method for hiding overlayControl item by id
|
|
55
|
-
* for ex. can be triggered after data render
|
|
56
|
-
* @param args
|
|
57
|
-
*/
|
|
58
|
-
hideWidgetOverlayControl(args) {
|
|
59
|
-
var _a;
|
|
60
|
-
return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.hideWidgetOverlayControl(args);
|
|
61
|
-
}
|
|
62
53
|
}
|
|
63
54
|
DashKit.defaultProps = {
|
|
64
55
|
onItemEdit: noop,
|
|
65
56
|
onChange: noop,
|
|
66
|
-
hideWidgetOverlayControl: noop,
|
|
67
57
|
defaultGlobalParams: {},
|
|
68
58
|
globalParams: {},
|
|
69
59
|
itemsStateAndParams: {},
|
|
@@ -18,7 +18,6 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
18
18
|
adjustedWidgetLayout: any;
|
|
19
19
|
}) => void;
|
|
20
20
|
getItemsMeta: () => any;
|
|
21
|
-
hideWidgetOverlayControl: (args: any) => any;
|
|
22
21
|
reloadItems(): void;
|
|
23
22
|
_onStart: () => void;
|
|
24
23
|
_onStop: (newLayout: any) => void;
|
|
@@ -2,6 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import ReactGridLayout, { WidthProvider } from 'react-grid-layout';
|
|
3
3
|
import GridItem from '../GridItem/GridItem';
|
|
4
4
|
import { DashKitContext } from '../../context/DashKitContext';
|
|
5
|
+
import { OVERLAY_CONTROLS_CLASS_NAME } from '../../constants';
|
|
5
6
|
const Layout = WidthProvider(ReactGridLayout); // eslint-disable-line new-cap
|
|
6
7
|
export default class GridLayout extends React.PureComponent {
|
|
7
8
|
constructor(props, context) {
|
|
@@ -27,11 +28,6 @@ export default class GridLayout extends React.PureComponent {
|
|
|
27
28
|
const { getItemsMeta } = this.context;
|
|
28
29
|
return getItemsMeta(this.pluginsRefs);
|
|
29
30
|
};
|
|
30
|
-
this.hideWidgetOverlayControl = (args) => {
|
|
31
|
-
const { hideWidgetOverlayControl } = this.context;
|
|
32
|
-
const plugin = this.pluginsRefs.find((item) => item.props.id);
|
|
33
|
-
return hideWidgetOverlayControl(Object.assign(Object.assign({}, args), { plugin }));
|
|
34
|
-
};
|
|
35
31
|
this._onStart = () => {
|
|
36
32
|
this.setState({ isDragging: true });
|
|
37
33
|
};
|
|
@@ -77,7 +73,7 @@ export default class GridLayout extends React.PureComponent {
|
|
|
77
73
|
this.pluginsRefs.length = config.items.length;
|
|
78
74
|
return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
|
|
79
75
|
? { draggableHandle: `.${draggableHandleClassName}` }
|
|
80
|
-
: null)), config.items.map((item, i) => {
|
|
76
|
+
: null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
|
|
81
77
|
return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
|
|
82
78
|
this.pluginsRefs[i] = pluginRef;
|
|
83
79
|
}, 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 }));
|
|
@@ -3,13 +3,13 @@ import i18n from '../../i18n';
|
|
|
3
3
|
import noop from 'lodash/noop';
|
|
4
4
|
import { DashKitContext } from '../../context/DashKitContext';
|
|
5
5
|
import { Icon, DropdownMenu, Button, } from '@gravity-ui/uikit';
|
|
6
|
-
import { COPIED_WIDGET_STORE_KEY, MenuItems } from '../../constants';
|
|
6
|
+
import { COPIED_WIDGET_STORE_KEY, OVERLAY_CONTROLS_CLASS_NAME, MenuItems } from '../../constants';
|
|
7
7
|
import { DotsIcon } from '../../icons/DotsIcon';
|
|
8
8
|
import { CogIcon } from '../../icons/CogIcon';
|
|
9
9
|
import { CloseIcon } from '../../icons/CloseIcon';
|
|
10
10
|
import { cn } from '../../utils/cn';
|
|
11
11
|
import './OverlayControls.css';
|
|
12
|
-
const b = cn(
|
|
12
|
+
const b = cn(OVERLAY_CONTROLS_CLASS_NAME);
|
|
13
13
|
export var OverlayControlsPosition;
|
|
14
14
|
(function (OverlayControlsPosition) {
|
|
15
15
|
OverlayControlsPosition["TopRight"] = "top_right";
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export declare const COPIED_WIDGET_STORE_KEY = "dashCopiedItem";
|
|
2
2
|
export declare const DEFAULT_NAMESPACE = "default";
|
|
3
|
+
export declare const OVERLAY_CONTROLS_CLASS_NAME = "dashkit-overlay-controls";
|
|
3
4
|
export declare const MenuItems: {
|
|
4
5
|
readonly Copy: "copy";
|
|
5
6
|
readonly Delete: "delete";
|
|
@@ -11,7 +11,6 @@ function useMemoStateContext(props) {
|
|
|
11
11
|
// (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
|
|
12
12
|
const originalLayouts = React.useRef({});
|
|
13
13
|
const adjustedLayouts = React.useRef({});
|
|
14
|
-
const [filteredOverlayControls, setFilteredOverlayControls] = React.useState(props.overlayControls || []);
|
|
15
14
|
// TODO: need move originalLayouts, adjustedLayouts to state
|
|
16
15
|
const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
|
|
17
16
|
const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
|
|
@@ -107,10 +106,6 @@ function useMemoStateContext(props) {
|
|
|
107
106
|
})
|
|
108
107
|
.filter(Boolean);
|
|
109
108
|
}, []);
|
|
110
|
-
const hideWidgetOverlayControl = React.useCallback((args) => {
|
|
111
|
-
const newOverlayControls = props.overlayControls.allWidgetsControls.filter((item) => item.id !== args.controlId);
|
|
112
|
-
setFilteredOverlayControls(Object.assign(Object.assign({}, props.overlayControls), { allWidgetsControls: newOverlayControls }));
|
|
113
|
-
}, [props.overlayControls]);
|
|
114
109
|
const resultLayout = React.useMemo(() => {
|
|
115
110
|
return props.layout.map((item) => {
|
|
116
111
|
if (item.i in adjustedLayouts.current) {
|
|
@@ -141,8 +136,6 @@ function useMemoStateContext(props) {
|
|
|
141
136
|
editItem: props.onItemEdit,
|
|
142
137
|
layoutChange: onLayoutChange,
|
|
143
138
|
getItemsMeta,
|
|
144
|
-
hideWidgetOverlayControl,
|
|
145
|
-
filteredOverlayControls,
|
|
146
139
|
reloadItems,
|
|
147
140
|
memorizeOriginalLayout,
|
|
148
141
|
revertToOriginalLayout,
|
|
@@ -164,8 +157,6 @@ function useMemoStateContext(props) {
|
|
|
164
157
|
props.onItemEdit,
|
|
165
158
|
onLayoutChange,
|
|
166
159
|
getItemsMeta,
|
|
167
|
-
hideWidgetOverlayControl,
|
|
168
|
-
filteredOverlayControls,
|
|
169
160
|
reloadItems,
|
|
170
161
|
memorizeOriginalLayout,
|
|
171
162
|
revertToOriginalLayout,
|
|
@@ -176,9 +167,8 @@ function useMemoStateContext(props) {
|
|
|
176
167
|
export function withContext(Component) {
|
|
177
168
|
const WithContext = (props) => {
|
|
178
169
|
const contextValue = useMemoStateContext(props);
|
|
179
|
-
const overlayControls = contextValue.filteredOverlayControls;
|
|
180
170
|
return (React.createElement(DashKitContext.Provider, { value: contextValue },
|
|
181
|
-
React.createElement(Component, { overlayControls: overlayControls })));
|
|
171
|
+
React.createElement(Component, { overlayControls: props.overlayControls })));
|
|
182
172
|
};
|
|
183
173
|
WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
|
|
184
174
|
return WithContext;
|