@arco-design/mobile-react 2.31.6 → 2.32.0

package/esnext/loading/index.js

@@ -0,0 +1,123 @@
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { cls, isOneOf } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import { getStyleWithVendor, useGenSvgKey } from '../_helpers';
+/**
+ * 加载中组件，分为四种类型，`circle`为环形，`arc`为弧线，`spin`为旋转，`dot`为圆点。所有类型均可定制颜色，环形和弧线类型可定制线圈半径及粗细，旋转和圆点类型可定制内部元素透明度。
+ * @en Loading component, divided into four types, `circle` is a ring, `arc` is an arc `spin` is a rotation, and `dot` is a dot. All types can be customized in color, ring and arc types can be customized with coil radius and thickness, and rotation and dot types can be customized with internal element transparency.
+ * @type 反馈
+ * @type_en Feedback
+ * @name 加载
+ * @name_en Loading
+ */
+const Loading = forwardRef((props, ref) => {
+    const { style, className = '', color, type = 'dot', list, duration = 1000, svgKey: userSetSvgKey = '', radius = 9, stroke = 2, filleted = true, } = props;
+    const [statusList, setStatusList] = useState([]);
+    const timerId = useRef(-1);
+    const halfCircle = Math.PI * radius;
+    const circlePos = 0.5 * stroke + radius;
+    const circleSize = radius * 2 + stroke;
+    const domRef = useRef(null);
+    const { svgKey } = useGenSvgKey(userSetSvgKey);
+    useImperativeHandle(ref, () => ({
+        dom: domRef.current,
+    }));
+    useEffect(() => {
+        if (type === 'dot' && statusList.length) {
+            const interval = duration / statusList.length;
+            timerId.current = setInterval((() => {
+                const newList = [...statusList];
+                const item = newList.pop();
+                item && newList.unshift(item);
+                setStatusList(newList);
+            }), interval);
+        }
+        return () => {
+            if (timerId.current >= 0) {
+                clearInterval(timerId.current);
+            }
+        };
+    }, [type, statusList, duration]);
+    useEffect(() => {
+        let newList;
+        if (list && list.length) {
+            newList = list;
+        }
+        else {
+            switch (type) {
+                case 'spin':
+                    newList = [1, 0.1, 0.2286, 0.3572, 0.4858, 0.6144, 0.743, 0.8716];
+                    break;
+                case 'dot':
+                    newList = [0.2, 0.6, 1];
+                    break;
+                default:
+                    newList = [];
+                    break;
+            }
+        }
+        setStatusList(newList);
+    }, [list, type]);
+    function renderSpin() {
+        const len = statusList.length;
+        return statusList.map((opacity, index) => (React.createElement("span", { key: index, className: "spin-cell", style: getStyleWithVendor({
+                opacity,
+                transform: `rotate(${index / len}turn)`,
+                width: stroke,
+            }) },
+            React.createElement("span", { className: "spin-cell-inner bg-color-with-config", style: {
+                    backgroundColor: color,
+                    ...(filleted ? { borderRadius: stroke } : {}),
+                } }))));
+    }
+    function renderDot() {
+        return statusList.map((opacity, index) => (React.createElement("span", { key: index, className: cls('dot-cell', 'bg-color-with-config', { filleted }), style: { opacity, backgroundColor: color } })));
+    }
+    function renderCircle() {
+        return (React.createElement("svg", { viewBox: `0 0 ${circleSize} ${circleSize}` },
+            React.createElement("defs", null,
+                React.createElement("linearGradient", { id: `grad1-${svgKey}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                    React.createElement("stop", { offset: "0%", className: "loading-circle-middle stop-color-with-config", style: { stopColor: color } }),
+                    React.createElement("stop", { offset: "100%", className: "loading-circle-start stop-color-with-config", style: { stopColor: color } })),
+                React.createElement("linearGradient", { id: `grad2-${svgKey}`, x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
+                    React.createElement("stop", { offset: "0%", className: "loading-circle-middle stop-color-with-config", style: { stopColor: color } }),
+                    React.createElement("stop", { offset: "100%", className: "loading-circle-end stop-color-with-config", style: { stopColor: color } }))),
+            React.createElement("circle", { cx: circlePos, cy: circlePos, r: radius, stroke: `url(#grad1-${svgKey})`, strokeWidth: stroke, strokeDasharray: halfCircle, strokeDashoffset: halfCircle, fill: "none" }),
+            React.createElement("circle", { cx: circlePos, cy: circlePos, r: radius, stroke: `url(#grad2-${svgKey})`, strokeWidth: stroke, strokeDasharray: halfCircle, fill: "none" }),
+            filleted ? (React.createElement("circle", { cx: circlePos * 2 - stroke / 2, cy: circlePos, r: stroke / 2, className: "loading-circle-filleted fill-color-with-config", style: { fill: color } })) : null));
+    }
+    function renderArc() {
+        return (React.createElement("svg", { viewBox: `0 0 ${circleSize} ${circleSize}` },
+            React.createElement("circle", { className: "arc-bg", cx: circlePos, cy: circlePos, r: radius, strokeWidth: stroke, fill: "none" }),
+            React.createElement("circle", Object.assign({ className: "arc-line stroke-color-with-config", cx: circlePos, cy: circlePos, r: radius, style: { stroke: color }, strokeWidth: stroke, strokeDashoffset: halfCircle * 0.5, strokeDasharray: `${halfCircle * 0.5} ${halfCircle * 1.5}`, fill: "none" }, (filleted ? { strokeLinecap: 'round' } : {})))));
+    }
+    function renderLoadingByType() {
+        switch (type) {
+            case 'spin':
+                return renderSpin();
+            case 'dot':
+                return renderDot();
+            case 'circle':
+                return renderCircle();
+            case 'arc':
+                return renderArc();
+            default:
+                return null;
+        }
+    }
+    function getLoadingStyle() {
+        const circleStyle = isOneOf(type, ['circle', 'arc'])
+            ? {
+                width: circleSize,
+                height: circleSize,
+            }
+            : {};
+        return getStyleWithVendor({
+            animationDuration: `${duration}ms`,
+            ...circleStyle,
+            ...(style || {}),
+        });
+    }
+    return (React.createElement(ContextLayout, null, ({ prefixCls }) => (React.createElement("div", { className: cls(`${prefixCls}-loading all-border-box`, type, className), style: getLoadingStyle(), ref: domRef }, renderLoadingByType()))));
+});
+export default Loading;