@gravity-ui/dashkit 8.20.2 → 8.21.1-beta.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/build/cjs/components/DashKit/DashKit.d.ts +14 -12
- 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 +3 -2
- package/build/cjs/components/Item/Item.d.ts +2 -1
- package/build/cjs/components/MobileLayout/MobileLayout.d.ts +28 -21
- package/build/cjs/components/MobileLayout/MobileLayout.js +60 -47
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +4 -16
- package/build/cjs/components/OverlayControls/OverlayControls.js +8 -9
- package/build/cjs/context/DashKitContext.d.ts +30 -3
- package/build/cjs/context/DashKitContext.js +2 -6
- package/build/cjs/context/DashKitDnDContext.d.ts +10 -0
- package/build/cjs/context/DashKitDnDContext.js +6 -0
- package/build/cjs/context/DashkitOverlayControlsContext.d.ts +13 -0
- package/build/cjs/context/DashkitOverlayControlsContext.js +6 -0
- package/build/cjs/context/index.d.ts +3 -0
- package/build/cjs/context/index.js +6 -0
- package/build/cjs/hocs/prepareItem.d.ts +2 -1
- package/build/cjs/hocs/prepareItem.js +2 -2
- package/build/cjs/hocs/withContext.js +23 -20
- 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 +2 -1
- package/build/cjs/typings/config.d.ts +1 -0
- package/build/esm/components/DashKit/DashKit.d.ts +14 -12
- 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 +2 -1
- package/build/esm/components/Item/Item.d.ts +2 -1
- package/build/esm/components/MobileLayout/MobileLayout.d.ts +29 -21
- package/build/esm/components/MobileLayout/MobileLayout.js +59 -46
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +4 -16
- package/build/esm/components/OverlayControls/OverlayControls.js +7 -8
- package/build/esm/context/DashKitContext.d.ts +30 -3
- package/build/esm/context/DashKitContext.js +2 -4
- package/build/esm/context/DashKitDnDContext.d.ts +10 -0
- package/build/esm/context/DashKitDnDContext.js +2 -0
- package/build/esm/context/DashkitOverlayControlsContext.d.ts +13 -0
- package/build/esm/context/DashkitOverlayControlsContext.js +2 -0
- package/build/esm/context/index.d.ts +3 -0
- package/build/esm/context/index.js +3 -0
- package/build/esm/hocs/prepareItem.d.ts +2 -1
- package/build/esm/hocs/prepareItem.js +1 -1
- package/build/esm/hocs/withContext.js +20 -17
- 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 +2 -1
- package/build/esm/typings/config.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
|
|
3
|
-
import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
|
|
3
|
+
import type { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
|
|
4
4
|
import GridLayout from '../GridLayout/GridLayout';
|
|
5
|
-
import { OverlayControlItem,
|
|
6
|
-
interface DashKitGeneralProps
|
|
5
|
+
import type { OverlayControlItem, PreparedCopyItemOptions } from '../OverlayControls/OverlayControls';
|
|
6
|
+
interface DashKitGeneralProps {
|
|
7
7
|
config: Config;
|
|
8
8
|
editMode: boolean;
|
|
9
9
|
draggableHandleClassName?: string;
|
|
@@ -11,6 +11,14 @@ interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPrepared
|
|
|
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[];
|
|
14
22
|
onItemEdit: (item: ConfigItem) => void;
|
|
15
23
|
onChange: (data: {
|
|
16
24
|
config: Config;
|
|
@@ -23,27 +31,21 @@ interface DashKitDefaultProps {
|
|
|
23
31
|
isMounted: boolean;
|
|
24
32
|
}) => void;
|
|
25
33
|
onItemRender?: (item: ConfigItem) => void;
|
|
34
|
+
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
|
|
35
|
+
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
|
|
26
36
|
onDragStart?: ItemManipulationCallback;
|
|
27
37
|
onDrag?: ItemManipulationCallback;
|
|
28
38
|
onDragStop?: ItemManipulationCallback;
|
|
29
39
|
onResizeStart?: ItemManipulationCallback;
|
|
30
40
|
onResize?: ItemManipulationCallback;
|
|
31
41
|
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[];
|
|
40
42
|
}
|
|
41
43
|
export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
|
|
42
44
|
}
|
|
43
45
|
type DashKitInnerProps = DashKitGeneralProps & DashKitDefaultProps;
|
|
44
46
|
export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
|
|
45
47
|
static defaultProps: DashKitDefaultProps;
|
|
46
|
-
static contextType: React.Context<
|
|
48
|
+
static contextType: React.Context<void | import("../../context").DashKitDnDCtxShape>;
|
|
47
49
|
static registerPlugins(...plugins: Plugin[]): void;
|
|
48
50
|
static reloadPlugins(...plugins: Plugin[]): void;
|
|
49
51
|
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 context_1 = require("../../context");
|
|
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"));
|
|
@@ -108,4 +108,4 @@ DashKit.defaultProps = {
|
|
|
108
108
|
noOverlay: false,
|
|
109
109
|
focusable: false,
|
|
110
110
|
};
|
|
111
|
-
DashKit.contextType =
|
|
111
|
+
DashKit.contextType = context_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 context_1 = require("../../context");
|
|
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(context_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 context_1 = require("../../context");
|
|
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(context_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 context_1 = require("../../context");
|
|
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 = context_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<import("../../context").DashKitCtxShape>;
|
|
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 context_1 = require("../../context");
|
|
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");
|
|
@@ -494,6 +494,7 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
494
494
|
offset += items.length;
|
|
495
495
|
if (group.render) {
|
|
496
496
|
const groupContext = {
|
|
497
|
+
isMobile: false,
|
|
497
498
|
config,
|
|
498
499
|
editMode,
|
|
499
500
|
items,
|
|
@@ -510,5 +511,5 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
510
511
|
}
|
|
511
512
|
}
|
|
512
513
|
}
|
|
513
|
-
GridLayout.contextType =
|
|
514
|
+
GridLayout.contextType = context_1.DashKitContext;
|
|
514
515
|
exports.default = GridLayout;
|
|
@@ -66,7 +66,8 @@ 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<import("../../context").DashKitCtxShape>;
|
|
70
70
|
};
|
|
71
71
|
export default _default;
|
|
72
72
|
import React from 'react';
|
|
73
|
+
import PropTypes from 'prop-types';
|
|
@@ -1,23 +1,30 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
getMemoAdjustWidgetLayout: (index: any) => any;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DashKitContext } from '../../context';
|
|
3
|
+
import { getSortedConfigItems } from './helpers';
|
|
4
|
+
type MobileLayoutProps = {};
|
|
5
|
+
type MobileLayoutState = {
|
|
6
|
+
itemsWithActiveAutoheight: Record<string, boolean>;
|
|
7
|
+
};
|
|
8
|
+
type PlugibRefObject = React.RefObject<any>;
|
|
9
|
+
export default class MobileLayout extends React.PureComponent<MobileLayoutProps, MobileLayoutState> {
|
|
10
|
+
static contextType: React.Context<import("../../context").DashKitCtxShape>;
|
|
11
|
+
context: React.ContextType<typeof DashKitContext>;
|
|
12
|
+
pluginsRefs: PlugibRefObject[];
|
|
13
|
+
sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null;
|
|
14
|
+
_memoLayout: import("../..").ConfigLayout[];
|
|
15
|
+
_memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void>;
|
|
16
|
+
_memoAdjustWidgetLayout: Record<string, (props: {
|
|
17
|
+
needSetDefault: boolean;
|
|
18
|
+
}) => void>;
|
|
19
|
+
state: MobileLayoutState;
|
|
21
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;
|
|
28
|
+
}) => void;
|
|
22
29
|
}
|
|
23
|
-
|
|
30
|
+
export {};
|
|
@@ -2,7 +2,9 @@
|
|
|
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 groupBy_1 = tslib_1.__importDefault(require("lodash/groupBy"));
|
|
6
|
+
const constants_1 = require("../../constants");
|
|
7
|
+
const context_1 = require("../../context");
|
|
6
8
|
const cn_1 = require("../../utils/cn");
|
|
7
9
|
const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
|
|
8
10
|
const helpers_1 = require("./helpers");
|
|
@@ -11,47 +13,40 @@ class MobileLayout extends react_1.default.PureComponent {
|
|
|
11
13
|
constructor() {
|
|
12
14
|
super(...arguments);
|
|
13
15
|
this.pluginsRefs = [];
|
|
16
|
+
this.sortedLayoutItems = null;
|
|
14
17
|
this._memoLayout = this.context.layout;
|
|
15
18
|
this._memoForwardedPluginRef = [];
|
|
16
|
-
this._memoAdjustWidgetLayout =
|
|
19
|
+
this._memoAdjustWidgetLayout = {};
|
|
17
20
|
this.state = {
|
|
18
|
-
|
|
19
|
-
indexesOfItemsWithActiveAutoheight: {},
|
|
20
|
-
};
|
|
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 }),
|
|
38
|
-
});
|
|
39
|
-
}
|
|
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];
|
|
21
|
+
itemsWithActiveAutoheight: {},
|
|
46
22
|
};
|
|
47
23
|
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
24
|
+
render() {
|
|
25
|
+
const { config, layout, groups = [{ id: constants_1.DEFAULT_GROUP }], context, editMode } = this.context;
|
|
26
|
+
this.pluginsRefs.length = config.items.length;
|
|
27
|
+
const sortedItems = this.getSortedLayoutItems();
|
|
28
|
+
let indexOffset = 0;
|
|
29
|
+
return (react_1.default.createElement("div", { className: b() }, groups.map((group) => {
|
|
30
|
+
const groupId = group.id || constants_1.DEFAULT_GROUP;
|
|
31
|
+
const items = sortedItems[groupId];
|
|
32
|
+
const children = items.map((item, index) => {
|
|
33
|
+
const isItemWithActiveAutoheight = item.id in this.state.itemsWithActiveAutoheight;
|
|
34
|
+
return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
|
|
35
|
+
react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(item.id), forwardedPluginRef: this.getMemoForwardRefCallback(indexOffset + index), onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
|
|
53
36
|
});
|
|
54
|
-
|
|
37
|
+
indexOffset += items.length;
|
|
38
|
+
if (group.render) {
|
|
39
|
+
return group.render(groupId, children, {
|
|
40
|
+
isMobile: true,
|
|
41
|
+
config,
|
|
42
|
+
context,
|
|
43
|
+
editMode,
|
|
44
|
+
items,
|
|
45
|
+
layout,
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
return children;
|
|
49
|
+
})));
|
|
55
50
|
}
|
|
56
51
|
getSortedLayoutItems() {
|
|
57
52
|
if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
|
|
@@ -59,19 +54,37 @@ class MobileLayout extends react_1.default.PureComponent {
|
|
|
59
54
|
}
|
|
60
55
|
this._memoLayout = this.context.layout;
|
|
61
56
|
const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
|
|
62
|
-
this.sortedLayoutItems = (0, helpers_1.getSortedConfigItems)(this.context.config, hasOrderId);
|
|
57
|
+
this.sortedLayoutItems = (0, groupBy_1.default)((0, helpers_1.getSortedConfigItems)(this.context.config, hasOrderId), (item) => item.parent || constants_1.DEFAULT_GROUP);
|
|
63
58
|
return this.sortedLayoutItems;
|
|
64
59
|
}
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
60
|
+
getMemoForwardRefCallback(refIndex) {
|
|
61
|
+
if (!this._memoForwardedPluginRef[refIndex]) {
|
|
62
|
+
this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
|
|
63
|
+
this.pluginsRefs[refIndex] = pluginRef;
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
return this._memoForwardedPluginRef[refIndex];
|
|
67
|
+
}
|
|
68
|
+
adjustWidgetLayout(id, { needSetDefault }) {
|
|
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];
|
|
74
87
|
}
|
|
75
88
|
}
|
|
76
|
-
MobileLayout.contextType =
|
|
89
|
+
MobileLayout.contextType = context_1.DashKitContext;
|
|
77
90
|
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 { OverlayControlsCtxShape } from '../../context';
|
|
4
|
+
import { type ConfigItem, type ItemParams, type ItemState, type PluginBase } from '../../shared';
|
|
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: ItemParams, state: ItemState) => void;
|
|
28
28
|
visible?: (item: ConfigItem) => boolean;
|
|
29
29
|
className?: string;
|
|
30
30
|
qa?: string;
|
|
@@ -50,21 +50,9 @@ 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
|
-
}
|
|
65
53
|
type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
|
|
66
54
|
declare class OverlayControls extends React.Component<OverlayControlsProps> {
|
|
67
|
-
static contextType: React.Context<
|
|
55
|
+
static contextType: React.Context<void | OverlayControlsCtxShape>;
|
|
68
56
|
static defaultProps: OverlayControlsDefaultProps;
|
|
69
57
|
context: React.ContextType<OverlayControlsCtx>;
|
|
70
58
|
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 context_1 = require("../../context");
|
|
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
|
-
this.context.editItem(this.props.configItem);
|
|
127
|
-
(
|
|
125
|
+
var _a, _b, _c, _d;
|
|
126
|
+
(_b = (_a = this.context).editItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.configItem);
|
|
127
|
+
(_d = (_c = this.props).onItemClick) === null || _d === void 0 ? void 0 : _d.call(_c);
|
|
128
128
|
};
|
|
129
129
|
this.onRemoveItem = () => {
|
|
130
130
|
var _a, _b;
|
|
@@ -195,13 +195,12 @@ 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;
|
|
199
198
|
const { view, size, onItemClick } = this.props;
|
|
200
|
-
const { menu: contextMenu, itemsParams,
|
|
199
|
+
const { menu: contextMenu, itemsParams, itemsState } = this.context;
|
|
201
200
|
const configItem = this.props.configItem;
|
|
202
201
|
const itemParams = itemsParams[configItem.id];
|
|
203
|
-
const itemState = (
|
|
204
|
-
const menu =
|
|
202
|
+
const itemState = (itemsState === null || itemsState === void 0 ? void 0 : itemsState[configItem.id]) || {};
|
|
203
|
+
const menu = contextMenu && contextMenu.length > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
|
|
205
204
|
const isDefaultMenu = this.isDefaultMenu(menu);
|
|
206
205
|
const items = isDefaultMenu
|
|
207
206
|
? (menu || []).reduce((memo, name) => {
|
|
@@ -270,7 +269,7 @@ class OverlayControls extends react_1.default.Component {
|
|
|
270
269
|
return result;
|
|
271
270
|
}
|
|
272
271
|
}
|
|
273
|
-
OverlayControls.contextType =
|
|
272
|
+
OverlayControls.contextType = context_1.DashkitOvelayControlsContext;
|
|
274
273
|
OverlayControls.defaultProps = {
|
|
275
274
|
position: OverlayControlsPosition.TopRight,
|
|
276
275
|
view: 'flat',
|
|
@@ -1,4 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
export const DashkitOvelayControlsContext: React.Context<any>;
|
|
3
|
-
export const DashKitDnDContext: React.Context<any>;
|
|
1
|
+
/// <reference types="react-grid-layout" />
|
|
4
2
|
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,11 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
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;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DraggedOverItem, ItemDragProps } from '../shared/types';
|
|
3
|
+
export type DashKitDnDCtxShape = {
|
|
4
|
+
dragProps: ItemDragProps | null;
|
|
5
|
+
dragImagePreview: HTMLImageElement;
|
|
6
|
+
onDragStart: (e: React.DragEvent<Element>, itemDragProps: ItemDragProps) => void;
|
|
7
|
+
onDragEnd: (e: React.DragEvent<Element>) => void;
|
|
8
|
+
onDropDragOver?: (draggedItem: DraggedOverItem, sharedItem: DraggedOverItem | null) => void | boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare const DashKitDnDContext: React.Context<void | DashKitDnDCtxShape>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DashKitDnDContext = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
+
exports.DashKitDnDContext = react_1.default.createContext(undefined);
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { DashKitProps } from '../components';
|
|
3
|
+
import type { ConfigLayout, ItemParams, ItemState } from '../shared';
|
|
4
|
+
import type { MenuItem } from '../typings';
|
|
5
|
+
export type OverlayControlsCtxShape = Pick<DashKitProps, 'context' | 'overlayControls' | 'itemsStateAndParams' | 'getPreparedCopyItemOptions' | 'onCopyFulfill'> & {
|
|
6
|
+
menu: DashKitProps['overlayMenuItems'] | MenuItem[];
|
|
7
|
+
itemsState?: Record<string, ItemState>;
|
|
8
|
+
itemsParams: Record<string, ItemParams>;
|
|
9
|
+
editItem: DashKitProps['onItemEdit'];
|
|
10
|
+
removeItem: (id: string) => void;
|
|
11
|
+
getLayoutItem: (id: string) => ConfigLayout | void;
|
|
12
|
+
};
|
|
13
|
+
export declare const DashkitOvelayControlsContext: React.Context<void | OverlayControlsCtxShape>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DashkitOvelayControlsContext = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
|
+
exports.DashkitOvelayControlsContext = react_1.default.createContext(undefined);
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
tslib_1.__exportStar(require("./DashKitContext"), exports);
|
|
5
|
+
tslib_1.__exportStar(require("./DashkitOverlayControlsContext"), exports);
|
|
6
|
+
tslib_1.__exportStar(require("./DashKitDnDContext"), exports);
|
|
@@ -66,6 +66,7 @@ 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<import("../context").DashKitCtxShape>;
|
|
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 context_1 = require("../context");
|
|
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 = context_1.DashKitContext,
|
|
87
87
|
_a;
|
|
88
88
|
}
|
|
89
89
|
exports.prepareItem = prepareItem;
|