@evergis/react 4.0.164 → 4.0.166

package/dist/react.esm.js

@@ -14199,21 +14199,124 @@ const StyledButton = styled(FlatButton).withConfig({ displayName: "StyledButton"
   `}
 `;
 
-const StatusWaitingButton = ({ title, icon = "play", status, statusColors, isWaiting, isDisabled, onClick }) => {
-    const { t, themeName } = useGlobalContext();
-    const renderTitle = useMemo(() => status === RemoteTaskStatus.Process
-        ? t("", { ns: "dashboard", defaultValue: "Остановить" })
-        : status === RemoteTaskStatus.Unknown ? title : STATUS_TITLES[status], [status, t, title]);
-    const renderIcon = useMemo(() => {
-        const iconComponent = isWaiting ? (jsx(CircularProgress, { diameter: 1, mono: true }))
-            : status !== RemoteTaskStatus.Unknown
-                ? jsx(Icon, { kind: STATUS_ICONS[status] })
-                : jsx(Icon, { kind: icon });
-        return (jsx(Flex, { alignItems: "center", marginRight: renderTitle ? "0.5rem" : 0, children: iconComponent }));
-    }, [icon, isWaiting, renderTitle, status]);
+/** Текст и иконка кнопки запуска: в исходном состоянии — заданные, иначе — по статусу задачи. */
+const useTaskButtonState = ({ status, title, icon }) => {
+    const { t } = useGlobalContext();
+    const buttonTitle = useMemo(() => {
+        if (status === RemoteTaskStatus.Process)
+            return t("stop", { ns: "dashboard", defaultValue: "Остановить" });
+        if (status === RemoteTaskStatus.Unknown)
+            return title;
+        return STATUS_TITLES[status];
+    }, [status, t, title]);
+    const iconKind = useMemo(() => (status === RemoteTaskStatus.Unknown ? icon : STATUS_ICONS[status]), [icon, status]);
+    return { title: buttonTitle, iconKind };
+};
+
+const StatusWaitingButton = ({ title, icon = "play", status, statusColors, isWaiting, isDisabled, onClick, }) => {
+    const { themeName } = useGlobalContext();
+    const { title: renderTitle, iconKind } = useTaskButtonState({ status, title, icon });
+    const renderIcon = useMemo(() => (jsx(Flex, { alignItems: "center", marginRight: renderTitle ? "0.5rem" : 0, children: isWaiting ? jsx(CircularProgress, { diameter: 1, mono: true }) : jsx(Icon, { kind: iconKind }) })), [iconKind, isWaiting, renderTitle]);
     return (jsx(ThemeProvider, { theme: darkTheme, children: jsxs(StyledButton, { status: status, statusColors: statusColors, disabled: isDisabled, themeName: themeName, onClick: onClick, children: [renderIcon, renderTitle] }) }));
 };
 
+const ImageContainerButton = styled(FlatButton).withConfig({ displayName: "ImageContainerButton", componentId: "sc-nq6mg4" }) `
+  min-height: 1.5rem;
+  border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
+  background-color: ${({ theme: { palette } }) => palette.primary};
+  text-transform: none;
+
+  :hover {
+    background-color: ${({ theme: { palette } }) => palette.primaryDeep};
+  }
+`;
+
+/** Опции внешнего вида: хотя бы одна из них переводит кнопку-ссылку на IconButton. */
+const ELEMENT_BUTTON_APPEARANCE_KEYS = [
+    "variant",
+    "color",
+    "primary",
+    "secondary",
+    "error",
+    "violet",
+    "size",
+    "shape",
+    "radius",
+    "icon",
+    "iconRight",
+];
+const ELEMENT_BUTTON_COLOR_FLAGS = ["primary", "secondary", "error", "violet"];
+const DEFAULT_ELEMENT_BUTTON_VARIANT = "solid";
+
+const hasButtonAppearance = (options) => !!options && ELEMENT_BUTTON_APPEARANCE_KEYS.some(key => options[key] !== undefined);
+/**
+ * Пропсы IconButton из опций элемента. Без цвета и флагов цвета кнопка — primary;
+ * нейтральная задаётся явным `primary: false`. `color` контейнера перекрывает цвет из опций.
+ */
+const getElementButtonProps = (options = {}, color) => {
+    const { variant, primary, secondary, error, violet, size, shape, radius, icon, iconRight } = options;
+    const buttonColor = color ?? options.color;
+    const hasColor = buttonColor !== undefined || ELEMENT_BUTTON_COLOR_FLAGS.some(flag => options[flag] !== undefined);
+    return {
+        variant: variant ?? DEFAULT_ELEMENT_BUTTON_VARIANT,
+        color: buttonColor,
+        primary: hasColor ? primary : true,
+        secondary,
+        error,
+        violet,
+        size,
+        shape,
+        radius,
+        kind: icon,
+        iconRight,
+    };
+};
+
+const ElementButton = memo(({ type, elementConfig, title, icon, color, disabled, onClick }) => {
+    const { attributes } = useWidgetContext(type);
+    const { value, attributeName, options } = elementConfig || {};
+    const link = useMemo(() => getAttributeByName(attributeName, attributes)?.value, [attributeName, attributes]);
+    const buttonProps = useMemo(() => getElementButtonProps(options, color), [options, color]);
+    const text = useMemo(() => title ?? (value === undefined || value === null ? "" : String(value)), [title, value]);
+    const openLink = useCallback(() => window.open(link), [link]);
+    if (!onClick && (!link || typeof link !== "string"))
+        return null;
+    if (!onClick && !hasButtonAppearance(options)) {
+        return jsx(ImageContainerButton, { onClick: openLink, children: text });
+    }
+    return (jsx(IconButton, { ...buttonProps, icon: icon, disabled: disabled, tabIndex: 0, onClick: onClick ?? openLink, children: text || undefined }));
+});
+
+/** Спиннер ожидания в цвете текста кнопки: круг-подложка приглушён, дуга — сплошная. */
+const TaskButtonSpinner = styled(Flex).withConfig({ displayName: "TaskButtonSpinner", componentId: "sc-192613c" }) `
+  align-items: center;
+
+  circle {
+    stroke: currentColor;
+  }
+
+  circle:first-of-type {
+    opacity: 0.3;
+  }
+`;
+
+/** Кнопка запуска из слота `button`: вид — из слота, поведение и статусы — от контейнера. */
+const TaskButton = ({ type, buttonConfig, title, icon, status, statusColors, isWaiting, isDisabled, onClick, }) => {
+    const { value, options } = buttonConfig;
+    const slotTitle = useMemo(() => (value === undefined || value === null || value === "" ? title : String(value)), [
+        title,
+        value,
+    ]);
+    const { title: buttonTitle, iconKind } = useTaskButtonState({ status, title: slotTitle, icon: options?.icon ?? icon });
+    const buttonIcon = useMemo(() => {
+        if (isWaiting) {
+            return (jsx(TaskButtonSpinner, { children: jsx(CircularProgress, { diameter: 1 }) }));
+        }
+        return iconKind ? jsx(Icon, { kind: iconKind }) : undefined;
+    }, [iconKind, isWaiting]);
+    return (jsx(ElementButton, { type: type, elementConfig: buttonConfig, title: buttonTitle, icon: buttonIcon, color: statusColors?.[status], disabled: isDisabled, onClick: onClick }));
+};
+
 const TaskContainerWrapper = styled(Flex).withConfig({ displayName: "TaskContainerWrapper", componentId: "sc-1hcp670" }) `
   ${sizeCssMixin};
 `;
@@ -14342,9 +14445,10 @@ const TaskContainer = memo(({ type, elementConfig, renderElement }) => {
     const { currentPage } = useWidgetPage(type);
     const dashboard = useDashboardFilterStore(type);
     const { taskId, runTask, stopTask, status, openLog, loading, isLogDialogOpen, closeLog, log, lastMessage, result, } = usePythonTask();
-    const { options } = elementConfig || {};
+    const { options, children } = elementConfig || {};
     const { title, relatedResources, center, icon, statusColors, responseFilters, useNotifications, } = options || {};
     const { root, body } = useContainerRoot({ elementConfig });
+    const buttonConfig = useMemo(() => children?.find((child) => child.id === "button"), [children]);
     const { setNotificationDismissed } = useTaskNotifications({
         enabled: !!useNotifications,
         suppressed: isLogDialogOpen,
@@ -14384,7 +14488,16 @@ const TaskContainer = memo(({ type, elementConfig, renderElement }) => {
             return runTask({ resourceId, parameters: newParams, script, fileName, methodName });
         }));
     }, [attributes, currentPage.filters, dashboard, dataSources, ewktGeometry, layerInfo, relatedResources, runTask, selectedFilters, stopTask, taskId]);
-    return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxs(TaskContainerWrapper, { ...body, justifyContent: center ? "center" : "flex-start", children: [jsx(StatusWaitingButton, { title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }), icon: icon, status: status, statusColors: statusColors, isWaiting: loading || !!taskId, isDisabled: !relatedResources?.length, onClick: onClick }), !!(log || taskId) && (jsxs(Fragment$1, { children: [jsx(IconButton, { kind: "info", onClick: openLog }), jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
+    const buttonProps = useMemo(() => ({
+        title: title || t("run", { ns: "dashboard", defaultValue: "Запуск" }),
+        icon,
+        status,
+        statusColors,
+        isWaiting: loading || !!taskId,
+        isDisabled: !relatedResources?.length,
+        onClick,
+    }), [icon, loading, onClick, relatedResources?.length, status, statusColors, t, taskId, title]);
+    return (jsxs(ContainerRoot, { ...root, children: [jsx(ContainerBackground, { elementConfig: elementConfig, renderElement: renderElement }), jsx(ExpandableTitle, { elementConfig: elementConfig, type: type, renderElement: renderElement }), jsxs(TaskContainerWrapper, { ...body, justifyContent: center ? "center" : "flex-start", children: [buttonConfig ? (jsx(TaskButton, { type: type, buttonConfig: buttonConfig, ...buttonProps })) : (jsx(StatusWaitingButton, { ...buttonProps })), !!(log || taskId) && (jsxs(Fragment$1, { children: [jsx(IconButton, { kind: "info", onClick: openLog }), jsx(LogDialog, { logs: log, status: status, statusColors: statusColors, isOpen: isLogDialogOpen, onClose: onCloseLog, onMinimize: useNotifications ? onMinimizeLog : undefined })] }))] })] }));
 });
 
 const EditContainer = ({ type, elementConfig, renderElement }) => {
@@ -15440,26 +15553,6 @@ const FeatureCardBackgroundHeader = () => {
                         }) })] }) }) }));
 };
 
-const ImageContainerButton = styled(FlatButton).withConfig({ displayName: "ImageContainerButton", componentId: "sc-nq6mg4" }) `
-  min-height: 1.5rem;
-  border-radius: ${({ theme: { borderRadius } }) => borderRadius.large};
-  background-color: ${({ theme: { palette } }) => palette.primary};
-  text-transform: none;
-
-  :hover {
-    background-color: ${({ theme: { palette } }) => palette.primaryDeep};
-  }
-`;
-
-const ElementButton = memo(({ type, elementConfig }) => {
-    const { attributes } = useWidgetContext(type);
-    const attribute = getAttributeByName(elementConfig?.attributeName, attributes);
-    const link = attribute?.value;
-    if (!link || typeof link !== "string")
-        return null;
-    return (jsx(ImageContainerButton, { onClick: () => window.open(attribute?.value), children: elementConfig.value || "" }));
-});
-
 const AttributeGalleryContainer = styled.div.withConfig({ displayName: "AttributeGalleryContainer", componentId: "sc-mhke7l" }) `
   && {
     width: calc(100% + 3rem);