@evergis/react 4.0.145 → 4.0.146

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

@@ -1,9 +1,10 @@
 import { FC } from 'react';
 import { TableColumnResizerProps } from '../types';
 /**
- * Ручка ширины колонки на правой границе заголовка.
+ * Ручка ширины колонки на правой границе ячейки.
  *
  * Тот же компонент и тот же жест, что двигают границы ячеек сетки дашборда: пользователю это одно
- * и то же действие, и выглядеть оно обязано одинаково.
+ * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
+ * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
  */
 export declare const TableColumnResizer: FC<TableColumnResizerProps>;

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

@@ -12,8 +12,8 @@ interface UseColumnResizeParams {
  * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
  * а не перерисовывает таблицу целиком.
  *
- * Стартовая ширина берётся с самой ячейки заголовка: у колонки без `width` её выбрала раскладка
- * таблицы, и тянуть надо от того, что видно.
+ * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
+ * выбрала раскладка таблицы, и тянуть надо от того, что видно.
  */
 export declare const useColumnResize: ({ index, onCommit }: UseColumnResizeParams) => ResizeDrag;
 export {};

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

@@ -21,7 +21,8 @@ export interface TableCellProps {
 export interface TableColumnResizerProps {
     /** Позиция колонки: по ней собрано имя переменной, которой колонка задаёт свою ширину. */
     index: number;
-    onCommit: (width: number) => void;
+    attributeName: string;
+    onResize: (attributeName: string, width: number) => void;
 }
 export interface TableHeadRowProps {
     columns: StructuredDataAttribute[];

package/dist/index.js

@@ -8170,6 +8170,23 @@ const useProjectDashboardInit = () => {
     }, [projectInfo, updateProject]);
 };
 
+/**
+ * Съесть клик, которым закончилось перетаскивание.
+ *
+ * Мышь отпускают уже за пределами ручки, поэтому браузер шлёт `click` не ей, а общему предку —
+ * ячейке или заголовку. Без этого перетаскивание границы заканчивалось бы сортировкой таблицы
+ * по колонке или сменой выделения в сетке.
+ */
+const swallowNextClick = () => {
+    const swallow = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    window.addEventListener("click", swallow, { capture: true, once: true });
+    // Клика может и не быть — например, мышь отпустили за пределами окна. Тогда снимаем слушатель
+    // сами, иначе он съел бы следующий, уже осмысленный клик.
+    window.setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+};
 /**
  * Перетаскивание границы: подписка на ручку, снимок на старте, предпросмотр на движении,
  * запись результата на отпускании.
@@ -8182,6 +8199,7 @@ const useResizeDrag = ({ onStart, onMove, onEnd }) => {
     const [handle, setHandle] = React.useState(null);
     const [dragging, setDragging] = React.useState(false);
     const stateRef = React.useRef(null);
+    const movedRef = React.useRef(false);
     const mouseDown = React.useCallback((event) => {
         const state = onStart(event);
         if (state === null) {
@@ -8191,10 +8209,12 @@ const useResizeDrag = ({ onStart, onMove, onEnd }) => {
         // над чем проходит курсор.
         event.preventDefault();
         stateRef.current = state;
+        movedRef.current = false;
         setDragging(true);
     }, [onStart]);
     const mouseMove = React.useCallback((event) => {
         if (stateRef.current !== null) {
+            movedRef.current = true;
             onMove(stateRef.current, event);
         }
     }, [onMove]);
@@ -8205,6 +8225,9 @@ const useResizeDrag = ({ onStart, onMove, onEnd }) => {
         }
         stateRef.current = null;
         setDragging(false);
+        if (movedRef.current) {
+            swallowNextClick();
+        }
         onEnd(state, event);
     }, [onEnd]);
     uilibGl.useDragAndDropEffect(handle, { mouseDown, mouseMove, mouseUp });
@@ -15534,6 +15557,7 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
 const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
   /* Относительное позиционирование держит захват границы колонки. */
   position: relative;
+  box-sizing: border-box;
   padding: 0.375rem 0.5rem;
   text-align: left;
   font-weight: 600;
@@ -15589,6 +15613,10 @@ const TableRow = styled.tr.withConfig({ displayName: "TableRow", componentId: "s
   }
 `;
 const TableCellWrapper = styled.td.withConfig({ displayName: "TableCellWrapper", componentId: "sc-ziu5rk" }) `
+  /* Относительное позиционирование держит захват границы колонки. */
+  position: relative;
+  /* Как и у заголовка: ширина колонки считается по внешнему краю ячейки. */
+  box-sizing: border-box;
   padding: 0.125rem 0.25rem;
   vertical-align: middle;
   /* Предел снимает заданная ширина: с колонками по содержимому обрезать значение незачем. */
@@ -15963,15 +15991,15 @@ const getColumnStyle = (index, width, resizable) => {
  * состояние уходит один раз, на отпускание мыши. Так шаг жеста меняет одно свойство одного узла,
  * а не перерисовывает таблицу целиком.
  *
- * Стартовая ширина берётся с самой ячейки заголовка: у колонки без `width` её выбрала раскладка
- * таблицы, и тянуть надо от того, что видно.
+ * Стартовая ширина берётся с той ячейки, за границу которой потянули: у колонки без `width` её
+ * выбрала раскладка таблицы, и тянуть надо от того, что видно.
  */
 const useColumnResize = ({ index, onCommit }) => {
     const variable = getColumnWidthVariable(index);
     const onStart = React.useCallback((event) => {
         // Обработчик нажатия висит на самой ручке, поэтому её ячейка и таблица достаются отсюда —
-        // отдельный ref на них не нужен.
-        const cell = event.currentTarget?.closest("th");
+        // отдельный ref на них не нужен. Ячейка любая: ручки стоят и в шапке, и в каждой строке.
+        const cell = event.currentTarget?.closest("th, td");
         if (!cell) {
             return null;
         }
@@ -15996,15 +16024,17 @@ const useColumnResize = ({ index, onCommit }) => {
 };
 
 /**
- * Ручка ширины колонки на правой границе заголовка.
+ * Ручка ширины колонки на правой границе ячейки.
  *
  * Тот же компонент и тот же жест, что двигают границы ячеек сетки дашборда: пользователю это одно
- * и то же действие, и выглядеть оно обязано одинаково.
+ * и то же действие, и выглядеть оно обязано одинаково. Поэтому и стоит она у КАЖДОЙ ячейки
+ * колонки, как в сетке, — тянуть границу можно на любой строке, а не только в шапке.
  */
-const TableColumnResizer = React.memo(({ 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 stopPropagation = React.useCallback((event) => event.stopPropagation(), []);
     return jsxRuntime.jsx(ResizeHandle, { ref: setHandle, "$axis": "column", "data-dragging": dragging, onClick: stopPropagation });
 });
@@ -16017,7 +16047,7 @@ const TableColumnResizer = React.memo(({ index, onCommit }) => {
  */
 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, onCommit: nextWidth => onColumnResize(attributeName, nextWidth) }))] }, 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));
         }), 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 }) }));
@@ -16193,13 +16223,13 @@ const ElementTable = React.memo(({ elementConfig }) => {
                 defaultValue: "Схема данных не задана",
             }) }));
     }
-    return (jsxRuntime.jsx(TableBox, { "$sizeCss": sizeCss, children: jsxRuntime.jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onColumnResize: onColumnResize }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map((attribute, columnIndex) => (jsxRuntime.jsx(TableCellWrapper, { 
+    return (jsxRuntime.jsx(TableBox, { "$sizeCss": sizeCss, children: jsxRuntime.jsxs(TableWrapper, { ref: setTable, "$contentWidth": contentWidth, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableHeadRow, { columns: columns, sort: sort, sortEnabled: sortEnabled, columnWidths: columnWidths, withActionsColumn: context.canDelete, onSortToggle: onSortToggle, onColumnResize: onColumnResize }) }), jsxRuntime.jsx(TableBody, { children: rows.map(row => (jsxRuntime.jsxs(TableRow, { children: [columns.map((attribute, columnIndex) => (jsxRuntime.jsxs(TableCellWrapper, { 
                                 // Стиль колонки из конфига идёт последним: шрифт задан для значений, и ширину
                                 // он не трогает — своих размеров у него нет.
                                 style: {
                                     ...getColumnStyle(columnIndex, columnWidths[attribute.attributeName], attribute.resizable),
                                     ...attribute.style,
-                                }, children: jsxRuntime.jsx(TableCell, { attribute: attribute, row: row, canEdit: context.canEdit, onChange: context.onCellChange }) }, 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, 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))) })] }) }));
 });
 
 const TooltipIcon = styled(uilibGl.Icon).withConfig({ displayName: "TooltipIcon", componentId: "sc-1lkxudm" }) `