feat: ✨ Query and Mutation

Signed-off-by: xsahxl <[email protected]>

.dumirc.ts

@@ -3,6 +3,6 @@ import { defineConfig } from 'dumi';
 export default defineConfig({
   outputPath: 'docs-dist',
   themeConfig: {
-    name: '@xsahxl/ui',
+    name: 'xsahxl',
   },
 });

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

docs/index.md

@@ -3,20 +3,6 @@ hero:
   title: library
   description: A react library developed with dumi
   actions:
-    - text: Hello
-      link: /
-    - text: World
-      link: /
-features:
-  - title: Hello
-    emoji: 💎
-    description: Put hello description here
-  - title: World
-    emoji: 🌈
-    description: Put world description here
-  - title: '!'
-    emoji: 🚀
-    description: Put ! description here
+    - text: 组件
+      link: /components/query
 ---
-
-@xsahxl/ui

package.json

@@ -43,9 +43,14 @@
       "prettier --parser=typescript --write"
     ]
   },
+  "dependencies": {
+    "@alicloud/console-components": "^1.6.2",
+    "styled-components": "^5.3.9"
+  },
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@types/lodash": "^4.14.194",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/lint": "^4.0.0",
@@ -54,6 +59,8 @@
     "father": "^4.1.0",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-packagejson": "^2.2.18",
@@ -62,8 +69,10 @@
     "stylelint": "^14.9.1"
   },
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "@alicloud/console-components": ">=1.0.0",
+    "lodash": ">=4.17.0",
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   },
   "publishConfig": {
     "access": "public"

src/Mutation/index.md

@@ -0,0 +1,66 @@
+---
+title: Mutation
+order: 1
+---
+
+## 何时使用
+
+提交数据时，此组件会抛出 data，loading, error 等信息
+
+## 基本使用
+
+```tsx
+import { Button } from '@alicloud/console-components';
+import '@alicloud/console-components/dist/wind.css';
+import { Mutation, sleep } from '@xsahxl/ui';
+import moment from 'moment';
+
+const Demo = () => {
+  const submit = async () => {
+    await sleep(1000);
+    return { time: moment().format('YYYY-MM-DD HH:mm:ss') };
+  };
+  return (
+    <Mutation
+      onSubmit={submit}
+      refetchQuery={async () => console.log('refetchQuery')}
+    >
+      {(create, { data, loading }) => {
+        return (
+          <>
+            <Button
+              loading={loading}
+              type="primary"
+              onClick={create}
+              style={{ marginLeft: 8 }}
+            >
+              创建
+            </Button>
+            <pre>{JSON.stringify(data)}</pre>
+          </>
+        );
+      }}
+    </Mutation>
+  );
+};
+
+export default Demo;
+```
+
+## API
+
+| 属性         | 说明                          | 类型                                                                            | 默认值 |
+| ------------ | ----------------------------- | ------------------------------------------------------------------------------- | ------ |
+| children     | 子节点                        | (submit: () => Promise<any\>, options: [RenderProps](#renderprops) => ReactNode | -      |
+| onSubmit     | 请求数据的函数                | () => Promise<any\>                                                             | -      |
+| onCompleted  | 请求数据完成触发事件          | () => Promise<any\>                                                             | -      |
+| onError      | 请求数据错误触发事件          | () => Promise<any\>                                                             | -      |
+| refetchQuery | onSubmit 完成后发起的数据请求 | () => Promise<any\>                                                             | -      |
+
+### RenderProps
+
+| 属性    | 说明           | 类型    | 默认值 |
+| ------- | -------------- | ------- | ------ |
+| data    | 请求数据的结果 | any     | -      |
+| loading | 请求数据的状态 | boolean | false  |
+| error   | 请求数据的错误 | Error   | -      |

src/Mutation/index.tsx

@@ -0,0 +1,57 @@
+import React, { FC, useState, Fragment, ReactNode } from 'react';
+import { isFunction } from 'lodash';
+
+type RenderProps = {
+  data: any;
+  loading: boolean;
+  error?: Error;
+}
+
+type Props = {
+  onSubmit: () => Promise<any>;
+  children: (submit: () => Promise<any>, options: RenderProps) => ReactNode;
+  onCompleted?: () => Promise<any>;
+  refetchQuery?: () => Promise<any>;
+  onError?: (err: Error) => Promise<any>;
+}
+
+const Mutation: FC<Props> = (props) => {
+  const {
+    onSubmit: onSubmitFromProps,
+    children,
+    onCompleted,
+    onError,
+    refetchQuery,
+  } = props;
+  const [result, setResult] = useState();
+  const [error, setError] = useState<Error>();
+  const [loading, setLoading] = useState(false);
+  const onSubmit = async () => {
+    try {
+      setLoading(true);
+      const data = await onSubmitFromProps();
+      setLoading(false);
+      setResult(data);
+      isFunction(onCompleted) && await onCompleted();
+      isFunction(refetchQuery) && await refetchQuery();
+    } catch (error) {
+      const err = error as Error;
+      isFunction(onCompleted) && await onCompleted();
+      isFunction(onError) && await onError(err);
+      setError(err);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Fragment>
+      {children(onSubmit, {
+        data: result,
+        loading,
+        error,
+      })}
+    </Fragment>
+  );
+}
+
+export default Mutation;

src/Query/index.md

@@ -0,0 +1,93 @@
+---
+title: Query
+order: 0
+nav:
+  title: 组件
+  order: 0
+---
+
+:::warning
+refreshIndex 属性的初始值务必设置为 0，非 0 的 case 下会引起 fetchData 函数请求两次
+:::
+
+## 何时使用
+
+请求数据时候，此组件内置了刷新，轮询等功能，抛出 data，loading, error 等信息
+
+## 基本使用
+
+```tsx
+import { Button, Select, Switch } from '@alicloud/console-components';
+import '@alicloud/console-components/dist/wind.css';
+import { Query, sleep } from '@xsahxl/ui';
+import { useState } from 'react';
+
+const Demo = () => {
+  const fetchData = async () => {
+    console.log('触发了fetchData方法');
+    console.time('time');
+    await sleep(3000);
+    console.timeEnd('time');
+    return ['a', 'b'];
+  };
+  const [refreshIndex, setRefreshIndex] = useState(0);
+  const [loop, setLoop] = useState({ enable: false, time: 3000 });
+  const handlePolling = (value) => {
+    setLoop({ ...loop, enable: value });
+  };
+
+  return (
+    <Query fetchData={fetchData} refreshIndex={refreshIndex} loop={loop}>
+      {({ data, loading }) => {
+        return (
+          <>
+            <div style={{ marginBottom: 16 }}>
+              <span>轮询功能:</span>
+              <Switch style={{ marginLeft: 8 }} onChange={handlePolling} />
+            </div>
+            <Select dataSource={data} />
+            <Button
+              loading={loading}
+              type="primary"
+              text
+              onClick={() => setRefreshIndex(+new Date())}
+              style={{ marginLeft: 8 }}
+            >
+              刷新
+            </Button>
+          </>
+        );
+      }}
+    </Query>
+  );
+};
+
+export default Demo;
+```
+
+## API
+
+| 属性         | 说明                 | 类型                                                 | 默认值                         |
+| ------------ | -------------------- | ---------------------------------------------------- | ------------------------------ |
+| children     | 子节点               | (options: [RenderProps](#renderprops) ) => ReactNode | -                              |
+| fetchData    | 请求数据的函数       | () => Promise<any\>                                  | -                              |
+| refreshIndex | 刷新数据             | number                                               | -                              |
+| autoFetch    | 是否自动获取数据源   | boolean                                              | true                           |
+| loop         | 接口是否轮询         | Loop                                                 | { enable: false, time: 10000 } |
+| onCompleted  | 请求数据完成触发事件 | () => Promise<any\>                                  | -                              |
+| onError      | 请求数据错误触发事件 | () => Promise<any\>                                  | -                              |
+
+### Loop
+
+| 属性   | 说明         | 类型    | 默认值 |
+| ------ | ------------ | ------- | ------ |
+| enable | 是否开启轮询 | boolean | false  |
+| time   | 轮询间隔时间 | number  | 10000  |
+
+### RenderProps
+
+| 属性    | 说明           | 类型    | 默认值 |
+| ------- | -------------- | ------- | ------ |
+| data    | 请求数据的结果 | any     | -      |
+| loading | 请求数据的状态 | boolean | false  |
+| error   | 请求数据的错误 | Error   | -      |