@evergis/react 4.0.146 → 4.0.148

package/dist/react.esm.js

@@ -15954,30 +15954,30 @@ const TableCell = 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)")})`,
     };
 };
 
@@ -15985,39 +15985,41 @@ const getColumnStyle = (index, width, resizable) => {
  * Перетаскивание правой границы колонки.
  *
  * Жест — общий {@link useResizeDrag}, тот же, что двигает границы ячеек сетки дашборда. Здесь
- * остаётся только табличное: во время жеста ширина рисуется переменной на самой таблице, а в
- * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
- * а не перерисовывает таблицу целиком.
+ * остаётся только табличное: во время жеста ширины рисуются переменными на самой таблице, а в
+ * состояние уходят один раз, на отпускание мыши.
+ *
+ * Снимок берётся по ВСЕМ колонкам, и все они на время жеста фиксируются — так же, как сетка
+ * фиксирует все треки. Иначе автоматическая раскладка перераспределяла бы соседние колонки на
+ * первом же шаге, и таблицу дёргало бы в самом начале перетаскивания. По той же причине в
+ * состояние уходят ширины всех колонок: без этого соседи прыгнули бы обратно на отпускании.
  *
- * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
- * выбрала раскладка таблицы, и тянуть надо от того, что видно.
+ * Ширины снимаются с ячеек шапки: колонка одна на всю таблицу, а строк в ней сколько угодно.
  */
-const useColumnResize = ({ index, onCommit }) => {
-    const variable = getColumnWidthVariable(index);
+const useColumnResize = ({ index, onResize }) => {
     const onStart = 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 = useCallback((state, event) => Math.max(MIN_COLUMN_WIDTH, Math.round(state.width + event.clientX - state.start)), []);
-    const onMove = 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 = 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 = useCallback((state, event) => getNextWidths(state, event).forEach((width, position) => state.table?.style.setProperty(getColumnWidthVariable(position), `${width}px`)), [getNextWidths]);
     const onEnd = 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 });
 };
 
@@ -16028,9 +16030,8 @@ const useColumnResize = ({ index, onCommit }) => {
  * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
  * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
  */
-const TableColumnResizer = memo(({ index, attributeName, onResize }) => {
-    const onCommit = useCallback((width) => onResize(attributeName, width), [attributeName, onResize]);
-    const { setHandle, dragging } = useColumnResize({ index, onCommit });
+const TableColumnResizer = memo(({ index, onResize }) => {
+    const { setHandle, dragging } = useColumnResize({ index, onResize });
     // Ручка лежит внутри ячейки, и без остановки всплытия перетаскивание границы заканчивалось бы
     // кликом по ней — то есть переключало бы сортировку в шапке и открывало бы правку в теле.
     const stopPropagation = useCallback((event) => event.stopPropagation(), []);
@@ -16045,7 +16046,7 @@ const TableColumnResizer = memo(({ index, attributeName, onResize }) => {
  */
 const TableHeadRow = ({ columns, sort, sortEnabled, columnWidths, withActionsColumn, onSortToggle, onColumnResize, }) => (jsxs("tr", { children: [columns.map(({ attributeName, alias, description, resizable }, index) => {
             const sorted = sort?.attributeName === attributeName;
-            return (jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], resizable), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsx(TableSortSlot, { "$active": sorted, children: jsx(Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && jsx(TableColumnResizer, { index: index, attributeName: attributeName, onResize: onColumnResize })] }, attributeName));
+            return (jsxs(TableHeadCell, { title: description || alias, style: getColumnStyle(index, columnWidths[attributeName], true), "$sortable": sortEnabled, onClick: sortEnabled ? () => onSortToggle(attributeName) : undefined, children: [jsxs(TableHeadContent, { children: [alias, sortEnabled && (jsx(TableSortSlot, { "$active": sorted, children: jsx(Icon, { kind: sorted && sort?.direction === "desc" ? "sorting_des" : "sorting_asc" }) }))] }), resizable && jsx(TableColumnResizer, { index: index, onResize: onColumnResize })] }, attributeName));
         }), withActionsColumn && jsx(TableHeadCell, {})] }));
 
 const ContainerLoading = () => (jsx(Flex, { alignContent: "center", justifyContent: "center", width: "100%", children: jsx(CircularProgress, { diameter: 1.5, mono: true }) }));
@@ -16180,7 +16181,9 @@ const useTableView = (elementConfig) => {
     // Растянутая мышью ширина живёт только в рантайме и перебивает конфигурационную: последнее
     // слово за тем, кто тянул. Обратно в конфиг она не пишется.
     const columnWidths = useMemo(() => columns.reduce((acc, attribute) => ({ ...acc, [attribute.attributeName]: widths[attribute.attributeName] ?? attribute.width }), {}), [columns, widths]);
-    const onColumnResize = useCallback((attributeName, nextWidth) => setWidths(current => ({ ...current, [attributeName]: nextWidth })), []);
+    // Жест отдаёт ширины всех колонок разом: соседние он тоже фиксировал, и вернуть их к
+    // автоподбору значило бы дёрнуть таблицу сразу после отпускания.
+    const onColumnResize = useCallback((next) => setWidths(columns.reduce((acc, { attributeName }, position) => next[position] === undefined ? acc : { ...acc, [attributeName]: next[position] }, {})), [columns]);
     const onSortToggle = useCallback((attributeName) => setSort(current => getNextSort(current, attributeName)), []);
     return {
         context,
@@ -16225,9 +16228,9 @@ const ElementTable = memo(({ elementConfig }) => {
                                 // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
                                 // он не трогает — своих размеров у него нет.
                                 style: {
-                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName], attribute.resizable),
+                                    ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName]),
                                     ...attribute.style,
-                                }, children: [jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }), attribute.resizable && (jsx(TableColumnResizer, { index: columnIndex, attributeName: attribute.attributeName, onResize: onColumnResize }))] }, attribute.attributeName))), context.canDelete && (jsx(TableActionsCell, { children: jsx(IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
+                                }, children: [jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }), attribute.resizable && (jsx(TableColumnResizer, { index: columnIndex, onResize: onColumnResize }))] }, attribute.attributeName))), context.canDelete && (jsx(TableActionsCell, { children: jsx(IconButton, { kind: "delete", title: t("actions.delete", { ns: "common", defaultValue: "Удалить" }), onClick: () => context.onRowDelete(row.key) }) }))] }, row.key))) })] }) }));
 });
 
 const TooltipIcon = styled(Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `