@gravity-ui/dashkit 8.0.2 → 8.1.0-beta.0

package/build/esm/hocs/withContext.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import isEqual from 'lodash/isEqual';
-import { DashKitContext } from '../context/DashKitContext';
+import { TEMPORARY_ITEM_ID } from '../constants/common';
+import { DashKitContext, DashKitDnDContext } from '../context/DashKitContext';
 import { getItemsParams, getItemsState } from '../shared';
 import { UpdateManager } from '../utils';
 function useMemoStateContext(props) {
@@ -11,6 +12,10 @@ function useMemoStateContext(props) {
     // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
     const originalLayouts = React.useRef({});
     const adjustedLayouts = React.useRef({});
+    const [temporaryLayout, setTemporaryLayout] = React.useState(null);
+    const resetTemporaryLayout = React.useCallback(() => setTemporaryLayout(null), [setTemporaryLayout]);
+    const dndContext = React.useContext(DashKitDnDContext);
+    const outerDnDEnable = Boolean(dndContext);
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
     const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
@@ -41,12 +46,27 @@ function useMemoStateContext(props) {
         }
     }, [props.config, onChange]);
     const onItemRemove = React.useCallback((id) => {
-        onChange(UpdateManager.removeItem({
-            id,
-            config: props.config,
-            itemsStateAndParams: props.itemsStateAndParams,
-        }));
-    }, [props.config, props.itemsStateAndParams, onChange]);
+        if (id === TEMPORARY_ITEM_ID) {
+            resetTemporaryLayout();
+        }
+        else {
+            if (temporaryLayout) {
+                setTemporaryLayout(temporaryLayout.filter(({ i }) => i !== id));
+            }
+            onChange(UpdateManager.removeItem({
+                id,
+                config: props.config,
+                itemsStateAndParams: props.itemsStateAndParams,
+            }));
+        }
+    }, [
+        props.config,
+        props.itemsStateAndParams,
+        temporaryLayout,
+        onChange,
+        setTemporaryLayout,
+        resetTemporaryLayout,
+    ]);
     const onItemStateAndParamsChange = React.useCallback((id, stateAndParams, options) => {
         onChange({
             itemsStateAndParams: UpdateManager.changeStateAndParams({
@@ -120,11 +140,62 @@ function useMemoStateContext(props) {
     const reloadItems = React.useCallback((pluginsRefs, data) => {
         pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
     }, []);
+    const draggedPluginRef = React.useRef(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    React.useEffect(() => {
+        if (!(dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) && !temporaryLayout) {
+            draggedPluginRef.current = null;
+        }
+        else if (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType) {
+            draggedPluginRef.current = dndContext.dragPluginType;
+        }
+    }, [draggedPluginRef, dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType, temporaryLayout]);
+    const dndPluginType = draggedPluginRef.current || (dndContext === null || dndContext === void 0 ? void 0 : dndContext.dragPluginType);
+    const dragOverPlugin = React.useMemo(() => {
+        const pluginType = dndPluginType;
+        if (pluginType === null && temporaryLayout === null)
+            return null;
+        if (props.registerManager.check(pluginType)) {
+            return props.registerManager.getItem(pluginType);
+        }
+        else {
+            // eslint-disable-next-line no-console
+            console.error(`Uknown pluginType: ${pluginType}`);
+            return null;
+        }
+    }, [dndPluginType, props.registerManager, temporaryLayout]);
+    const onDropDragOver = React.useCallback(() => {
+        if (temporaryLayout) {
+            resetTemporaryLayout();
+            return false;
+        }
+        if (dragOverPlugin === null || dragOverPlugin === void 0 ? void 0 : dragOverPlugin.defaultLayout) {
+            const { h = 3, w = 3 } = dragOverPlugin.defaultLayout;
+            return { h, w };
+        }
+        return false;
+    }, [resetTemporaryLayout, temporaryLayout, dragOverPlugin]);
+    const onDrop = React.useCallback((newLayout, item) => {
+        setTemporaryLayout(newLayout);
+        const { i, w, h, x, y } = item;
+        props.onDrop({
+            newLayout: newLayout.reduce((memo, l) => {
+                if (l.i !== i) {
+                    memo.push({ i: l.i, w: l.w, h: l.h, x: l.x, y: l.y });
+                }
+                return memo;
+            }, []),
+            itemLayout: { w, h, x, y },
+            pluginType: dndPluginType,
+            commit: resetTemporaryLayout,
+        });
+    }, [dndPluginType, props.onDrop]);
     return React.useMemo(() => ({
         layout: resultLayout,
+        temporaryLayout,
         config: props.config,
         context: props.context,
         noOverlay: props.noOverlay,
+        focusable: props.focusable,
         defaultGlobalParams: props.globalParams,
         globalParams: props.globalParams,
         editMode: props.editMode,
@@ -134,6 +205,8 @@ function useMemoStateContext(props) {
         registerManager: props.registerManager,
         onItemStateAndParamsChange,
         removeItem: onItemRemove,
+        onDrop,
+        onDropDragOver,
         editItem: props.onItemEdit,
         layoutChange: onLayoutChange,
         getItemsMeta,
@@ -142,11 +215,15 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         forwardedMetaRef: props.forwardedMetaRef,
         draggableHandleClassName: props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     }), [
         resultLayout,
+        temporaryLayout,
         props.config,
         props.context,
         props.noOverlay,
+        props.focusable,
         props.globalParams,
         props.editMode,
         props.settings,
@@ -155,6 +232,8 @@ function useMemoStateContext(props) {
         props.registerManager,
         onItemStateAndParamsChange,
         onItemRemove,
+        onDrop,
+        onDropDragOver,
         props.onItemEdit,
         onLayoutChange,
         getItemsMeta,
@@ -163,6 +242,8 @@ function useMemoStateContext(props) {
         revertToOriginalLayout,
         props.forwardedMetaRef,
         props.draggableHandleClassName,
+        outerDnDEnable,
+        dragOverPlugin,
     ]);
 }
 export function withContext(Component) {

package/build/esm/plugins/Text/Text.js

@@ -113,5 +113,8 @@ const plugin = {
     renderer(props, forwardedRef) {
         return React.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
+    placeholderRenderer(_, forwardedRef) {
+        return React.createElement("div", { ref: forwardedRef }, "Text placeholder");
+    },
 };
 export default plugin;

package/build/esm/shared/constants/common.d.ts

@@ -1,3 +1,4 @@
 export declare const CURRENT_VERSION = 2;
 export declare const META_KEY = "__meta__";
 export declare const ACTION_PARAM_PREFIX = "_ap_";
+export declare const TERMORARY_ITEM_ID = "__dropping-elem__";

package/build/esm/shared/constants/common.js

@@ -1,3 +1,4 @@
 export const CURRENT_VERSION = 2;
 export const META_KEY = '__meta__';
 export const ACTION_PARAM_PREFIX = '_ap_';
+export const TERMORARY_ITEM_ID = '__dropping-elem__';

package/build/esm/typings/config.d.ts

@@ -8,3 +8,6 @@ export type SetConfigItem = ConfigItem | AddConfigItem;
 export type SetItemOptions = {
     excludeIds?: string[];
 };
+export type SetNewItemOptions = SetItemOptions & {
+    updateLayout?: ConfigLayout[];
+};

package/build/esm/typings/plugin.d.ts

@@ -36,4 +36,5 @@ export interface PluginDefaultLayout {
 export interface Plugin<P extends PluginWidgetProps<T> = any, T = StringParams> extends PluginBase {
     defaultLayout?: PluginDefaultLayout;
     renderer: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
+    placeholderRenderer?: (props: P, forwardedRef: React.RefObject<any>) => React.ReactNode;
 }

package/build/esm/utils/update-manager.d.ts

@@ -1,5 +1,5 @@
 import type { Config, ConfigItem, ItemStateAndParams, ItemStateAndParamsChangeOptions, ItemsStateAndParams } from '../shared';
-import type { AddConfigItem, SetItemOptions, WidgetLayout } from '../typings';
+import type { AddConfigItem, SetItemOptions, SetNewItemOptions, WidgetLayout } from '../typings';
 import { RegisterManagerPluginLayout } from './register-manager';
 interface RemoveItemArg {
     id: string;
@@ -19,7 +19,7 @@ export declare class UpdateManager {
         namespace: string;
         layout: RegisterManagerPluginLayout;
         config: Config;
-        options: SetItemOptions;
+        options: SetNewItemOptions;
     }): Config;
     static editItem({ item, namespace, config, options, }: {
         item: ConfigItem;

package/build/esm/utils/update-manager.js

@@ -212,19 +212,37 @@ function changeGroupParams({ groupItemIds, initiatorId, initiatorItem, itemsStat
 }
 export class UpdateManager {
     static addItem({ item, namespace = DEFAULT_NAMESPACE, layout, config, options, }) {
-        const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
-        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
         const salt = config.salt;
         const newItemData = getNewItemData({ item, config, salt, counter: config.counter, options });
         let counter = newItemData.counter;
         const newIdData = getNewId({ config, salt, counter, excludeIds: newItemData.excludeIds });
         counter = newIdData.counter;
         const newItem = Object.assign(Object.assign({}, item), { id: newIdData.id, data: newItemData.data, namespace });
-        return update(config, {
-            items: { $push: [newItem] },
-            layout: { $push: [Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id })] },
-            counter: { $set: counter },
-        });
+        const saveDefaultLayout = pick(layout, ['h', 'w', 'x', 'y']);
+        if (options.updateLayout) {
+            const byId = options.updateLayout.reduce((memo, t) => {
+                memo[t.i] = t;
+                return memo;
+            }, {});
+            const newLayout = [
+                ...config.layout.map((t) => (Object.assign(Object.assign({}, t), (byId[t.i] || {})))),
+                Object.assign(Object.assign({}, saveDefaultLayout), { i: newItem.id }),
+            ];
+            return update(config, {
+                items: { $push: [newItem] },
+                layout: { $set: newLayout },
+                counter: { $set: counter },
+            });
+        }
+        else {
+            const layoutY = Math.max(0, ...config.layout.map(({ h, y }) => h + y));
+            const newLayoutItem = Object.assign(Object.assign({}, saveDefaultLayout), { y: layoutY, i: newItem.id });
+            return update(config, {
+                items: { $push: [newItem] },
+                layout: { $push: [newLayoutItem] },
+                counter: { $set: counter },
+            });
+        }
     }
     static editItem({ item, namespace = DEFAULT_NAMESPACE, config, options, }) {
         const itemIndex = config.items.findIndex(({ id }) => item.id === id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.0.2",
+  "version": "8.1.0-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {