feat: 增加基础组件加载中

.umirc.js

@@ -90,6 +90,7 @@ export default {
           'MqttView',
           'ExportExcel',
           'DatePickerCustom',
+          'LoadBox',
         ],
       },
       {

packages/base-components/LoadBox/README.md

+# `@wisdom-components/LoadBox`
+
+> TODO: description
+
+## Usage
+
+```
+const loadBox = require('@wisdom-components/loadbox');
+
+// TODO: DEMONSTRATE API
+```

packages/base-components/LoadBox/package.json

+{
+  "name": "@wisdom-components/loadbox",
+  "version": "1.0.0",
+  "description": "> TODO: description",
+  "author": "lijiwen <961370825@qq.com>",
+  "homepage": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "directories": {
+    "lib": "lib",
+    "test": "__tests__"
+  },
+  "files": [
+    "lib"
+  ],
+  "publishConfig": {
+    "registry": "https://g.civnet.cn:4873/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://g.civnet.cn:8443/ReactWeb5/wisdom-components.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  }
+}

packages/base-components/LoadBox/src/LoadBox.md

+---
+title: LoadBox - 加载中
+nav:
+  title: 基础组件
+  path: /components
+group:
+  path: /
+---
+
+## 何时使用
+
+- 在系统加载界面时。
+
+## 代码演示
+
+<code src="./demos/Base.tsx">
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| delay | 延迟显示加载效果的时间（防止闪烁） | number(毫秒) | - |
+| indicator | 加载指示符 | ReactNode | - |
+| size | 组件大小，可选值为 small default large | string | default |
+| spinning | 是否为加载中状态 | boolean | true |
+| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
+| wrapperClassName | 包装器的类属性 | string | - |
+| timeout | 超时时间 | number | 3000 |
+| timeoutTip | 超时时间提示 | string | 正在加载数据，请耐心等待 |

packages/base-components/LoadBox/src/demos/Base.tsx

+import React, { useState } from 'react';
+import { Button } from 'antd';
+import LoadBox from '../index';
+const Demo = (props) => {
+  const [spinning, setSpinning] = useState(true);
+  const startClick = () => {
+    setSpinning(true);
+  };
+  const endClick = () => {
+    setSpinning(false);
+  };
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100px',
+        display: 'flex',
+        alignContent: 'center',
+        justifyContent: 'center',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          height: '100px',
+          display: 'flex',
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <LoadBox spinning={spinning} />
+      </div>
+      <div style={{ marginTop: '20px' }}>
+        <Button onClick={startClick} style={{ marginRight: '20px' }}>
+          加载
+        </Button>
+        <Button onClick={endClick}>取消加载</Button>
+      </div>
+    </div>
+  );
+};
+
+export default Demo;

packages/base-components/LoadBox/src/index.js

+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Spin } from 'antd';
+let timer = null;
+const LoadBox = ({
+  delay,
+  indicator,
+  size,
+  tip,
+  wrapperClassName,
+  timeout,
+  timeoutTip,
+  spinning,
+}) => {
+  const [loadTip, setloadTip] = useState(tip);
+  useEffect(() => {
+    setloadTip(tip);
+    if (timer) clearTimeout(timer);
+    if (spinning)
+      timer = setTimeout(() => {
+        setloadTip(timeoutTip);
+      }, timeout);
+  }, [spinning]);
+  return (
+    <Spin
+      delay={delay}
+      spinning={spinning}
+      indicator={indicator}
+      size={size}
+      tip={loadTip}
+      wrapperClassName={wrapperClassName}
+    ></Spin>
+  );
+};
+LoadBox.defaultProps = {
+  spinning: true,
+  delay: 0,
+  indicator: '',
+  size: 'default',
+  tip: '',
+  wrapperClassName: '',
+  timeout: 3000,
+  timeoutTip: '正在加载数据，请耐心等待...',
+};
+
+LoadBox.propTypes = {
+  spinning: PropTypes.bool, // 是否为加载中状态
+  delay: PropTypes.number, // 延迟显示加载效果的时间（防止闪烁）
+  indicator: PropTypes.node, // 加载指示符
+  size: PropTypes.string, // 组件大小，可选值为 small default large
+  tip: PropTypes.string, // 当作为包裹元素时，可以自定义描述文案
+  wrapperClassName: PropTypes.string, // 包装器的类属性
+  timeout: PropTypes.number, // 超时时间
+  timeoutTip: PropTypes.string, // 超时时间提示
+};
+
+export default LoadBox;