@gravity-ui/dashkit 8.21.0 → 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 -16
- package/build/cjs/components/DashKit/DashKit.js +2 -6
- 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 +2 -2
- package/build/cjs/components/GridLayout/GridLayout.js +6 -12
- 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/i18n/index.d.ts +1 -5
- 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 -16
- package/build/esm/components/DashKit/DashKit.js +1 -5
- 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 +2 -2
- package/build/esm/components/GridLayout/GridLayout.js +5 -11
- 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/i18n/index.d.ts +1 -5
- 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 +4 -4
|
@@ -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;
|
|
@@ -70,9 +72,5 @@ export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
|
|
|
70
72
|
metaRef: React.RefObject<GridLayout>;
|
|
71
73
|
render(): JSX.Element;
|
|
72
74
|
getItemsMeta(): any;
|
|
73
|
-
reloadItems(options?: {
|
|
74
|
-
targetIds?: string[];
|
|
75
|
-
force?: boolean;
|
|
76
|
-
}): void;
|
|
77
75
|
}
|
|
78
76
|
export {};
|
|
@@ -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"));
|
|
@@ -91,10 +91,6 @@ class DashKit extends react_1.default.PureComponent {
|
|
|
91
91
|
var _a;
|
|
92
92
|
return (_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.getItemsMeta();
|
|
93
93
|
}
|
|
94
|
-
reloadItems(options) {
|
|
95
|
-
var _a;
|
|
96
|
-
(_a = this.metaRef.current) === null || _a === void 0 ? void 0 : _a.reloadItems(options);
|
|
97
|
-
}
|
|
98
94
|
}
|
|
99
95
|
exports.DashKit = DashKit;
|
|
100
96
|
DashKit.defaultProps = {
|
|
@@ -112,4 +108,4 @@ DashKit.defaultProps = {
|
|
|
112
108
|
noOverlay: false,
|
|
113
109
|
focusable: false,
|
|
114
110
|
};
|
|
115
|
-
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: {
|
|
@@ -38,7 +38,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
|
|
|
38
38
|
};
|
|
39
39
|
getMemoForwardRefCallback: (refIndex: any) => any;
|
|
40
40
|
mergeGroupsLayout(group: any, newLayout: any, temporaryItem: any): any;
|
|
41
|
-
reloadItems(
|
|
41
|
+
reloadItems(): void;
|
|
42
42
|
prepareDefaultArguments(group: any, layout: any, oldItem: any, newItem: any, placeholder: any, e: any, element: any): {
|
|
43
43
|
group: any;
|
|
44
44
|
layout: any;
|
|
@@ -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");
|
|
@@ -252,26 +252,19 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
252
252
|
return currentItem;
|
|
253
253
|
});
|
|
254
254
|
}
|
|
255
|
-
reloadItems(
|
|
256
|
-
const { targetIds, force } = options || {};
|
|
255
|
+
reloadItems() {
|
|
257
256
|
const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
|
|
258
257
|
const { isPageHidden } = this.state;
|
|
259
258
|
const autoupdateIntervalMs = Number(autoupdateInterval) * 1000;
|
|
260
|
-
const targetPlugins = targetIds
|
|
261
|
-
? this.pluginsRefs.filter((plugin) => targetIds.includes(plugin.props.id))
|
|
262
|
-
: this.pluginsRefs;
|
|
263
259
|
if (autoupdateIntervalMs) {
|
|
264
260
|
const timeSinceLastReload = new Date().getTime() - (this._lastReloadAt || 0);
|
|
265
261
|
const reloadIntervalRemains = autoupdateIntervalMs - timeSinceLastReload;
|
|
266
|
-
if (
|
|
262
|
+
if (!isPageHidden && !editMode && reloadIntervalRemains <= 0) {
|
|
267
263
|
this._lastReloadAt = new Date().getTime();
|
|
268
|
-
reloadItems(
|
|
264
|
+
reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
|
|
269
265
|
}
|
|
270
266
|
this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
|
|
271
267
|
}
|
|
272
|
-
else if (force || (!isPageHidden && !editMode)) {
|
|
273
|
-
reloadItems(targetPlugins, { silentLoading, noVeil: true });
|
|
274
|
-
}
|
|
275
268
|
}
|
|
276
269
|
prepareDefaultArguments(group, layout, oldItem, newItem, placeholder, e, element) {
|
|
277
270
|
return {
|
|
@@ -501,6 +494,7 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
501
494
|
offset += items.length;
|
|
502
495
|
if (group.render) {
|
|
503
496
|
const groupContext = {
|
|
497
|
+
isMobile: false,
|
|
504
498
|
config,
|
|
505
499
|
editMode,
|
|
506
500
|
items,
|
|
@@ -517,5 +511,5 @@ class GridLayout extends react_1.default.PureComponent {
|
|
|
517
511
|
}
|
|
518
512
|
}
|
|
519
513
|
}
|
|
520
|
-
GridLayout.contextType =
|
|
514
|
+
GridLayout.contextType = context_1.DashKitContext;
|
|
521
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';
|