@gravity-ui/dashkit 8.22.1-beta.1 → 8.22.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 +12 -14
- package/build/cjs/components/DashKit/DashKit.js +2 -2
- package/build/cjs/components/DashKitDnDWrapper/DashKitDnDWrapper.js +2 -2
- package/build/cjs/components/DashKitView/DashKitView.js +2 -2
- package/build/cjs/components/GridItem/GridItem.js +2 -2
- package/build/cjs/components/GridLayout/GridLayout.d.ts +1 -1
- package/build/cjs/components/GridLayout/GridLayout.js +2 -3
- package/build/cjs/components/Item/Item.d.ts +1 -2
- package/build/cjs/components/MobileLayout/MobileLayout.d.ts +21 -28
- package/build/cjs/components/MobileLayout/MobileLayout.js +47 -60
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +16 -4
- package/build/cjs/components/OverlayControls/OverlayControls.js +9 -8
- package/build/cjs/context/DashKitContext.d.ts +3 -30
- package/build/cjs/context/DashKitContext.js +6 -2
- package/build/cjs/hocs/prepareItem.d.ts +1 -2
- package/build/cjs/hocs/prepareItem.js +2 -2
- package/build/cjs/hocs/withContext.js +20 -23
- package/build/cjs/hooks/useDnDItemProps.js +2 -2
- package/build/cjs/shared/modules/helpers.d.ts +1 -1
- package/build/cjs/shared/modules/helpers.js +1 -1
- package/build/cjs/shared/types/state-and-params.d.ts +1 -2
- package/build/cjs/typings/config.d.ts +0 -1
- package/build/esm/components/DashKit/DashKit.d.ts +12 -14
- package/build/esm/components/DashKit/DashKit.js +1 -1
- package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js +1 -1
- package/build/esm/components/DashKitView/DashKitView.js +1 -1
- package/build/esm/components/GridItem/GridItem.js +1 -1
- package/build/esm/components/GridLayout/GridLayout.d.ts +1 -1
- package/build/esm/components/GridLayout/GridLayout.js +1 -2
- package/build/esm/components/Item/Item.d.ts +1 -2
- package/build/esm/components/MobileLayout/MobileLayout.d.ts +21 -29
- package/build/esm/components/MobileLayout/MobileLayout.js +46 -59
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +16 -4
- package/build/esm/components/OverlayControls/OverlayControls.js +8 -7
- package/build/esm/context/DashKitContext.d.ts +3 -30
- package/build/esm/context/DashKitContext.js +4 -2
- package/build/esm/hocs/prepareItem.d.ts +1 -2
- package/build/esm/hocs/prepareItem.js +1 -1
- package/build/esm/hocs/withContext.js +17 -20
- package/build/esm/hooks/useDnDItemProps.js +1 -1
- package/build/esm/shared/modules/helpers.d.ts +1 -1
- package/build/esm/shared/modules/helpers.js +1 -1
- package/build/esm/shared/types/state-and-params.d.ts +1 -2
- package/build/esm/typings/config.d.ts +0 -1
- package/package.json +1 -1
- package/build/cjs/context/DashKitDnDContext.d.ts +0 -10
- package/build/cjs/context/DashKitDnDContext.js +0 -6
- package/build/cjs/context/DashkitOverlayControlsContext.d.ts +0 -13
- package/build/cjs/context/DashkitOverlayControlsContext.js +0 -6
- package/build/cjs/context/index.d.ts +0 -3
- package/build/cjs/context/index.js +0 -6
- package/build/esm/context/DashKitDnDContext.d.ts +0 -10
- package/build/esm/context/DashKitDnDContext.js +0 -2
- package/build/esm/context/DashkitOverlayControlsContext.d.ts +0 -13
- package/build/esm/context/DashkitOverlayControlsContext.js +0 -2
- package/build/esm/context/index.d.ts +0 -3
- package/build/esm/context/index.js +0 -3
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
|
|
3
|
-
import
|
|
3
|
+
import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
|
|
4
4
|
import GridLayout from '../GridLayout/GridLayout';
|
|
5
|
-
import
|
|
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;
|
|
@@ -11,14 +11,6 @@ interface DashKitGeneralProps {
|
|
|
11
11
|
overlayMenuItems?: MenuItem[] | null;
|
|
12
12
|
}
|
|
13
13
|
interface DashKitDefaultProps {
|
|
14
|
-
defaultGlobalParams: GlobalParams;
|
|
15
|
-
globalParams: GlobalParams;
|
|
16
|
-
itemsStateAndParams: ItemsStateAndParams;
|
|
17
|
-
settings: SettingsProps;
|
|
18
|
-
context: ContextProps;
|
|
19
|
-
noOverlay: boolean;
|
|
20
|
-
focusable?: boolean;
|
|
21
|
-
groups?: DashKitGroup[];
|
|
22
14
|
onItemEdit: (item: ConfigItem) => void;
|
|
23
15
|
onChange: (data: {
|
|
24
16
|
config: Config;
|
|
@@ -31,21 +23,27 @@ interface DashKitDefaultProps {
|
|
|
31
23
|
isMounted: boolean;
|
|
32
24
|
}) => void;
|
|
33
25
|
onItemRender?: (item: ConfigItem) => void;
|
|
34
|
-
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
|
|
35
|
-
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
|
|
36
26
|
onDragStart?: ItemManipulationCallback;
|
|
37
27
|
onDrag?: ItemManipulationCallback;
|
|
38
28
|
onDragStop?: ItemManipulationCallback;
|
|
39
29
|
onResizeStart?: ItemManipulationCallback;
|
|
40
30
|
onResize?: ItemManipulationCallback;
|
|
41
31
|
onResizeStop?: ItemManipulationCallback;
|
|
32
|
+
defaultGlobalParams: GlobalParams;
|
|
33
|
+
globalParams: GlobalParams;
|
|
34
|
+
itemsStateAndParams: ItemsStateAndParams;
|
|
35
|
+
settings: SettingsProps;
|
|
36
|
+
context: ContextProps;
|
|
37
|
+
noOverlay: boolean;
|
|
38
|
+
focusable?: boolean;
|
|
39
|
+
groups?: DashKitGroup[];
|
|
42
40
|
}
|
|
43
41
|
export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
|
|
44
42
|
}
|
|
45
43
|
type DashKitInnerProps = DashKitGeneralProps & DashKitDefaultProps;
|
|
46
44
|
export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
|
|
47
45
|
static defaultProps: DashKitDefaultProps;
|
|
48
|
-
static contextType: React.Context<
|
|
46
|
+
static contextType: React.Context<any>;
|
|
49
47
|
static registerPlugins(...plugins: Plugin[]): void;
|
|
50
48
|
static reloadPlugins(...plugins: Plugin[]): void;
|
|
51
49
|
static setSettings(settings: Settings): void;
|
|
@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
|
|
|
6
6
|
const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
|
|
7
7
|
const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
|
|
8
8
|
const constants_1 = require("../../constants");
|
|
9
|
-
const
|
|
9
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
10
10
|
const utils_1 = require("../../utils");
|
|
11
11
|
const DashKitDnDWrapper_1 = require("../DashKitDnDWrapper/DashKitDnDWrapper");
|
|
12
12
|
const DashKitView_1 = tslib_1.__importDefault(require("../DashKitView/DashKitView"));
|
|
@@ -112,4 +112,4 @@ DashKit.defaultProps = {
|
|
|
112
112
|
noOverlay: false,
|
|
113
113
|
focusable: false,
|
|
114
114
|
};
|
|
115
|
-
DashKit.contextType =
|
|
115
|
+
DashKit.contextType = DashKitContext_1.DashKitDnDContext;
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.DashKitDnDWrapper = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
-
const
|
|
6
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
7
7
|
const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
|
|
8
8
|
const DashKitDnDWrapper = (props) => {
|
|
9
9
|
const [dragProps, setDragProps] = react_1.default.useState(null);
|
|
@@ -31,6 +31,6 @@ const DashKitDnDWrapper = (props) => {
|
|
|
31
31
|
onDropDragOver: props.onDropDragOver,
|
|
32
32
|
};
|
|
33
33
|
}, [dragProps, dragImagePreview, onDragStart, onDragEnd, props.onDropDragOver]);
|
|
34
|
-
return (react_1.default.createElement(
|
|
34
|
+
return (react_1.default.createElement(DashKitContext_1.DashKitDnDContext.Provider, { value: contextValue }, props.children));
|
|
35
35
|
};
|
|
36
36
|
exports.DashKitDnDWrapper = DashKitDnDWrapper;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
5
|
-
const
|
|
5
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
6
6
|
const withContext_1 = require("../../hocs/withContext");
|
|
7
7
|
const useCalcLayout_1 = require("../../hooks/useCalcLayout");
|
|
8
8
|
const cn_1 = require("../../utils/cn");
|
|
@@ -10,7 +10,7 @@ const GridLayout_1 = tslib_1.__importDefault(require("../GridLayout/GridLayout")
|
|
|
10
10
|
const MobileLayout_1 = tslib_1.__importDefault(require("../MobileLayout/MobileLayout"));
|
|
11
11
|
const b = (0, cn_1.cn)('dashkit');
|
|
12
12
|
function DashKitView() {
|
|
13
|
-
const context = react_1.default.useContext(
|
|
13
|
+
const context = react_1.default.useContext(DashKitContext_1.DashKitContext);
|
|
14
14
|
const { registerManager, forwardedMetaRef } = context;
|
|
15
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 }))));
|
|
16
16
|
}
|
|
@@ -4,7 +4,7 @@ const tslib_1 = require("tslib");
|
|
|
4
4
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
5
5
|
const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
|
|
6
6
|
const constants_1 = require("../../constants");
|
|
7
|
-
const
|
|
7
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
8
8
|
const cn_1 = require("../../utils/cn");
|
|
9
9
|
const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
|
|
10
10
|
const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
|
|
@@ -156,7 +156,7 @@ GridItem.propTypes = {
|
|
|
156
156
|
onTouchEnd: prop_types_1.default.func,
|
|
157
157
|
onTouchStart: prop_types_1.default.func,
|
|
158
158
|
};
|
|
159
|
-
GridItem.contextType =
|
|
159
|
+
GridItem.contextType = DashKitContext_1.DashKitContext;
|
|
160
160
|
const GridItemForwarderRef = react_1.default.forwardRef((props, ref) => {
|
|
161
161
|
return react_1.default.createElement(GridItem, Object.assign({}, props, { forwardedRef: ref }));
|
|
162
162
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
2
|
-
static contextType: React.Context<
|
|
2
|
+
static contextType: React.Context<any>;
|
|
3
3
|
constructor(props: any, context: any);
|
|
4
4
|
pluginsRefs: any[];
|
|
5
5
|
state: {
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
5
5
|
const constants_1 = require("../../constants");
|
|
6
|
-
const
|
|
6
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
7
7
|
const utils_1 = require("../../utils");
|
|
8
8
|
const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
|
|
9
9
|
const ReactGridLayout_1 = require("./ReactGridLayout");
|
|
@@ -501,7 +501,6 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
501
501
|
offset += items.length;
|
|
502
502
|
if (group.render) {
|
|
503
503
|
const groupContext = {
|
|
504
|
-
isMobile: false,
|
|
505
504
|
config,
|
|
506
505
|
editMode,
|
|
507
506
|
items,
|
|
@@ -518,5 +517,5 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
518
517
|
}
|
|
519
518
|
}
|
|
520
519
|
}
|
|
521
|
-
GridLayout.contextType =
|
|
520
|
+
GridLayout.contextType = DashKitContext_1.DashKitContext;
|
|
522
521
|
exports.default = GridLayout;
|
|
@@ -66,8 +66,7 @@ declare const _default: {
|
|
|
66
66
|
onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
67
67
|
forwardedPluginRef: PropTypes.Requireable<any>;
|
|
68
68
|
};
|
|
69
|
-
contextType: React.Context<
|
|
69
|
+
contextType: React.Context<any>;
|
|
70
70
|
};
|
|
71
71
|
export default _default;
|
|
72
72
|
import React from 'react';
|
|
73
|
-
import PropTypes from 'prop-types';
|
|
@@ -1,30 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
state: MobileLayoutState;
|
|
20
|
-
render(): JSX.Element;
|
|
21
|
-
getSortedLayoutItems(): Record<string, (import("../..").ConfigItem & import("../..").ConfigLayout)[]>;
|
|
22
|
-
getMemoForwardRefCallback(refIndex: number): (refObject: PlugibRefObject) => void;
|
|
23
|
-
adjustWidgetLayout(id: string, { needSetDefault }: {
|
|
24
|
-
needSetDefault: boolean;
|
|
25
|
-
}): void;
|
|
26
|
-
getMemoAdjustWidgetLayout(id: string): (props: {
|
|
27
|
-
needSetDefault: boolean;
|
|
1
|
+
export default class MobileLayout extends React.PureComponent<any, any, any> {
|
|
2
|
+
static contextType: React.Context<any>;
|
|
3
|
+
constructor(props: any);
|
|
4
|
+
constructor(props: any, context: any);
|
|
5
|
+
pluginsRefs: any[];
|
|
6
|
+
sortedLayoutItems: any;
|
|
7
|
+
_memoLayout: any;
|
|
8
|
+
_memoForwardedPluginRef: any[];
|
|
9
|
+
_memoAdjustWidgetLayout: any[];
|
|
10
|
+
state: {
|
|
11
|
+
activeTabId: null;
|
|
12
|
+
indexesOfItemsWithActiveAutoheight: {};
|
|
13
|
+
};
|
|
14
|
+
componentDidUpdate(prevProps: any, prevState: any): void;
|
|
15
|
+
getSortedLayoutItems(): any;
|
|
16
|
+
getMemoForwardRefCallback: (refIndex: any) => any;
|
|
17
|
+
adjustWidgetLayout: (index: any, { needSetDefault }: {
|
|
18
|
+
needSetDefault: any;
|
|
28
19
|
}) => void;
|
|
20
|
+
getMemoAdjustWidgetLayout: (index: any) => any;
|
|
21
|
+
render(): JSX.Element;
|
|
29
22
|
}
|
|
30
|
-
|
|
23
|
+
import React from 'react';
|
|
@@ -2,9 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
5
|
-
const
|
|
6
|
-
const constants_1 = require("../../constants");
|
|
7
|
-
const context_1 = require("../../context");
|
|
5
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
8
6
|
const cn_1 = require("../../utils/cn");
|
|
9
7
|
const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
|
|
10
8
|
const helpers_1 = require("./helpers");
|
|
@@ -13,40 +11,47 @@ class MobileLayout extends react_1.default.PureComponent {
|
|
|
13
11
|
constructor() {
|
|
14
12
|
super(...arguments);
|
|
15
13
|
this.pluginsRefs = [];
|
|
16
|
-
this.sortedLayoutItems = null;
|
|
17
14
|
this._memoLayout = this.context.layout;
|
|
18
15
|
this._memoForwardedPluginRef = [];
|
|
19
|
-
this._memoAdjustWidgetLayout =
|
|
16
|
+
this._memoAdjustWidgetLayout = [];
|
|
20
17
|
this.state = {
|
|
21
|
-
|
|
18
|
+
activeTabId: null,
|
|
19
|
+
indexesOfItemsWithActiveAutoheight: {},
|
|
22
20
|
};
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
const
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
isMobile: true,
|
|
41
|
-
config,
|
|
42
|
-
context,
|
|
43
|
-
editMode,
|
|
44
|
-
items,
|
|
45
|
-
layout,
|
|
21
|
+
this.getMemoForwardRefCallback = (refIndex) => {
|
|
22
|
+
if (!this._memoForwardedPluginRef[refIndex]) {
|
|
23
|
+
this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
|
|
24
|
+
this.pluginsRefs[refIndex] = pluginRef;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
return this._memoForwardedPluginRef[refIndex];
|
|
28
|
+
};
|
|
29
|
+
this.adjustWidgetLayout = (index, { needSetDefault }) => {
|
|
30
|
+
if (needSetDefault) {
|
|
31
|
+
const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
|
|
32
|
+
delete indexesOfItemsWithActiveAutoheight[index];
|
|
33
|
+
this.setState({ indexesOfItemsWithActiveAutoheight });
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
this.setState({
|
|
37
|
+
indexesOfItemsWithActiveAutoheight: Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight, { [index]: true }),
|
|
46
38
|
});
|
|
47
39
|
}
|
|
48
|
-
|
|
49
|
-
|
|
40
|
+
};
|
|
41
|
+
this.getMemoAdjustWidgetLayout = (index) => {
|
|
42
|
+
if (!this._memoAdjustWidgetLayout[index]) {
|
|
43
|
+
this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
|
|
44
|
+
}
|
|
45
|
+
return this._memoAdjustWidgetLayout[index];
|
|
46
|
+
};
|
|
47
|
+
}
|
|
48
|
+
componentDidUpdate(prevProps, prevState) {
|
|
49
|
+
if (prevState.activeTabId !== this.context.config.id) {
|
|
50
|
+
this.setState({
|
|
51
|
+
activeTabId: this.context.config.id,
|
|
52
|
+
indexesOfItemsWithActiveAutoheight: {},
|
|
53
|
+
});
|
|
54
|
+
}
|
|
50
55
|
}
|
|
51
56
|
getSortedLayoutItems() {
|
|
52
57
|
if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
|
|
@@ -54,37 +59,19 @@ class MobileLayout extends react_1.default.PureComponent {
|
|
|
54
59
|
}
|
|
55
60
|
this._memoLayout = this.context.layout;
|
|
56
61
|
const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
|
|
57
|
-
this.sortedLayoutItems = (0,
|
|
62
|
+
this.sortedLayoutItems = (0, helpers_1.getSortedConfigItems)(this.context.config, hasOrderId);
|
|
58
63
|
return this.sortedLayoutItems;
|
|
59
64
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
if (needSetDefault) {
|
|
70
|
-
const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.itemsWithActiveAutoheight);
|
|
71
|
-
delete indexesOfItemsWithActiveAutoheight[id];
|
|
72
|
-
this.setState({ itemsWithActiveAutoheight: indexesOfItemsWithActiveAutoheight });
|
|
73
|
-
}
|
|
74
|
-
else {
|
|
75
|
-
this.setState({
|
|
76
|
-
itemsWithActiveAutoheight: Object.assign({}, this.state.itemsWithActiveAutoheight, {
|
|
77
|
-
[id]: true,
|
|
78
|
-
}),
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
getMemoAdjustWidgetLayout(id) {
|
|
83
|
-
if (!this._memoAdjustWidgetLayout[id]) {
|
|
84
|
-
this._memoAdjustWidgetLayout[id] = this.adjustWidgetLayout.bind(this, id);
|
|
85
|
-
}
|
|
86
|
-
return this._memoAdjustWidgetLayout[id];
|
|
65
|
+
render() {
|
|
66
|
+
const { config, layout } = this.context;
|
|
67
|
+
this.pluginsRefs.length = config.items.length;
|
|
68
|
+
const sortedItems = this.getSortedLayoutItems();
|
|
69
|
+
return (react_1.default.createElement("div", { className: b() }, sortedItems.map((item, index) => {
|
|
70
|
+
const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
|
|
71
|
+
return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
|
|
72
|
+
react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
|
|
73
|
+
})));
|
|
87
74
|
}
|
|
88
75
|
}
|
|
89
|
-
MobileLayout.contextType =
|
|
76
|
+
MobileLayout.contextType = DashKitContext_1.DashKitContext;
|
|
90
77
|
exports.default = MobileLayout;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { type ConfigItem, type ConfigLayout, type ItemState, type ItemsStateAndParamsBase, type PluginBase, type StringParams } from '../../shared';
|
|
4
|
+
import { MenuItem } from '../../typings';
|
|
5
5
|
export declare enum OverlayControlsPosition {
|
|
6
6
|
TopRight = "top_right",
|
|
7
7
|
TopLeft = "top_left",
|
|
@@ -24,7 +24,7 @@ export interface OverlayCustomControlItem {
|
|
|
24
24
|
title?: string;
|
|
25
25
|
icon?: MenuItemProps['icon'];
|
|
26
26
|
iconSize?: number | string;
|
|
27
|
-
handler?: (item: ConfigItem, params:
|
|
27
|
+
handler?: (item: ConfigItem, params: StringParams, state: ItemState) => void;
|
|
28
28
|
visible?: (item: ConfigItem) => boolean;
|
|
29
29
|
className?: string;
|
|
30
30
|
qa?: string;
|
|
@@ -50,9 +50,21 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
|
|
|
50
50
|
export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
|
|
51
51
|
copyContext?: C;
|
|
52
52
|
};
|
|
53
|
+
export interface OverlayControlsCtxShape {
|
|
54
|
+
overlayControls?: Record<string, OverlayControlItem[]>;
|
|
55
|
+
context: Record<string, any>;
|
|
56
|
+
menu: MenuItem[];
|
|
57
|
+
itemsStateAndParams: ItemsStateAndParamsBase;
|
|
58
|
+
itemsParams: Record<string, StringParams>;
|
|
59
|
+
editItem: (item: ConfigItem) => void;
|
|
60
|
+
removeItem: (id: string) => void;
|
|
61
|
+
getLayoutItem: (id: string) => ConfigLayout | void;
|
|
62
|
+
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
|
|
63
|
+
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
|
|
64
|
+
}
|
|
53
65
|
type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
|
|
54
66
|
declare class OverlayControls extends React.Component<OverlayControlsProps> {
|
|
55
|
-
static contextType: React.Context<
|
|
67
|
+
static contextType: React.Context<any>;
|
|
56
68
|
static defaultProps: OverlayControlsDefaultProps;
|
|
57
69
|
context: React.ContextType<OverlayControlsCtx>;
|
|
58
70
|
render(): JSX.Element;
|
|
@@ -7,7 +7,7 @@ const icons_1 = require("@gravity-ui/icons");
|
|
|
7
7
|
const uikit_1 = require("@gravity-ui/uikit");
|
|
8
8
|
const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
|
|
9
9
|
const constants_1 = require("../../constants");
|
|
10
|
-
const
|
|
10
|
+
const DashKitContext_1 = require("../../context/DashKitContext");
|
|
11
11
|
const i18n_1 = require("../../i18n");
|
|
12
12
|
const shared_1 = require("../../shared");
|
|
13
13
|
const cn_1 = require("../../utils/cn");
|
|
@@ -122,9 +122,9 @@ class OverlayControls extends react_1.default.Component {
|
|
|
122
122
|
(_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
|
|
123
123
|
};
|
|
124
124
|
this.onEditItem = () => {
|
|
125
|
-
var _a, _b
|
|
126
|
-
|
|
127
|
-
(
|
|
125
|
+
var _a, _b;
|
|
126
|
+
this.context.editItem(this.props.configItem);
|
|
127
|
+
(_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
128
128
|
};
|
|
129
129
|
this.onRemoveItem = () => {
|
|
130
130
|
var _a, _b;
|
|
@@ -195,12 +195,13 @@ class OverlayControls extends react_1.default.Component {
|
|
|
195
195
|
return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(constants_1.MenuItems).includes(String(item)));
|
|
196
196
|
}
|
|
197
197
|
renderDropdownMenu(isOnlyOneItem) {
|
|
198
|
+
var _a;
|
|
198
199
|
const { view, size, onItemClick } = this.props;
|
|
199
|
-
const { menu: contextMenu, itemsParams,
|
|
200
|
+
const { menu: contextMenu, itemsParams, itemsStateAndParams } = this.context;
|
|
200
201
|
const configItem = this.props.configItem;
|
|
201
202
|
const itemParams = itemsParams[configItem.id];
|
|
202
|
-
const itemState = (
|
|
203
|
-
const menu = contextMenu
|
|
203
|
+
const itemState = ((_a = itemsStateAndParams[configItem.id]) === null || _a === void 0 ? void 0 : _a.state) || {};
|
|
204
|
+
const menu = (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.length) > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
|
|
204
205
|
const isDefaultMenu = this.isDefaultMenu(menu);
|
|
205
206
|
const items = isDefaultMenu
|
|
206
207
|
? (menu || []).reduce((memo, name) => {
|
|
@@ -269,7 +270,7 @@ class OverlayControls extends react_1.default.Component {
|
|
|
269
270
|
return result;
|
|
270
271
|
}
|
|
271
272
|
}
|
|
272
|
-
OverlayControls.contextType =
|
|
273
|
+
OverlayControls.contextType = DashKitContext_1.DashkitOvelayControlsContext;
|
|
273
274
|
OverlayControls.defaultProps = {
|
|
274
275
|
position: OverlayControlsPosition.TopRight,
|
|
275
276
|
view: 'flat',
|
|
@@ -1,31 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
export const DashKitContext: React.Context<any>;
|
|
2
|
+
export const DashkitOvelayControlsContext: React.Context<any>;
|
|
3
|
+
export const DashKitDnDContext: React.Context<any>;
|
|
2
4
|
import React from 'react';
|
|
3
|
-
import type { RegisterManager } from '..//utils';
|
|
4
|
-
import type { DashKitProps } from '../components/DashKit';
|
|
5
|
-
import type { ConfigItem, ConfigLayout, ItemParams, ItemState, ItemStateAndParams, ItemStateAndParamsChangeOptions } from '../shared';
|
|
6
|
-
type DashkitPropsPassedToCtx = Pick<DashKitProps, 'config' | 'groups' | 'context' | 'noOverlay' | 'focusable' | 'globalParams' | 'editMode' | 'settings' | 'onItemMountChange' | 'onItemRender' | 'draggableHandleClassName' | 'onDragStart' | 'onDrag' | 'onDragStop' | 'onResizeStart' | 'onResize' | 'onResizeStop'>;
|
|
7
|
-
type PluginType = string;
|
|
8
|
-
export type DashKitCtxShape = DashkitPropsPassedToCtx & {
|
|
9
|
-
registerManager: RegisterManager;
|
|
10
|
-
forwardedMetaRef: React.ForwardedRef<any>;
|
|
11
|
-
layout: ConfigLayout[];
|
|
12
|
-
temporaryLayout: ConfigLayout[] | null;
|
|
13
|
-
memorizeOriginalLayout: (widgetId: string, preAutoHeightLayout: ConfigLayout, postAutoHeightLayout: ConfigLayout) => void;
|
|
14
|
-
revertToOriginalLayout: (widgetId: string) => void;
|
|
15
|
-
itemsState?: Record<string, ItemState>;
|
|
16
|
-
itemsParams: Record<string, ItemParams>;
|
|
17
|
-
onItemStateAndParamsChange: (id: string, stateAndParams: ItemStateAndParams, options: ItemStateAndParamsChangeOptions) => void;
|
|
18
|
-
getItemsMeta: (pluginsRefs: Array<React.RefObject<any>>) => Array<Promise<any>>;
|
|
19
|
-
reloadItems: (pluginsRefs: Array<React.RefObject<any>>, data: {
|
|
20
|
-
silentLoading: boolean;
|
|
21
|
-
noVeil: boolean;
|
|
22
|
-
}) => void;
|
|
23
|
-
onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void;
|
|
24
|
-
onDropDragOver: (e: DragEvent | MouseEvent, group: string | void, gridProps: Partial<ReactGridLayout.ReactGridLayoutProps>, groupLayout: ConfigLayout[], sharedItem: (Partial<ConfigLayout> & {
|
|
25
|
-
type: PluginType;
|
|
26
|
-
}) | void) => void | boolean;
|
|
27
|
-
outerDnDEnable: boolean;
|
|
28
|
-
dragOverPlugin: null | PluginType;
|
|
29
|
-
};
|
|
30
|
-
declare const DashKitContext: React.Context<DashKitCtxShape>;
|
|
31
|
-
export { DashKitContext };
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DashKitContext = void 0;
|
|
3
|
+
exports.DashKitDnDContext = exports.DashkitOvelayControlsContext = exports.DashKitContext = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
-
const DashKitContext = react_1.default.createContext(
|
|
6
|
+
const DashKitContext = react_1.default.createContext();
|
|
7
7
|
exports.DashKitContext = DashKitContext;
|
|
8
|
+
const DashkitOvelayControlsContext = react_1.default.createContext();
|
|
9
|
+
exports.DashkitOvelayControlsContext = DashkitOvelayControlsContext;
|
|
10
|
+
const DashKitDnDContext = react_1.default.createContext();
|
|
11
|
+
exports.DashKitDnDContext = DashKitDnDContext;
|
|
@@ -66,7 +66,6 @@ export function prepareItem(Component: any): {
|
|
|
66
66
|
onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
67
67
|
forwardedPluginRef: PropTypes.Requireable<any>;
|
|
68
68
|
};
|
|
69
|
-
contextType: React.Context<
|
|
69
|
+
contextType: React.Context<any>;
|
|
70
70
|
};
|
|
71
71
|
import React from 'react';
|
|
72
|
-
import PropTypes from 'prop-types';
|
|
@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
|
|
|
5
5
|
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
|
|
7
7
|
const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
|
|
8
|
-
const
|
|
8
|
+
const DashKitContext_1 = require("../context/DashKitContext");
|
|
9
9
|
function prepareItem(Component) {
|
|
10
10
|
var _a;
|
|
11
11
|
return _a = class PrepareItem extends react_1.default.Component {
|
|
@@ -83,7 +83,7 @@ function prepareItem(Component) {
|
|
|
83
83
|
onItemMountChange: prop_types_1.default.func,
|
|
84
84
|
forwardedPluginRef: prop_types_1.default.any,
|
|
85
85
|
},
|
|
86
|
-
_a.contextType =
|
|
86
|
+
_a.contextType = DashKitContext_1.DashKitContext,
|
|
87
87
|
_a;
|
|
88
88
|
}
|
|
89
89
|
exports.prepareItem = prepareItem;
|
|
@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
|
|
|
6
6
|
const isEqual_1 = tslib_1.__importDefault(require("lodash/isEqual"));
|
|
7
7
|
const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
|
|
8
8
|
const common_1 = require("../constants/common");
|
|
9
|
-
const
|
|
9
|
+
const DashKitContext_1 = require("../context/DashKitContext");
|
|
10
10
|
const useDeepEqualMemo_1 = require("../hooks/useDeepEqualMemo");
|
|
11
11
|
const shared_1 = require("../shared");
|
|
12
12
|
const utils_1 = require("../utils");
|
|
@@ -22,7 +22,7 @@ function useMemoStateContext(props) {
|
|
|
22
22
|
const nowrapAdjustedLayouts = react_1.default.useRef({});
|
|
23
23
|
const [temporaryLayout, setTemporaryLayout] = react_1.default.useState(null);
|
|
24
24
|
const resetTemporaryLayout = react_1.default.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
|
|
25
|
-
const dndContext = react_1.default.useContext(
|
|
25
|
+
const dndContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
|
|
26
26
|
const outerDnDEnable = Boolean(dndContext);
|
|
27
27
|
// TODO: need move originalLayouts, adjustedLayouts to state
|
|
28
28
|
const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
|
|
@@ -286,7 +286,6 @@ function useMemoStateContext(props) {
|
|
|
286
286
|
}
|
|
287
287
|
return itemLayout;
|
|
288
288
|
}, [
|
|
289
|
-
props.registerManager,
|
|
290
289
|
resetTemporaryLayout,
|
|
291
290
|
temporaryLayout,
|
|
292
291
|
dragOverPlugin,
|
|
@@ -315,6 +314,8 @@ function useMemoStateContext(props) {
|
|
|
315
314
|
});
|
|
316
315
|
}, [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
|
|
317
316
|
const dashkitContextValue = react_1.default.useMemo(() => ({
|
|
317
|
+
layout: resultLayout,
|
|
318
|
+
temporaryLayout,
|
|
318
319
|
config: props.config,
|
|
319
320
|
groups: props.groups,
|
|
320
321
|
context: props.context,
|
|
@@ -324,26 +325,24 @@ function useMemoStateContext(props) {
|
|
|
324
325
|
globalParams: props.globalParams,
|
|
325
326
|
editMode: props.editMode,
|
|
326
327
|
settings: props.settings,
|
|
327
|
-
onItemMountChange: props.onItemMountChange,
|
|
328
|
-
onItemRender: props.onItemRender,
|
|
329
|
-
draggableHandleClassName: props.draggableHandleClassName,
|
|
330
|
-
registerManager: props.registerManager,
|
|
331
|
-
forwardedMetaRef: props.forwardedMetaRef,
|
|
332
|
-
layout: resultLayout,
|
|
333
|
-
temporaryLayout,
|
|
334
|
-
layoutChange: onLayoutChange,
|
|
335
|
-
memorizeOriginalLayout,
|
|
336
|
-
revertToOriginalLayout,
|
|
337
328
|
itemsState,
|
|
338
329
|
itemsParams,
|
|
330
|
+
registerManager: props.registerManager,
|
|
339
331
|
onItemStateAndParamsChange,
|
|
340
|
-
getItemsMeta,
|
|
341
|
-
reloadItems,
|
|
342
332
|
onDrop,
|
|
343
333
|
onDropDragOver,
|
|
334
|
+
onItemMountChange: props.onItemMountChange,
|
|
335
|
+
onItemRender: props.onItemRender,
|
|
336
|
+
layoutChange: onLayoutChange,
|
|
337
|
+
getItemsMeta,
|
|
338
|
+
reloadItems,
|
|
339
|
+
memorizeOriginalLayout,
|
|
340
|
+
revertToOriginalLayout,
|
|
341
|
+
forwardedMetaRef: props.forwardedMetaRef,
|
|
342
|
+
draggableHandleClassName: props.draggableHandleClassName,
|
|
344
343
|
outerDnDEnable,
|
|
345
344
|
dragOverPlugin,
|
|
346
|
-
/* default handlers
|
|
345
|
+
/* default bypassing handlers */
|
|
347
346
|
onDragStart: props.onDragStart,
|
|
348
347
|
onDrag: props.onDrag,
|
|
349
348
|
onDragStop: props.onDragStop,
|
|
@@ -389,15 +388,14 @@ function useMemoStateContext(props) {
|
|
|
389
388
|
const controlsContextValue = react_1.default.useMemo(() => ({
|
|
390
389
|
overlayControls: props.overlayControls,
|
|
391
390
|
context: props.context,
|
|
391
|
+
menu: overlayMenuItems,
|
|
392
392
|
itemsStateAndParams: props.itemsStateAndParams,
|
|
393
|
-
itemsState,
|
|
394
393
|
itemsParams,
|
|
395
|
-
getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
|
|
396
|
-
onCopyFulfill: props.onCopyFulfill,
|
|
397
|
-
menu: overlayMenuItems,
|
|
398
394
|
editItem: props.onItemEdit,
|
|
399
395
|
removeItem: onItemRemove,
|
|
400
396
|
getLayoutItem: getLayoutItem,
|
|
397
|
+
getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
|
|
398
|
+
onCopyFulfill: props.onCopyFulfill,
|
|
401
399
|
}), [
|
|
402
400
|
props.overlayControls,
|
|
403
401
|
props.context,
|
|
@@ -406,7 +404,6 @@ function useMemoStateContext(props) {
|
|
|
406
404
|
props.getPreparedCopyItemOptions,
|
|
407
405
|
props.onCopyFulfill,
|
|
408
406
|
overlayMenuItems,
|
|
409
|
-
itemsState,
|
|
410
407
|
itemsParams,
|
|
411
408
|
onItemRemove,
|
|
412
409
|
getLayoutItem,
|
|
@@ -416,8 +413,8 @@ function useMemoStateContext(props) {
|
|
|
416
413
|
function withContext(Component) {
|
|
417
414
|
const WithContext = (props) => {
|
|
418
415
|
const { dashkitContextValue, controlsContextValue } = useMemoStateContext(props);
|
|
419
|
-
return (react_1.default.createElement(
|
|
420
|
-
react_1.default.createElement(
|
|
416
|
+
return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: dashkitContextValue },
|
|
417
|
+
react_1.default.createElement(DashKitContext_1.DashkitOvelayControlsContext.Provider, { value: controlsContextValue },
|
|
421
418
|
react_1.default.createElement(Component, null))));
|
|
422
419
|
};
|
|
423
420
|
WithContext.displayName = `withContext(${Component.displayName || Component.name || 'Component'}`;
|