aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/lowcode-components/base-button/index.tsx

@@ -1,198 +1,198 @@
-
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
-import { Button } from "antd";
-import { useLocale } from "../../locale/useLocale";
-import HydrocarbonService from "../../tmpl/hcservice-v3";
-import ProgramConfig from "../../units";
-import LowcodeConstant from "../assets/lowcode-constant";
-import './index.less';
-
-const { serverKey, sourceId } = LowcodeConstant.fileUpload;
-
-// 处理背景图片地址
-const handleImgUrl = (basePath: string) => {
-    if (!basePath) {
-        return "";
-    }
-    if (basePath.startsWith("http")) {
-        return basePath;
-    }
-    const url = encodeURI(ProgramConfig.joinPath(
-        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
-        basePath
-    )) +
-        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
-    return url;
-}
-
-const iterateLayerLink = (layerHeader: string, res: string[], layerConfigs: any) => {
-    let layer: ILayerItem = layerConfigs[layerHeader];
-    if (layer) {
-        res.push(layer.id);
-        if (layer.childHeader)
-            iterateLayerLink(layer.childHeader, res, layerConfigs);
-        let nextLayer = layerConfigs[layer.next];
-        while (nextLayer) {
-            if (nextLayer.childHeader)
-                iterateLayerLink(nextLayer.childHeader, res, layerConfigs);
-            res.push(nextLayer.id);
-            nextLayer = layerConfigs[nextLayer.next];
-        }
-    }
-}
-
-const findAllChildLayer = (groupIds: string[], hasSelf: boolean = true, layerConfigs: any): string[] => {
-    let layerIdArr: string[] = [];
-    groupIds.forEach((id) => {
-        layerIdArr.push(id);
-        let layer: ILayerItem = layerConfigs[id];
-        if (layer.childHeader)
-            iterateLayerLink(layer.childHeader, layerIdArr, layerConfigs);
-    });
-    if (!hasSelf)
-        layerIdArr = layerIdArr.filter((id) => !groupIds.includes(id));
-    return [...new Set(layerIdArr)];
-}
-
-// 控制组件显隐
-const handleCompsHide = (ids: string[], type: string) => {
-    if (!ids || ids.length === 0) return;
-    // @ts-ignore
-    const { layerConfigs, updateLayer } = window.LC_VIEW?.layerManager || {};
-    const toBeUpdate = ids.map((id: string) => {
-        const item = layerConfigs[id];
-        const hide = type === "toggle" ? !item?.hide : type === "show" ? false : true;
-        if (item.type === "group") {
-            const childLayerIds = findAllChildLayer([item.id], true, layerConfigs);
-            return childLayerIds.map(id => ({ ...layerConfigs[id], hide }));
-        }
-        return [{ ...item, hide }];
-    }).flat();
-    // eslint-disable-next-line no-unused-expressions
-    updateLayer?.(toBeUpdate);
-}
-
-const pattern = /ddpage\/([^/]+).*menuId=([^&]+)/;
-
-interface ILayerItem {
-    id?: string | undefined;
-    hide?: boolean;
-    childHeader?: string;
-    next?: string;
-}
-
-export interface ComponentStyle {
-    backgroundColor?: string;
-    backgroundImage?: string;
-    localImgCode?: string;
-    color?: string;
-    text?: string;
-    fontSize?: string;
-    event?: {
-        eventType: string;
-        compsIds: string[];
-        routerType: string;
-        target: string;
-        path: string;
-        ddpageId: string;
-        menu: string;
-    };
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    isDesignMode?: boolean; // 是否编辑模式
-    navigate?: (parms: any) => void;
-}
-
-export interface ComponentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-}
-
-const ButtonComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, navigate, isDesignMode } = props;
-    const [config, setConfig] = useState<ComponentStyle>(style || {});
-    const [localImgDel, setLocalImgDel] = useState<boolean>(false);
-    const { translate } = useLocale();
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => { // 组件更新配置
-            const { style } = newConfig;
-            setConfig({ ...(style || {}) });
-        },
-    }));
-
-    /**
-     * compsIds 控制联动的组件id
-     * eventType 事件类型
-     */
-    const onClick = () => {
-        const { compsIds, eventType, routerType, target, path, ddpageId, menu } = config.event || {};
-        switch (eventType) {
-            case "toggle":
-            case "show":
-            case "hide":
-                handleCompsHide(compsIds, eventType);
-                break;
-            case "router":
-                const location = window.location;
-                const version = localStorage.getItem("version");
-                if (routerType === "screen") { // 大屏跳转
-                    const hash = location.hash;
-                    const match = hash.match(pattern);
-                    const sourceId = match?.[1];
-                    const menuId = match?.[2];
-                    const isLayout = ["#/v2/", "#/v3/", "#/v4/", "#/v5/"].some(prefix => hash.startsWith(prefix));
-                    if (sourceId && menuId) {
-                        const url = `${isLayout ? `/${version}` : ""}/ddpage/${sourceId}/${ddpageId}?menuId=${menuId}`;
-                        target === "self" ? navigate(url) : window.open(`#${url}`, "_blank");
-                    }
-                    return;
-                }
-                if (routerType === "url") { // 外部链接
-                    window.open(path, `_${target}`);
-                    return;
-                }
-                if (routerType === "menu") {  // 菜单
-                    const newUrl = menu.replace("{version}", `/${version}`);
-                    target === "self" ? navigate(newUrl) : window.open(`#${newUrl}`, "_blank");
-                }
-                break;
-            default:
-                break;
-        }
-    };
-
-    const backgroundImage = useMemo(() => handleImgUrl(config?.backgroundImage), [config]);
-
-    //  编辑页判断本地图片是否存在
-    const handleDesignModeLocalImg = async () => {
-        const { entity } = await HydrocarbonService.requestDtmplConfig(serverKey, sourceId, config.localImgCode);
-        setLocalImgDel(!entity);
-    }
-
-    useEffect(() => {
-        if (isDesignMode && config?.localImgCode) {
-            handleDesignModeLocalImg();
-        } else {
-            setLocalImgDel(false);
-        }
-    }, [config]);
-
-    return (
-        <Button
-            className="button-component"
-            style={{
-                ...config,
-                backgroundColor: backgroundImage ? "transparent" : config.backgroundColor,
-                backgroundImage: `url(${backgroundImage})`,
-            }}
-            onClick={onClick}
-        >
-            {isDesignMode && localImgDel ? <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.5)", display: "flex", justifyContent: "center", alignItems: "center", color: "red" }}>背景图片已删除，请重新上传</div> : null}
-            {config.text ? translate("${" + config.text + "}") : ""}
-        </Button>
-    );
-});
-
+
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
+import { Button } from "antd";
+import { useLocale } from "../../locale/useLocale";
+import HydrocarbonService from "../../tmpl/hcservice-v3";
+import ProgramConfig from "../../units";
+import LowcodeConstant from "../assets/lowcode-constant";
+import './index.less';
+
+const { serverKey, sourceId } = LowcodeConstant.fileUpload;
+
+// 处理背景图片地址
+const handleImgUrl = (basePath: string) => {
+    if (!basePath) {
+        return "";
+    }
+    if (basePath.startsWith("http")) {
+        return basePath;
+    }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        basePath
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
+    return url;
+}
+
+const iterateLayerLink = (layerHeader: string, res: string[], layerConfigs: any) => {
+    let layer: ILayerItem = layerConfigs[layerHeader];
+    if (layer) {
+        res.push(layer.id);
+        if (layer.childHeader)
+            iterateLayerLink(layer.childHeader, res, layerConfigs);
+        let nextLayer = layerConfigs[layer.next];
+        while (nextLayer) {
+            if (nextLayer.childHeader)
+                iterateLayerLink(nextLayer.childHeader, res, layerConfigs);
+            res.push(nextLayer.id);
+            nextLayer = layerConfigs[nextLayer.next];
+        }
+    }
+}
+
+const findAllChildLayer = (groupIds: string[], hasSelf: boolean = true, layerConfigs: any): string[] => {
+    let layerIdArr: string[] = [];
+    groupIds.forEach((id) => {
+        layerIdArr.push(id);
+        let layer: ILayerItem = layerConfigs[id];
+        if (layer.childHeader)
+            iterateLayerLink(layer.childHeader, layerIdArr, layerConfigs);
+    });
+    if (!hasSelf)
+        layerIdArr = layerIdArr.filter((id) => !groupIds.includes(id));
+    return [...new Set(layerIdArr)];
+}
+
+// 控制组件显隐
+const handleCompsHide = (ids: string[], type: string) => {
+    if (!ids || ids.length === 0) return;
+    // @ts-ignore
+    const { layerConfigs, updateLayer } = window.LC_VIEW?.layerManager || {};
+    const toBeUpdate = ids.map((id: string) => {
+        const item = layerConfigs[id];
+        const hide = type === "toggle" ? !item?.hide : type === "show" ? false : true;
+        if (item.type === "group") {
+            const childLayerIds = findAllChildLayer([item.id], true, layerConfigs);
+            return childLayerIds.map(id => ({ ...layerConfigs[id], hide }));
+        }
+        return [{ ...item, hide }];
+    }).flat();
+    // eslint-disable-next-line no-unused-expressions
+    updateLayer?.(toBeUpdate);
+}
+
+const pattern = /ddpage\/([^/]+).*menuId=([^&]+)/;
+
+interface ILayerItem {
+    id?: string | undefined;
+    hide?: boolean;
+    childHeader?: string;
+    next?: string;
+}
+
+export interface ComponentStyle {
+    backgroundColor?: string;
+    backgroundImage?: string;
+    localImgCode?: string;
+    color?: string;
+    text?: string;
+    fontSize?: string;
+    event?: {
+        eventType: string;
+        compsIds: string[];
+        routerType: string;
+        target: string;
+        path: string;
+        ddpageId: string;
+        menu: string;
+    };
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    isDesignMode?: boolean; // 是否编辑模式
+    navigate?: (parms: any) => void;
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+}
+
+const ButtonComponent = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, navigate, isDesignMode } = props;
+    const [config, setConfig] = useState<ComponentStyle>(style || {});
+    const [localImgDel, setLocalImgDel] = useState<boolean>(false);
+    const { translate } = useLocale();
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => { // 组件更新配置
+            const { style } = newConfig;
+            setConfig({ ...(style || {}) });
+        },
+    }));
+
+    /**
+     * compsIds 控制联动的组件id
+     * eventType 事件类型
+     */
+    const onClick = () => {
+        const { compsIds, eventType, routerType, target, path, ddpageId, menu } = config.event || {};
+        switch (eventType) {
+            case "toggle":
+            case "show":
+            case "hide":
+                handleCompsHide(compsIds, eventType);
+                break;
+            case "router":
+                const location = window.location;
+                const version = localStorage.getItem("version");
+                if (routerType === "screen") { // 大屏跳转
+                    const hash = location.hash;
+                    const match = hash.match(pattern);
+                    const sourceId = match?.[1];
+                    const menuId = match?.[2];
+                    const isLayout = ["#/v2/", "#/v3/", "#/v4/", "#/v5/"].some(prefix => hash.startsWith(prefix));
+                    if (sourceId && menuId) {
+                        const url = `${isLayout ? `/${version}` : ""}/ddpage/${sourceId}/${ddpageId}?menuId=${menuId}`;
+                        target === "self" ? navigate(url) : window.open(`#${url}`, "_blank");
+                    }
+                    return;
+                }
+                if (routerType === "url") { // 外部链接
+                    window.open(path, `_${target}`);
+                    return;
+                }
+                if (routerType === "menu") {  // 菜单
+                    const newUrl = menu.replace("{version}", `/${version}`);
+                    target === "self" ? navigate(newUrl) : window.open(`#${newUrl}`, "_blank");
+                }
+                break;
+            default:
+                break;
+        }
+    };
+
+    const backgroundImage = useMemo(() => handleImgUrl(config?.backgroundImage), [config]);
+
+    //  编辑页判断本地图片是否存在
+    const handleDesignModeLocalImg = async () => {
+        const { entity } = await HydrocarbonService.requestDtmplConfig(serverKey, sourceId, config.localImgCode);
+        setLocalImgDel(!entity);
+    }
+
+    useEffect(() => {
+        if (isDesignMode && config?.localImgCode) {
+            handleDesignModeLocalImg();
+        } else {
+            setLocalImgDel(false);
+        }
+    }, [config]);
+
+    return (
+        <Button
+            className="button-component"
+            style={{
+                ...config,
+                backgroundColor: backgroundImage ? "transparent" : config.backgroundColor,
+                backgroundImage: `url(${backgroundImage})`,
+            }}
+            onClick={onClick}
+        >
+            {isDesignMode && localImgDel ? <div style={{ position: "absolute", width: "100%", height: "100%", backgroundColor: "rgba(0,0,0,0.5)", display: "flex", justifyContent: "center", alignItems: "center", color: "red" }}>背景图片已删除，请重新上传</div> : null}
+            {config.text ? translate("${" + config.text + "}") : ""}
+        </Button>
+    );
+});
+
 export default ButtonComponent;