@gravity-ui/dashkit 8.1.0-beta.7 → 8.1.0-beta.8

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.
Files changed (5) hide show
  1. package/build/cjs/components/GridLayout/GridLayout.js +10 -10
  2. package/build/cjs/hocs/withContext.js +7 -5
  3. package/build/esm/components/GridLayout/GridLayout.js +10 -10
  4. package/build/esm/hocs/withContext.js +7 -5
  5. package/package.json +1 -1
package/build/cjs/components/GridLayout/GridLayout.js CHANGED
@@ -46,8 +46,8 @@ class GridLayout extends react_1.default.PureComponent {
46
46
  this.setState({ isDragging: false });
47
47
  };
48
48
  this._onDropDragOver = (e) => {
49
- const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
50
- if (!editMode || !dragOverPlugin || temporaryLayout) {
49
+ const { editMode, dragOverPlugin, onDropDragOver } = this.context;
50
+ if (!editMode || !dragOverPlugin) {
51
51
  return false;
52
52
  }
53
53
  return onDropDragOver(e);
@@ -56,8 +56,8 @@ class GridLayout extends react_1.default.PureComponent {
56
56
  if (!item) {
57
57
  return false;
58
58
  }
59
- const { editMode, temporaryLayout, onDrop } = this.context;
60
- if (!editMode && temporaryLayout) {
59
+ const { editMode, onDrop } = this.context;
60
+ if (!editMode) {
61
61
  return false;
62
62
  }
63
63
  onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
@@ -95,18 +95,18 @@ class GridLayout extends react_1.default.PureComponent {
95
95
  }
96
96
  }
97
97
  renderTemporaryPlaceholder() {
98
- const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
99
- if (!temporaryLayout || !dragOverPlugin) {
98
+ const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
99
+ if (!temporaryLayout || !temporaryLayout.dragProps) {
100
100
  return null;
101
101
  }
102
102
  const id = constants_1.TEMPORARY_ITEM_ID;
103
- const type = dragOverPlugin.type;
104
- return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
103
+ const { type } = temporaryLayout.dragProps;
104
+ return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
105
105
  }
106
106
  render() {
107
107
  const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
108
108
  this.pluginsRefs.length = config.items.length;
109
- return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { layout: temporaryLayout || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
109
+ return (react_1.default.createElement(ReactGridLayout_1.Layout, Object.assign({}, registerManager.gridLayout, { layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
110
110
  ? { draggableHandle: `.${draggableHandleClassName}` }
111
111
  : null), (outerDnDEnable
112
112
  ? {
@@ -118,7 +118,7 @@ class GridLayout extends react_1.default.PureComponent {
118
118
  config.items.map((item, i) => {
119
119
  return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
120
120
  this.pluginsRefs[i] = pluginRef;
121
- }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
121
+ }, key: item.id, id: item.id, item: item, layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
122
122
  }),
123
123
  this.renderTemporaryPlaceholder()));
124
124
  }
package/build/cjs/hocs/withContext.js CHANGED
@@ -55,7 +55,7 @@ function useMemoStateContext(props) {
55
55
  }
56
56
  else {
57
57
  if (temporaryLayout) {
58
- setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
58
+ setTemporaryLayout(Object.assign(Object.assign({}, temporaryLayout), { data: temporaryLayout.filter(({ i }) => i !== id) }));
59
59
  }
60
60
  onChange(utils_1.UpdateManager.removeItem({
61
61
  id,
@@ -171,14 +171,16 @@ function useMemoStateContext(props) {
171
171
  }
172
172
  return false;
173
173
  }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
174
- const onDropProp = props.onDrop;
175
174
  const onDrop = react_1.default.useCallback((newLayout, item) => {
176
175
  if (!dragProps) {
177
176
  return;
178
177
  }
179
- setTemporaryLayout(newLayout);
178
+ setTemporaryLayout({
179
+ data: newLayout,
180
+ dragProps,
181
+ });
180
182
  const { i, w, h, x, y } = item;
181
- onDropProp({
183
+ props.onDrop({
182
184
  newLayout: newLayout.reduce((memo, l) => {
183
185
  if (l.i !== i) {
184
186
  memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
@@ -189,7 +191,7 @@ function useMemoStateContext(props) {
189
191
  commit: resetTemporaryLayout,
190
192
  dragProps,
191
193
  });
192
- }, [dragProps, onDropProp, resetTemporaryLayout]);
194
+ }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
193
195
  return react_1.default.useMemo(() => ({
194
196
  layout: resultLayout,
195
197
  temporaryLayout,
package/build/esm/components/GridLayout/GridLayout.js CHANGED
@@ -43,8 +43,8 @@ class GridLayout extends React.PureComponent {
43
43
  this.setState({ isDragging: false });
44
44
  };
45
45
  this._onDropDragOver = (e) => {
46
- const { editMode, dragOverPlugin, onDropDragOver, temporaryLayout } = this.context;
47
- if (!editMode || !dragOverPlugin || temporaryLayout) {
46
+ const { editMode, dragOverPlugin, onDropDragOver } = this.context;
47
+ if (!editMode || !dragOverPlugin) {
48
48
  return false;
49
49
  }
50
50
  return onDropDragOver(e);
@@ -53,8 +53,8 @@ class GridLayout extends React.PureComponent {
53
53
  if (!item) {
54
54
  return false;
55
55
  }
56
- const { editMode, temporaryLayout, onDrop } = this.context;
57
- if (!editMode && temporaryLayout) {
56
+ const { editMode, onDrop } = this.context;
57
+ if (!editMode) {
58
58
  return false;
59
59
  }
60
60
  onDrop === null || onDrop === void 0 ? void 0 : onDrop(layout, item, e);
@@ -92,18 +92,18 @@ class GridLayout extends React.PureComponent {
92
92
  }
93
93
  }
94
94
  renderTemporaryPlaceholder() {
95
- const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
96
- if (!temporaryLayout || !dragOverPlugin) {
95
+ const { temporaryLayout, noOverlay, draggableHandleClassName } = this.context;
96
+ if (!temporaryLayout || !temporaryLayout.dragProps) {
97
97
  return null;
98
98
  }
99
99
  const id = TEMPORARY_ITEM_ID;
100
- const type = dragOverPlugin.type;
101
- return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
100
+ const { type } = temporaryLayout.dragProps;
101
+ return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout.data, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
102
102
  }
103
103
  render() {
104
104
  const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
105
105
  this.pluginsRefs.length = config.items.length;
106
- return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: temporaryLayout || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
106
+ return (React.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
107
107
  ? { draggableHandle: `.${draggableHandleClassName}` }
108
108
  : null), (outerDnDEnable
109
109
  ? {
@@ -115,7 +115,7 @@ class GridLayout extends React.PureComponent {
115
115
  config.items.map((item, i) => {
116
116
  return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
117
117
  this.pluginsRefs[i] = pluginRef;
118
- }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
118
+ }, key: item.id, id: item.id, item: item, layout: (temporaryLayout === null || temporaryLayout === void 0 ? void 0 : temporaryLayout.data) || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
119
119
  }),
120
120
  this.renderTemporaryPlaceholder()));
121
121
  }
package/build/esm/hocs/withContext.js CHANGED
@@ -51,7 +51,7 @@ function useMemoStateContext(props) {
51
51
  }
52
52
  else {
53
53
  if (temporaryLayout) {
54
- setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
54
+ setTemporaryLayout(Object.assign(Object.assign({}, temporaryLayout), { data: temporaryLayout.filter(({ i }) => i !== id) }));
55
55
  }
56
56
  onChange(UpdateManager.removeItem({
57
57
  id,
@@ -167,14 +167,16 @@ function useMemoStateContext(props) {
167
167
  }
168
168
  return false;
169
169
  }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin, dragProps]);
170
- const onDropProp = props.onDrop;
171
170
  const onDrop = React.useCallback((newLayout, item) => {
172
171
  if (!dragProps) {
173
172
  return;
174
173
  }
175
- setTemporaryLayout(newLayout);
174
+ setTemporaryLayout({
175
+ data: newLayout,
176
+ dragProps,
177
+ });
176
178
  const { i, w, h, x, y } = item;
177
- onDropProp({
179
+ props.onDrop({
178
180
  newLayout: newLayout.reduce((memo, l) => {
179
181
  if (l.i !== i) {
180
182
  memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
@@ -185,7 +187,7 @@ function useMemoStateContext(props) {
185
187
  commit: resetTemporaryLayout,
186
188
  dragProps,
187
189
  });
188
- }, [dragProps, onDropProp, resetTemporaryLayout]);
190
+ }, [dragProps, props.onDrop, setTemporaryLayout, resetTemporaryLayout]);
189
191
  return React.useMemo(() => ({
190
192
  layout: resultLayout,
191
193
  temporaryLayout,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/dashkit",
3
- "version": "8.1.0-beta.7",
3
+ "version": "8.1.0-beta.8",
4
4
  "description": "Library for rendering dashboard grid layout",
5
5
  "license": "MIT",
6
6
  "repository": {