@evergis/react 4.0.146 → 4.0.148

package/dist/components/Dashboard/elements/ElementTable/hooks/useColumnResize.d.ts

@@ -2,18 +2,22 @@ import { ResizeDrag } from '../../../hooks/useResizeDrag';
 interface UseColumnResizeParams {
     /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
     index: number;
-    onCommit: (width: number) => void;
+    /** Итог жеста — ширины ВСЕХ колонок по их позициям. */
+    onResize: (widths: number[]) => void;
 }
 /**
  * Перетаскивание правой границы колонки.
  *
  * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
- * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
- * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
- * а не перерисовывает таблицу целиком.
+ * остаётся только табличное: во время жеста ширины рисуются переменными на самой таблице, а в
+ * состояние уходят один раз, на отпускание мыши.
  *
- * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
- * выбрала раскладка таблицы, и тянуть надо от того, что видно.
+ * Снимок берётся по ВСЕМ колонкам, и все они на время жеста фиксируются — так же, как сетка
+ * фиксирует все треки. Иначе автоматическая раскладка перераспределяла бы соседние колонки на
+ * первом же шаге, и таблицу дёргало бы в самом начале перетаскивания. По той же причине в
+ * состояние уходят ширины всех колонок: без этого соседи прыгнули бы обратно на отпускании.
+ *
+ * Ширины снимаются с ячеек шапки: колонка одна на всю таблицу, а строк в ней сколько угодно.
  */
-export declare const useColumnResize: ({ index, onCommit }: UseColumnResizeParams) => ResizeDrag;
+export declare const useColumnResize: ({ index, onResize }: UseColumnResizeParams) => ResizeDrag;
 export {};

package/dist/components/Dashboard/elements/ElementTable/hooks/useTableView.d.ts

@@ -26,5 +26,5 @@ export declare const useTableView: (elementConfig?: ElementTableConfig) => {
     contentWidth: boolean;
     columnWidths: Record<string, number>;
     onSortToggle: (attributeName: string) => void;
-    onColumnResize: (attributeName: string, nextWidth: number) => void;
+    onColumnResize: (next: number[]) => void;
 };

package/dist/components/Dashboard/elements/ElementTable/types.d.ts

@@ -21,8 +21,8 @@ export interface TableCellProps {
 export interface TableColumnResizerProps {
     /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
     index: number;
-    attributeName: string;
-    onResize: (attributeName: string, width: number) => void;
+    /** Итог жеста — ширины всех колонок по их позициям. */
+    onResize: (widths: number[]) => void;
 }
 export interface TableHeadRowProps {
     columns: StructuredDataAttribute[];
@@ -33,5 +33,5 @@ export interface TableHeadRowProps {
     /** У таблицы есть колонка действий — шапке нужна пустая ячейка над ней. */
     withActionsColumn: boolean;
     onSortToggle: (attributeName: string) => void;
-    onColumnResize: (attributeName: string, width: number) => void;
+    onColumnResize: (widths: number[]) => void;
 }

package/dist/components/Dashboard/elements/ElementTable/utils/columnStyle.d.ts

@@ -3,17 +3,19 @@ import { CSSProperties } from 'react';
  * Имя переменной ширины колонки.
  *
  * Через неё идёт и предпросмотр перетаскивания, и итоговая ширина: пока переменная не задана,
- * работает запасное значение из стиля ячейки, а жест на время перетаскивания объявляет её на
- * самой таблице — одним свойством на один узел, как сетка меняет свой шаблон треков.
+ * работает запасное значение, а жест на время перетаскивания объявляет её на самой таблице —
+ * одним свойством на один узел, как сетка меняет свой шаблон треков.
  */
 export declare const getColumnWidthVariable: (index: number) => string;
 /**
- * Инлайн-размер ячейки колонки с заданной или изменяемой шириной.
+ * Инлайн-размер ячейки колонки.
  *
- * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
- * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
- * втроём, на каждую ячейку колонки.
+ * Ставится всем колонкам, а не только тем, у кого ширина задана: жест фиксирует на время
+ * перетаскивания ВСЕ колонки, иначе соседние перераспределялись бы на первом же шаге и таблицу
+ * дёргало бы. Пока переменной нет, каждый предел падает на своё запасное значение и колонка
+ * ведёт себя ровно так, как вела бы без инлайн-стиля вовсе.
  *
- * Ни ширины, ни разрешения тянуть — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
+ * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу.
  */
-export declare const getColumnStyle: (index: number, width?: number, resizable?: boolean) => CSSProperties | undefined;
+export declare const getColumnStyle: (index: number, width?: number, isHead?: boolean) => CSSProperties;

package/dist/index.js

@@ -15956,30 +15956,30 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
  * Имя переменной ширины колонки.
  *
  * Через неё идёт и предпросмотр перетаскивания, и итоговая ширина: пока переменная не задана,
- * работает запасное значение из стиля ячейки, а жест на время перетаскивания объявляет её на
- * самой таблице — одним свойством на один узел, как сетка меняет свой шаблон треков.
+ * работает запасное значение, а жест на время перетаскивания объявляет её на самой таблице —
+ * одним свойством на один узел, как сетка меняет свой шаблон треков.
  */
 const getColumnWidthVariable = (index) => `--table-col-${index}`;
 /**
- * Инлайн-размер ячейки колонки с заданной или изменяемой шириной.
+ * Инлайн-размер ячейки колонки.
  *
- * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
- * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу, поэтому и ставим их
- * втроём, на каждую ячейку колонки.
+ * Ставится всем колонкам, а не только тем, у кого ширина задана: жест фиксирует на время
+ * перетаскивания ВСЕ колонки, иначе соседние перераспределялись бы на первом же шаге и таблицу
+ * дёргало бы. Пока переменной нет, каждый предел падает на своё запасное значение и колонка
+ * ведёт себя ровно так, как вела бы без инлайн-стиля вовсе.
  *
- * Ни ширины, ни разрешения тянуть — стиля нет: колонка остаётся на попечении раскладки, как и была.
+ * Раскладка таблицы автоматическая (ширину колонок выбирает содержимое), и одной `width` ей мало —
+ * она для неё лишь пожелание. Жёстко колонку держат все три предела сразу.
  */
-const getColumnStyle = (index, width, resizable) => {
-    if (width == null && !resizable) {
-        return undefined;
-    }
+const getColumnStyle = (index, width, isHead) => {
     const variable = getColumnWidthVariable(index);
     const fixed = width == null ? null : `${width}px`;
     return {
         width: `var(${variable}, ${fixed ?? "auto"})`,
         minWidth: `var(${variable}, ${fixed ?? "0"})`,
-        // Без заданной ширины предел остаётся общим для всех ячеек — тем, что задан стилем таблицы.
-        maxWidth: `var(${variable}, ${fixed ?? "var(--table-cell-max-width, 20rem)"})`,
+        // Без заданной ширины предел остаётся тем, что задан стилем: у ячейки тела — общий предел
+        // таблицы, у заголовка его нет вовсе.
+        maxWidth: `var(${variable}, ${fixed ?? (isHead ? "none" : "var(--table-cell-max-width, 20rem)")})`,
     };
 };
 
@@ -15987,39 +15987,41 @@ const getColumnStyle = (index, width, resizable) => {
  * Перетаскивание правой границы колонки.
  *
  * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
- * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
- * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
- * а не перерисовывает таблицу целиком.
+ * остаётся только табличное: во время жеста ширины рисуются переменными на самой таблице, а в
+ * состояние уходят один раз, на отпускание мыши.
+ *
+ * Снимок берётся по ВСЕМ колонкам, и все они на время жеста фиксируются — так же, как сетка
+ * фиксирует все треки. Иначе автоматическая раскладка перераспределяла бы соседние колонки на
+ * первом же шаге, и таблицу дёргало бы в самом начале перетаскивания. По той же причине в
+ * состояние уходят ширины всех колонок: без этого соседи прыгнули бы обратно на отпускании.
  *
- * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
- * выбрала раскладка таблицы, и тянуть надо от того, что видно.
+ * Ширины снимаются с ячеек шапки: колонка одна на всю таблицу, а строк в ней сколько угодно.
  */
-const useColumnResize = ({ index, onCommit }) => {
-    const variable = getColumnWidthVariable(index);
+const useColumnResize = ({ index, onResize }) => {
     const onStart = React.useCallback((event) => {
-        // Обработчик нажатия висит на самой ручке, поэтому её ячейка и таблица достаются отсюда —
-        // отдельный ref на них не нужен. Ячейка любая: ручки стоят и в шапке, и в каждой строке.
-        const cell = event.currentTarget?.closest("th, td");
-        if (!cell) {
+        // Обработчик нажатия висит на самой ручке, поэтому таблица достаётся отсюда — отдельный
+        // ref на неё не нужен.
+        const table = event.currentTarget?.closest("table");
+        const head = table?.querySelector("thead tr");
+        if (!head) {
             return null;
         }
-        return {
-            start: event.clientX,
-            width: cell.getBoundingClientRect().width,
-            table: cell.closest("table"),
-        };
-    }, []);
-    const getNextWidth = React.useCallback((state, event) => Math.max(MIN_COLUMN_WIDTH, Math.round(state.width + event.clientX - state.start)), []);
-    const onMove = React.useCallback((state, event) => state.table?.style.setProperty(variable, `${getNextWidth(state, event)}px`), [getNextWidth, variable]);
+        const widths = Array.from(head.children).map(cell => cell.getBoundingClientRect().width);
+        return widths[index] === undefined ? null : { start: event.clientX, widths, table };
+    }, [index]);
+    const getNextWidths = React.useCallback((state, event) => state.widths.map((width, position) => position === index
+        ? Math.max(MIN_COLUMN_WIDTH, Math.round(width + event.clientX - state.start))
+        : Math.round(width)), [index]);
+    const onMove = React.useCallback((state, event) => getNextWidths(state, event).forEach((width, position) => state.table?.style.setProperty(getColumnWidthVariable(position), `${width}px`)), [getNextWidths]);
     const onEnd = React.useCallback((state, event) => {
-        state.table?.style.removeProperty(variable);
-        const next = getNextWidth(state, event);
+        state.widths.forEach((_width, position) => state.table?.style.removeProperty(getColumnWidthVariable(position)));
+        const widths = getNextWidths(state, event);
         // Клик по границе без перетаскивания ширину менять не должен.
-        if (next === Math.round(state.width)) {
+        if (widths[index] === Math.round(state.widths[index])) {
             return;
         }
-        onCommit(next);
-    }, [getNextWidth, onCommit, variable]);
+        onResize(widths);
+    }, [getNextWidths, index, onResize]);
     return useResizeDrag({ onStart, onMove, onEnd });
 };
 
@@ -16030,9 +16032,8 @@ const useColumnResize = ({ index, onCommit }) => {
  * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
  * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
  */
-const TableColumnResizer = React.memo(({ index, attributeName, onResize }) => {
-    const onCommit = React.useCallback((width) => onResize(attributeName, width), [attributeName, onResize]);
-    const { setHandle, dragging } = useColumnResize({ index, onCommit });
+const TableColumnResizer = React.memo(({ index, onResize }) => {
+    const { setHandle, dragging } = useColumnResize({ index, onResize });
     // Ручка лежит внутри ячейки, и без остановки всплытия перетаскивание границы заканчивалось бы
     // кликом по ней — то есть переключало бы сортировку в шапке и открывало бы правку в теле.
     const stopPropagation = React.useCallback((event) => event.stopPropagation(), []);
@@ -16047,7 +16048,7 @@ const TableColumnResizer = React.memo(({ index, attributeName, onResize }) => {
  */
 const TableHeadRow = ({ columns, sort, sortEnabled, columnWidths, withActionsColumn, onSortToggle, onColumnResize, }) => (jsxRuntime.jsxs("tr", { children: [columns.map(({ attributeName, alias, description, resizable }, index) => {
             const sorted = sort?.attributeName === attributeName;
-            return (jsxRuntime.jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], resizable), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxRuntime.jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsxRuntime.jsx(TableSortSlot, { "$active": sorted, children: jsxRuntime.jsx(uilibGl.Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && jsxRuntime.jsx(TableColumnResizer, { index: index, attributeName: attributeName, onResize: onColumnResize })] }, attributeName));
+            return (jsxRuntime.jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], true), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxRuntime.jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsxRuntime.jsx(TableSortSlot, { "$active": sorted, children: jsxRuntime.jsx(uilibGl.Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && jsxRuntime.jsx(TableColumnResizer, { index: index, onResize: onColumnResize })] }, attributeName));
         }), withActionsColumn && jsxRuntime.jsx(TableHeadCell, {})] }));
 
 const ContainerLoading = () => (jsxRuntime.jsx(uilibGl.Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsxRuntime.jsx(uilibGl.CircularProgress, { diameter: 1.5, mono: true }) }));
@@ -16182,7 +16183,9 @@ const useTableView = (elementConfig) => {
     // Растянутая мышью ширина живёт только в рантайме и перебивает конфигурационную: последнее
     // слово за тем, кто тянул. Обратно в конфиг она не пишется.
     const columnWidths = React.useMemo(() => columns.reduce((acc, attribute) => ({ ...acc, [attribute.attributeName]: widths[attribute.attributeName] ?? attribute.width }), {}), [columns, widths]);
-    const onColumnResize = React.useCallback((attributeName, nextWidth) => setWidths(current => ({ ...current, [attributeName]: nextWidth })), []);
+    // Жест отдаёт ширины всех колонок разом: соседние он тоже фиксировал, и вернуть их к
+    // автоподбору значило бы дёрнуть таблицу сразу после отпускания.
+    const onColumnResize = React.useCallback((next) => setWidths(columns.reduce((acc, { attributeName }, position) => next[position] === undefined ? acc : { ...acc, [attributeName]: next[position] }, {})), [columns]);
     const onSortToggle = React.useCallback((attributeName) => setSort(current => getNextSort(current, attributeName)), []);
     return {
         context,
@@ -16227,9 +16230,9 @@ const ElementTable = React.memo(({ elementConfig }) => {
                                 // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
                                 // он не трогает — своих размеров у него нет.
                                 style: {
-                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName], attribute.resizable),
+                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName]),
                                     ...attribute.style,
-                                }, children: [jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }), attribute.resizable && (jsxRuntime.jsx(TableColumnResizer, { index: columnIndex, attributeName: attribute.attributeName, onResize: onColumnResize }))] }, attribute.attributeName))), context.canDelete && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
+                                }, children: [jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }), attribute.resizable && (jsxRuntime.jsx(TableColumnResizer, { index: columnIndex, onResize: onColumnResize }))] }, attribute.attributeName))), context.canDelete && (jsxRuntime.jsx(TableActionsCell, { children: jsxRuntime.jsx(uilibGl.IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(uilibGl.Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `