@evergis/react 4.0.147 → 4.0.149

package/dist/components/Dashboard/containers/StructuredDataContainer/types.d.ts

@@ -35,6 +35,8 @@ export interface StructuredDataAttribute {
     resizable?: boolean;
     /** Значение переносится по словам, а не режется многоточием. */
     multiline?: boolean;
+    /** Значение — цвет: колонка показывает плашку, а правится палитрой. */
+    colorPicker?: boolean;
     /** Стиль значений колонки из конфига. */
     style?: CSSProperties;
 }

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

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { TableCellProps } from '../types';
+/**
+ * Колонка цвета (`colorPicker` у атрибута).
+ *
+ * Значение хранится строкой в любом из привычных видов — `hex`, `rgb`, `rgba`, — поэтому рядом со
+ * значением показывается плашка этого цвета, а на правку встаёт палитра.
+ *
+ * Неразбираемая строка остаётся просто текстом, без плашки: так видно, что в данных мусор, а не
+ * пустое значение.
+ */
+export declare const ColorCell: FC<TableCellProps>;

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

@@ -18,3 +18,8 @@ export declare const TIME_FORMAT: RegExp;
 export declare const PORTAL_ROOT_SELECTOR = "#portal-root";
 /** Ниже этой ширины колонку не ужать мышью: уже неё в ячейке не остаётся места под значение. */
 export declare const MIN_COLUMN_WIDTH = 48;
+/**
+ * Цвет, с которого палитра открывается у пустой ячейки. Своего значения там ещё нет, а `Color`
+ * без валидной строки не собрать.
+ */
+export declare const DEFAULT_CELL_COLOR = "#000000";

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

@@ -31,18 +31,14 @@ export declare const TableWrapper: import('styled-components').StyledComponent<"
  * (см. TableBody и useHeadOverlap).
  */
 export declare const TableHead: import('styled-components').StyledComponent<"thead", any, {}, never>;
-/**
- * Содержимое заголовка: псевдоним и место под значок сортировки.
- *
- * Само по себе не сжимается и ничего не обрезает — иначе перестало бы задавать минимальную
- * ширину колонки, и раскладка считала бы её по одному лишь телу таблицы. Обрезку включает
- * заголовок, и только когда ширина колонки задана явно (см. `TableHeadCell`).
- */
-export declare const TableHeadContent: import('styled-components').StyledComponent<"span", any, {}, never>;
 export declare const TableHeadCell: import('styled-components').StyledComponent<"th", any, {
     $sortable?: boolean;
-    $fixedWidth?: boolean;
 }, never>;
+/**
+ * Содержимое заголовка. Псевдоним обрезается многоточием, значок сортировки не сжимается:
+ * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
+ */
+export declare const TableHeadContent: import('styled-components').StyledComponent<"span", any, {}, never>;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
  * прячется: появляясь и исчезая, он менял бы ширину колонки — и таблицу дёргало бы на каждый
@@ -109,4 +105,18 @@ export declare const CellField: import('styled-components').StyledComponent<"div
  * обязаны стоять на одной линии.
  */
 export declare const AttachmentsCellBox: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Ячейка цвета: плашка или палитра слева, значение справа.
+ *
+ * Отступы те же, что у текстовой ячейки: в одном ряду с обычными колонками значения обязаны
+ * стоять на одной линии.
+ */
+export declare const ColorCellBox: import('styled-components').StyledComponent<"div", any, {}, never>;
+/**
+ * Плашка цвета. Повторяет маркер легенды графика: цвет всюду обозначается одинаково, где бы он
+ * ни показывался.
+ */
+export declare const ColorSwatch: import('styled-components').StyledComponent<"div", any, {
+    $color: string;
+}, never>;
 export declare const TableEmpty: import('styled-components').StyledComponent<"div", any, {}, never>;

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

@@ -518,6 +518,11 @@ export interface ConfigAttributeDescription {
     resizable?: boolean;
     /** Значение переносится на следующую строку вместо обрезки многоточием, высота строки растёт. */
     multiline?: boolean;
+    /**
+     * Строковое значение атрибута — цвет (`hex`, `rgb` или `rgba`). Показывается плашкой этого
+     * цвета рядом со значением, а правится палитрой вместо текстового поля.
+     */
+    colorPicker?: boolean;
     /**
      * Стиль значений колонки: семейство, размер, цвет и начертание шрифта. Своего узла-элемента
      * у колонки нет, поэтому стиль живёт прямо у описания атрибута.

package/dist/index.js

@@ -3849,7 +3849,7 @@ const hue2rgb = (p, q, t) => {
  */
 const toHex = (value) => {
     const hex = Math.round(value * 255).toString(16);
-    return hex.padStart(2, '0');
+    return hex.padStart(2, "0");
 };
 /**
  * Adjusts color brightness
@@ -3859,7 +3859,7 @@ const toHex = (value) => {
  */
 const adjustColor = (color, lightnessAdjustment = 5) => {
     // Convert hex to RGB
-    const hex = color.replace('#', '');
+    const hex = color.replace("#", "");
     const r = parseInt(hex.substring(0, 2), 16) / 255;
     const g = parseInt(hex.substring(2, 4), 16) / 255;
     const b = parseInt(hex.substring(4, 6), 16) / 255;
@@ -3901,6 +3901,17 @@ const adjustColor = (color, lightnessAdjustment = 5) => {
     }
     return `#${toHex(rNew)}${toHex(gNew)}${toHex(bNew)}`;
 };
+const OPAQUE_ALPHA = "ff";
+/**
+ * Цвет в hex: `#rrggbb`, а при неполной непрозрачности — `#rrggbbaa`.
+ *
+ * Полностью непрозрачная альфа отбрасывается: в значении она ничего не уточняет, а строку
+ * удлиняет — и в конфиге, и в данных удобнее короткая запись.
+ */
+const colorToHex = (color) => {
+    const hex = color.toString("hex");
+    return hex.slice(HEX_RRGGBB_LENGTH).toLowerCase() === OPAQUE_ALPHA ? hex.slice(0, HEX_RRGGBB_LENGTH) : hex;
+};
 
 const NO_CONTENT_VALUE = "—";
 exports.DateFormat = void 0;
@@ -8751,22 +8762,31 @@ const LinkDialogContent = styled.div.withConfig({ displayName: "LinkDialogConten
   padding: 1rem 0;
 `;
 
+/**
+ * Заглушка недоступного изображения.
+ *
+ * Масштаб значка считается от размера самого превью: `font-size` контейнера приравнен к нему, а
+ * бокс значка и его глиф заданы одной долей от этого размера. Раньше бокс был долей превью, а
+ * глиф — фиксированным: в списке, где превью всего `1.5rem`, глиф выходил втрое крупнее своего
+ * бокса и съезжал относительно квадрата.
+ */
 const ImagePreviewError = styled.div.withConfig({ displayName: "ImagePreviewError", componentId: "sc-7cwrhm" }) `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
+  font-size: ${({ $size = GRID_TILE_SIZE }) => $size};
   background-color: ${({ theme }) => theme.palette.elementDark};
   border-radius: ${({ theme: { borderRadius: themeBorder }, borderRadius }) => borderRadius || themeBorder.smallest};
 
   ${uilibGl.Icon} {
-    width: 37.5%;
-    height: 37.5%;
+    width: 0.375em;
+    height: 0.375em;
   }
 
   ${uilibGl.Icon}:after {
-    font-size: 1.5rem;
+    font-size: 0.375em;
     color: ${({ theme }) => theme.palette.textSecondary};
   }
 `;
@@ -8804,7 +8824,7 @@ const FileImagePreview = ({ link, isExternal, size, borderRadius, }) => {
                 URL.revokeObjectURL(objectUrl);
         };
     }, [api, link, isExternal]);
-    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsxRuntime.jsx(ImagePreviewError, { borderRadius: borderRadius, children: jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), !hasError && imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
+    return (jsxRuntime.jsxs(ImagePreviewContainer, { size: size, children: [hasError && (jsxRuntime.jsx(ImagePreviewError, { borderRadius: borderRadius, "$size": size, children: jsxRuntime.jsx(uilibGl.Icon, { kind: "alert" }) })), !hasError && !imageSrc && (jsxRuntime.jsx(ImagePreviewLoaderContainer, { children: jsxRuntime.jsx(uilibGl.LinearProgress, {}) })), !hasError && imageSrc && (jsxRuntime.jsx(GridImagePreview, { borderRadius: borderRadius, size: size, src: imageSrc, alt: "", onError: () => setHasError(true) }))] }));
 };
 
 const AttachmentItem = ({ item, viewMode, isEdit, onPreview, onDelete, }) => {
@@ -11466,6 +11486,7 @@ const toSchemaAttribute = (params) => {
         width: description?.width,
         resizable: description?.resizable,
         multiline: description?.multiline,
+        colorPicker: description?.colorPicker,
         style: description?.style,
     };
 };
@@ -15499,6 +15520,11 @@ const TIME_FORMAT = /hh:mm/;
 const PORTAL_ROOT_SELECTOR = "#portal-root";
 /** Ниже этой ширины колонку не ужать мышью: уже неё в ячейке не остаётся места под значение. */
 const MIN_COLUMN_WIDTH = 48;
+/**
+ * Цвет, с которого палитра открывается у пустой ячейки. Своего значения там ещё нет, а `Color`
+ * без валидной строки не собрать.
+ */
+const DEFAULT_CELL_COLOR = "#000000";
 
 /**
  * Собственный бокс таблицы. Без размеров в `options` представления узел ничего не меняет:
@@ -15554,19 +15580,7 @@ const TableHead = styled.thead.withConfig({ displayName: "TableHead", componentI
   top: 0;
   z-index: 1;
 `;
-/**
- * Содержимое заголовка: псевдоним и место под значок сортировки.
- *
- * Само по себе не сжимается и ничего не обрезает — иначе перестало бы задавать минимальную
- * ширину колонки, и раскладка считала бы её по одному лишь телу таблицы. Обрезку включает
- * заголовок, и только когда ширина колонки задана явно (см. `TableHeadCell`).
- */
-const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-19t325s" }) `
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-`;
-const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-19bpg7s" }) `
+const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", componentId: "sc-1m6xil2" }) `
   /* Относительное позиционирование держит захват границы колонки. */
   position: relative;
   box-sizing: border-box;
@@ -15574,6 +15588,7 @@ const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", compo
   text-align: left;
   font-weight: 600;
   white-space: nowrap;
+  overflow: hidden;
   color: ${({ theme }) => theme.palette.textSecondary};
   /* Рамка принадлежит ячейке (рамки раздельные), поэтому едет вместе с липкой шапкой. */
   border-bottom: 1px solid ${({ theme }) => theme.palette.elementDeep};
@@ -15583,22 +15598,18 @@ const TableHeadCell = styled.th.withConfig({ displayName: "TableHeadCell", compo
       cursor: pointer;
       user-select: none;
     `}
-
-  /*
-   * Обрезка только у колонки с заданной шириной: там длинный псевдоним иначе выдавил бы значок
-   * сортировки за край. У колонки без ширины обрезать нечего — её ширину и задаёт заголовок,
-   * а сжатое содержимое отдало бы этот расчёт телу таблицы, и заголовок схлопнулся бы в ноль.
-   */
-  ${({ $fixedWidth }) => $fixedWidth &&
-    styled.css `
-      overflow: hidden;
-
-      ${TableHeadContent} {
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    `}
+`;
+/**
+ * Содержимое заголовка. Псевдоним обрезается многоточием, значок сортировки не сжимается:
+ * у колонки с заданной шириной длинный псевдоним иначе выдавил бы значок за край ячейки.
+ */
+const TableHeadContent = styled.span.withConfig({ displayName: "TableHeadContent", componentId: "sc-8hzcop" }) `
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 /**
  * Место под значок сортировки. Занято всегда, пока сортировка включена, а сам значок только
@@ -15745,7 +15756,35 @@ const AttachmentsCellBox = styled.div.withConfig({ displayName: "AttachmentsCell
   gap: 0.25rem;
   padding: 0.375rem 0.25rem;
 `;
-const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-dmdhrv" }) `
+/**
+ * Ячейка цвета: плашка или палитра слева, значение справа.
+ *
+ * Отступы те же, что у текстовой ячейки: в одном ряду с обычными колонками значения обязаны
+ * стоять на одной линии.
+ */
+const ColorCellBox = styled.div.withConfig({ displayName: "ColorCellBox", componentId: "sc-n2zhg2" }) `
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0 0.25rem;
+
+  ${CellText} {
+    padding-left: 0;
+    padding-right: 0;
+  }
+`;
+/**
+ * Плашка цвета. Повторяет маркер легенды графика: цвет всюду обозначается одинаково, где бы он
+ * ни показывался.
+ */
+const ColorSwatch = styled.div.withConfig({ displayName: "ColorSwatch", componentId: "sc-103e3cx" }) `
+  flex-shrink: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  background-color: ${({ $color }) => $color};
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.tiny};
+`;
+const TableEmpty = styled.div.withConfig({ displayName: "TableEmpty", componentId: "sc-zo5yrp" }) `
   padding: 0.75rem 0.25rem;
   color: ${({ theme }) => theme.palette.textSecondary};
 `;
@@ -15822,6 +15861,27 @@ const AttachmentsCell = React.memo(({ attribute, row, canEdit, onChange }) => {
                 }) }, previewIndex))] }));
 });
 
+/**
+ * Колонка цвета (`colorPicker` у атрибута).
+ *
+ * Значение хранится строкой в любом из привычных видов — `hex`, `rgb`, `rgba`, — поэтому рядом со
+ * значением показывается плашка этого цвета, а на правку встаёт палитра.
+ *
+ * Неразбираемая строка остаётся просто текстом, без плашки: так видно, что в данных мусор, а не
+ * пустое значение.
+ */
+const ColorCell = React.memo(({ attribute, row, canEdit, onChange }) => {
+    const { attributeName, isEditable } = attribute;
+    const value = row.properties[attributeName];
+    const text = React.useMemo(() => (lodash.isNil(value) ? "" : String(value)), [value]);
+    const color = React.useMemo(() => (text ? new color$1.Color(text) : null), [text]);
+    const isValidColor = !!color?.isValid;
+    // Те же два условия, что и у обычной ячейки: режим таблицы и разрешение самого атрибута.
+    const editable = canEdit && isEditable;
+    const handleChange = React.useCallback((next) => onChange(row.key, attributeName, colorToHex(next)), [attributeName, onChange, row.key]);
+    return (jsxRuntime.jsxs(ColorCellBox, { children: [editable ? (jsxRuntime.jsx(uilibGl.ColorPicker, { zIndex: DASHBOARD_OVERLAY_Z_INDEX, withOpacity: true, value: isValidColor ? color : new color$1.Color(DEFAULT_CELL_COLOR), onChange: handleChange })) : (isValidColor && jsxRuntime.jsx(ColorSwatch, { "$color": text })), jsxRuntime.jsx(CellText, { title: text, children: text || jsxRuntime.jsx(CellPlaceholder, { children: "\u2014" }) })] }));
+});
+
 /**
  * Значение ячейки не изменилось.
  *
@@ -15920,7 +15980,7 @@ const useCellEditing = () => {
 const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     const { t, language } = useGlobalContext();
     const { editing, buttonProps, editorProps } = useCellEditing();
-    const { attributeName, type, subType, isEditable, stringFormat, multiline } = attribute;
+    const { attributeName, type, subType, isEditable, stringFormat, multiline, colorPicker } = attribute;
     const value = row.properties[attributeName];
     const handleChange = React.useCallback((next) => {
         // Пустые правки отбрасываем: иначе строка становилась бы «изменённой» от простого
@@ -15944,6 +16004,11 @@ const TableCell = React.memo(({ attribute, row, canEdit, onChange }) => {
     if (subType === api.StringSubType.Attachments) {
         return jsxRuntime.jsx(AttachmentsCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
     }
+    // Цвет — тоже строка, и по типу от обычной не отличается: что она значит, говорит только
+    // `colorPicker` в схеме.
+    if (colorPicker) {
+        return jsxRuntime.jsx(ColorCell, { attribute: attribute, row: row, canEdit: canEdit, onChange: onChange });
+    }
     // Логическое значение и на чтение показываем галкой, а не словами «true»/«false» —
     // так же, как остальной дашборд рисует булевы атрибуты.
     if (type === api.AttributeType.Boolean) {
@@ -16063,7 +16128,7 @@ const TableColumnResizer = React.memo(({ index, 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], true), "$sortable": sortEnabled, "$fixedWidth": columnWidths[attributeName] != null, 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));
+            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 }) }));
@@ -19831,6 +19896,7 @@ exports.buildTrackTemplate = buildTrackTemplate;
 exports.checkEqualOrIncludes = checkEqualOrIncludes;
 exports.checkIsLoading = checkIsLoading;
 exports.collectConfigIds = collectConfigIds;
+exports.colorToHex = colorToHex;
 exports.containsNodeId = containsNodeId;
 exports.createConfigLayer = createConfigLayer;
 exports.createConfigPage = createConfigPage;