@evergis/react 4.0.154 → 4.0.155

package/dist/components/Dashboard/containers/AttachmentContainer/constants.d.ts

@@ -2,6 +2,7 @@ export declare const GRID_TILE_SIZE = "4.5rem";
 export declare const LIST_ICON_SIZE = "1.5rem";
 export declare const JPG_MIME_TYPE = "image/jpeg";
 export declare const PNG_MIME_TYPE = "image/png";
+export declare const SVG_MIME_TYPE = "image/svg+xml";
 export declare const IMAGE_MIME_TYPES: string[];
 export declare const XLSX_MIME_TYPES: string[];
 export declare const PDF_MIME_TYPE = "application/pdf";

package/dist/components/Dashboard/elements/ElementIcon/components/AttachmentIcon/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { AttachmentIconProps } from './types';
+/**
+ * Иконка из атрибута-вложения. SVG рисуется инлайном и перекрашивается `fontColor`, как у ElementSvg;
+ * растровый файл — картинкой как есть. Изображений среди вложений нет — не рендерится ничего.
+ */
+export declare const AttachmentIcon: FC<AttachmentIconProps>;

package/dist/components/Dashboard/elements/ElementIcon/components/AttachmentIcon/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const AttachmentIconImg: import('styled-components').StyledComponent<"img", any, {
+    $size: number;
+}, never>;

package/dist/components/Dashboard/elements/ElementIcon/components/AttachmentIcon/types.d.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from 'react';
+export interface AttachmentIconProps {
+    /** Сырое значение атрибута с `subType: Attachments`. */
+    value: unknown;
+    /** Размер иконки, px — как у шрифтовой иконки. */
+    fontSize?: string;
+    /** Цвет заливки SVG; растровое изображение не перекрашивается. */
+    fontColor?: string;
+    style?: CSSProperties;
+}
+export interface AttachmentIconSource {
+    url: string;
+    name: string;
+    isSvg: boolean;
+}

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

@@ -0,0 +1,2 @@
+/** Размер иконки-вложения, px, когда в конфиге не задан `options.fontSize`. */
+export declare const ATTACHMENT_ICON_DEFAULT_SIZE = 16;

package/dist/components/Dashboard/elements/ElementIcon/utils/getAttachmentIcon.d.ts

@@ -0,0 +1,7 @@
+import { AttachmentIconSource } from '../components/AttachmentIcon/types';
+/**
+ * Иконка из значения атрибута-вложения: первое изображение списка, остальные файлы пропускаются.
+ * Значение приходит JSON-строкой с сервера или массивом после правки — `parseAttachments` понимает оба.
+ * SVG помечается отдельно: его рисуют инлайном, чтобы перекрасить цветом иконки.
+ */
+export declare const getAttachmentIcon: (value: unknown) => AttachmentIconSource | null;

package/dist/index.js

@@ -5824,13 +5824,14 @@ const GRID_TILE_SIZE = "4.5rem";
 const LIST_ICON_SIZE = "1.5rem";
 const JPG_MIME_TYPE = "image/jpeg";
 const PNG_MIME_TYPE = "image/png";
+const SVG_MIME_TYPE = "image/svg+xml";
 const IMAGE_MIME_TYPES = [
     "image/apng",
     "image/avif",
     "image/gif",
     "image/jpeg",
     "image/png",
-    "image/svg+xml",
+    SVG_MIME_TYPE,
     "image/webp",
 ];
 const XLSX_MIME_TYPES = [
@@ -9554,7 +9555,10 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     const chartElement = children.find(child => child.id === "chart");
     const legendElement = children.find(child => child.id === "legend");
     const isLineChart = chartElement?.options?.chartType === "line";
-    const xAxisTitle = chartElement?.options?.axis?.x?.title;
+    // Подпись оси X — часть макета осей линейного графика, как и подписи осей Y в `Chart`. У других типов
+    // её нет, даже если она осталась в конфиге после смены типа: редактор показывает настройки осей только
+    // линейному графику, и убрать там такую подпись было бы нечем.
+    const xAxisTitle = React.useMemo(() => (isLineChart ? chartElement?.options?.axis?.x?.title : undefined), [isLineChart, chartElement?.options?.axis?.x?.title]);
     const footerJustify = React.useMemo(() => CHART_AXIS_ALIGN_JUSTIFY[chartElement?.options?.axis?.x?.align ?? "center"], [chartElement?.options?.axis?.x?.align]);
     // Легенда встаёт в строку с подписью оси X только когда та есть и легенда не вынесена вбок.
     const isLegendInline = React.useMemo(() => !!legendInline && !twoColumns && !!xAxisTitle, [legendInline, twoColumns, xAxisTitle]);
@@ -9585,7 +9589,7 @@ const ChartContainer = React.memo(({ elementConfig, isVisible, type, renderEleme
     if (!loading && !hasItems && hideEmpty)
         return null;
     const chartSlot = (jsxRuntime.jsx(ContainerChart, { "$fill": !!fill, children: jsxRuntime.jsx(FillContext.Provider, { value: fillContextValue, children: jsxRuntime.jsx(ChartPlotContext.Provider, { value: plotContextValue, children: renderElement({ id: "chart" }) }) }) }));
-    const footer = xAxisTitle ? (jsxRuntime.jsxs(ChartFooter, { "$align": footerJustify, "$insets": footerInsets, "$offsetTop": isLineChart ? X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK : 0, "$awaitingPlot": isAwaitingPlot, children: [jsxRuntime.jsx(ChartXAxisTitle, { children: xAxisTitle }), isLegendInline && jsxRuntime.jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : null;
+    const footer = xAxisTitle ? (jsxRuntime.jsxs(ChartFooter, { "$align": footerJustify, "$insets": footerInsets, "$offsetTop": X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK, "$awaitingPlot": isAwaitingPlot, children: [jsxRuntime.jsx(ChartXAxisTitle, { children: xAxisTitle }), isLegendInline && jsxRuntime.jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : null;
     // Легенда линейного графика: под подписью оси X — через X_AXIS_TITLE_LEGEND_GAP, без подписи — на её
     // месте, вплотную под подписями делений оси X. У остальных графиков — прежняя раскладка общей легенды.
     const legendRow = isLegendInline ? null : (jsxRuntime.jsx(ChartLegendRow, { justifyContent: legendJustify, "$insets": isPlotLegend ? footerInsets : null, "$gapTop": isPlotLegend ? (xAxisTitle ? X_AXIS_TITLE_LEGEND_GAP : 0) : undefined, "$offsetTop": isPlotLegend && !xAxisTitle ? X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK : undefined, "$justify": isPlotLegend ? legendJustify : undefined, "$awaitingPlot": isPlotLegend && isAwaitingPlot, children: renderElement({ id: "legend" }) }));
@@ -11346,6 +11350,13 @@ const StyledSvg = styled(uilibGl.Flex).withConfig({ displayName: "StyledSvg", co
   ${({ $fontColor }) => !!$fontColor && StyledSvgColorMixin};
 `;
 
+const AttachmentIconImg = styled.img.withConfig({ displayName: "AttachmentIconImg", componentId: "sc-1qtgzdf" }) `
+  flex-shrink: 0;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  object-fit: contain;
+`;
+
 const ContainerIconValue = styled(uilibGl.Flex).withConfig({ displayName: "ContainerIconValue", componentId: "sc-1adlcb4" }) ``;
 /**
  * Обёртка иконки плитки. Собственный styled нужен, чтобы до иконки можно было дотянуться стилями:
@@ -11450,6 +11461,12 @@ const RoundedBackgroundContainerWrapper = styled(uilibGl.Flex).withConfig({ disp
           width: ${BIG_ICON_SIZE} !important;
           height: ${BIG_ICON_SIZE} !important;
         }
+
+        /* Растровая иконка из атрибута-вложения: её размер тоже задаёт контейнер. */
+        ${AttachmentIconImg} {
+          width: ${BIG_ICON_SIZE};
+          height: ${BIG_ICON_SIZE};
+        }
       }
     `};
 
@@ -15547,14 +15564,55 @@ const StyledIcon = styled(uilibGl.Icon).withConfig({ displayName: "StyledIcon",
   ${({ fontColor }) => !!fontColor && StyledIconFontColorMixin};
 `;
 
+/** Размер иконки-вложения, px, когда в конфиге не задан `options.fontSize`. */
+const ATTACHMENT_ICON_DEFAULT_SIZE = 16;
+
+/**
+ * Иконка из значения атрибута-вложения: первое изображение списка, остальные файлы пропускаются.
+ * Значение приходит JSON-строкой с сервера или массивом после правки — `parseAttachments` понимает оба.
+ * SVG помечается отдельно: его рисуют инлайном, чтобы перекрасить цветом иконки.
+ */
+const getAttachmentIcon = (value) => {
+    const image = parseAttachments(value).find(({ mimeType, name }) => IMAGE_FILE_TYPES.includes(getFileType(mimeType, name)));
+    if (!image)
+        return null;
+    return {
+        url: getResourceUrl(image.link),
+        name: image.name,
+        isSvg: image.mimeType === SVG_MIME_TYPE,
+    };
+};
+
+/**
+ * Иконка из атрибута-вложения. SVG рисуется инлайном и перекрашивается `fontColor`, как у ElementSvg;
+ * растровый файл — картинкой как есть. Изображений среди вложений нет — не рендерится ничего.
+ */
+const AttachmentIcon = React.memo(({ value, fontSize, fontColor, style }) => {
+    const icon = React.useMemo(() => getAttachmentIcon(value), [value]);
+    const size = React.useMemo(() => Number(fontSize) || ATTACHMENT_ICON_DEFAULT_SIZE, [fontSize]);
+    const rasterUrl = React.useMemo(() => (icon && !icon.isSvg ? icon.url : null), [icon]);
+    const imageSrc = useFetchImageWithAuth(rasterUrl);
+    if (!icon)
+        return null;
+    if (icon.isSvg) {
+        return jsxRuntime.jsx(SvgImage, { url: icon.url, width: size, height: size, fontColor: fontColor });
+    }
+    if (!imageSrc)
+        return null;
+    return jsxRuntime.jsx(AttachmentIconImg, { src: imageSrc, alt: icon.name, style: style, "$size": size });
+});
+
 const ElementIcon = React.memo(({ type, elementConfig, ...rest }) => {
     const ctx = useWidgetContext(type);
     const attributes = rest.attributes || ctx.attributes;
     const { value, attributeName, options, style } = elementConfig || {};
     const { fontSize, fontColor } = options || {};
-    const iconValue = React.useMemo(() => attributeName
-        ? attributes?.find(item => item.attributeName === attributeName)?.value
-        : value, [attributeName, attributes, value]);
+    const attribute = React.useMemo(() => (attributeName ? getAttributeByName(attributeName, attributes) : undefined), [attributeName, attributes]);
+    const iconValue = React.useMemo(() => (attributeName ? attribute?.value : value), [attributeName, attribute, value]);
+    // Во вложениях лежит список файлов, а не имя глифа: иконкой становится первое изображение.
+    if (attribute?.subType === api.StringSubType.Attachments) {
+        return jsxRuntime.jsx(AttachmentIcon, { value: attribute.value, fontSize: fontSize, fontColor: fontColor, style: style });
+    }
     return (jsxRuntime.jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor, style: style }));
 });