aldehyde 0.2.480 → 0.2.481

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

@@ -1,54 +1,54 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
-import "./index.less";
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number }
-}
-
-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 { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-        },
-    }));
-
-
-    return <div className="decoration-4"  >
-        <div
-            className="decoration-4-container"
-            style={{ width: `${width}px`, height: `5px` }}
-        >
-            <svg width={width} height={5}>
-                <polyline
-                    stroke={mainColor}
-                    points={`0, 2.5 ${width}, 2.5`}
-                />
-                <polyline
-                    className='bold-line'
-                    stroke={subColor}
-                    strokeWidth='3'
-                    strokeDasharray='20, 80'
-                    strokeDashoffset='-30'
-                    points={`0, 2.5 ${width}, 2.5`}
-                />
-            </svg>
-        </div>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState } from "react";
+import "./index.less";
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+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 { mainColor = "#83BFF6", subColor = "#00CED1" } = style || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+        },
+    }));
+
+
+    return <div className="decoration-4"  >
+        <div
+            className="decoration-4-container"
+            style={{ width: `${width}px`, height: `5px` }}
+        >
+            <svg width={width} height={5}>
+                <polyline
+                    stroke={mainColor}
+                    points={`0, 2.5 ${width}, 2.5`}
+                />
+                <polyline
+                    className='bold-line'
+                    stroke={subColor}
+                    strokeWidth='3'
+                    strokeDasharray='20, 80'
+                    strokeDashoffset='-30'
+                    points={`0, 2.5 ${width}, 2.5`}
+                />
+            </svg>
+        </div>
+    </div>;
+});
+
 export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration5/index.less

@@ -1,4 +1,4 @@
-.decoration-5 {
-    width: 100%;
-    height: 100%;
+.decoration-5 {
+    width: 100%;
+    height: 100%;
 }

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

@@ -1,117 +1,117 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
-import "./index.less";
-
-const getTwoPointDistance = (pointOne, pointTwo) => {
-    const minusX = Math.abs(pointOne[0] - pointTwo[0]);
-    const minusY = Math.abs(pointOne[1] - pointTwo[1]);
-    return Math.sqrt(minusX * minusX + minusY * minusY);
-}
-
-const getPolylineLength = (points) => {
-    const lineSegments = new Array(points.length - 1).fill(0).map((_, i) => [points[i], points[i + 1]]);
-    const lengths = lineSegments.map((item) => getTwoPointDistance(item[0], item[1]));
-    return lengths.reduce((all, num) => all + num, 0);
-}
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number }
-}
-
-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 || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-            setHeight(newConfig.base.height);
-        },
-    }));
-
-    const calcSVGData = () => {
-        let line1Points = [
-            [0, height * 0.2],
-            [width * 0.18, height * 0.2],
-            [width * 0.2, height * 0.4],
-            [width * 0.25, height * 0.4],
-            [width * 0.27, height * 0.6],
-            [width * 0.72, height * 0.6],
-            [width * 0.75, height * 0.4],
-            [width * 0.8, height * 0.4],
-            [width * 0.82, height * 0.2],
-            [width, height * 0.2]
-        ];
-        let line2Points = [[width * 0.3, height * 0.8], [width * 0.7, height * 0.8]];
-        const line1Length = getPolylineLength(line1Points);
-        const line2Length = getPolylineLength(line2Points);
-        return {
-            line1Points: line1Points.map(point => point.join(',')).join(' '),
-            line2Points: line2Points.map(point => point.join(',')).join(' '),
-            line1Length, line2Length
-        };
-    }
-
-    const { line1Points, line2Points, line1Length, line2Length } = useMemo(
-        calcSVGData,
-        [width, height]
-    );
-
-
-    return <div className="decoration-5"  >
-        <svg width={width} height={height}>
-            <polyline
-                fill='transparent'
-                stroke={mainColor}
-                strokeWidth='3'
-                points={line1Points}
-            >
-                <animate
-                    attributeName='stroke-dasharray'
-                    attributeType='XML'
-                    from={`0, ${line1Length / 2}, 0, ${line1Length / 2}`}
-                    to={`0, 0, ${line1Length}, 0`}
-                    dur="3s"
-                    begin='0s'
-                    calcMode='spline'
-                    keyTimes='0;1'
-                    keySplines='0.4,1,0.49,0.98'
-                    repeatCount='indefinite'
-                />
-            </polyline>
-            <polyline
-                fill='transparent'
-                stroke={subColor}
-                strokeWidth='2'
-                points={line2Points}
-            >
-                <animate
-                    attributeName='stroke-dasharray'
-                    attributeType='XML'
-                    from={`0, ${line2Length / 2}, 0, ${line2Length / 2}`}
-                    to={`0, 0, ${line2Length}, 0`}
-                    dur="3s"
-                    begin='0s'
-                    calcMode='spline'
-                    keyTimes='0;1'
-                    keySplines='.4,1,.49,.98'
-                    repeatCount='indefinite'
-                />
-            </polyline>
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import "./index.less";
+
+const getTwoPointDistance = (pointOne, pointTwo) => {
+    const minusX = Math.abs(pointOne[0] - pointTwo[0]);
+    const minusY = Math.abs(pointOne[1] - pointTwo[1]);
+    return Math.sqrt(minusX * minusX + minusY * minusY);
+}
+
+const getPolylineLength = (points) => {
+    const lineSegments = new Array(points.length - 1).fill(0).map((_, i) => [points[i], points[i + 1]]);
+    const lengths = lineSegments.map((item) => getTwoPointDistance(item[0], item[1]));
+    return lengths.reduce((all, num) => all + num, 0);
+}
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+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 || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    const calcSVGData = () => {
+        let line1Points = [
+            [0, height * 0.2],
+            [width * 0.18, height * 0.2],
+            [width * 0.2, height * 0.4],
+            [width * 0.25, height * 0.4],
+            [width * 0.27, height * 0.6],
+            [width * 0.72, height * 0.6],
+            [width * 0.75, height * 0.4],
+            [width * 0.8, height * 0.4],
+            [width * 0.82, height * 0.2],
+            [width, height * 0.2]
+        ];
+        let line2Points = [[width * 0.3, height * 0.8], [width * 0.7, height * 0.8]];
+        const line1Length = getPolylineLength(line1Points);
+        const line2Length = getPolylineLength(line2Points);
+        return {
+            line1Points: line1Points.map(point => point.join(',')).join(' '),
+            line2Points: line2Points.map(point => point.join(',')).join(' '),
+            line1Length, line2Length
+        };
+    }
+
+    const { line1Points, line2Points, line1Length, line2Length } = useMemo(
+        calcSVGData,
+        [width, height]
+    );
+
+
+    return <div className="decoration-5"  >
+        <svg width={width} height={height}>
+            <polyline
+                fill='transparent'
+                stroke={mainColor}
+                strokeWidth='3'
+                points={line1Points}
+            >
+                <animate
+                    attributeName='stroke-dasharray'
+                    attributeType='XML'
+                    from={`0, ${line1Length / 2}, 0, ${line1Length / 2}`}
+                    to={`0, 0, ${line1Length}, 0`}
+                    dur="3s"
+                    begin='0s'
+                    calcMode='spline'
+                    keyTimes='0;1'
+                    keySplines='0.4,1,0.49,0.98'
+                    repeatCount='indefinite'
+                />
+            </polyline>
+            <polyline
+                fill='transparent'
+                stroke={subColor}
+                strokeWidth='2'
+                points={line2Points}
+            >
+                <animate
+                    attributeName='stroke-dasharray'
+                    attributeType='XML'
+                    from={`0, ${line2Length / 2}, 0, ${line2Length / 2}`}
+                    to={`0, 0, ${line2Length}, 0`}
+                    dur="3s"
+                    begin='0s'
+                    calcMode='spline'
+                    keyTimes='0;1'
+                    keySplines='.4,1,.49,.98'
+                    repeatCount='indefinite'
+                />
+            </polyline>
+        </svg>
+    </div>;
+});
+
 export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration6/index.less

@@ -1,8 +1,8 @@
-.decoration-6 {
-    width: 100%;
-    height: 100%;
-
-    .decoration-6-container {
-        transform-origin: left top;
-    }
+.decoration-6 {
+    width: 100%;
+    height: 100%;
+
+    .decoration-6-container {
+        transform-origin: left top;
+    }
 }

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

@@ -1,122 +1,122 @@
-import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
-import "./index.less";
-
-const svgWH = [300, 35];
-const rowNum = 1;
-const rowPoints = 40;
-const rectWidth = 7;
-const halfRectWidth = rectWidth / 2;
-
-const getPoints = () => {
-    const [w, h] = svgWH;
-    const horizontalGap = w / (rowPoints + 1);
-    const verticalGap = h / (rowNum + 1);
-    let points = new Array(rowNum)
-        .fill(0)
-        .map((_, i) =>
-            new Array(rowPoints)
-                .fill(0)
-                .map((_, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
-        );
-    return points.reduce((all, item) => [...all, ...item], []);
-}
-
-const getData = () => {
-    const h = svgWH[1];
-    const heights = new Array(rowNum * rowPoints)
-        .fill(0)
-        .map(() =>
-            Math.random() > 0.8
-                ? Math.random() * (h - 0.7 * h + 1) + 0.7 * h
-                : Math.random() * (0.5 * h - 0.2 * h + 1) + 0.2 * h
-        );
-    const minHeights = new Array(rowNum * rowPoints)
-        .fill(0)
-        .map((_, i) => heights[i] * Math.random());
-    const randoms = new Array(rowNum * rowPoints)
-        .fill(0)
-        .map(() => Math.random() + 1.5);
-    return { heights, minHeights, randoms };
-}
-
-interface ComponentStyle {
-    mainColor?: string;
-    subColor?: string;
-}
-
-export interface ComponentProps {
-    style?: ComponentStyle;
-    base?: { width?: number, height?: number }
-}
-
-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 || {};
-
-    useImperativeHandle(ref, () => ({
-        updateConfig: (newConfig) => {
-            setStyle({ ...newConfig.style });
-            setWidth(newConfig.base.width);
-            setHeight(newConfig.base.height);
-        },
-    }));
-
-    const calcSVGData = () => ({
-        ...getData(),
-        points: getPoints(),
-        svgScale: [width / svgWH[0], height / svgWH[1]]
-    })
-
-    const { points, heights, minHeights, randoms, svgScale } = useMemo(calcSVGData, [width, height]);
-
-
-    return <div className="decoration-6"  >
-        <svg
-            className="decoration-6-container"
-            width={`${svgWH[0]}px`}
-            height={`${svgWH[1]}px`}
-            style={{ transform: `scale(${svgScale[0]},${svgScale[1]})` }}
-        >
-            {points.map((point, i) => (
-                <rect
-                    key={i}
-                    fill={Math.random() > 0.5 ? mainColor : subColor}
-                    x={point[0] - halfRectWidth}
-                    y={point[1] - heights[i] / 2}
-                    width={rectWidth}
-                    height={heights[i]}
-                >
-                    <animate
-                        attributeName='y'
-                        values={`${point[1] - minHeights[i] / 2};${point[1] -
-                            heights[i] / 2};${point[1] - minHeights[i] / 2}`}
-                        dur={`${randoms[i]}s`}
-                        keyTimes='0;0.5;1'
-                        calcMode='spline'
-                        keySplines='0.42,0,0.58,1;0.42,0,0.58,1'
-                        begin='0s'
-                        repeatCount='indefinite'
-                    />
-                    <animate
-                        attributeName='height'
-                        values={`${minHeights[i]};${heights[i]};${minHeights[i]}`}
-                        dur={`${randoms[i]}s`}
-                        keyTimes='0;0.5;1'
-                        calcMode='spline'
-                        keySplines='0.42,0,0.58,1;0.42,0,0.58,1'
-                        begin='0s'
-                        repeatCount='indefinite'
-                    />
-                </rect>
-            ))}
-        </svg>
-    </div>;
-});
-
+import React, { ForwardedRef, forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import "./index.less";
+
+const svgWH = [300, 35];
+const rowNum = 1;
+const rowPoints = 40;
+const rectWidth = 7;
+const halfRectWidth = rectWidth / 2;
+
+const getPoints = () => {
+    const [w, h] = svgWH;
+    const horizontalGap = w / (rowPoints + 1);
+    const verticalGap = h / (rowNum + 1);
+    let points = new Array(rowNum)
+        .fill(0)
+        .map((_, i) =>
+            new Array(rowPoints)
+                .fill(0)
+                .map((_, j) => [horizontalGap * (j + 1), verticalGap * (i + 1)])
+        );
+    return points.reduce((all, item) => [...all, ...item], []);
+}
+
+const getData = () => {
+    const h = svgWH[1];
+    const heights = new Array(rowNum * rowPoints)
+        .fill(0)
+        .map(() =>
+            Math.random() > 0.8
+                ? Math.random() * (h - 0.7 * h + 1) + 0.7 * h
+                : Math.random() * (0.5 * h - 0.2 * h + 1) + 0.2 * h
+        );
+    const minHeights = new Array(rowNum * rowPoints)
+        .fill(0)
+        .map((_, i) => heights[i] * Math.random());
+    const randoms = new Array(rowNum * rowPoints)
+        .fill(0)
+        .map(() => Math.random() + 1.5);
+    return { heights, minHeights, randoms };
+}
+
+interface ComponentStyle {
+    mainColor?: string;
+    subColor?: string;
+}
+
+export interface ComponentProps {
+    style?: ComponentStyle;
+    base?: { width?: number, height?: number }
+}
+
+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 || {};
+
+    useImperativeHandle(ref, () => ({
+        updateConfig: (newConfig) => {
+            setStyle({ ...newConfig.style });
+            setWidth(newConfig.base.width);
+            setHeight(newConfig.base.height);
+        },
+    }));
+
+    const calcSVGData = () => ({
+        ...getData(),
+        points: getPoints(),
+        svgScale: [width / svgWH[0], height / svgWH[1]]
+    })
+
+    const { points, heights, minHeights, randoms, svgScale } = useMemo(calcSVGData, [width, height]);
+
+
+    return <div className="decoration-6"  >
+        <svg
+            className="decoration-6-container"
+            width={`${svgWH[0]}px`}
+            height={`${svgWH[1]}px`}
+            style={{ transform: `scale(${svgScale[0]},${svgScale[1]})` }}
+        >
+            {points.map((point, i) => (
+                <rect
+                    key={i}
+                    fill={Math.random() > 0.5 ? mainColor : subColor}
+                    x={point[0] - halfRectWidth}
+                    y={point[1] - heights[i] / 2}
+                    width={rectWidth}
+                    height={heights[i]}
+                >
+                    <animate
+                        attributeName='y'
+                        values={`${point[1] - minHeights[i] / 2};${point[1] -
+                            heights[i] / 2};${point[1] - minHeights[i] / 2}`}
+                        dur={`${randoms[i]}s`}
+                        keyTimes='0;0.5;1'
+                        calcMode='spline'
+                        keySplines='0.42,0,0.58,1;0.42,0,0.58,1'
+                        begin='0s'
+                        repeatCount='indefinite'
+                    />
+                    <animate
+                        attributeName='height'
+                        values={`${minHeights[i]};${heights[i]};${minHeights[i]}`}
+                        dur={`${randoms[i]}s`}
+                        keyTimes='0;0.5;1'
+                        calcMode='spline'
+                        keySplines='0.42,0,0.58,1;0.42,0,0.58,1'
+                        begin='0s'
+                        repeatCount='indefinite'
+                    />
+                </rect>
+            ))}
+        </svg>
+    </div>;
+});
+
 export default Index;

package/src/aldehyde/lowcode-components/decoration/decoration7/index.less

@@ -1,5 +1,5 @@
-.decoration-7 {
-    display: flex;
-    width: 100%;
-    height: 100%;
+.decoration-7 {
+    display: flex;
+    width: 100%;
+    height: 100%;
 }