├── .editorconfig ├── .gitattributes ├── .github └── workflows │ ├── npm-publish.yaml │ └── upload.yaml ├── .gitignore ├── .npmignore ├── .prettierrc ├── README.md ├── example ├── controller │ └── generated-router.ts ├── forms │ ├── async-validation.tsx │ ├── auto-save.tsx │ ├── basic.tsx │ ├── blank-label.tsx │ ├── custom-multiple.tsx │ ├── custom.tsx │ ├── date-picker.tsx │ ├── decorative.tsx │ ├── draft.tsx │ ├── drawer.tsx │ ├── dropdown.tsx │ ├── filter-form.tsx │ ├── forward-form.tsx │ ├── group.tsx │ ├── inline-form.tsx │ ├── input-suffix.tsx │ ├── login-validations.tsx │ ├── modal.tsx │ ├── modify-on-change.tsx │ ├── no-label.tsx │ ├── radio.tsx │ ├── registered-renderer.tsx │ ├── select-page.tsx │ ├── switch.tsx │ ├── tree-select.tsx │ ├── use-items.tsx │ ├── validation.tsx │ └── wrap-meson-core.tsx ├── gen-router.ts ├── kits │ ├── data-preview.tsx │ └── source-link.tsx ├── main.css ├── main.tsx ├── models │ └── router-rules.ts ├── pages │ ├── container.tsx │ ├── custom-theme.tsx │ ├── debounced-input.tsx │ ├── footer-buttons.tsx │ └── preview-mode.tsx └── util │ └── link.ts ├── package.json ├── src ├── component │ ├── debounced-input.tsx │ ├── footer-buttons.tsx │ ├── form-footer.tsx │ └── misc.tsx ├── filter-form │ ├── core.tsx │ ├── renderer.tsx │ └── types.tsx ├── form-forwarded.tsx ├── form.tsx ├── hook │ └── meson-core.ts ├── index.ts ├── inline-form.tsx ├── lingual │ ├── en-us.ts │ ├── index.ts │ ├── interface.ts │ ├── locales.edn │ └── zh-cn.ts ├── model │ └── types.ts ├── registered-renderer.tsx ├── renderer.tsx ├── theme.ts └── util │ ├── data.ts │ ├── event.ts │ ├── form-pieces.tsx │ ├── render.ts │ ├── string.ts │ └── validation.ts ├── template.ejs ├── tsconfig-compile.json ├── tsconfig-node.json ├── tsconfig.json ├── webpack ├── dev.js ├── dll-dev.js ├── dll-release.js ├── ga.html ├── release.js ├── shared.js └── split-chunks.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | indent_style = space 9 | indent_size = 2 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [{package.json}] 14 | indent_style = space 15 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | 2 | yarn.lock -diff linguist-generated 3 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yaml: -------------------------------------------------------------------------------- 1 | name: npm publish 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | publish-npm: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | registry-url: https://registry.npmjs.org/ 16 | 17 | - name: Get yarn cache 18 | id: yarn-cache 19 | run: echo "::set-output name=dir::$(yarn cache dir)" 20 | 21 | - uses: actions/cache@v1 22 | with: 23 | path: ${{ steps.yarn-cache.outputs.dir }} 24 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 25 | restore-keys: | 26 | ${{ runner.os }}-yarn- 27 | 28 | - run: yarn && yarn compile && npm publish 29 | env: 30 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} 31 | -------------------------------------------------------------------------------- /.github/workflows/upload.yaml: -------------------------------------------------------------------------------- 1 | name: Upload Assets 2 | 3 | on: 4 | pull_request: {} 5 | push: 6 | branches: 7 | - master 8 | 9 | jobs: 10 | upload-assets: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v2 14 | 15 | - name: Use Node.js 16 | uses: actions/setup-node@v1 17 | 18 | - name: Get yarn cache 19 | id: yarn-cache 20 | run: echo "::set-output name=dir::$(yarn cache dir)" 21 | 22 | - uses: actions/cache@v1 23 | with: 24 | path: ${{ steps.yarn-cache.outputs.dir }} 25 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} 26 | restore-keys: | 27 | ${{ runner.os }}-yarn- 28 | 29 | - run: yarn 30 | 31 | - run: yarn compile 32 | 33 | - run: yarn release 34 | name: Build web assets 35 | 36 | - name: Deploy to server 37 | id: deploy 38 | uses: Pendect/action-rsyncer@v1.1.0 39 | env: 40 | DEPLOY_KEY: ${{secrets.rsync_private_key}} 41 | with: 42 | flags: "-avzr --progress" 43 | options: "" 44 | ssh_options: "" 45 | src: "dist/*" 46 | dest: "rsync-user@fe.jimu.io:/web-assets/repo/${{ github.repository }}" 47 | 48 | - name: Display status from deploy 49 | run: echo "${{ steps.deploy.outputs.status }}" 50 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | typings/ 3 | .idea/ 4 | .vscode/ 5 | dist/ 6 | webpack/dll/* 7 | .awcache/ 8 | 9 | .DS_Store 10 | *.swp 11 | *.log 12 | 13 | .cache-loader/* 14 | 15 | 16 | lib/* 17 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | 2 | dist 3 | example 4 | template.ejs 5 | tsconfig-compile.json 6 | tsconfig.json 7 | webpack 8 | yarn.lock 9 | 10 | .cache-loader/* 11 | .awcache/* 12 | .vscode/* 13 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "useTabs": false, 4 | "printWidth": 160, 5 | "trailingComma": "es5", 6 | "arrowParens": "always" 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Meson Form 2 | 3 | > React form component with focus on immer and JSON 4 | 5 | Snippets and Preview http://fe.jimu.io/meson-form/ . This library is now based on `antd@4.x` . 6 | 7 | - [Chinese Intro](https://github.com/jimengio/meson-form/issues/159) 8 | - [meson-drafter](http://tools.mvc-works.org/meson-drafter/) can be helpful in generating JSON configs. 9 | 10 | ### Usage 11 | 12 | ![](https://img.shields.io/npm/v/@jimengio/meson-form.svg?style=flat-square) 13 | 14 | ```bash 15 | yarn add @jimengio/meson-form 16 | ``` 17 | 18 | Define forms JSON-like configs(with functions and enumerables): 19 | 20 | ```tsx 21 | let formItems: IMesonFieldItem[] = [ 22 | { 23 | type: "input", 24 | name: "name", 25 | label: "名字", 26 | }, 27 | { 28 | type: "input", 29 | shouldHide: (form) => { 30 | return form.amount && form.amount > 6; 31 | }, 32 | label: "单价", 33 | name: "price", 34 | required: true, 35 | }, 36 | ]; 37 | ``` 38 | 39 | Normal way of rendering a form(with cancel/submit buttons): 40 | 41 | ```tsx 42 | import { MesonForm } from "@jimengio/meson-form"; 43 | 44 | { 48 | console.log("data to submit:", form); 49 | }} 50 | />; 51 | ``` 52 | 53 | Or, only render form fields, and control with your own buttons: 54 | 55 | ```tsx 56 | import { useMesonFields } from "@jimengio/meson-form"; 57 | 58 | let fieldsPlugin = useMesonFields({ 59 | initialValue: {}, 60 | items: formItems, 61 | onSubmit: (form) => { 62 | console.log("After validation:", form); 63 | }, 64 | }); 65 | 66 | // ReactNode 67 | fieldsPlugin.ui; 68 | 69 | // trigger submit 70 | fieldsPlugin.checkAndSubmit(); 71 | 72 | // reset form data 73 | fieldsPlugin.resetForm(data); 74 | ``` 75 | 76 | ### Modal usages 77 | 78 | Used with a modal container: 79 | 80 | ```tsx 81 | import { MesonFormModal } from "@jimengio/meson-form"; 82 | 83 | let [formVisible, setFormVisible] = useState(false); 84 | 85 | { 89 | setFormVisible(false); 90 | }} 91 | width={800} 92 | items={formItems} 93 | initialValue={{}} 94 | hideClose={false} 95 | onSubmit={(form) => { 96 | setFormVisible(false); 97 | console.log("form", form); 98 | }} 99 | />; 100 | ``` 101 | 102 | Props for `MesonFormDrawer` and `MesonFormDropdown` are mostly same as `MesonFormModal`'s. 103 | 104 | ### Field Types 105 | 106 | `IMesonFieldItem` has some types, roughly in 3 kinds: 107 | 108 | - control types: 109 | 110 | | Type | Usage | 111 | | ----------------- | ----------------------------- | 112 | | `input` | renders antd `` | 113 | | `textarea` | renders antd `