ydb-embedded-ui 12.5.0 → 12.6.0

package/dist/utils/hooks/useSelectedColumns.js

@@ -1,35 +1,56 @@
 import React from 'react';
 import { settingsManager } from '../../services/settings';
+function parseSavedColumn(saved) {
+    if (typeof saved === 'string') {
+        return { id: saved, selected: true };
+    }
+    if (saved && typeof saved === 'object' && 'id' in saved && typeof saved.id === 'string') {
+        const selected = 'selected' in saved ? Boolean(saved.selected) : false;
+        return { id: saved.id, selected };
+    }
+    return undefined;
+}
 export const useSelectedColumns = (columns, storageKey, columnsTitles, defaultColumnsIds, requiredColumnsIds) => {
-    const [selectedColumnsIds, setSelectedColumnsIds] = React.useState(() => {
-        return settingsManager.readUserSettingsValue(storageKey, defaultColumnsIds);
+    const [orderedColumns, setOrderedColumns] = React.useState(() => {
+        const savedColumns = settingsManager.readUserSettingsValue(storageKey, defaultColumnsIds);
+        const normalizedSavedColumns = savedColumns.map(parseSavedColumn);
+        return columns.reduce((acc, column) => {
+            const savedColumn = normalizedSavedColumns.find((c) => c && c.id === column.name);
+            if (savedColumn) {
+                acc.push(savedColumn);
+            }
+            else {
+                acc.push({ id: column.name, selected: false });
+            }
+            return acc;
+        }, []);
     });
-    const columnsToShow = React.useMemo(() => {
-        return columns.filter((column) => {
-            const columnId = column.name;
-            const isSelected = selectedColumnsIds.includes(columnId);
-            const isRequired = requiredColumnsIds === null || requiredColumnsIds === void 0 ? void 0 : requiredColumnsIds.includes(columnId);
-            return isSelected || isRequired;
-        });
-    }, [columns, requiredColumnsIds, selectedColumnsIds]);
     const columnsToSelect = React.useMemo(() => {
-        const columnsIds = columns.map((column) => column.name);
-        return columnsIds.map((id) => {
+        const preparedColumns = orderedColumns.reduce((acc, { id, selected }) => {
             const isRequired = requiredColumnsIds === null || requiredColumnsIds === void 0 ? void 0 : requiredColumnsIds.includes(id);
-            const isSelected = selectedColumnsIds.includes(id);
-            return {
-                id,
-                title: columnsTitles[id],
-                selected: isRequired || isSelected,
-                required: isRequired,
-                sticky: isRequired ? 'start' : undefined,
-            };
-        });
-    }, [columns, columnsTitles, requiredColumnsIds, selectedColumnsIds]);
+            const column = columns.find((c) => c.name === id);
+            if (column) {
+                acc.push({
+                    id,
+                    title: columnsTitles[id],
+                    selected: selected || isRequired,
+                    required: isRequired,
+                    sticky: isRequired ? 'start' : undefined,
+                    column,
+                });
+            }
+            return acc;
+        }, []);
+        //required columns should be first to properly render columns settings
+        return preparedColumns.toSorted((a, b) => Number(Boolean(b.required)) - Number(Boolean(a.required)));
+    }, [columns, columnsTitles, requiredColumnsIds, orderedColumns]);
+    const columnsToShow = React.useMemo(() => {
+        return columnsToSelect.filter((c) => c.selected).map((c) => c.column);
+    }, [columnsToSelect]);
     const setColumns = React.useCallback((value) => {
-        const selectedColumns = value.filter((el) => el.selected).map((el) => el.id);
-        settingsManager.setUserSettingsValue(storageKey, selectedColumns);
-        setSelectedColumnsIds(selectedColumns);
+        const preparedColumns = value.map(({ id, selected }) => ({ id, selected }));
+        settingsManager.setUserSettingsValue(storageKey, preparedColumns);
+        setOrderedColumns(preparedColumns);
     }, [storageKey]);
     return {
         columnsToShow,

package/dist/utils/hooks/useSelectedColumns.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectedColumns.js","sourceRoot":"","sources":["../../../src/utils/hooks/useSelectedColumns.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAC9B,OAAY,EACZ,UAAkB,EAClB,aAAqC,EACrC,iBAA2B,EAC3B,kBAA6B,EAC/B,EAAE;IACA,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,GAAG,EAAE;QAC9E,OAAO,eAAe,CAAC,qBAAqB,CAAC,UAAU,EAAE,iBAAiB,CAAa,CAAC;IAC5F,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACrC,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC;YAC7B,MAAM,UAAU,GAAG,kBAAkB,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAC1D,OAAO,UAAU,IAAI,UAAU,CAAC;QACpC,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAEtD,MAAM,eAAe,GAA2B,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/D,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAExD,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;YACzB,MAAM,UAAU,GAAG,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;YACpD,MAAM,UAAU,GAAG,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAEnD,OAAO;gBACH,EAAE;gBACF,KAAK,EAAE,aAAa,CAAC,EAAE,CAAC;gBACxB,QAAQ,EAAE,UAAU,IAAI,UAAU;gBAClC,QAAQ,EAAE,UAAU;gBACpB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;aAC3C,CAAC;QACN,CAAC,CAAC,CAAC;IACP,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAErE,MAAM,UAAU,GAAsC,KAAK,CAAC,WAAW,CACnE,CAAC,KAAK,EAAE,EAAE;QACN,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAE7E,eAAe,CAAC,oBAAoB,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC;QAClE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IAC3C,CAAC,EACD,CAAC,UAAU,CAAC,CACf,CAAC;IAEF,OAAO;QACH,aAAa;QACb,eAAe;QACf,UAAU;KACb,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"useSelectedColumns.js","sourceRoot":"","sources":["../../../src/utils/hooks/useSelectedColumns.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "12.5.0",
+  "version": "12.6.0",
   "files": [
     "dist"
   ],