@evergis/react 4.0.154 → 4.0.155

package/dist/react.esm.js

@@ -5822,13 +5822,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 = [
@@ -9552,7 +9553,10 @@ const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement })
     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 = useMemo(() => (isLineChart ? chartElement?.options?.axis?.x?.title : undefined), [isLineChart, chartElement?.options?.axis?.x?.title]);
     const footerJustify = useMemo(() => CHART_AXIS_ALIGN_JUSTIFY[chartElement?.options?.axis?.x?.align ?? "center"], [chartElement?.options?.axis?.x?.align]);
     // Легенда встаёт в строку с подписью оси X только когда та есть и легенда не вынесена вбок.
     const isLegendInline = useMemo(() => !!legendInline && !twoColumns && !!xAxisTitle, [legendInline, twoColumns, xAxisTitle]);
@@ -9583,7 +9587,7 @@ const ChartContainer = memo(({ elementConfig, isVisible, type, renderElement })
     if (!loading && !hasItems && hideEmpty)
         return null;
     const chartSlot = (jsx(ContainerChart, { "$fill": !!fill, children: jsx(FillContext.Provider, { value: fillContextValue, children: jsx(ChartPlotContext.Provider, { value: plotContextValue, children: renderElement({ id: "chart" }) }) }) }));
-    const footer = xAxisTitle ? (jsxs(ChartFooter, { "$align": footerJustify, "$insets": footerInsets, "$offsetTop": isLineChart ? X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK : 0, "$awaitingPlot": isAwaitingPlot, children: [jsx(ChartXAxisTitle, { children: xAxisTitle }), isLegendInline && jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : null;
+    const footer = xAxisTitle ? (jsxs(ChartFooter, { "$align": footerJustify, "$insets": footerInsets, "$offsetTop": X_AXIS_TITLE_GAP - LINE_CHART_X_LABELS_BLANK, "$awaitingPlot": isAwaitingPlot, children: [jsx(ChartXAxisTitle, { children: xAxisTitle }), isLegendInline && jsx(ContainerLegend, { children: renderElement({ id: "legend" }) })] })) : null;
     // Легенда линейного графика: под подписью оси X — через X_AXIS_TITLE_LEGEND_GAP, без подписи — на её
     // месте, вплотную под подписями делений оси X. У остальных графиков — прежняя раскладка общей легенды.
     const legendRow = isLegendInline ? null : (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" }) }));
@@ -11344,6 +11348,13 @@ const StyledSvg = styled(Flex).withConfig({ displayName: "StyledSvg", componentI
   ${({ $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(Flex).withConfig({ displayName: "ContainerIconValue", componentId: "sc-1adlcb4" }) ``;
 /**
  * Обёртка иконки плитки. Собственный styled нужен, чтобы до иконки можно было дотянуться стилями:
@@ -11448,6 +11459,12 @@ const RoundedBackgroundContainerWrapper = styled(Flex).withConfig({ displayName:
           width: ${BIG_ICON_SIZE} !important;
           height: ${BIG_ICON_SIZE} !important;
         }
+
+        /* Растровая иконка из атрибута-вложения: её размер тоже задаёт контейнер. */
+        ${AttachmentIconImg} {
+          width: ${BIG_ICON_SIZE};
+          height: ${BIG_ICON_SIZE};
+        }
       }
     `};
 
@@ -15545,14 +15562,55 @@ const StyledIcon = styled(Icon).withConfig({ displayName: "StyledIcon", componen
   ${({ 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 = memo(({ value, fontSize, fontColor, style }) => {
+    const icon = useMemo(() => getAttachmentIcon(value), [value]);
+    const size = useMemo(() => Number(fontSize) || ATTACHMENT_ICON_DEFAULT_SIZE, [fontSize]);
+    const rasterUrl = useMemo(() => (icon && !icon.isSvg ? icon.url : null), [icon]);
+    const imageSrc = useFetchImageWithAuth(rasterUrl);
+    if (!icon)
+        return null;
+    if (icon.isSvg) {
+        return jsx(SvgImage, { url: icon.url, width: size, height: size, fontColor: fontColor });
+    }
+    if (!imageSrc)
+        return null;
+    return jsx(AttachmentIconImg, { src: imageSrc, alt: icon.name, style: style, "$size": size });
+});
+
 const ElementIcon = 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 = useMemo(() => attributeName
-        ? attributes?.find(item => item.attributeName === attributeName)?.value
-        : value, [attributeName, attributes, value]);
+    const attribute = useMemo(() => (attributeName ? getAttributeByName(attributeName, attributes) : undefined), [attributeName, attributes]);
+    const iconValue = useMemo(() => (attributeName ? attribute?.value : value), [attributeName, attribute, value]);
+    // Во вложениях лежит список файлов, а не имя глифа: иконкой становится первое изображение.
+    if (attribute?.subType === StringSubType.Attachments) {
+        return jsx(AttachmentIcon, { value: attribute.value, fontSize: fontSize, fontColor: fontColor, style: style });
+    }
     return (jsx(StyledIcon, { kind: iconValue, fontSize: fontSize, fontColor: fontColor, style: style }));
 });