aldehyde 0.2.480 → 0.2.481

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

@@ -1,158 +1,158 @@
-
-import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { Radio, ConfigProvider } from 'antd';
-import dayjs from 'dayjs';
-import { useLocale } from "../../locale/useLocale";
-import "./index.less";
-
-const handleTimes = (type: string) => {
-    const format = "YYYY-MM-DD HH:mm:ss";
-    let temTime;
-    switch (type) {
-        case "today":
-            return `${dayjs().startOf("day").format(format)}~${dayjs().endOf("day").format(format)}`;
-        case "yesterday":
-            temTime = dayjs().subtract(1, "day");
-            return `${temTime.startOf("day").format(format)}~${temTime.endOf("day").format(format)}`;
-        case "last7days":
-            temTime = dayjs().subtract(6, "day");
-            return `${temTime.startOf("day").format(format)}~${dayjs().endOf("day").format(format)}`;
-        case "last30days":
-            temTime = dayjs().subtract(29, "day");
-            return `${temTime.startOf("day").format(format)}~${dayjs().endOf("day").format(format)}`;
-        case "thisMonth":
-            return `${dayjs().startOf("month").format(format)}~${dayjs().endOf("day").format(format)}`;
-        case "lastMonth":
-            temTime = dayjs().subtract(1, "month");
-            return `${temTime.startOf("month").format(format)}~${temTime.endOf("month").format(format)}`;
-        case "thisYear":
-            return `${dayjs().startOf("year").format(format)}~${dayjs().endOf("day").format(format)}`;
-        case "lastYear":
-            temTime = dayjs().subtract(1, "year");
-            return `${temTime.startOf("year").format(format)}~${temTime.endOf("year").format(format)}`;
-        default:
-            return;
-    }
-}
-
-// 翻译
-const handleTranslate = (arr: { label: string, value: string }[], translate: any) => {
-    if (!arr) {
-        return [];
-    }
-    const temArr = arr.map(r => ({ value: r.value, label: translate("${" + r.label + "}") }));
-    return temArr;
-}
-
-export interface ComponentStyle {
-    optionType?: "default" | "button",
-    compsIds?: string[];
-    buttonStyle?: {
-        style: "outline" | "solid",
-        buttonBg: string,
-        buttonColor: string,
-        buttonCheckedColor: string,
-        borderColor: string
-    };
-    fontSize?: number; // 字体大小
-    textColor?: string; // 文本颜色
-    eventType?: "search";
-    searchConfig: {
-        paramType: "time" | "string",
-        options: { label: string, value: string }[],
-        defaultValue: string;
-    };
-    defaultValue?: string;
-    searchKey?: string; // 搜索key
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    setSearchParams: (data: any) => void;
-}
-
-export interface ComponentRef {
-    updateConfig: (newConfig: ComponentProps) => void;
-}
-
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style, setSearchParams } = props;
-    const { translate } = useLocale();
-    const [config, setConfig] = useState<ComponentStyle>({ ...style });
-    const [options, setOptions] = useState<{ label: string, value: string }[]>(handleTranslate(style?.searchConfig?.options, translate));
-    const [currentValue, setCurrentValue] = useState<string>(style?.searchConfig?.defaultValue || "");
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            const { style: newStyle } = newConfig;
-            const { searchConfig } = newStyle;
-            setConfig({ ...newStyle });
-            setOptions(handleTranslate(searchConfig?.options, translate));
-            setCurrentValue(searchConfig?.defaultValue || "");
-        },
-    }));
-
-    const handleChange = (value) => {
-        const { compsIds, searchKey, searchConfig } = config;
-        setCurrentValue(value);
-        if (!compsIds?.length || !searchKey) {
-            return;
-        }
-        const { paramType } = searchConfig || {};
-        const temObj = {};
-        for (const compId of compsIds) {
-            if (paramType === "time") {
-                const temVal = handleTimes(value);
-                temObj[compId] = { [searchKey]: temVal };
-            } else {
-                temObj[compId] = { [searchKey]: value };
-            }
-        };
-        setSearchParams && setSearchParams(val => {
-            const temObj = {};
-            for (const compId of compsIds) {
-                let temParams = {};
-                if (paramType === "time") { // 时间类型
-                    const temVal = handleTimes(value);
-                    temParams = { [searchKey]: temVal };
-                } else { // 字符串类型
-                    temParams = { [searchKey]: value };
-                }
-                if (val[compId]) { // 全局搜索参数中存在当前组件的搜索参数，则合并
-                    val[compId] = { ...val[compId], ...temParams }
-                } else {
-                    temObj[compId] = temParams;
-                }
-            };
-            return { ...val, ...temObj };
-        });
-    }
-
-    useEffect(() => {
-        if (config?.searchConfig?.defaultValue) {
-            handleChange(config?.searchConfig?.defaultValue || "");
-        }
-    }, []);
-
-    const { buttonBg, buttonCheckedColor, borderColor } = config?.buttonStyle || {};
-
-    return (
-        <ConfigProvider theme={{
-            token: { colorTextBase: config?.textColor || "#000000", colorPrimary: buttonCheckedColor, colorBorder: borderColor, fontSize: config?.fontSize || 12 },
-            components: { Radio: { buttonBg, buttonSolidCheckedColor: config?.textColor || "#000000" } }
-        }}>
-            <div className={config.buttonStyle?.style === "outline" ? "base-radio-outline" : 'base-radio'}>
-                <Radio.Group
-                    onChange={(e) => handleChange(e.target.value)}
-                    block
-                    options={options}
-                    optionType={config.optionType || "button"}
-                    value={currentValue}
-                    buttonStyle={config.buttonStyle?.style || "outline"}
-                />
-            </div>
-        </ConfigProvider>
-    );
-});
-
+
+import React, { ForwardedRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Radio, ConfigProvider } from 'antd';
+import dayjs from 'dayjs';
+import { useLocale } from "../../locale/useLocale";
+import "./index.less";
+
+const handleTimes = (type: string) => {
+    const format = "YYYY-MM-DD HH:mm:ss";
+    let temTime;
+    switch (type) {
+        case "today":
+            return `${dayjs().startOf("day").format(format)}~${dayjs().endOf("day").format(format)}`;
+        case "yesterday":
+            temTime = dayjs().subtract(1, "day");
+            return `${temTime.startOf("day").format(format)}~${temTime.endOf("day").format(format)}`;
+        case "last7days":
+            temTime = dayjs().subtract(6, "day");
+            return `${temTime.startOf("day").format(format)}~${dayjs().endOf("day").format(format)}`;
+        case "last30days":
+            temTime = dayjs().subtract(29, "day");
+            return `${temTime.startOf("day").format(format)}~${dayjs().endOf("day").format(format)}`;
+        case "thisMonth":
+            return `${dayjs().startOf("month").format(format)}~${dayjs().endOf("day").format(format)}`;
+        case "lastMonth":
+            temTime = dayjs().subtract(1, "month");
+            return `${temTime.startOf("month").format(format)}~${temTime.endOf("month").format(format)}`;
+        case "thisYear":
+            return `${dayjs().startOf("year").format(format)}~${dayjs().endOf("day").format(format)}`;
+        case "lastYear":
+            temTime = dayjs().subtract(1, "year");
+            return `${temTime.startOf("year").format(format)}~${temTime.endOf("year").format(format)}`;
+        default:
+            return;
+    }
+}
+
+// 翻译
+const handleTranslate = (arr: { label: string, value: string }[], translate: any) => {
+    if (!arr) {
+        return [];
+    }
+    const temArr = arr.map(r => ({ value: r.value, label: translate("${" + r.label + "}") }));
+    return temArr;
+}
+
+export interface ComponentStyle {
+    optionType?: "default" | "button",
+    compsIds?: string[];
+    buttonStyle?: {
+        style: "outline" | "solid",
+        buttonBg: string,
+        buttonColor: string,
+        buttonCheckedColor: string,
+        borderColor: string
+    };
+    fontSize?: number; // 字体大小
+    textColor?: string; // 文本颜色
+    eventType?: "search";
+    searchConfig: {
+        paramType: "time" | "string",
+        options: { label: string, value: string }[],
+        defaultValue: string;
+    };
+    defaultValue?: string;
+    searchKey?: string; // 搜索key
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    setSearchParams: (data: any) => void;
+}
+
+export interface ComponentRef {
+    updateConfig: (newConfig: ComponentProps) => void;
+}
+
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style, setSearchParams } = props;
+    const { translate } = useLocale();
+    const [config, setConfig] = useState<ComponentStyle>({ ...style });
+    const [options, setOptions] = useState<{ label: string, value: string }[]>(handleTranslate(style?.searchConfig?.options, translate));
+    const [currentValue, setCurrentValue] = useState<string>(style?.searchConfig?.defaultValue || "");
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            const { style: newStyle } = newConfig;
+            const { searchConfig } = newStyle;
+            setConfig({ ...newStyle });
+            setOptions(handleTranslate(searchConfig?.options, translate));
+            setCurrentValue(searchConfig?.defaultValue || "");
+        },
+    }));
+
+    const handleChange = (value) => {
+        const { compsIds, searchKey, searchConfig } = config;
+        setCurrentValue(value);
+        if (!compsIds?.length || !searchKey) {
+            return;
+        }
+        const { paramType } = searchConfig || {};
+        const temObj = {};
+        for (const compId of compsIds) {
+            if (paramType === "time") {
+                const temVal = handleTimes(value);
+                temObj[compId] = { [searchKey]: temVal };
+            } else {
+                temObj[compId] = { [searchKey]: value };
+            }
+        };
+        setSearchParams && setSearchParams(val => {
+            const temObj = {};
+            for (const compId of compsIds) {
+                let temParams = {};
+                if (paramType === "time") { // 时间类型
+                    const temVal = handleTimes(value);
+                    temParams = { [searchKey]: temVal };
+                } else { // 字符串类型
+                    temParams = { [searchKey]: value };
+                }
+                if (val[compId]) { // 全局搜索参数中存在当前组件的搜索参数，则合并
+                    val[compId] = { ...val[compId], ...temParams }
+                } else {
+                    temObj[compId] = temParams;
+                }
+            };
+            return { ...val, ...temObj };
+        });
+    }
+
+    useEffect(() => {
+        if (config?.searchConfig?.defaultValue) {
+            handleChange(config?.searchConfig?.defaultValue || "");
+        }
+    }, []);
+
+    const { buttonBg, buttonCheckedColor, borderColor } = config?.buttonStyle || {};
+
+    return (
+        <ConfigProvider theme={{
+            token: { colorTextBase: config?.textColor || "#000000", colorPrimary: buttonCheckedColor, colorBorder: borderColor, fontSize: config?.fontSize || 12 },
+            components: { Radio: { buttonBg, buttonSolidCheckedColor: config?.textColor || "#000000" } }
+        }}>
+            <div className={config.buttonStyle?.style === "outline" ? "base-radio-outline" : 'base-radio'}>
+                <Radio.Group
+                    onChange={(e) => handleChange(e.target.value)}
+                    block
+                    options={options}
+                    optionType={config.optionType || "button"}
+                    value={currentValue}
+                    buttonStyle={config.buttonStyle?.style || "outline"}
+                />
+            </div>
+        </ConfigProvider>
+    );
+});
+
 export default Index;