feat: 添加 FormModal (#26)

* feat: 优化 * fix: test * style: 修改样式 * feat: 添加 FormModal * test: 添加单元测试 * fix: text * chore: test * chore: 1.0.6 * test: test * feat: test * chore: test Co-authored-by: crazyair <[email protected]>
crazyair · Jun 10, 2020 · 12a7816 · 12a7816
1 parent ab960b3
commit 12a7816
Show file tree

Hide file tree

Showing 30 changed files with 5,539 additions and 765 deletions.
diff --git a/.github/workflows/codevoc.yml b/.github/workflows/codevoc.yml
@@ -1,8 +1,8 @@
-name: CI
+name: codecov
 
 on:
  push:
-  branches-ignore:
+  branches:
     - master
 
 jobs:
@@ -23,5 +23,5 @@ jobs:
           flags: unittests # optional
           name: codecov-umbrella # optional
           # file: ./codecov.yml # optional
-          # fail_ci_if_error: true # optional (default = false)
           token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: true # optional (default = false)
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,21 @@
+name: test
+
+on:
+ push:
+  branches-ignore:
+    - master
+
+jobs:
+
+  test:
+    name: test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 10
+          registry-url: https://registry.npmjs.org/
+      - run: yarn
+      - run: yarn test
+
diff --git a/docs/apis/demo/modal_base.tsx b/docs/apis/demo/modal_base.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable no-console */
+import React, { useState } from 'react';
+import { YForm } from 'yforms';
+import { Button } from 'antd';
+
+const Demo = () => {
+  const [visible, setVisible] = useState(false);
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+
+  return (
+    <div>
+      <Button type="link" onClick={() => setVisible(true)}>
+        打开弹窗
+      </Button>
+      <YForm.FormModal
+        visible={visible}
+        destroyOnClose
+        title="表单弹窗"
+        formProps={{ onFinish, onCancel: () => setVisible(false) }}
+      >
+        {[{ type: 'input', name: 'age', label: '姓名' }]}
+      </YForm.FormModal>
+    </div>
+  );
+};
+export default Demo;
diff --git a/docs/apis/formModal.md b/docs/apis/formModal.md
@@ -0,0 +1,22 @@
+---
+title: FormModal
+nav:
+  title: 文档
+---
+
+# FormModal
+
+弹窗的表单
+
+# 示例
+
+## 基础使用
+
+<code src="./demo/modal_base.tsx" />
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| formFooter | 用来渲染到 `footer` 下面的按钮 | - | `[{ type: 'submit', componentProps: { reverseBtns: true } }]` |
+| formProps | `YForm` 类型 | - | - |
diff --git a/docs/apis/hooks.md b/docs/apis/hooks.md
@@ -95,7 +95,7 @@ export default () => {
   const {
     submit,
     params: { typeName },
-  } = YForm.useSubmit();
+  } = YForm.useSubmit({ params: { type: 'view', id: '1' } });
 
   const onFinish = (values) => {
     console.log('Success:', values);

diff --git a/docs/examples/demo/demo1.tsx b/docs/examples/demo/demo1.tsx
@@ -36,8 +36,7 @@ const Demo = () => {
   const [loading, setLoading] = useState(true);
   const [form] = YForm.useForm();
 
-  const { submit, disabled } = YForm.useSubmit();
-
+  const { submit, disabled } = YForm.useSubmit({ params: { type: 'view', id: '1' } });
   useEffect(() => {
     setTimeout(() => {
       setData(initialValues);
@@ -67,7 +66,6 @@ const Demo = () => {
       onFinishFailed={onFinishFailed}
       onSave={onSave}
       scenes={{ view: disabled }}
-      params={{ type: 'view' }}
     >
       {[
         // {

diff --git a/docs/examples/demo/demo3.tsx b/docs/examples/demo/demo3.tsx
@@ -46,7 +46,7 @@ const Demo: React.FC<RouteComponentProps> = () => {
             {[{ type: 'input', name: 'age', label: '姓名' }]}
           </YForm.Items>
           <YForm.Items className="ant-modal-footer">
-            {[{ type: 'submit', className: 'mb0', componentProps: { reverseBtns: true } }]}
+            {[{ type: 'submit', componentProps: { reverseBtns: true } }]}
           </YForm.Items>
         </YForm>
       </Modal>