@gravity-ui/dashkit 3.0.2 → 3.1.0-alpha.0

package/build/cjs/components/DashKit/DashKit.d.ts

@@ -22,6 +22,7 @@ interface DashKitDefaultProps {
     noOverlay?: boolean;
     draggableHandleClassName?: string;
     _EXPERIMENTAL_preventDoubleCompact?: boolean;
+    _EXPERIMENTAL_memoContext?: boolean;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

package/build/cjs/components/DashKit/DashKit.js

@@ -67,4 +67,5 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
+    _EXPERIMENTAL_memoContext: false,
 };

package/build/cjs/components/DashKitView/DashKitView.js

@@ -15,9 +15,10 @@ function DashKitView() {
     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 }))));
 }
 const DashKitViewWithContext = (0, withContext_1.withContext)(DashKitView);
+const DashKitViewWithMemoContext = (0, withContext_1.withMemoContext)(DashKitView);
 const DashKitViewForwardedMeta = react_1.default.forwardRef((props, ref) => {
     const layout = (0, useCalcLayout_1.useCalcPropsLayout)(props.config, props.registerManager);
-    return react_1.default.createElement(DashKitViewWithContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref }));
+    return props._EXPERIMENTAL_memoContext ? (react_1.default.createElement(DashKitViewWithMemoContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref }))) : (react_1.default.createElement(DashKitViewWithContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref })));
 });
 DashKitViewForwardedMeta.displayName = 'DashKitViewForwardedMeta';
 exports.default = DashKitViewForwardedMeta;

package/build/cjs/hocs/withContext.d.ts

@@ -163,3 +163,7 @@ export function withContext(Component: any): {
     };
     contextType?: React.Context<any> | undefined;
 };
+export function withMemoContext(Component: any): {
+    (props: any): JSX.Element;
+    displayName: string;
+};

package/build/cjs/hocs/withContext.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withContext = void 0;
+exports.withMemoContext = exports.withContext = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const DashKitContext_1 = require("../context/DashKitContext");
@@ -201,3 +201,177 @@ function withContext(Component) {
         _a;
 }
 exports.withContext = withContext;
+function useMemoStateContext(props) {
+    // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
+    // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
+    // расположении конкретного виджета на сетке) будет храниться в стейте, но, для того, чтобы в стор попадал
+    // лэйаут без учета вижетов с активированной автовысотой, в момент "подстройки" высоты виджета значение h
+    // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
+    const originalLayouts = react_1.default.useRef({});
+    const adjustedLayouts = react_1.default.useRef({});
+    // TODO: need move originalLayouts, adjustedLayouts to state
+    const [layoutUpdateCounter, forceUpdateLayout] = react_1.default.useState(0);
+    const onChange = react_1.default.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
+        if (!((0, isEqual_1.default)(config, props.config) &&
+            (0, isEqual_1.default)(itemsStateAndParams, props.itemsStateAndParams))) {
+            props.onChange({ config, itemsStateAndParams });
+        }
+    }, [props.config, props.itemsStateAndParams, props.onChange]);
+    // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
+    // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
+    // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
+    // виджетов автовысота была деактивирована) корректируем их используя this.originalLayouts
+    const onLayoutChange = react_1.default.useCallback((layout) => {
+        const currentInnerLayout = layout.map((item) => {
+            if (item.i in originalLayouts.current) {
+                return Object.assign(Object.assign({}, originalLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+            }
+            else {
+                return Object.assign({}, item);
+            }
+        });
+        // [experimental] if the _prevent Double Compact is enabled, then skip recalculate layout with auto height
+        // после того, как у виждета активировали автовысоту и его параметр "h" изменился, это приведёт, также, и к
+        // изменению параметра (координаты) "y" у элементов расположенных под ним, поэтому, после того, как
+        // значения параметра "h" виджетов с активированной автовысотой были изменены, необходимо изменить и
+        // координату "y" виджетов расположенных ниже
+        const compactedLayout = props._EXPERIMENTAL_preventDoubleCompact
+            ? currentInnerLayout
+            : react_grid_layout_1.utils.compact(currentInnerLayout, LAYOUT_COMPACTING_TYPE, props.registerManager.gridLayout.cols);
+        const newConfig = utils_1.UpdateManager.updateLayout({
+            layout: compactedLayout,
+            config: props.config,
+        });
+        if (!(0, isEqual_1.default)(newConfig.layout, props.config.layout)) {
+            onChange({ config: newConfig });
+        }
+    }, [props._EXPERIMENTAL_preventDoubleCompact, props.registerManager, props.config, onChange]);
+    const onItemRemove = react_1.default.useCallback((id) => {
+        onChange(utils_1.UpdateManager.removeItem({
+            id,
+            config: props.config,
+            itemsStateAndParams: props.itemsStateAndParams,
+        }));
+    }, [props.config, props.itemsStateAndParams, onChange]);
+    const onItemStateAndParamsChange = react_1.default.useCallback((id, stateAndParams) => {
+        onChange({
+            itemsStateAndParams: utils_1.UpdateManager.changeStateAndParams({
+                id,
+                config: props.config,
+                stateAndParams,
+                itemsStateAndParams: props.itemsStateAndParams,
+            }),
+        });
+    }, [props.config, props.itemsStateAndParams, onChange]);
+    const memorizeOriginalLayout = react_1.default.useCallback((widgetId, preAutoHeightLayout, postAutoHeightLayout) => {
+        if (!(widgetId in originalLayouts.current)) {
+            originalLayouts.current[widgetId] = preAutoHeightLayout;
+        }
+        adjustedLayouts.current[widgetId] = postAutoHeightLayout;
+        forceUpdateLayout((prev) => prev + 1);
+    }, []);
+    const revertToOriginalLayout = react_1.default.useCallback((widgetId) => {
+        delete adjustedLayouts.current[widgetId];
+        delete originalLayouts.current[widgetId];
+        forceUpdateLayout((prev) => prev + 1);
+    }, []);
+    const itemsParams = react_1.default.useMemo(() => (0, shared_1.getItemsParams)({
+        defaultGlobalParams: props.defaultGlobalParams,
+        globalParams: props.globalParams,
+        config: props.config,
+        itemsStateAndParams: props.itemsStateAndParams,
+        plugins: props.registerManager.getPlugins(),
+    }), [
+        props.defaultGlobalParams,
+        props.globalParams,
+        props.config,
+        props.itemsStateAndParams,
+        props.registerManager,
+    ]);
+    const itemsState = react_1.default.useMemo(() => (0, shared_1.getItemsState)({
+        config: props.config,
+        itemsStateAndParams: props.itemsStateAndParams,
+    }), [props.config, props.itemsStateAndParams]);
+    const getItemsMeta = react_1.default.useCallback((pluginsRefs) => {
+        return pluginsRefs
+            .map((ref) => {
+            if (!(ref && typeof ref.getMeta === 'function')) {
+                return undefined;
+            }
+            return ref.getMeta();
+        })
+            .filter(Boolean);
+    }, []);
+    const resultLayout = react_1.default.useMemo(() => {
+        return props.layout.map((item) => {
+            if (item.i in adjustedLayouts.current) {
+                return Object.assign(Object.assign({}, adjustedLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+            }
+            else {
+                return Object.assign({}, item);
+            }
+        });
+    }, [props.layout, layoutUpdateCounter]);
+    // TODO: don't use getLayout when finished experiment _EXPERIMENTAL_memoContext
+    // need use resultLayout like layout props
+    const getLayout = react_1.default.useCallback(() => resultLayout, [resultLayout]);
+    const reloadItems = react_1.default.useCallback((pluginsRefs, data) => {
+        pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+    }, []);
+    return react_1.default.useMemo(() => ({
+        getLayout,
+        config: props.config,
+        context: props.context,
+        overlayControls: props.overlayControls,
+        noOverlay: props.noOverlay,
+        defaultGlobalParams: props.globalParams,
+        globalParams: props.globalParams,
+        editMode: props.editMode,
+        settings: props.settings,
+        itemsState,
+        itemsParams,
+        registerManager: props.registerManager,
+        onItemStateAndParamsChange,
+        removeItem: onItemRemove,
+        editItem: props.onItemEdit,
+        layoutChange: onLayoutChange,
+        getItemsMeta,
+        reloadItems,
+        memorizeOriginalLayout,
+        revertToOriginalLayout,
+        forwardedMetaRef: props.forwardedMetaRef,
+        draggableHandleClassName: props.draggableHandleClassName,
+    }), [
+        getLayout,
+        props.config,
+        props.context,
+        props.overlayControls,
+        props.noOverlay,
+        props.globalParams,
+        props.editMode,
+        props.settings,
+        itemsState,
+        itemsParams,
+        props.registerManager,
+        onItemStateAndParamsChange,
+        onItemRemove,
+        props.onItemEdit,
+        onLayoutChange,
+        getItemsMeta,
+        reloadItems,
+        memorizeOriginalLayout,
+        revertToOriginalLayout,
+        props.forwardedMetaRef,
+        props.draggableHandleClassName,
+    ]);
+}
+function withMemoContext(Component) {
+    const WithMemoContext = (props) => {
+        const contextValue = useMemoStateContext(props);
+        return (react_1.default.createElement(DashKitContext_1.DashKitContext.Provider, { value: contextValue },
+            react_1.default.createElement(Component, null)));
+    };
+    WithMemoContext.displayName = `withMemoContext(${Component.displayName || Component.name || 'Component'}`;
+    return WithMemoContext;
+}
+exports.withMemoContext = withMemoContext;

package/build/esm/components/DashKit/DashKit.d.ts

@@ -22,6 +22,7 @@ interface DashKitDefaultProps {
     noOverlay?: boolean;
     draggableHandleClassName?: string;
     _EXPERIMENTAL_preventDoubleCompact?: boolean;
+    _EXPERIMENTAL_memoContext?: boolean;
 }
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
 }

package/build/esm/components/DashKit/DashKit.js

@@ -62,4 +62,5 @@ DashKit.defaultProps = {
     },
     context: {},
     noOverlay: false,
+    _EXPERIMENTAL_memoContext: false,
 };

package/build/esm/components/DashKitView/DashKitView.js

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 import { DashKitContext } from '../../context/DashKitContext';
 import GridLayout from '../GridLayout/GridLayout';
 import MobileLayout from '../MobileLayout/MobileLayout';
-import { withContext } from '../../hocs/withContext';
+import { withContext, withMemoContext } from '../../hocs/withContext';
 import { useCalcPropsLayout } from '../../hooks/useCalcLayout';
 import './DashKitView.css';
 const b = block('dashkit');
@@ -13,9 +13,10 @@ function DashKitView() {
     return (React.createElement("div", { className: b({ theme: registerManager.settings.theme }) }, registerManager.settings.isMobile ? (React.createElement(MobileLayout, null)) : (React.createElement(GridLayout, { ref: forwardedMetaRef }))));
 }
 const DashKitViewWithContext = withContext(DashKitView);
+const DashKitViewWithMemoContext = withMemoContext(DashKitView);
 const DashKitViewForwardedMeta = React.forwardRef((props, ref) => {
     const layout = useCalcPropsLayout(props.config, props.registerManager);
-    return React.createElement(DashKitViewWithContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref }));
+    return props._EXPERIMENTAL_memoContext ? (React.createElement(DashKitViewWithMemoContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref }))) : (React.createElement(DashKitViewWithContext, Object.assign({}, props, { layout: layout, forwardedMetaRef: ref })));
 });
 DashKitViewForwardedMeta.displayName = 'DashKitViewForwardedMeta';
 export default DashKitViewForwardedMeta;

package/build/esm/hocs/withContext.d.ts

@@ -163,3 +163,7 @@ export function withContext(Component: any): {
     };
     contextType?: React.Context<any> | undefined;
 };
+export function withMemoContext(Component: any): {
+    (props: any): JSX.Element;
+    displayName: string;
+};

package/build/esm/hocs/withContext.js

@@ -196,3 +196,176 @@ export function withContext(Component) {
         },
         _a;
 }
+function useMemoStateContext(props) {
+    // так как мы не хотим хранить параметры виджета с активированной автовысотой в сторе и на сервере, актуальный
+    // (видимый юзером в конкретный момент времени) лэйаут (массив объектов с данными о ширине, высоте,
+    // расположении конкретного виджета на сетке) будет храниться в стейте, но, для того, чтобы в стор попадал
+    // лэйаут без учета вижетов с активированной автовысотой, в момент "подстройки" высоты виджета значение h
+    // (высота) из конфига будет запоминаться в originalLayouts, новое значение высоты в adjustedLayouts
+    const originalLayouts = React.useRef({});
+    const adjustedLayouts = React.useRef({});
+    // TODO: need move originalLayouts, adjustedLayouts to state
+    const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
+    const onChange = React.useCallback(({ config = props.config, itemsStateAndParams = props.itemsStateAndParams }) => {
+        if (!(isEqual(config, props.config) &&
+            isEqual(itemsStateAndParams, props.itemsStateAndParams))) {
+            props.onChange({ config, itemsStateAndParams });
+        }
+    }, [props.config, props.itemsStateAndParams, props.onChange]);
+    // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
+    // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
+    // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
+    // виджетов автовысота была деактивирована) корректируем их используя this.originalLayouts
+    const onLayoutChange = React.useCallback((layout) => {
+        const currentInnerLayout = layout.map((item) => {
+            if (item.i in originalLayouts.current) {
+                return Object.assign(Object.assign({}, originalLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+            }
+            else {
+                return Object.assign({}, item);
+            }
+        });
+        // [experimental] if the _prevent Double Compact is enabled, then skip recalculate layout with auto height
+        // после того, как у виждета активировали автовысоту и его параметр "h" изменился, это приведёт, также, и к
+        // изменению параметра (координаты) "y" у элементов расположенных под ним, поэтому, после того, как
+        // значения параметра "h" виджетов с активированной автовысотой были изменены, необходимо изменить и
+        // координату "y" виджетов расположенных ниже
+        const compactedLayout = props._EXPERIMENTAL_preventDoubleCompact
+            ? currentInnerLayout
+            : gridLayoutUtils.compact(currentInnerLayout, LAYOUT_COMPACTING_TYPE, props.registerManager.gridLayout.cols);
+        const newConfig = UpdateManager.updateLayout({
+            layout: compactedLayout,
+            config: props.config,
+        });
+        if (!isEqual(newConfig.layout, props.config.layout)) {
+            onChange({ config: newConfig });
+        }
+    }, [props._EXPERIMENTAL_preventDoubleCompact, props.registerManager, props.config, onChange]);
+    const onItemRemove = React.useCallback((id) => {
+        onChange(UpdateManager.removeItem({
+            id,
+            config: props.config,
+            itemsStateAndParams: props.itemsStateAndParams,
+        }));
+    }, [props.config, props.itemsStateAndParams, onChange]);
+    const onItemStateAndParamsChange = React.useCallback((id, stateAndParams) => {
+        onChange({
+            itemsStateAndParams: UpdateManager.changeStateAndParams({
+                id,
+                config: props.config,
+                stateAndParams,
+                itemsStateAndParams: props.itemsStateAndParams,
+            }),
+        });
+    }, [props.config, props.itemsStateAndParams, onChange]);
+    const memorizeOriginalLayout = React.useCallback((widgetId, preAutoHeightLayout, postAutoHeightLayout) => {
+        if (!(widgetId in originalLayouts.current)) {
+            originalLayouts.current[widgetId] = preAutoHeightLayout;
+        }
+        adjustedLayouts.current[widgetId] = postAutoHeightLayout;
+        forceUpdateLayout((prev) => prev + 1);
+    }, []);
+    const revertToOriginalLayout = React.useCallback((widgetId) => {
+        delete adjustedLayouts.current[widgetId];
+        delete originalLayouts.current[widgetId];
+        forceUpdateLayout((prev) => prev + 1);
+    }, []);
+    const itemsParams = React.useMemo(() => getItemsParams({
+        defaultGlobalParams: props.defaultGlobalParams,
+        globalParams: props.globalParams,
+        config: props.config,
+        itemsStateAndParams: props.itemsStateAndParams,
+        plugins: props.registerManager.getPlugins(),
+    }), [
+        props.defaultGlobalParams,
+        props.globalParams,
+        props.config,
+        props.itemsStateAndParams,
+        props.registerManager,
+    ]);
+    const itemsState = React.useMemo(() => getItemsState({
+        config: props.config,
+        itemsStateAndParams: props.itemsStateAndParams,
+    }), [props.config, props.itemsStateAndParams]);
+    const getItemsMeta = React.useCallback((pluginsRefs) => {
+        return pluginsRefs
+            .map((ref) => {
+            if (!(ref && typeof ref.getMeta === 'function')) {
+                return undefined;
+            }
+            return ref.getMeta();
+        })
+            .filter(Boolean);
+    }, []);
+    const resultLayout = React.useMemo(() => {
+        return props.layout.map((item) => {
+            if (item.i in adjustedLayouts.current) {
+                return Object.assign(Object.assign({}, adjustedLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+            }
+            else {
+                return Object.assign({}, item);
+            }
+        });
+    }, [props.layout, layoutUpdateCounter]);
+    // TODO: don't use getLayout when finished experiment _EXPERIMENTAL_memoContext
+    // need use resultLayout like layout props
+    const getLayout = React.useCallback(() => resultLayout, [resultLayout]);
+    const reloadItems = React.useCallback((pluginsRefs, data) => {
+        pluginsRefs.forEach((ref) => ref && ref.reload && ref.reload(data));
+    }, []);
+    return React.useMemo(() => ({
+        getLayout,
+        config: props.config,
+        context: props.context,
+        overlayControls: props.overlayControls,
+        noOverlay: props.noOverlay,
+        defaultGlobalParams: props.globalParams,
+        globalParams: props.globalParams,
+        editMode: props.editMode,
+        settings: props.settings,
+        itemsState,
+        itemsParams,
+        registerManager: props.registerManager,
+        onItemStateAndParamsChange,
+        removeItem: onItemRemove,
+        editItem: props.onItemEdit,
+        layoutChange: onLayoutChange,
+        getItemsMeta,
+        reloadItems,
+        memorizeOriginalLayout,
+        revertToOriginalLayout,
+        forwardedMetaRef: props.forwardedMetaRef,
+        draggableHandleClassName: props.draggableHandleClassName,
+    }), [
+        getLayout,
+        props.config,
+        props.context,
+        props.overlayControls,
+        props.noOverlay,
+        props.globalParams,
+        props.editMode,
+        props.settings,
+        itemsState,
+        itemsParams,
+        props.registerManager,
+        onItemStateAndParamsChange,
+        onItemRemove,
+        props.onItemEdit,
+        onLayoutChange,
+        getItemsMeta,
+        reloadItems,
+        memorizeOriginalLayout,
+        revertToOriginalLayout,
+        props.forwardedMetaRef,
+        props.draggableHandleClassName,
+    ]);
+}
+export function withMemoContext(Component) {
+    const WithMemoContext = (props) => {
+        const contextValue = useMemoStateContext(props);
+        return (React.createElement(DashKitContext.Provider, { value: contextValue },
+            React.createElement(Component, null)));
+    };
+    WithMemoContext.displayName = `withMemoContext(${Component.displayName || Component.name || 'Component'}`;
+    return WithMemoContext;
+}

package/package.json

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