aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/lowcode-components/decoration/decoration9/index.tsx

@@ -1,197 +1,197 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useRef } from "react";
-import "./index.less";
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number, id: string }
-}
-
-export interface ComponentRef {
-    updateConfig: (config: ComponentProps) => void;
-}
-const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
-    const { style: defStyle, base: defBase } = props;
-    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
-    const [width, setWidth] = useState<number>(defBase?.width || 300);
-    const [height, setHeight] = useState<number>(defBase?.height || 100);
-    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
-    const {
-        animationId1,
-        animationId2,
-        animationId3,
-        animationId4,
-        animationId5,
-        animationId6,
-        animationId7
-    } = useRef({
-        animationId1: `d9ani1${defBase?.id}`,
-        animationId2: `d9ani2${defBase?.id}`,
-        animationId3: `d9ani3${defBase?.id}`,
-        animationId4: `d9ani4${defBase?.id}`,
-        animationId5: `d9ani5${defBase?.id}`,
-        animationId6: `d9ani6${defBase?.id}`,
-        animationId7: `d9ani7${defBase?.id}`
-    }).current
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-            setHeight(newConfig.base.height);
-        },
-    }));
-
-    return <div className="decoration-9"  >
-        <svg width={width} height={height}>
-            <polyline
-                stroke={subColor}
-                strokeWidth='2'
-                points={`0, ${height / 2} ${width}, ${height / 2}`}
-            />
-
-            <polyline
-                stroke={mainColor}
-                strokeWidth='2'
-                points={`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`}
-                strokeDasharray={`0, ${width * 0.2}`}
-                fill='freeze'
-            >
-                <animate
-                    id={animationId2}
-                    attributeName='stroke-dasharray'
-                    values={`0, ${width * 0.2};${width * 0.2}, 0;`}
-                    dur='3s'
-                    begin={`${animationId1}.end`}
-                    fill='freeze'
-                />
-                <animate
-                    attributeName='stroke-dasharray'
-                    values={`${width * 0.2}, 0;0, ${width * 0.2}`}
-                    dur='0.01s'
-                    begin={`${animationId7}.end`}
-                    fill='freeze'
-                />
-            </polyline>
-
-            <polyline
-                stroke={mainColor}
-                strokeWidth='2'
-                points={`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 -
-                    3}, ${height / 2}`}
-                strokeDasharray={`0, ${width * 0.6}`}
-            >
-                <animate
-                    id={animationId4}
-                    attributeName='stroke-dasharray'
-                    values={`0, ${width * 0.6};${width * 0.6}, 0`}
-                    dur='3s'
-                    begin={`${animationId3}.end + 1s`}
-                    fill='freeze'
-                />
-                <animate
-                    attributeName='stroke-dasharray'
-                    values={`${width * 0.6}, 0;0, ${width * 0.6}`}
-                    dur='0.01s'
-                    begin={`${animationId7}.end`}
-                    fill='freeze'
-                />
-            </polyline>
-
-            <polyline
-                stroke={mainColor}
-                strokeWidth='2'
-                points={`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height /
-                    2}`}
-                strke-dasharray={`0, ${width * 0.2}`}
-            >
-                <animate
-                    id={animationId6}
-                    attributeName='stroke-dasharray'
-                    values={`0, ${width * 0.2};${width * 0.2}, 0`}
-                    dur='3s'
-                    begin={`${animationId5}.end + 1s`}
-                    fill='freeze'
-                />
-                <animate
-                    attributeName='stroke-dasharray'
-                    values={`${width * 0.2}, 0;0, ${width * 0.3}`}
-                    dur='0.01s'
-                    begin={`${animationId7}.end`}
-                    fill='freeze'
-                />
-            </polyline>
-
-            <circle cx='2' cy={height / 2} r='2' fill={subColor}>
-                <animate
-                    id={animationId1}
-                    attributeName='fill'
-                    values={`${subColor};${mainColor}`}
-                    begin={`0s;${animationId7}.end`}
-                    dur='0.3s'
-                    fill='freeze'
-                />
-            </circle>
-
-            <circle cx={width * 0.2} cy={height / 2} r='2' fill={subColor}>
-                <animate
-                    id={animationId3}
-                    attributeName='fill'
-                    values={`${subColor};${mainColor}`}
-                    begin={`${animationId2}.end`}
-                    dur='0.3s'
-                    fill='freeze'
-                />
-                <animate
-                    attributeName='fill'
-                    values={`${subColor};${subColor}`}
-                    dur='0.01s'
-                    begin={`${animationId7}.end`}
-                    fill='freeze'
-                />
-            </circle>
-
-            <circle cx={width * 0.8} cy={height / 2} r='2' fill={subColor}>
-                <animate
-                    id={animationId5}
-                    attributeName='fill'
-                    values={`${subColor};${mainColor}`}
-                    begin={`${animationId4}.end`}
-                    dur='0.3s'
-                    fill='freeze'
-                />
-                <animate
-                    attributeName='fill'
-                    values={`${subColor};${subColor}`}
-                    dur='0.01s'
-                    begin={`${animationId7}.end`}
-                    fill='freeze'
-                />
-            </circle>
-
-            <circle cx={width - 2} cy={height / 2} r='2' fill={subColor}>
-                <animate
-                    id={animationId7}
-                    attributeName='fill'
-                    values={`${subColor};${mainColor}`}
-                    begin={`${animationId6}.end`}
-                    dur='0.3s'
-                    fill='freeze'
-                />
-                <animate
-                    attributeName='fill'
-                    values={`${subColor};${subColor}`}
-                    dur='0.01s'
-                    begin={`${animationId7}.end`}
-                    fill='freeze'
-                />
-            </circle>
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useRef } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number, id: string }
+}
+
+export interface ComponentRef {
+    updateConfig: (config: ComponentProps) => void;
+}
+const Index = forwardRef((props: ComponentProps, ref: ForwardedRef<ComponentRef>) => {
+    const { style: defStyle, base: defBase } = props;
+    const [style, setStyle] = useState<ComponentStyle>({ ...defStyle });
+    const [width, setWidth] = useState<number>(defBase?.width || 300);
+    const [height, setHeight] = useState<number>(defBase?.height || 100);
+    const { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+    const {
+        animationId1,
+        animationId2,
+        animationId3,
+        animationId4,
+        animationId5,
+        animationId6,
+        animationId7
+    } = useRef({
+        animationId1: `d9ani1${defBase?.id}`,
+        animationId2: `d9ani2${defBase?.id}`,
+        animationId3: `d9ani3${defBase?.id}`,
+        animationId4: `d9ani4${defBase?.id}`,
+        animationId5: `d9ani5${defBase?.id}`,
+        animationId6: `d9ani6${defBase?.id}`,
+        animationId7: `d9ani7${defBase?.id}`
+    }).current
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    return <div className="decoration-9"  >
+        <svg width={width} height={height}>
+            <polyline
+                stroke={subColor}
+                strokeWidth='2'
+                points={`0, ${height / 2} ${width}, ${height / 2}`}
+            />
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                points={`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`}
+                strokeDasharray={`0, ${width * 0.2}`}
+                fill='freeze'
+            >
+                <animate
+                    id={animationId2}
+                    attributeName='stroke-dasharray'
+                    values={`0, ${width * 0.2};${width * 0.2}, 0;`}
+                    dur='3s'
+                    begin={`${animationId1}.end`}
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='stroke-dasharray'
+                    values={`${width * 0.2}, 0;0, ${width * 0.2}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </polyline>
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                points={`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 -
+                    3}, ${height / 2}`}
+                strokeDasharray={`0, ${width * 0.6}`}
+            >
+                <animate
+                    id={animationId4}
+                    attributeName='stroke-dasharray'
+                    values={`0, ${width * 0.6};${width * 0.6}, 0`}
+                    dur='3s'
+                    begin={`${animationId3}.end + 1s`}
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='stroke-dasharray'
+                    values={`${width * 0.6}, 0;0, ${width * 0.6}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </polyline>
+
+            <polyline
+                stroke={mainColor}
+                strokeWidth='2'
+                points={`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height /
+                    2}`}
+                strke-dasharray={`0, ${width * 0.2}`}
+            >
+                <animate
+                    id={animationId6}
+                    attributeName='stroke-dasharray'
+                    values={`0, ${width * 0.2};${width * 0.2}, 0`}
+                    dur='3s'
+                    begin={`${animationId5}.end + 1s`}
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='stroke-dasharray'
+                    values={`${width * 0.2}, 0;0, ${width * 0.3}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </polyline>
+
+            <circle cx='2' cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId1}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`0s;${animationId7}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+            </circle>
+
+            <circle cx={width * 0.2} cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId3}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`${animationId2}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='fill'
+                    values={`${subColor};${subColor}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </circle>
+
+            <circle cx={width * 0.8} cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId5}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`${animationId4}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='fill'
+                    values={`${subColor};${subColor}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </circle>
+
+            <circle cx={width - 2} cy={height / 2} r='2' fill={subColor}>
+                <animate
+                    id={animationId7}
+                    attributeName='fill'
+                    values={`${subColor};${mainColor}`}
+                    begin={`${animationId6}.end`}
+                    dur='0.3s'
+                    fill='freeze'
+                />
+                <animate
+                    attributeName='fill'
+                    values={`${subColor};${subColor}`}
+                    dur='0.01s'
+                    begin={`${animationId7}.end`}
+                    fill='freeze'
+                />
+            </circle>
+        </svg>
+    </div>;
+});
+
 export default Index;