@gravity-ui/dashkit 8.18.0 → 8.19.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/README.md +6 -2
- package/build/cjs/components/DashKit/DashKit.d.ts +2 -2
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +6 -3
- package/build/cjs/components/OverlayControls/OverlayControls.js +16 -5
- package/build/cjs/hocs/withContext.js +4 -0
- package/build/esm/components/DashKit/DashKit.d.ts +2 -2
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +6 -3
- package/build/esm/components/OverlayControls/OverlayControls.js +16 -5
- package/build/esm/hocs/withContext.js +4 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -59,18 +59,20 @@ interface DashKitProps {
|
|
|
59
59
|
noOverlay?: boolean;
|
|
60
60
|
focusable?: boolean;
|
|
61
61
|
draggableHandleClassName?: string;
|
|
62
|
+
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
|
|
63
|
+
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
|
|
62
64
|
}
|
|
63
65
|
```
|
|
64
66
|
|
|
65
67
|
- **config**: [сonfig](#Config).
|
|
66
68
|
- **editMode**: Whether edit mode is enabled.
|
|
67
69
|
- **onItemEdit**: Called when you click to edit a widget.
|
|
68
|
-
- **onChange**: Called when config or [itemsStateAndParams](#
|
|
70
|
+
- **onChange**: Called when config or [itemsStateAndParams](#itemsStateAndParams) are changed.
|
|
69
71
|
- **onDrop**: Called when item dropped from ActionPanel using (#DashKitDnDWrapper)
|
|
70
72
|
- **onItemMountChange**: Called when item mount state changed
|
|
71
73
|
- **onItemRender**: Called when item render complete
|
|
72
74
|
- **defaultGlobalParams**, **globalParams**: [Parameters](#Params) that affect all widgets. In DataLens, `defaultGlobalParams` are global parameters set in the dashboard settings. `globalParams` are globals parameters that can be set in the url.
|
|
73
|
-
- **itemsStateAndParams**: [itemsStateAndParams](#
|
|
75
|
+
- **itemsStateAndParams**: [itemsStateAndParams](#itemsStateAndParams).
|
|
74
76
|
- **settings**: DashKit settings.
|
|
75
77
|
- **context**: Object that will be propped up on all widgets.
|
|
76
78
|
- **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed. If `null` passed only close button or custom menu will be displayed.
|
|
@@ -84,6 +86,8 @@ interface DashKitProps {
|
|
|
84
86
|
- **onResizeStart**: ReactGridLayout called when item resize started
|
|
85
87
|
- **onResize**: ReactGridLayout called while item resizing
|
|
86
88
|
- **onResizeStop**: ReactGridLayout called when item resize stoped
|
|
89
|
+
- **getPreparedCopyItemOptions**: Called for converting copied item to serializable object before saving it to localstorage. It should be used instead of deprecated `context.getPreparedCopyItemOptions` prop
|
|
90
|
+
- **onCopyFulfill**: Called when item copy finished with `error=null` and defined `data` on successful operation done and with `error: Error` without `data` otherwise
|
|
87
91
|
|
|
88
92
|
## Usage
|
|
89
93
|
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
|
|
3
3
|
import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
|
|
4
4
|
import GridLayout from '../GridLayout/GridLayout';
|
|
5
|
-
import { OverlayControlItem } from '../OverlayControls/OverlayControls';
|
|
6
|
-
interface DashKitGeneralProps {
|
|
5
|
+
import { OverlayControlItem, OverlayControlsCtxShape } from '../OverlayControls/OverlayControls';
|
|
6
|
+
interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
|
|
7
7
|
config: Config;
|
|
8
8
|
editMode: boolean;
|
|
9
9
|
draggableHandleClassName?: string;
|
|
@@ -50,7 +50,7 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
|
|
|
50
50
|
export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
|
|
51
51
|
copyContext?: C;
|
|
52
52
|
};
|
|
53
|
-
|
|
53
|
+
export interface OverlayControlsCtxShape {
|
|
54
54
|
overlayControls?: Record<string, OverlayControlItem[]>;
|
|
55
55
|
context: Record<string, any>;
|
|
56
56
|
menu: MenuItem[];
|
|
@@ -59,11 +59,14 @@ type DashKitCtx = React.Context<{
|
|
|
59
59
|
editItem: (item: ConfigItem) => void;
|
|
60
60
|
removeItem: (id: string) => void;
|
|
61
61
|
getLayoutItem: (id: string) => ConfigLayout | void;
|
|
62
|
-
|
|
62
|
+
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
|
|
63
|
+
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
|
|
64
|
+
}
|
|
65
|
+
type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
|
|
63
66
|
declare class OverlayControls extends React.Component<OverlayControlsProps> {
|
|
64
67
|
static contextType: React.Context<any>;
|
|
65
68
|
static defaultProps: OverlayControlsDefaultProps;
|
|
66
|
-
context: React.ContextType<
|
|
69
|
+
context: React.ContextType<OverlayControlsCtx>;
|
|
67
70
|
render(): JSX.Element;
|
|
68
71
|
private getItems;
|
|
69
72
|
private renderControlsItem;
|
|
@@ -79,7 +79,7 @@ class OverlayControls extends react_1.default.Component {
|
|
|
79
79
|
return controls;
|
|
80
80
|
};
|
|
81
81
|
this.onCopyItem = () => {
|
|
82
|
-
var _a, _b, _c;
|
|
82
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
83
83
|
const { configItem } = this.props;
|
|
84
84
|
const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
|
|
85
85
|
let targetInnerId;
|
|
@@ -102,13 +102,24 @@ class OverlayControls extends react_1.default.Component {
|
|
|
102
102
|
targetId: this.props.configItem.id,
|
|
103
103
|
targetInnerId,
|
|
104
104
|
};
|
|
105
|
-
if (
|
|
106
|
-
|
|
105
|
+
if ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) {
|
|
106
|
+
(_b = console.warn) === null || _b === void 0 ? void 0 : _b.call(console, '`context.getPreparedCopyItemOptions` is deprecated. Please use `getPreparedCopyItemOptions` prop instead');
|
|
107
|
+
}
|
|
108
|
+
const getPreparedCopyItemOptions = (_d = (_c = this.context) === null || _c === void 0 ? void 0 : _c.getPreparedCopyItemOptions) !== null && _d !== void 0 ? _d : (_e = this.context.context) === null || _e === void 0 ? void 0 : _e.getPreparedCopyItemOptions;
|
|
109
|
+
if (typeof getPreparedCopyItemOptions === 'function') {
|
|
110
|
+
options = getPreparedCopyItemOptions(options);
|
|
111
|
+
}
|
|
112
|
+
try {
|
|
113
|
+
localStorage.setItem(constants_1.COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
|
|
114
|
+
(_g = (_f = this.context).onCopyFulfill) === null || _g === void 0 ? void 0 : _g.call(_f, null, options);
|
|
115
|
+
}
|
|
116
|
+
catch (e) {
|
|
117
|
+
const error = e instanceof Error ? e : new Error('Unknown error while copying item');
|
|
118
|
+
(_j = (_h = this.context).onCopyFulfill) === null || _j === void 0 ? void 0 : _j.call(_h, error);
|
|
107
119
|
}
|
|
108
|
-
localStorage.setItem(constants_1.COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
|
|
109
120
|
// https://stackoverflow.com/questions/35865481/storage-event-not-firing
|
|
110
121
|
window.dispatchEvent(new Event('storage'));
|
|
111
|
-
(
|
|
122
|
+
(_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
|
|
112
123
|
};
|
|
113
124
|
this.onEditItem = () => {
|
|
114
125
|
var _a, _b;
|
|
@@ -394,11 +394,15 @@ function useMemoStateContext(props) {
|
|
|
394
394
|
editItem: props.onItemEdit,
|
|
395
395
|
removeItem: onItemRemove,
|
|
396
396
|
getLayoutItem: getLayoutItem,
|
|
397
|
+
getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
|
|
398
|
+
onCopyFulfill: props.onCopyFulfill,
|
|
397
399
|
}), [
|
|
398
400
|
props.overlayControls,
|
|
399
401
|
props.context,
|
|
400
402
|
props.itemsStateAndParams,
|
|
401
403
|
props.onItemEdit,
|
|
404
|
+
props.getPreparedCopyItemOptions,
|
|
405
|
+
props.onCopyFulfill,
|
|
402
406
|
overlayMenuItems,
|
|
403
407
|
itemsParams,
|
|
404
408
|
onItemRemove,
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
|
|
3
3
|
import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
|
|
4
4
|
import GridLayout from '../GridLayout/GridLayout';
|
|
5
|
-
import { OverlayControlItem } from '../OverlayControls/OverlayControls';
|
|
6
|
-
interface DashKitGeneralProps {
|
|
5
|
+
import { OverlayControlItem, OverlayControlsCtxShape } from '../OverlayControls/OverlayControls';
|
|
6
|
+
interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
|
|
7
7
|
config: Config;
|
|
8
8
|
editMode: boolean;
|
|
9
9
|
draggableHandleClassName?: string;
|
|
@@ -51,7 +51,7 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
|
|
|
51
51
|
export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
|
|
52
52
|
copyContext?: C;
|
|
53
53
|
};
|
|
54
|
-
|
|
54
|
+
export interface OverlayControlsCtxShape {
|
|
55
55
|
overlayControls?: Record<string, OverlayControlItem[]>;
|
|
56
56
|
context: Record<string, any>;
|
|
57
57
|
menu: MenuItem[];
|
|
@@ -60,11 +60,14 @@ type DashKitCtx = React.Context<{
|
|
|
60
60
|
editItem: (item: ConfigItem) => void;
|
|
61
61
|
removeItem: (id: string) => void;
|
|
62
62
|
getLayoutItem: (id: string) => ConfigLayout | void;
|
|
63
|
-
|
|
63
|
+
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
|
|
64
|
+
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
|
|
65
|
+
}
|
|
66
|
+
type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
|
|
64
67
|
declare class OverlayControls extends React.Component<OverlayControlsProps> {
|
|
65
68
|
static contextType: React.Context<any>;
|
|
66
69
|
static defaultProps: OverlayControlsDefaultProps;
|
|
67
|
-
context: React.ContextType<
|
|
70
|
+
context: React.ContextType<OverlayControlsCtx>;
|
|
68
71
|
render(): JSX.Element;
|
|
69
72
|
private getItems;
|
|
70
73
|
private renderControlsItem;
|
|
@@ -76,7 +76,7 @@ class OverlayControls extends React.Component {
|
|
|
76
76
|
return controls;
|
|
77
77
|
};
|
|
78
78
|
this.onCopyItem = () => {
|
|
79
|
-
var _a, _b, _c;
|
|
79
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
80
80
|
const { configItem } = this.props;
|
|
81
81
|
const correspondedItemLayout = this.context.getLayoutItem(configItem.id);
|
|
82
82
|
let targetInnerId;
|
|
@@ -99,13 +99,24 @@ class OverlayControls extends React.Component {
|
|
|
99
99
|
targetId: this.props.configItem.id,
|
|
100
100
|
targetInnerId,
|
|
101
101
|
};
|
|
102
|
-
if (
|
|
103
|
-
|
|
102
|
+
if ((_a = this.context.context) === null || _a === void 0 ? void 0 : _a.getPreparedCopyItemOptions) {
|
|
103
|
+
(_b = console.warn) === null || _b === void 0 ? void 0 : _b.call(console, '`context.getPreparedCopyItemOptions` is deprecated. Please use `getPreparedCopyItemOptions` prop instead');
|
|
104
|
+
}
|
|
105
|
+
const getPreparedCopyItemOptions = (_d = (_c = this.context) === null || _c === void 0 ? void 0 : _c.getPreparedCopyItemOptions) !== null && _d !== void 0 ? _d : (_e = this.context.context) === null || _e === void 0 ? void 0 : _e.getPreparedCopyItemOptions;
|
|
106
|
+
if (typeof getPreparedCopyItemOptions === 'function') {
|
|
107
|
+
options = getPreparedCopyItemOptions(options);
|
|
108
|
+
}
|
|
109
|
+
try {
|
|
110
|
+
localStorage.setItem(COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
|
|
111
|
+
(_g = (_f = this.context).onCopyFulfill) === null || _g === void 0 ? void 0 : _g.call(_f, null, options);
|
|
112
|
+
}
|
|
113
|
+
catch (e) {
|
|
114
|
+
const error = e instanceof Error ? e : new Error('Unknown error while copying item');
|
|
115
|
+
(_j = (_h = this.context).onCopyFulfill) === null || _j === void 0 ? void 0 : _j.call(_h, error);
|
|
104
116
|
}
|
|
105
|
-
localStorage.setItem(COPIED_WIDGET_STORE_KEY, JSON.stringify(options));
|
|
106
117
|
// https://stackoverflow.com/questions/35865481/storage-event-not-firing
|
|
107
118
|
window.dispatchEvent(new Event('storage'));
|
|
108
|
-
(
|
|
119
|
+
(_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
|
|
109
120
|
};
|
|
110
121
|
this.onEditItem = () => {
|
|
111
122
|
var _a, _b;
|
|
@@ -391,11 +391,15 @@ function useMemoStateContext(props) {
|
|
|
391
391
|
editItem: props.onItemEdit,
|
|
392
392
|
removeItem: onItemRemove,
|
|
393
393
|
getLayoutItem: getLayoutItem,
|
|
394
|
+
getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
|
|
395
|
+
onCopyFulfill: props.onCopyFulfill,
|
|
394
396
|
}), [
|
|
395
397
|
props.overlayControls,
|
|
396
398
|
props.context,
|
|
397
399
|
props.itemsStateAndParams,
|
|
398
400
|
props.onItemEdit,
|
|
401
|
+
props.getPreparedCopyItemOptions,
|
|
402
|
+
props.onCopyFulfill,
|
|
399
403
|
overlayMenuItems,
|
|
400
404
|
itemsParams,
|
|
401
405
|
onItemRemove,
|