diff --git a/.eslintrc.js b/.eslintrc.js index 9e9331c..a5817d3 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -41,5 +41,6 @@ module.exports = { 'jsx-a11y/click-events-have-key-events': 0, 'jsx-a11y/anchor-is-valid': 0, 'jsx-a11y/no-static-element-interactions': 0, + 'arrow-parens': 0, }, }; diff --git a/.github/workflows/codevoc.yml b/.github/workflows/codevoc.yml index a9350e0..31e3b41 100644 --- a/.github/workflows/codevoc.yml +++ b/.github/workflows/codevoc.yml @@ -14,7 +14,6 @@ jobs: node-version: 10 registry-url: https://registry.npmjs.org/ - run: yarn - - run: yarn bootstrap - run: yarn test - uses: codecov/codecov-action@v1 with: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index f85b97e..0facaae 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -4,7 +4,7 @@ on: tags: - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10 # branches: - # - master + # - master name: Create Release @@ -41,7 +41,6 @@ jobs: node-version: 10 registry-url: https://registry.npmjs.org/ - run: yarn - - run: yarn bootstrap - run: yarn pub from-package --force-publish --yes env: NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}} diff --git a/README.md b/README.md index 9985d9b..f28b69b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,13 @@ -[![codecov](https://codecov.io/gh/crazyair/father-doc-yform/branch/master/graph/badge.svg)](https://codecov.io/gh/crazyair/father-doc-yform) +[![codecov](https://codecov.io/gh/crazyair/yforms/branch/master/graph/badge.svg)](https://codecov.io/gh/crazyair/yforms) ## Usage & Guide -To check out live examples and docs, visit [yform now](https://father-doc-yform.now.sh/). +To check out live examples and docs, visit [yforms now](https://yforms.now.sh/). ## Development ```bash $ npm install -$ npm run bootstrap $ npm run dev ``` diff --git a/config/config.js b/config/config.js index 7402925..48f2fb7 100644 --- a/config/config.js +++ b/config/config.js @@ -1,6 +1,6 @@ export default { mode: 'site', - title: 'yform', + title: 'yforms', favicon: '/favicon.ico', logo: '/logo.png', menus: { diff --git a/docs/apis/hooks.md b/docs/apis/hooks.md index 25e768e..7393b5a 100644 --- a/docs/apis/hooks.md +++ b/docs/apis/hooks.md @@ -6,6 +6,24 @@ nav: # Hooks +## useForm + +- 获取表单实例 + +### 用例 + +```jsx | pure +const [form] = YForm.useForm(); +// 获取表单格式化后的值 +form.getFormatFieldsValue(); +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +| -------------------- | -------------------- | ---- | ------ | +| getFormatFieldsValue | 获取表单格式化后的值 | - | - | + ## useFormatFieldsValue - 表单提交前处理数据 @@ -15,7 +33,7 @@ nav: ```tsx import React from 'react'; import { Input } from 'antd'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; @@ -69,7 +87,7 @@ export default () => { ```tsx import React from 'react'; import { Input } from 'antd'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/apis/index.md b/docs/apis/index.md index 3319ec5..3ddf719 100644 --- a/docs/apis/index.md +++ b/docs/apis/index.md @@ -82,10 +82,10 @@ nav: - 自定义类型推荐添加前缀或后缀，方便与默认区分。 ```tsx | pure -import { YForm } from 'father-doc-yform'; -import { YFormItemsType } from 'father-doc-yform/lib/YForm/ItemsType'; +import { YForm } from 'yforms'; +import { YFormItemsType } from 'yforms/lib/YForm/ItemsType'; -declare module 'father-doc-yform/lib/YForm/ItemsType' { +declare module 'yforms/lib/YForm/ItemsType' { export interface YFormItemsTypeDefine { my_demo: { componentProps?: { str?: string } }; } diff --git a/docs/changelog.md b/docs/changelog.md index b57e929..2827bf1 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -5,9 +5,9 @@ nav: order: 5 --- -## [0.6.0](https://github.com/crazyair/father-doc-yform/compare/v0.5.9...v0.6.0) (2020-05-16) +## [0.6.0](https://github.com/crazyair/yforms/compare/v0.5.9...v0.6.0) (2020-05-16) -- submitFormatValues 根据 name 长度排序 ([#13](https://github.com/crazyair/father-doc-yform/issues/13)) ([fc1c411](https://github.com/crazyair/father-doc-yform/commit/fc1c41107d10fa798e9298266f7144e2cc5697f8)) +- submitFormatValues 根据 name 长度排序 ([#13](https://github.com/crazyair/yforms/issues/13)) ([fc1c411](https://github.com/crazyair/yforms/commit/fc1c41107d10fa798e9298266f7144e2cc5697f8)) ## 0.5.9 diff --git a/docs/examples/demo/demo1.tsx b/docs/examples/demo/demo1.tsx index b80359a..7f0fd62 100644 --- a/docs/examples/demo/demo1.tsx +++ b/docs/examples/demo/demo1.tsx @@ -1,26 +1,23 @@ /* eslint-disable no-console */ import React, { useState, useEffect } from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; +import { message } from 'antd'; +import moment from 'moment'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; const Demo = () => { const [data, setData] = useState({}); const [loading, setLoading] = useState(true); - const { formatFieldsValue, onFormatFieldsValue } = YForm.useFormatFieldsValue(); + const [form] = YForm.useForm(); useEffect(() => { setTimeout(() => { - setData({ name: '张三', age: '10', money: '10' }); + setData({ name: '张三', age: '10', money: '10', date: moment() }); setLoading(false); }, 10); }, []); - onFormatFieldsValue([ - { name: 'append_field', format: () => '提交前追加字段' }, - { name: 'name', format: ({ name }) => `${name}_改变了` }, - ]); - const onFinish = (values: any) => { console.log('Success:', values); }; @@ -34,20 +31,33 @@ const Demo = () => { return ( {[ - { type: 'input', label: 'name', name: 'name' }, - { type: 'input', label: 'age', name: 'age', componentProps: { suffix: '岁' } }, + { type: 'input', label: 'name', name: 'name', format: ({ name }) => `${name} 修改了` }, + { + type: 'datePicker', + label: 'date', + name: 'date', + componentProps: { style: { width: '100%' } }, + format: ({ date }) => moment(date).format('YYYY-MM-DD'), + }, { type: 'money', label: 'money', name: 'money' }, { type: 'submit' }, + { + type: 'button', + componentProps: { + onClick: () => message.success(JSON.stringify(form.getFormatFieldsValue())), + children: '获取提交前数据', + }, + }, ]} ); diff --git a/docs/examples/demo/demo3.tsx b/docs/examples/demo/demo3.tsx index afa509f..79bf3f7 100644 --- a/docs/examples/demo/demo3.tsx +++ b/docs/examples/demo/demo3.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Button, Modal } from 'antd'; import { RouteComponentProps } from 'react-router-dom'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/examples/demo/edit.tsx b/docs/examples/demo/edit.tsx index ca2e2aa..38f74ca 100644 --- a/docs/examples/demo/edit.tsx +++ b/docs/examples/demo/edit.tsx @@ -7,7 +7,7 @@ import React, { useState, useEffect } from 'react'; import { message } from 'antd'; import { RouteComponentProps } from 'react-router-dom'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/examples/demo/search.tsx b/docs/examples/demo/search.tsx index 7dec3eb..9ddd1a2 100644 --- a/docs/examples/demo/search.tsx +++ b/docs/examples/demo/search.tsx @@ -5,7 +5,7 @@ /* eslint-disable no-console */ import React from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; import { Form, Button, Row, Col } from 'antd'; import { DownOutlined, UpOutlined } from '@ant-design/icons'; import QueueAnim from 'rc-queue-anim'; diff --git a/docs/examples/demo/shouldUpdate.tsx b/docs/examples/demo/shouldUpdate.tsx index 0d8f8d3..edade2a 100644 --- a/docs/examples/demo/shouldUpdate.tsx +++ b/docs/examples/demo/shouldUpdate.tsx @@ -4,7 +4,7 @@ */ import React from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/examples/index.md b/docs/examples/index.md index a0ba224..cfeba06 100644 --- a/docs/examples/index.md +++ b/docs/examples/index.md @@ -10,11 +10,3 @@ nav: ## 基础使用 - -## 弹窗使用 - - - -## 依赖使用 - - diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 30c68f6..869c0b3 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -12,14 +12,14 @@ nav: 在项目目录下执行以下命令进行安装： ```bash -$ yarn add father-doc-yform +$ yarn add yforms ``` ## 示例 ```jsx | pure import React from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const Demo = () => { return ( diff --git a/docs/guide/index.md b/docs/guide/index.md index 800402a..861f56c 100644 --- a/docs/guide/index.md +++ b/docs/guide/index.md @@ -5,18 +5,18 @@ nav: order: 1 --- -## 什么是 yform +## 什么是 yforms -yform 是一个基于 antd v4 开发，为 Form 场景提供可 DIY 配置的表单库，用户可在全局设置每个字段类型的默认行为。 +yforms 是一个基于 antd v4 开发，为 Form 场景提供可 DIY 配置的表单库，用户可在全局设置每个字段类型的默认行为。 -## 为什么做 yform +## 为什么做 yforms -- 前端项目中对代码统一有了 eslint、prettier、tslint。而表单在系统中各有各的样，而现在为了解决各个业务模块表单交互不统一 `yform` 诞生了。 +- 前端项目中对代码统一有了 eslint、prettier、tslint。而表单在系统中各有各的样，而现在为了解决各个业务模块表单交互不统一 `yforms` 诞生了。 - 常常遇到有个表单中 `placeholder` 文案不统一，有的是：请输入姓名，而有的是：姓名必填、`rules` 中有的有 `whitespace` 有的则没有。 - 同样一个字段，在表单中需要添加 `{label:'姓名' placeholder:'请输入姓名'}`，而搜索场景下就变成只需要 `{placeholder:'姓名'}`。 - 开发项目中表单字段有太多例如：input、select、radio、switch、upload 等，每个表单单独引入 Input、Upload，慢慢的一个表单中引用多个版本的组件展现形式、api、以及交互不统一。 -## yform 解决了什么问题 +## yforms 解决了什么问题 - 减少模板代码，一个表单中的字段可无缝应用于表单和搜索场景，2 种场景下的区别交给全局配置。 - 表单交互可全局自定义配置一套，其他人使用时候不用写 placeholder。 diff --git a/docs/index.md b/docs/index.md index 74be8a2..4fb5494 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,9 +1,9 @@ --- -title: yform +title: yforms order: 10 hero: - title: yform - desc: 一个基于 antd v4 封装的可以 DIY 的 Form，起名叫 yform + title: yforms + desc: 一个基于 antd v4 封装的可以 DIY 的 Form，起名叫 yforms actions: - text: 快速上手 @@ -31,7 +31,7 @@ features: ## 参与贡献 -欢迎加入到 yform 的建设队伍中来，请访问 https://github.com/crazyair/father-doc-yform 。 +欢迎加入到 yforms 的建设队伍中来，请访问 https://github.com/crazyair/yforms 。 ```jsx | inline import React from 'react'; diff --git a/docs/types/demo/custom.tsx b/docs/types/demo/custom.tsx index 5703272..dbcd943 100644 --- a/docs/types/demo/custom.tsx +++ b/docs/types/demo/custom.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/types/demo/index.tsx b/docs/types/demo/index.tsx index 495a93a..682b8f1 100644 --- a/docs/types/demo/index.tsx +++ b/docs/types/demo/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-console */ import React from 'react'; import { Input } from 'antd'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/types/demo/list.tsx b/docs/types/demo/list.tsx index 65e624b..053910a 100644 --- a/docs/types/demo/list.tsx +++ b/docs/types/demo/list.tsx @@ -1,8 +1,8 @@ /* eslint-disable no-console */ import React, { useState } from 'react'; import { Card } from 'antd'; -import { YForm } from 'father-doc-yform'; -import { YFormListProps, YFormListComponentProps } from 'father-doc-yform/lib/YForm/component/List'; +import { YForm } from 'yforms'; +import { YFormListComponentProps, YFormListProps } from 'yforms/lib/YForm/component/List'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/types/demo/oneLine.tsx b/docs/types/demo/oneLine.tsx index 9210828..ff42feb 100644 --- a/docs/types/demo/oneLine.tsx +++ b/docs/types/demo/oneLine.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { YForm } from 'father-doc-yform'; -import { YFormOneLineProps } from 'father-doc-yform/lib/YForm/component/OneLine'; +import { YForm } from 'yforms'; +import { YFormOneLineProps } from 'yforms/lib/YForm/component/OneLine'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/types/demo/secureButton.tsx b/docs/types/demo/secureButton.tsx index ac9bb38..4851373 100644 --- a/docs/types/demo/secureButton.tsx +++ b/docs/types/demo/secureButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/types/demo/submit.tsx b/docs/types/demo/submit.tsx index db4f2c6..cf1abfa 100644 --- a/docs/types/demo/submit.tsx +++ b/docs/types/demo/submit.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-console */ import React from 'react'; -import { YForm } from 'father-doc-yform'; +import { YForm } from 'yforms'; const layout = { labelCol: { span: 4 }, wrapperCol: { span: 20 } }; diff --git a/docs/types/index.md b/docs/types/index.md index 7a71107..58be5f8 100644 --- a/docs/types/index.md +++ b/docs/types/index.md @@ -13,6 +13,10 @@ nav: ## API +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------------- | ------------- | ------ | +| format | 提交前格式化数据 | (value?:T)=>T | - | + ### 共同的 API - 以下 API 为 `checkboxGroup` `radio` `select` 共享的 API。 diff --git a/jest.config.js b/jest.config.js index 3113bd6..4531e6e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,6 @@ module.exports = { setupFiles: ['./setupTests.js'], modulePathIgnorePatterns: ['/docs/', '/__snapshots__/'], // coveragePathIgnorePatterns: ['/src/JackBox/'], - // testPathIgnorePatterns: ['/packages/yform'], + // testPathIgnorePatterns: ['/packages/yforms'], collectCoverage: true, }; diff --git a/lerna.json b/lerna.json index a9422a7..849d806 100644 --- a/lerna.json +++ b/lerna.json @@ -7,7 +7,7 @@ "pr(dependency)": ":deciduous_tree: Dependency", "pr(chore)": ":turtle: Chore" }, - "repo": "crazyair/father-doc-yform", + "repo": "crazyair/yforms", "cacheDir": ".changelog" }, "packages": ["packages/*"], @@ -24,5 +24,6 @@ "publishConfig": { "registry": "https://registry.npmjs.org" }, + "useWorkspaces": true, "version": "independent" } diff --git a/package.json b/package.json index cce31fc..5550111 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,24 @@ { - "name": "father-doc-yform", + "workspaces": [ + "packages/*" + ], + "private": true, "repository": { "type": "git", - "url": "git+https://github.com/crazyair/father-doc-yform.git" + "url": "git+https://github.com/crazyair/yforms.git" }, "scripts": { - "bootstrap": "lerna bootstrap", "start": "dumi dev", "build": "father-build", "doc:build": "dumi build", - "now-build": "yarn && yarn bootstrap && yarn doc:build", + "now-build": "yarn && yarn doc:build", "fa:build": "father build", "test": "umi-test", "lint": "eslint --ext .js,jsx,ts,tsx packages/**/src --fix", "lint:es": "eslint --ext .js,jsx,ts,tsx packages/**/src", "lint:tsc": "tsc -p tsconfig.json --noEmit", "changelog": "lerna-changelog", - "pub": "npm run changelog && npm run build && lerna publish" + "pub": "npm run build && lerna publish" }, "lint-staged": { "*.{ts,tsx,js,jsx}": [ @@ -37,11 +39,11 @@ "@babel/plugin-proposal-optional-chaining": "^7.6.0", "@commitlint/cli": "^8.3.5", "@commitlint/config-conventional": "^8.3.4", - "@testing-library/react": "^9.4.0", + "@testing-library/react": "^10.0.4", "@testing-library/react-hooks": "^3.1.1", "@types/classnames": "^2.2.9", "@types/enzyme": "^3.10.5", - "@types/jest": "^24.0.13", + "@types/jest": "^25.2.3", "@types/lodash": "^4.14.149", "@types/react": "^16.7.18", "@types/react-dom": "^16.0.11", @@ -51,36 +53,44 @@ "@typescript-eslint/eslint-plugin": "^2.13.0", "@typescript-eslint/parser": "^2.18.0", "@umijs/fabric": "^2.0.3", - "antd": "^4.0.2", - "babel-eslint": "^9.0.0", + "babel-eslint": "^10.1.0", "babel-plugin-import": "^1.13.0", - "cross-env": "^6.0.3", + "cross-env": "^7.0.2", "dumi": "^1.0.25", "enzyme": "^3.11.0", "eslint": "^6.7.2", "eslint-config-umi": "^1.6.0", - "eslint-plugin-flowtype": "^2.50.0", + "eslint-plugin-flowtype": "^5.1.0", "eslint-plugin-import": "^2.14.0", - "eslint-plugin-jsx-a11y": "^5.1.1", + "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.11.1", - "eslint-plugin-react-hooks": "^2.3.0", + "eslint-plugin-react-hooks": "^4.0.2", "father-build": "^1.17.2", "husky": "^4.2.3", "lerna": "^3.20.2", - "lerna-changelog": "^0.8.2", + "lerna-changelog": "^1.0.1", "lint-staged": "^10.0.8", - "prettier": "^1.19.1", + "prettier": "^2.0.5", "rc-util": "^4.19.0", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-router-dom": "^5.1.2", + "react-router-dom": "^5.2.0", "react-test-renderer": "^16.7.0", "typescript": "^3.7.5", "umi": "^3.1.4", + "@babel/polyfill": "^7.8.3", "umi-test": "^1.9.3" }, "license": "MIT", "dependencies": { + "warning": "^4.0.3", + "antd": "^4.2.4", + "@ant-design/icons": "^4.0.3", + "lodash": "^4.17.15", + "moment": "^2.24.0", + "numbro": "^2.2.0", + "nzh": "^1.0.4", + "dayjs": "^1.8.27", "rc-queue-anim": "^1.8.4" } } diff --git a/packages/yform/README.md b/packages/yform/README.md deleted file mode 100644 index debaa25..0000000 --- a/packages/yform/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# yform - -See our [main repo](https://github.com/crazyair/father-doc-yform) for more information. diff --git a/packages/yform/package.json b/packages/yform/package.json deleted file mode 100644 index 16c2656..0000000 --- a/packages/yform/package.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "name": "father-doc-yform", - "version": "0.7.0", - "description": "自定义表单组件", - "main": "lib/index.js", - "typings": "lib/index.d.ts", - "authors": { - "name": "crazyair", - "email": "645381995@qq.com" - }, - "files": [ - "es", - "lib", - "dist" - ], - "scripts": { - "lint:tsc": "tsc -p tsconfig.json --noEmit", - "build": "father-build" - }, - "repository": { - "type": "git", - "url": "http://github.com/crazyair/father-doc-yform", - "directory": "yform" - }, - "homepage": "http://github.com/crazyair/father-doc-yform", - "bugs": "http://github.com/crazyair/father-doc-yform/issues", - "dependencies": { - "@ant-design/icons": "^4.0.3", - "@babel/runtime": "^7.8.4", - "antd": "^4.2.2", - "classnames": "^2.2.6", - "lodash": "^4.17.15", - "moment": "^2.24.0", - "numbro": "^2.2.0", - "nzh": "^1.0.4", - "warning": "^4.0.3" - }, - "devDependencies": { - "@babel/polyfill": "^7.8.3" - }, - "publishConfig": { - "registry": "https://registry.npmjs.org/" - }, - "license": "MIT" -} diff --git a/packages/yform/src/index.tsx b/packages/yform/src/index.tsx deleted file mode 100644 index 3fd614d..0000000 --- a/packages/yform/src/index.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export { default as YForm } from './YForm'; - -// import YForm from './YForm'; -// export default YForm; diff --git a/packages/yform/.fatherrc.ts b/packages/yforms/.fatherrc.ts similarity index 100% rename from packages/yform/.fatherrc.ts rename to packages/yforms/.fatherrc.ts diff --git a/packages/yforms/README.md b/packages/yforms/README.md new file mode 100644 index 0000000..0bd16ae --- /dev/null +++ b/packages/yforms/README.md @@ -0,0 +1,3 @@ +# yforms + +See our [main repo](https://github.com/crazyair/yforms) for more information. diff --git a/packages/yforms/package.json b/packages/yforms/package.json new file mode 100644 index 0000000..8433c36 --- /dev/null +++ b/packages/yforms/package.json @@ -0,0 +1,32 @@ +{ + "name": "yforms", + "version": "0.8.0", + "description": "自定义表单组件", + "main": "lib/index.js", + "typings": "lib/index.d.ts", + "authors": { + "name": "crazyair", + "email": "645381995@qq.com" + }, + "files": [ + "es", + "lib", + "dist" + ], + "scripts": { + "lint:tsc": "tsc -p tsconfig.json --noEmit", + "build": "father-build" + }, + "repository": { + "type": "git", + "url": "http://github.com/crazyair/yforms", + "directory": "yforms" + }, + "homepage": "http://github.com/crazyair/yforms", + "bugs": "http://github.com/crazyair/yforms/issues", + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + }, + "license": "MIT" +} diff --git a/packages/yform/src/YForm/Context.ts b/packages/yforms/src/YForm/Context.ts similarity index 100% rename from packages/yform/src/YForm/Context.ts rename to packages/yforms/src/YForm/Context.ts diff --git a/packages/yform/src/YForm/Form.tsx b/packages/yforms/src/YForm/Form.tsx similarity index 82% rename from packages/yform/src/YForm/Form.tsx rename to packages/yforms/src/YForm/Form.tsx index c812686..6ce68cb 100644 --- a/packages/yform/src/YForm/Form.tsx +++ b/packages/yforms/src/YForm/Form.tsx @@ -1,15 +1,16 @@ import { Form, Spin } from 'antd'; import React, { useRef, useEffect, useCallback, useState } from 'react'; -import { merge } from 'lodash'; +import { merge, concat } from 'lodash'; import classNames from 'classnames'; -import { FormProps } from 'antd/lib/form'; +import { FormProps, FormInstance } from 'antd/lib/form'; import baseItemsType, { YFormItemsType, YFormFieldBaseProps, modifyType } from './ItemsType'; import Items, { FormatFieldsValue, YFormItemProps } from './Items'; import { YFormContext } from './Context'; import { onFormatFieldsValue, submitFormatValues, paramsType } from './utils'; import { YFormSubmitProps } from './component/Submit'; +import useForm from './useForm'; type pluginsType = boolean | YFormFieldBaseProps['modifyProps']; @@ -66,12 +67,20 @@ export interface ParamsObjType { typeName?: string; } -export interface YFormProps extends FormProps, YFormConfig { +export interface YFormInstance extends FormInstance { + getFormatFieldsValue?: (value?: T) => T; +} + +export interface YFormProps extends FormProps, YFormConfig { isShow?: boolean; disabled?: boolean; required?: boolean; loading?: boolean; + form?: YFormInstance; formatFieldsValue?: FormatFieldsValue[]; + onFormatFieldsValue?: ( + f: FormatFieldsValue[], + ) => (f: FormatFieldsValue[]) => FormatFieldsValue[]; children?: YFormItemProps['children']; onSave?: (values: { [key: string]: any }) => void; submitComponentProps?: YFormSubmitProps; @@ -106,8 +115,8 @@ const InternalForm = (props: YFormProps) => { plugins, ...rest } = _props; - const [form] = Form.useForm(propsForm); - const { resetFields } = form; + const [form] = useForm(propsForm); + const { resetFields, getFieldsValue } = form; const _params = paramsType(params); const { create, edit, view } = _params; const [thisDisabled, setDisabled] = useState(view); @@ -146,13 +155,30 @@ const InternalForm = (props: YFormProps) => { ...globalConfig.itemsType, } as YFormItemsType; + // 内部格式化功能 + const { + formatFieldsValue: _formatFieldsValue, + onFormatFieldsValue: _onFormatFieldsValue, + } = useFormatFieldsValue(); + + const handleFormatFieldsValue = (value) => { + let _value; + if (value) { + _value = value; + } else { + _value = getFieldsValue(); + } + return submitFormatValues(_value, concat(formatFieldsValue, _formatFieldsValue)); + }; + form.getFormatFieldsValue = handleFormatFieldsValue; + const handleOnFinish = async (value: KeyValue) => { if (onFinish) { if (submitLoading) return; const begin = new Date().getTime(); setSubmitLoading(true); try { - await onFinish(formatFieldsValue ? submitFormatValues(value, formatFieldsValue) : value); + await onFinish(handleFormatFieldsValue(value)); const end = new Date().getTime(); timeOut.current = window.setTimeout( () => { @@ -168,9 +194,9 @@ const InternalForm = (props: YFormProps) => { } }; - const handleOnEdit = e => { + const handleOnEdit = (e) => { e.preventDefault(); - setDisabled(c => !c); + setDisabled((c) => !c); }; let _plugins; @@ -183,12 +209,12 @@ const InternalForm = (props: YFormProps) => { } const _providerProps = merge( - {}, { form, plugins: _plugins, disabled: thisDisabled, getScene, + onFormatFieldsValue: _onFormatFieldsValue, submitComponentProps: { showBtns: { // form submit 触发后设置 loading = true @@ -218,7 +244,7 @@ const InternalForm = (props: YFormProps) => {
diff --git a/packages/yform/src/YForm/ItemChildren.tsx b/packages/yforms/src/YForm/ItemChildren.tsx similarity index 100% rename from packages/yform/src/YForm/ItemChildren.tsx rename to packages/yforms/src/YForm/ItemChildren.tsx diff --git a/packages/yform/src/YForm/Items.tsx b/packages/yforms/src/YForm/Items.tsx similarity index 95% rename from packages/yform/src/YForm/Items.tsx rename to packages/yforms/src/YForm/Items.tsx index 7d6a751..f60a419 100644 --- a/packages/yform/src/YForm/Items.tsx +++ b/packages/yforms/src/YForm/Items.tsx @@ -15,12 +15,13 @@ export type YFormRenderChildren = (form: FormInstance) => YFormItemProps['childr type isShowFunc = (values: any) => boolean; -export interface YFormItemProps extends Omit { +export interface YFormItemProps extends Omit { isShow?: boolean | isShowFunc; required?: boolean; plugins?: YFormPluginsType | boolean; className?: string; addonAfter?: React.ReactElement; + format?: FormatFieldsValue['format']; style?: React.CSSProperties; offset?: number; children?: @@ -68,7 +69,7 @@ const Items = (props: YFormItemsProps) => { if ('isShow' in _props && !_props.isShow) return null; const { children = [], className, style, noStyle } = _props; - const { required: mergeRequired, disabled: mergeDisabled } = mergeProps; + const { required: mergeRequired, disabled: mergeDisabled, onFormatFieldsValue } = mergeProps; const list: React.ReactNode[] = []; @@ -131,6 +132,7 @@ const Items = (props: YFormItemsProps) => { addonAfter, plugins, componentProps, + format, ...formItemProps } = _itemProps; @@ -151,6 +153,10 @@ const Items = (props: YFormItemsProps) => { disabled = defaultPlugin, } = _plugins; + if (format) { + onFormatFieldsValue([{ name, format }]); + } + if (disabled) { if (!('disabled' in _componentProps)) { set(_componentProps, 'disabled', mergeDisabled); @@ -192,7 +198,7 @@ const Items = (props: YFormItemsProps) => { } if (required) { let hasRequired = false; - forEach(_formItemProps.rules, item => { + forEach(_formItemProps.rules, (item) => { hasRequired = 'required' in item; }); // 没传 required 校验情况下追加默认校验 diff --git a/packages/yform/src/YForm/ItemsType.tsx b/packages/yforms/src/YForm/ItemsType.tsx similarity index 95% rename from packages/yform/src/YForm/ItemsType.tsx rename to packages/yforms/src/YForm/ItemsType.tsx index 63d3705..f83fe25 100644 --- a/packages/yform/src/YForm/ItemsType.tsx +++ b/packages/yforms/src/YForm/ItemsType.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Input, Checkbox, Switch, Button } from 'antd'; +import { Input, Checkbox, Switch, Button, DatePicker } from 'antd'; import { TextProps } from 'antd/lib/typography/Text'; import { InputProps, PasswordProps } from 'antd/lib/input'; import { SwitchProps } from 'antd/lib/switch'; @@ -7,6 +7,7 @@ import { ButtonProps } from 'antd/lib/button'; import { CheckboxProps } from 'antd/lib/checkbox'; import { CheckboxValueType } from 'antd/lib/checkbox/Group'; +import { DatePickerProps } from 'antd/lib/date-picker'; import { YFormItemProps, YFormItemsProps } from './Items'; import { searchSelect } from './utils'; @@ -66,6 +67,7 @@ export interface OptionsProps { export interface YFormItemsTypeDefine { // 字段类型 input: { componentProps?: InputProps }; + datePicker: { componentProps?: DatePickerProps }; password: { componentProps?: PasswordProps }; textarea: { componentProps?: YTextAreaProps }; money: { componentProps?: YMoneyProps }; @@ -101,6 +103,7 @@ export type YFormItemsTypeArray = YFormItemsType[keyof YFormItemsType]; export const itemsType: YFormItemsType = { input: { component: , formatStr: '请输入${label}' }, + datePicker: { component: , formatStr: '请选择${label}' }, password: { component: , formatStr: '请输入${label}' }, textarea: { component: