@snack-uikit/table 0.20.6 → 0.20.7

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.20.7 (2024-08-02)
+
+
+### Bug Fixes
+
+* **PDS-227:** fix status column ([b906c30](https://github.com/cloud-ru-tech/snack-uikit/commit/b906c30d574a8cec4b70cfc6b309a2443a41a019))
+
+
+
+
+
 ## 0.20.6 (2024-07-31)
 
 

package/README.md

@@ -154,9 +154,11 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
 | accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
-| enableSorting | `boolean` | - | Включение/выключение сортировки |
+| enableSorting | `boolean` | true | Включение/выключение сортировки |
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
 | size | `number` | - | Размер ячейки |
+| minSize | `number` | - |  |
+| maxSize | `number` | - |  |
 | header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
 | enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## Table.getRowActionsColumnDef
@@ -224,9 +226,11 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 |------|------|---------------|-------------|
 | mapStatusToAppearance* | `MapStatusToAppearanceFnType` | - | Маппинг значений статуса на цвета |
 | accessorKey* | `string` | - | Имя ключа соответствующее полю в data |
-| enableSorting | `boolean` | - | Включение/выключение сортировки |
+| enableSorting | `boolean` | true | Включение/выключение сортировки |
 | renderDescription | `(cellValue: string) => string` | - | Функция для отрисовки текста, если не передана, то будет отрисован только индикатор статуса |
 | size | `number` | - | Размер ячейки |
+| minSize | `number` | - |  |
+| maxSize | `number` | - |  |
 | header | `ColumnDefTemplate<HeaderContext<TData, unknown>> & (string \| ((ctx: HeaderContext<TData, unknown>) => string))` | - | Заголовок колонки |
 | enableResizing | `boolean` | - | Включение/выключение ресайза колонки |
 ## exportToCSV

package/dist/components/Table/Table.js

@@ -143,22 +143,29 @@ export function Table(_a) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
-            const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
-            const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
-            const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey];
-            let size = initSize;
-            if (header.column.getCanResize()) {
-                const currentSize = header.getSize();
-                const colDefSize = header.column.columnDef.size;
-                size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-                if (prevSize === '100%' && currentSize !== colDefSize) {
-                    const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-                    table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
-                    size = `${realSize}px`;
+            if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
+                const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
+                colSizes[sizeKey] = indicatorSize;
+                colSizes[flexKey] = '100%';
+            }
+            else {
+                const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
+                const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+                const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey];
+                let size = initSize;
+                if (header.column.getCanResize()) {
+                    const currentSize = header.getSize();
+                    const colDefSize = header.column.columnDef.size;
+                    size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+                    if (prevSize === '100%' && currentSize !== colDefSize) {
+                        const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
+                        table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
+                        size = `${realSize}px`;
+                    }
                 }
+                colSizes[sizeKey] = size;
+                colSizes[flexKey] = size === '100%' ? 'unset' : '0';
             }
-            colSizes[sizeKey] = size;
-            colSizes[flexKey] = size === '100%' ? 'unset' : '0';
         }
         return colSizes;
         /*

package/dist/helperComponents/Cells/StatusCell/StatusCell.d.ts

@@ -15,6 +15,8 @@ type BaseStatusColumnDef = {
 type StatusColumnDef = BaseStatusColumnDef & {
     renderDescription?: never;
     size?: never;
+    minSize?: never;
+    maxSize?: never;
     header?: never;
     enableResizing?: never;
 };
@@ -23,6 +25,8 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
     renderDescription(cellValue: string): string;
     /** Размер ячейки */
     size: number;
+    minSize?: number;
+    maxSize?: number;
     /** Заголовок колонки */
     header?: ColumnDefinition<TData>['header'];
     /** Включение/выключение ресайза колонки */
@@ -30,4 +34,4 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
 };
 export type StatusColumnDefinitionProps<TData> = StatusColumnDef | StatusColumnDefWithDescription<TData>;
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, enableResizing, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;
+export declare function getStatusColumnDef<TData>({ header, accessorKey, mapStatusToAppearance, renderDescription, size, maxSize, minSize, enableSorting, enableResizing, }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData>;

package/dist/helperComponents/Cells/StatusCell/StatusCell.js

@@ -10,7 +10,7 @@ function StatusCell({ appearance, label }) {
     return (_jsxs("div", { className: styles.statusCell, "data-no-label": !label || undefined, children: [_jsx("div", { "data-appearance": isLoading ? undefined : appearance, className: styles.statusCellIndicator, "data-loading": isLoading || undefined, "data-test-id": TEST_IDS.statusIndicator }), label && (_jsx("div", { className: styles.statusCellLabel, "data-test-id": TEST_IDS.statusLabel, children: _jsx(Typography.LightLabelS, { children: _jsx(TruncateString, { text: label }) }) }))] }));
 }
 /** Вспомогательная функция для создания ячейки со статусом */
-export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, enableSorting, enableResizing, }) {
+export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance, renderDescription, size, maxSize, minSize, enableSorting = true, enableResizing, }) {
     const hasDescription = Boolean(renderDescription);
     return {
         id: 'snack_predefined_statusColumn',
@@ -19,7 +19,8 @@ export function getStatusColumnDef({ header, accessorKey, mapStatusToAppearance,
         noHeaderCellPadding: !hasDescription,
         noHeaderCellBorderOffset: hasDescription,
         size: hasDescription ? size : MIN_STATUS_CELL_SIZE,
-        minSize: MIN_STATUS_CELL_SIZE,
+        minSize: enableSorting || hasDescription ? Math.max(MIN_STATUS_CELL_SIZE, minSize || 0) : 1,
+        maxSize: maxSize,
         meta: {
             skipOnExport: true,
         },

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.20.6",
+  "version": "0.20.7",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "0e8748072eba72660edad8aa462b762922e33c10"
+  "gitHead": "f60fb892054936167d2744544ceed8ae0c988d67"
 }

package/src/components/Table/Table.tsx

@@ -225,29 +225,38 @@ export function Table<TData extends object>({
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const { sizeKey, flexKey } = getColumnStyleVars(header.id);
+
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
-      const originalColumnDefSize = originalColDef?.size;
-      const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
-      const prevSize = columnSizeVarsRef.current?.[sizeKey];
 
-      let size = initSize;
+      if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !originalColDef?.enableSorting) {
+        const indicatorSize = 'var(--size-table-cell-status-indicator-horizontal)';
+
+        colSizes[sizeKey] = indicatorSize;
+        colSizes[flexKey] = '100%';
+      } else {
+        const originalColumnDefSize = originalColDef?.size;
+        const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+        const prevSize = columnSizeVarsRef.current?.[sizeKey];
+
+        let size = initSize;
 
-      if (header.column.getCanResize()) {
-        const currentSize = header.getSize();
-        const colDefSize = header.column.columnDef.size;
+        if (header.column.getCanResize()) {
+          const currentSize = header.getSize();
+          const colDefSize = header.column.columnDef.size;
 
-        size = currentSize === colDefSize ? initSize : `${currentSize}px`;
+          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
 
-        if (prevSize === '100%' && currentSize !== colDefSize) {
-          const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-          table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
+          if (prevSize === '100%' && currentSize !== colDefSize) {
+            const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
+            table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
 
-          size = `${realSize}px`;
+            size = `${realSize}px`;
+          }
         }
-      }
 
-      colSizes[sizeKey] = size;
-      colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        colSizes[sizeKey] = size;
+        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+      }
     }
 
     return colSizes;

package/src/helperComponents/Cells/StatusCell/StatusCell.tsx

@@ -30,6 +30,8 @@ type BaseStatusColumnDef = {
 type StatusColumnDef = BaseStatusColumnDef & {
   renderDescription?: never;
   size?: never;
+  minSize?: never;
+  maxSize?: never;
   header?: never;
   enableResizing?: never;
 };
@@ -39,6 +41,8 @@ type StatusColumnDefWithDescription<TData> = BaseStatusColumnDef & {
   renderDescription(cellValue: string): string;
   /** Размер ячейки */
   size: number;
+  minSize?: number;
+  maxSize?: number;
   /** Заголовок колонки */
   header?: ColumnDefinition<TData>['header'];
   /** Включение/выключение ресайза колонки */
@@ -77,7 +81,9 @@ export function getStatusColumnDef<TData>({
   mapStatusToAppearance,
   renderDescription,
   size,
-  enableSorting,
+  maxSize,
+  minSize,
+  enableSorting = true,
   enableResizing,
 }: StatusColumnDefinitionProps<TData>): ColumnDefinition<TData> {
   const hasDescription = Boolean(renderDescription);
@@ -89,7 +95,8 @@ export function getStatusColumnDef<TData>({
     noHeaderCellPadding: !hasDescription,
     noHeaderCellBorderOffset: hasDescription,
     size: hasDescription ? (size as number) : MIN_STATUS_CELL_SIZE,
-    minSize: MIN_STATUS_CELL_SIZE,
+    minSize: enableSorting || hasDescription ? Math.max(MIN_STATUS_CELL_SIZE, minSize || 0) : 1,
+    maxSize: maxSize,
     meta: {
       skipOnExport: true,
     },