This is page 26 of 35. Use http://codebase.md/alibaba/formily?lines=false&page={x} to view the full context.
# Directory Structure
```
├── .all-contributorsrc
├── .codecov.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .github
│ ├── CONTRIBUTING.md
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE
│ │ └── config.yml
│ ├── PULL_REQUEST_TEMPLATE.md
│ └── workflows
│ ├── check-pr-title.yml
│ ├── ci.yml
│ ├── commitlint.yml
│ ├── issue-open-check.yml
│ ├── package-size.yml
│ └── pr-welcome.yml
├── .gitignore
├── .prettierrc.js
├── .umirc.js
├── .vscode
│ └── cspell.json
├── .yarnrc
├── CHANGELOG.md
├── commitlint.config.js
├── devtools
│ ├── .eslintrc
│ └── chrome-extension
│ ├── .npmignore
│ ├── assets
│ │ └── img
│ │ ├── loading.svg
│ │ └── logo
│ │ ├── 128x128.png
│ │ ├── 16x16.png
│ │ ├── 38x38.png
│ │ ├── 48x48.png
│ │ ├── error.png
│ │ ├── gray.png
│ │ └── scalable.png
│ ├── config
│ │ ├── webpack.base.ts
│ │ ├── webpack.dev.ts
│ │ └── webpack.prod.ts
│ ├── LICENSE.md
│ ├── package.json
│ ├── src
│ │ ├── app
│ │ │ ├── components
│ │ │ │ ├── FieldTree.tsx
│ │ │ │ ├── filter.ts
│ │ │ │ ├── LeftPanel.tsx
│ │ │ │ ├── RightPanel.tsx
│ │ │ │ ├── SearchBox.tsx
│ │ │ │ └── Tabs.tsx
│ │ │ ├── demo.tsx
│ │ │ └── index.tsx
│ │ └── extension
│ │ ├── backend.ts
│ │ ├── background.ts
│ │ ├── content.ts
│ │ ├── devpanel.tsx
│ │ ├── devtools.tsx
│ │ ├── inject.ts
│ │ ├── manifest.json
│ │ ├── popup.tsx
│ │ └── views
│ │ ├── devpanel.ejs
│ │ ├── devtools.ejs
│ │ └── popup.ejs
│ ├── tsconfig.build.json
│ └── tsconfig.json
├── docs
│ ├── functions
│ │ ├── contributors.ts
│ │ └── npm-search.ts
│ ├── guide
│ │ ├── advanced
│ │ │ ├── async.md
│ │ │ ├── async.zh-CN.md
│ │ │ ├── build.md
│ │ │ ├── build.zh-CN.md
│ │ │ ├── business-logic.md
│ │ │ ├── business-logic.zh-CN.md
│ │ │ ├── calculator.md
│ │ │ ├── calculator.zh-CN.md
│ │ │ ├── controlled.md
│ │ │ ├── controlled.zh-CN.md
│ │ │ ├── custom.md
│ │ │ ├── custom.zh-CN.md
│ │ │ ├── destructor.md
│ │ │ ├── destructor.zh-CN.md
│ │ │ ├── input.less
│ │ │ ├── layout.md
│ │ │ ├── layout.zh-CN.md
│ │ │ ├── linkages.md
│ │ │ ├── linkages.zh-CN.md
│ │ │ ├── validate.md
│ │ │ └── validate.zh-CN.md
│ │ ├── contribution.md
│ │ ├── contribution.zh-CN.md
│ │ ├── form-builder.md
│ │ ├── form-builder.zh-CN.md
│ │ ├── index.md
│ │ ├── index.zh-CN.md
│ │ ├── issue-helper.md
│ │ ├── issue-helper.zh-CN.md
│ │ ├── learn-formily.md
│ │ ├── learn-formily.zh-CN.md
│ │ ├── quick-start.md
│ │ ├── quick-start.zh-CN.md
│ │ ├── scenes
│ │ │ ├── dialog-drawer.md
│ │ │ ├── dialog-drawer.zh-CN.md
│ │ │ ├── edit-detail.md
│ │ │ ├── edit-detail.zh-CN.md
│ │ │ ├── index.less
│ │ │ ├── login-register.md
│ │ │ ├── login-register.zh-CN.md
│ │ │ ├── more.md
│ │ │ ├── more.zh-CN.md
│ │ │ ├── query-list.md
│ │ │ ├── query-list.zh-CN.md
│ │ │ ├── step-form.md
│ │ │ ├── step-form.zh-CN.md
│ │ │ ├── tab-form.md
│ │ │ ├── tab-form.zh-CN.md
│ │ │ └── VerifyCode.tsx
│ │ ├── upgrade.md
│ │ └── upgrade.zh-CN.md
│ ├── index.md
│ ├── index.zh-CN.md
│ └── site
│ ├── Contributors.less
│ ├── Contributors.tsx
│ ├── QrCode.less
│ ├── QrCode.tsx
│ ├── Section.less
│ ├── Section.tsx
│ └── styles.less
├── global.config.ts
├── jest.config.js
├── lerna.json
├── LICENSE.md
├── package.json
├── packages
│ ├── .eslintrc
│ ├── antd
│ │ ├── __tests__
│ │ │ ├── moment.spec.ts
│ │ │ └── sideEffects.spec.ts
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── build-style.ts
│ │ ├── create-style.ts
│ │ ├── docs
│ │ │ ├── components
│ │ │ │ ├── ArrayCards.md
│ │ │ │ ├── ArrayCards.zh-CN.md
│ │ │ │ ├── ArrayCollapse.md
│ │ │ │ ├── ArrayCollapse.zh-CN.md
│ │ │ │ ├── ArrayItems.md
│ │ │ │ ├── ArrayItems.zh-CN.md
│ │ │ │ ├── ArrayTable.md
│ │ │ │ ├── ArrayTable.zh-CN.md
│ │ │ │ ├── ArrayTabs.md
│ │ │ │ ├── ArrayTabs.zh-CN.md
│ │ │ │ ├── Cascader.md
│ │ │ │ ├── Cascader.zh-CN.md
│ │ │ │ ├── Checkbox.md
│ │ │ │ ├── Checkbox.zh-CN.md
│ │ │ │ ├── DatePicker.md
│ │ │ │ ├── DatePicker.zh-CN.md
│ │ │ │ ├── Editable.md
│ │ │ │ ├── Editable.zh-CN.md
│ │ │ │ ├── Form.md
│ │ │ │ ├── Form.zh-CN.md
│ │ │ │ ├── FormButtonGroup.md
│ │ │ │ ├── FormButtonGroup.zh-CN.md
│ │ │ │ ├── FormCollapse.md
│ │ │ │ ├── FormCollapse.zh-CN.md
│ │ │ │ ├── FormDialog.md
│ │ │ │ ├── FormDialog.zh-CN.md
│ │ │ │ ├── FormDrawer.md
│ │ │ │ ├── FormDrawer.zh-CN.md
│ │ │ │ ├── FormGrid.md
│ │ │ │ ├── FormGrid.zh-CN.md
│ │ │ │ ├── FormItem.md
│ │ │ │ ├── FormItem.zh-CN.md
│ │ │ │ ├── FormLayout.md
│ │ │ │ ├── FormLayout.zh-CN.md
│ │ │ │ ├── FormStep.md
│ │ │ │ ├── FormStep.zh-CN.md
│ │ │ │ ├── FormTab.md
│ │ │ │ ├── FormTab.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ ├── index.zh-CN.md
│ │ │ │ ├── Input.md
│ │ │ │ ├── Input.zh-CN.md
│ │ │ │ ├── NumberPicker.md
│ │ │ │ ├── NumberPicker.zh-CN.md
│ │ │ │ ├── Password.md
│ │ │ │ ├── Password.zh-CN.md
│ │ │ │ ├── PreviewText.md
│ │ │ │ ├── PreviewText.zh-CN.md
│ │ │ │ ├── Radio.md
│ │ │ │ ├── Radio.zh-CN.md
│ │ │ │ ├── Reset.md
│ │ │ │ ├── Reset.zh-CN.md
│ │ │ │ ├── Select.md
│ │ │ │ ├── Select.zh-CN.md
│ │ │ │ ├── SelectTable.md
│ │ │ │ ├── SelectTable.zh-CN.md
│ │ │ │ ├── Space.md
│ │ │ │ ├── Space.zh-CN.md
│ │ │ │ ├── Submit.md
│ │ │ │ ├── Submit.zh-CN.md
│ │ │ │ ├── Switch.md
│ │ │ │ ├── Switch.zh-CN.md
│ │ │ │ ├── TimePicker.md
│ │ │ │ ├── TimePicker.zh-CN.md
│ │ │ │ ├── Transfer.md
│ │ │ │ ├── Transfer.zh-CN.md
│ │ │ │ ├── TreeSelect.md
│ │ │ │ ├── TreeSelect.zh-CN.md
│ │ │ │ ├── Upload.md
│ │ │ │ └── Upload.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __builtins__
│ │ │ │ ├── hooks
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── useClickAway.ts
│ │ │ │ │ └── usePrefixCls.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── loading.ts
│ │ │ │ ├── moment.ts
│ │ │ │ ├── pickDataProps.ts
│ │ │ │ ├── portal.tsx
│ │ │ │ ├── render.ts
│ │ │ │ └── sort.tsx
│ │ │ ├── array-base
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-cards
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-items
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── array-tabs
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── cascader
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── checkbox
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── date-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── editable
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-button-group
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-dialog
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-drawer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-grid
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-item
│ │ │ │ ├── animation.less
│ │ │ │ ├── grid.less
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── form-layout
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ ├── style.ts
│ │ │ │ └── useResponsiveFormLayout.ts
│ │ │ ├── form-step
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-tab
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── index.ts
│ │ │ ├── input
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── number-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── password
│ │ │ │ ├── index.tsx
│ │ │ │ ├── PasswordStrength.tsx
│ │ │ │ └── style.ts
│ │ │ ├── preview-text
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── radio
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ └── style.ts
│ │ │ ├── reset
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── style.less
│ │ │ │ ├── style.ts
│ │ │ │ ├── useCheckSlackly.tsx
│ │ │ │ ├── useFilterOptions.tsx
│ │ │ │ ├── useFlatOptions.tsx
│ │ │ │ ├── useSize.tsx
│ │ │ │ ├── useTitleAddon.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── space
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── style.less
│ │ │ ├── style.ts
│ │ │ ├── submit
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── switch
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── time-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── transfer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── tree-select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ └── upload
│ │ │ ├── index.tsx
│ │ │ ├── placeholder.ts
│ │ │ └── style.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── benchmark
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── src
│ │ │ └── index.tsx
│ │ ├── template.ejs
│ │ ├── tsconfig.build.json
│ │ ├── tsconfig.json
│ │ ├── webpack.base.ts
│ │ ├── webpack.dev.ts
│ │ └── webpack.prod.ts
│ ├── core
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── docs
│ │ │ ├── api
│ │ │ │ ├── entry
│ │ │ │ │ ├── ActionResponse.less
│ │ │ │ │ ├── ActionResponse.tsx
│ │ │ │ │ ├── createForm.md
│ │ │ │ │ ├── createForm.zh-CN.md
│ │ │ │ │ ├── FieldEffectHooks.md
│ │ │ │ │ ├── FieldEffectHooks.zh-CN.md
│ │ │ │ │ ├── FormChecker.md
│ │ │ │ │ ├── FormChecker.zh-CN.md
│ │ │ │ │ ├── FormEffectHooks.md
│ │ │ │ │ ├── FormEffectHooks.zh-CN.md
│ │ │ │ │ ├── FormHooksAPI.md
│ │ │ │ │ ├── FormHooksAPI.zh-CN.md
│ │ │ │ │ ├── FormPath.md
│ │ │ │ │ ├── FormPath.zh-CN.md
│ │ │ │ │ ├── FormValidatorRegistry.md
│ │ │ │ │ └── FormValidatorRegistry.zh-CN.md
│ │ │ │ └── models
│ │ │ │ ├── ArrayField.md
│ │ │ │ ├── ArrayField.zh-CN.md
│ │ │ │ ├── Field.md
│ │ │ │ ├── Field.zh-CN.md
│ │ │ │ ├── Form.md
│ │ │ │ ├── Form.zh-CN.md
│ │ │ │ ├── ObjectField.md
│ │ │ │ ├── ObjectField.zh-CN.md
│ │ │ │ ├── Query.md
│ │ │ │ ├── Query.zh-CN.md
│ │ │ │ ├── VoidField.md
│ │ │ │ └── VoidField.zh-CN.md
│ │ │ ├── guide
│ │ │ │ ├── architecture.md
│ │ │ │ ├── architecture.zh-CN.md
│ │ │ │ ├── field.md
│ │ │ │ ├── field.zh-CN.md
│ │ │ │ ├── form.md
│ │ │ │ ├── form.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ ├── index.zh-CN.md
│ │ │ │ ├── mvvm.md
│ │ │ │ ├── mvvm.zh-CN.md
│ │ │ │ ├── values.md
│ │ │ │ └── values.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── array.spec.ts
│ │ │ │ ├── effects.spec.ts
│ │ │ │ ├── externals.spec.ts
│ │ │ │ ├── field.spec.ts
│ │ │ │ ├── form.spec.ts
│ │ │ │ ├── graph.spec.ts
│ │ │ │ ├── heart.spec.ts
│ │ │ │ ├── internals.spec.ts
│ │ │ │ ├── lifecycle.spec.ts
│ │ │ │ ├── object.spec.ts
│ │ │ │ ├── shared.ts
│ │ │ │ └── void.spec.ts
│ │ │ ├── effects
│ │ │ │ ├── index.ts
│ │ │ │ ├── onFieldEffects.ts
│ │ │ │ └── onFormEffects.ts
│ │ │ ├── global.d.ts
│ │ │ ├── index.ts
│ │ │ ├── models
│ │ │ │ ├── ArrayField.ts
│ │ │ │ ├── BaseField.ts
│ │ │ │ ├── Field.ts
│ │ │ │ ├── Form.ts
│ │ │ │ ├── Graph.ts
│ │ │ │ ├── Heart.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── LifeCycle.ts
│ │ │ │ ├── ObjectField.ts
│ │ │ │ ├── Query.ts
│ │ │ │ ├── types.ts
│ │ │ │ └── VoidField.ts
│ │ │ ├── shared
│ │ │ │ ├── checkers.ts
│ │ │ │ ├── constants.ts
│ │ │ │ ├── effective.ts
│ │ │ │ ├── externals.ts
│ │ │ │ └── internals.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── element
│ │ ├── .npmignore
│ │ ├── build-style.ts
│ │ ├── create-style.ts
│ │ ├── docs
│ │ │ ├── .vuepress
│ │ │ │ ├── components
│ │ │ │ │ ├── createCodeSandBox.js
│ │ │ │ │ ├── dumi-previewer.vue
│ │ │ │ │ └── highlight.js
│ │ │ │ ├── config.js
│ │ │ │ ├── enhanceApp.js
│ │ │ │ ├── styles
│ │ │ │ │ └── index.styl
│ │ │ │ └── util.js
│ │ │ ├── demos
│ │ │ │ ├── guide
│ │ │ │ │ ├── array-cards
│ │ │ │ │ │ ├── effects-json-schema.vue
│ │ │ │ │ │ ├── effects-markup-schema.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-collapse
│ │ │ │ │ │ ├── effects-json-schema.vue
│ │ │ │ │ │ ├── effects-markup-schema.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-items
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-table
│ │ │ │ │ │ ├── effects-json-schema.vue
│ │ │ │ │ │ ├── effects-markup-schema.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── array-tabs
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── cascader
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── checkbox
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── date-picker
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── editable
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-button-group.vue
│ │ │ │ │ ├── form-collapse
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── form-dialog
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-drawer
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-grid
│ │ │ │ │ │ ├── form.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── native.vue
│ │ │ │ │ ├── form-item
│ │ │ │ │ │ ├── bordered-none.vue
│ │ │ │ │ │ ├── common.vue
│ │ │ │ │ │ ├── feedback.vue
│ │ │ │ │ │ ├── inset.vue
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ ├── size.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-layout
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── form-step
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── form-tab
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ └── markup-schema.vue
│ │ │ │ │ ├── form.vue
│ │ │ │ │ ├── input
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── input-number
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── password
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── preview-text
│ │ │ │ │ │ ├── base.vue
│ │ │ │ │ │ └── extend.vue
│ │ │ │ │ ├── radio
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── reset
│ │ │ │ │ │ ├── base.vue
│ │ │ │ │ │ ├── force.vue
│ │ │ │ │ │ └── validate.vue
│ │ │ │ │ ├── select
│ │ │ │ │ │ ├── json-schema-async.vue
│ │ │ │ │ │ ├── json-schema-sync.vue
│ │ │ │ │ │ ├── markup-schema-async-search.vue
│ │ │ │ │ │ ├── markup-schema-async.vue
│ │ │ │ │ │ ├── markup-schema-sync.vue
│ │ │ │ │ │ ├── template-async.vue
│ │ │ │ │ │ └── template-sync.vue
│ │ │ │ │ ├── space
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── submit
│ │ │ │ │ │ ├── base.vue
│ │ │ │ │ │ └── loading.vue
│ │ │ │ │ ├── switch
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── time-picker
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ ├── transfer
│ │ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ │ └── template.vue
│ │ │ │ │ └── upload
│ │ │ │ │ ├── json-schema.vue
│ │ │ │ │ ├── markup-schema.vue
│ │ │ │ │ └── template.vue
│ │ │ │ └── index.vue
│ │ │ ├── guide
│ │ │ │ ├── array-cards.md
│ │ │ │ ├── array-collapse.md
│ │ │ │ ├── array-items.md
│ │ │ │ ├── array-table.md
│ │ │ │ ├── array-tabs.md
│ │ │ │ ├── cascader.md
│ │ │ │ ├── checkbox.md
│ │ │ │ ├── date-picker.md
│ │ │ │ ├── editable.md
│ │ │ │ ├── form-button-group.md
│ │ │ │ ├── form-collapse.md
│ │ │ │ ├── form-dialog.md
│ │ │ │ ├── form-drawer.md
│ │ │ │ ├── form-grid.md
│ │ │ │ ├── form-item.md
│ │ │ │ ├── form-layout.md
│ │ │ │ ├── form-step.md
│ │ │ │ ├── form-tab.md
│ │ │ │ ├── form.md
│ │ │ │ ├── index.md
│ │ │ │ ├── input-number.md
│ │ │ │ ├── input.md
│ │ │ │ ├── password.md
│ │ │ │ ├── preview-text.md
│ │ │ │ ├── radio.md
│ │ │ │ ├── reset.md
│ │ │ │ ├── select.md
│ │ │ │ ├── space.md
│ │ │ │ ├── submit.md
│ │ │ │ ├── switch.md
│ │ │ │ ├── time-picker.md
│ │ │ │ ├── transfer.md
│ │ │ │ └── upload.md
│ │ │ └── README.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __builtins__
│ │ │ │ ├── configs
│ │ │ │ │ └── index.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── shared
│ │ │ │ │ ├── create-context.ts
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── loading.ts
│ │ │ │ │ ├── portal.ts
│ │ │ │ │ ├── resolve-component.ts
│ │ │ │ │ ├── transform-component.ts
│ │ │ │ │ ├── types.ts
│ │ │ │ │ └── utils.ts
│ │ │ │ └── styles
│ │ │ │ └── common.scss
│ │ │ ├── array-base
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-cards
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-collapse
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-items
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-table
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-tabs
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── cascader
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── checkbox
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── date-picker
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── editable
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── el-form
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── el-form-item
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── form
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-button-group
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-collapse
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-dialog
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── form-drawer
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-grid
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-item
│ │ │ │ ├── animation.scss
│ │ │ │ ├── grid.scss
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ ├── style.ts
│ │ │ │ └── var.scss
│ │ │ ├── form-layout
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ ├── style.ts
│ │ │ │ └── useResponsiveFormLayout.ts
│ │ │ ├── form-step
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── form-tab
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── index.ts
│ │ │ ├── input
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── input-number
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── password
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── preview-text
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── radio
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── reset
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── select
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── space
│ │ │ │ ├── index.ts
│ │ │ │ ├── style.scss
│ │ │ │ └── style.ts
│ │ │ ├── style.ts
│ │ │ ├── submit
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── switch
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── time-picker
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ ├── transfer
│ │ │ │ ├── index.ts
│ │ │ │ └── style.ts
│ │ │ └── upload
│ │ │ ├── index.ts
│ │ │ └── style.ts
│ │ ├── transformer.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── grid
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── index.ts
│ │ │ └── observer.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── json-schema
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── __snapshots__
│ │ │ │ │ └── schema.spec.ts.snap
│ │ │ │ ├── compiler.spec.ts
│ │ │ │ ├── patches.spec.ts
│ │ │ │ ├── schema.spec.ts
│ │ │ │ ├── server-validate.spec.ts
│ │ │ │ ├── shared.spec.ts
│ │ │ │ ├── transformer.spec.ts
│ │ │ │ └── traverse.spec.ts
│ │ │ ├── compiler.ts
│ │ │ ├── global.d.ts
│ │ │ ├── index.ts
│ │ │ ├── patches.ts
│ │ │ ├── polyfills
│ │ │ │ ├── index.ts
│ │ │ │ └── SPECIFICATION_1_0.ts
│ │ │ ├── schema.ts
│ │ │ ├── shared.ts
│ │ │ ├── transformer.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── next
│ │ ├── __tests__
│ │ │ ├── moment.spec.ts
│ │ │ └── sideEffects.spec.ts
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── build-style.ts
│ │ ├── create-style.ts
│ │ ├── docs
│ │ │ ├── components
│ │ │ │ ├── ArrayCards.md
│ │ │ │ ├── ArrayCards.zh-CN.md
│ │ │ │ ├── ArrayCollapse.md
│ │ │ │ ├── ArrayCollapse.zh-CN.md
│ │ │ │ ├── ArrayItems.md
│ │ │ │ ├── ArrayItems.zh-CN.md
│ │ │ │ ├── ArrayTable.md
│ │ │ │ ├── ArrayTable.zh-CN.md
│ │ │ │ ├── Cascader.md
│ │ │ │ ├── Cascader.zh-CN.md
│ │ │ │ ├── Checkbox.md
│ │ │ │ ├── Checkbox.zh-CN.md
│ │ │ │ ├── DatePicker.md
│ │ │ │ ├── DatePicker.zh-CN.md
│ │ │ │ ├── DatePicker2.md
│ │ │ │ ├── DatePicker2.zh-CN.md
│ │ │ │ ├── Editable.md
│ │ │ │ ├── Editable.zh-CN.md
│ │ │ │ ├── Form.md
│ │ │ │ ├── Form.zh-CN.md
│ │ │ │ ├── FormButtonGroup.md
│ │ │ │ ├── FormButtonGroup.zh-CN.md
│ │ │ │ ├── FormCollapse.md
│ │ │ │ ├── FormCollapse.zh-CN.md
│ │ │ │ ├── FormDialog.md
│ │ │ │ ├── FormDialog.zh-CN.md
│ │ │ │ ├── FormDrawer.md
│ │ │ │ ├── FormDrawer.zh-CN.md
│ │ │ │ ├── FormGrid.md
│ │ │ │ ├── FormGrid.zh-CN.md
│ │ │ │ ├── FormItem.md
│ │ │ │ ├── FormItem.zh-CN.md
│ │ │ │ ├── FormLayout.md
│ │ │ │ ├── FormLayout.zh-CN.md
│ │ │ │ ├── FormStep.md
│ │ │ │ ├── FormStep.zh-CN.md
│ │ │ │ ├── FormTab.md
│ │ │ │ ├── FormTab.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ ├── index.zh-CN.md
│ │ │ │ ├── Input.md
│ │ │ │ ├── Input.zh-CN.md
│ │ │ │ ├── NumberPicker.md
│ │ │ │ ├── NumberPicker.zh-CN.md
│ │ │ │ ├── Password.md
│ │ │ │ ├── Password.zh-CN.md
│ │ │ │ ├── PreviewText.md
│ │ │ │ ├── PreviewText.zh-CN.md
│ │ │ │ ├── Radio.md
│ │ │ │ ├── Radio.zh-CN.md
│ │ │ │ ├── Reset.md
│ │ │ │ ├── Reset.zh-CN.md
│ │ │ │ ├── Select.md
│ │ │ │ ├── Select.zh-CN.md
│ │ │ │ ├── SelectTable.md
│ │ │ │ ├── SelectTable.zh-CN.md
│ │ │ │ ├── Space.md
│ │ │ │ ├── Space.zh-CN.md
│ │ │ │ ├── Submit.md
│ │ │ │ ├── Submit.zh-CN.md
│ │ │ │ ├── Switch.md
│ │ │ │ ├── Switch.zh-CN.md
│ │ │ │ ├── TimePicker.md
│ │ │ │ ├── TimePicker.zh-CN.md
│ │ │ │ ├── TimePicker2.md
│ │ │ │ ├── TimePicker2.zh-CN.md
│ │ │ │ ├── Transfer.md
│ │ │ │ ├── Transfer.zh-CN.md
│ │ │ │ ├── TreeSelect.md
│ │ │ │ ├── TreeSelect.zh-CN.md
│ │ │ │ ├── Upload.md
│ │ │ │ └── Upload.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LESENCE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __builtins__
│ │ │ │ ├── empty.tsx
│ │ │ │ ├── hooks
│ │ │ │ │ ├── index.ts
│ │ │ │ │ ├── useClickAway.ts
│ │ │ │ │ └── usePrefixCls.ts
│ │ │ │ ├── icons.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── loading.ts
│ │ │ │ ├── mapSize.ts
│ │ │ │ ├── mapStatus.ts
│ │ │ │ ├── moment.ts
│ │ │ │ ├── pickDataProps.ts
│ │ │ │ ├── portal.tsx
│ │ │ │ ├── render.ts
│ │ │ │ └── toArray.ts
│ │ │ ├── array-base
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-cards
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-items
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── array-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── cascader
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── checkbox
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── date-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── date-picker2
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── editable
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-button-group
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-collapse
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-dialog
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-drawer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-grid
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-item
│ │ │ │ ├── animation.scss
│ │ │ │ ├── grid.scss
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ ├── scss
│ │ │ │ │ └── variable.scss
│ │ │ │ └── style.ts
│ │ │ ├── form-layout
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ ├── style.ts
│ │ │ │ └── useResponsiveFormLayout.ts
│ │ │ ├── form-step
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── form-tab
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── index.ts
│ │ │ ├── input
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── main.scss
│ │ │ ├── number-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── password
│ │ │ │ ├── index.tsx
│ │ │ │ ├── PasswordStrength.tsx
│ │ │ │ └── style.ts
│ │ │ ├── preview-text
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── radio
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── reset
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── select-table
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ ├── style.ts
│ │ │ │ ├── useCheckSlackly.tsx
│ │ │ │ ├── useFilterOptions.tsx
│ │ │ │ ├── useFlatOptions.tsx
│ │ │ │ ├── useSize.tsx
│ │ │ │ ├── useTitleAddon.tsx
│ │ │ │ └── utils.ts
│ │ │ ├── space
│ │ │ │ ├── index.tsx
│ │ │ │ ├── main.scss
│ │ │ │ └── style.ts
│ │ │ ├── style.ts
│ │ │ ├── submit
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── switch
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── time-picker
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── time-picker2
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── transfer
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ ├── tree-select
│ │ │ │ ├── index.tsx
│ │ │ │ └── style.ts
│ │ │ └── upload
│ │ │ ├── index.tsx
│ │ │ ├── main.scss
│ │ │ ├── placeholder.ts
│ │ │ └── style.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── path
│ │ ├── .npmignore
│ │ ├── benchmark.ts
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── accessor.spec.ts
│ │ │ │ ├── basic.spec.ts
│ │ │ │ ├── match.spec.ts
│ │ │ │ ├── parser.spec.ts
│ │ │ │ └── share.spec.ts
│ │ │ ├── contexts.ts
│ │ │ ├── destructor.ts
│ │ │ ├── index.ts
│ │ │ ├── matcher.ts
│ │ │ ├── parser.ts
│ │ │ ├── shared.ts
│ │ │ ├── tokenizer.ts
│ │ │ ├── tokens.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── react
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── docs
│ │ │ ├── api
│ │ │ │ ├── components
│ │ │ │ │ ├── ArrayField.md
│ │ │ │ │ ├── ArrayField.zh-CN.md
│ │ │ │ │ ├── ExpressionScope.md
│ │ │ │ │ ├── ExpressionScope.zh-CN.md
│ │ │ │ │ ├── Field.md
│ │ │ │ │ ├── Field.zh-CN.md
│ │ │ │ │ ├── FormConsumer.md
│ │ │ │ │ ├── FormConsumer.zh-CN.md
│ │ │ │ │ ├── FormProvider.md
│ │ │ │ │ ├── FormProvider.zh-CN.md
│ │ │ │ │ ├── ObjectField.md
│ │ │ │ │ ├── ObjectField.zh-CN.md
│ │ │ │ │ ├── RecordScope.md
│ │ │ │ │ ├── RecordScope.zh-CN.md
│ │ │ │ │ ├── RecordsScope.md
│ │ │ │ │ ├── RecordsScope.zh-CN.md
│ │ │ │ │ ├── RecursionField.md
│ │ │ │ │ ├── RecursionField.zh-CN.md
│ │ │ │ │ ├── SchemaField.md
│ │ │ │ │ ├── SchemaField.zh-CN.md
│ │ │ │ │ ├── VoidField.md
│ │ │ │ │ └── VoidField.zh-CN.md
│ │ │ │ ├── hooks
│ │ │ │ │ ├── useExpressionScope.md
│ │ │ │ │ ├── useExpressionScope.zh-CN.md
│ │ │ │ │ ├── useField.md
│ │ │ │ │ ├── useField.zh-CN.md
│ │ │ │ │ ├── useFieldSchema.md
│ │ │ │ │ ├── useFieldSchema.zh-CN.md
│ │ │ │ │ ├── useForm.md
│ │ │ │ │ ├── useForm.zh-CN.md
│ │ │ │ │ ├── useFormEffects.md
│ │ │ │ │ ├── useFormEffects.zh-CN.md
│ │ │ │ │ ├── useParentForm.md
│ │ │ │ │ └── useParentForm.zh-CN.md
│ │ │ │ └── shared
│ │ │ │ ├── connect.md
│ │ │ │ ├── connect.zh-CN.md
│ │ │ │ ├── context.md
│ │ │ │ ├── context.zh-CN.md
│ │ │ │ ├── mapProps.md
│ │ │ │ ├── mapProps.zh-CN.md
│ │ │ │ ├── mapReadPretty.md
│ │ │ │ ├── mapReadPretty.zh-CN.md
│ │ │ │ ├── observer.md
│ │ │ │ ├── observer.zh-CN.md
│ │ │ │ ├── Schema.md
│ │ │ │ └── Schema.zh-CN.md
│ │ │ ├── guide
│ │ │ │ ├── architecture.md
│ │ │ │ ├── architecture.zh-CN.md
│ │ │ │ ├── concept.md
│ │ │ │ ├── concept.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ └── index.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── expression.spec.tsx
│ │ │ │ ├── field.spec.tsx
│ │ │ │ ├── form.spec.tsx
│ │ │ │ ├── schema.json.spec.tsx
│ │ │ │ ├── schema.markup.spec.tsx
│ │ │ │ └── shared.tsx
│ │ │ ├── components
│ │ │ │ ├── ArrayField.tsx
│ │ │ │ ├── ExpressionScope.tsx
│ │ │ │ ├── Field.tsx
│ │ │ │ ├── FormConsumer.tsx
│ │ │ │ ├── FormProvider.tsx
│ │ │ │ ├── index.ts
│ │ │ │ ├── ObjectField.tsx
│ │ │ │ ├── ReactiveField.tsx
│ │ │ │ ├── RecordScope.tsx
│ │ │ │ ├── RecordsScope.tsx
│ │ │ │ ├── RecursionField.tsx
│ │ │ │ ├── SchemaField.tsx
│ │ │ │ └── VoidField.tsx
│ │ │ ├── global.d.ts
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ ├── useAttach.ts
│ │ │ │ ├── useExpressionScope.ts
│ │ │ │ ├── useField.ts
│ │ │ │ ├── useFieldSchema.ts
│ │ │ │ ├── useForm.ts
│ │ │ │ ├── useFormEffects.ts
│ │ │ │ └── useParentForm.ts
│ │ │ ├── index.ts
│ │ │ ├── shared
│ │ │ │ ├── connect.ts
│ │ │ │ ├── context.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── render.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── reactive
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── benchmark.ts
│ │ ├── docs
│ │ │ ├── api
│ │ │ │ ├── action.md
│ │ │ │ ├── action.zh-CN.md
│ │ │ │ ├── autorun.md
│ │ │ │ ├── autorun.zh-CN.md
│ │ │ │ ├── batch.md
│ │ │ │ ├── batch.zh-CN.md
│ │ │ │ ├── define.md
│ │ │ │ ├── define.zh-CN.md
│ │ │ │ ├── hasCollected.md
│ │ │ │ ├── hasCollected.zh-CN.md
│ │ │ │ ├── markObservable.md
│ │ │ │ ├── markObservable.zh-CN.md
│ │ │ │ ├── markRaw.md
│ │ │ │ ├── markRaw.zh-CN.md
│ │ │ │ ├── model.md
│ │ │ │ ├── model.zh-CN.md
│ │ │ │ ├── observable.md
│ │ │ │ ├── observable.zh-CN.md
│ │ │ │ ├── observe.md
│ │ │ │ ├── observe.zh-CN.md
│ │ │ │ ├── raw.md
│ │ │ │ ├── raw.zh-CN.md
│ │ │ │ ├── react
│ │ │ │ │ ├── observer.md
│ │ │ │ │ └── observer.zh-CN.md
│ │ │ │ ├── reaction.md
│ │ │ │ ├── reaction.zh-CN.md
│ │ │ │ ├── toJS.md
│ │ │ │ ├── toJS.zh-CN.md
│ │ │ │ ├── tracker.md
│ │ │ │ ├── tracker.zh-CN.md
│ │ │ │ ├── typeChecker.md
│ │ │ │ ├── typeChecker.zh-CN.md
│ │ │ │ ├── untracked.md
│ │ │ │ ├── untracked.zh-CN.md
│ │ │ │ └── vue
│ │ │ │ ├── observer.md
│ │ │ │ └── observer.zh-CN.md
│ │ │ ├── guide
│ │ │ │ ├── best-practice.md
│ │ │ │ ├── best-practice.zh-CN.md
│ │ │ │ ├── concept.md
│ │ │ │ ├── concept.zh-CN.md
│ │ │ │ ├── index.md
│ │ │ │ └── index.zh-CN.md
│ │ │ ├── index.md
│ │ │ └── index.zh-CN.md
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── action.spec.ts
│ │ │ │ ├── annotations.spec.ts
│ │ │ │ ├── array.spec.ts
│ │ │ │ ├── autorun.spec.ts
│ │ │ │ ├── batch.spec.ts
│ │ │ │ ├── collections-map.spec.ts
│ │ │ │ ├── collections-set.spec.ts
│ │ │ │ ├── collections-weakmap.spec.ts
│ │ │ │ ├── collections-weakset.spec.ts
│ │ │ │ ├── define.spec.ts
│ │ │ │ ├── externals.spec.ts
│ │ │ │ ├── hasCollected.spec.ts
│ │ │ │ ├── observable.spec.ts
│ │ │ │ ├── observe.spec.ts
│ │ │ │ ├── tracker.spec.ts
│ │ │ │ └── untracked.spec.ts
│ │ │ ├── action.ts
│ │ │ ├── annotations
│ │ │ │ ├── box.ts
│ │ │ │ ├── computed.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── observable.ts
│ │ │ │ ├── ref.ts
│ │ │ │ └── shallow.ts
│ │ │ ├── array.ts
│ │ │ ├── autorun.ts
│ │ │ ├── batch.ts
│ │ │ ├── checkers.ts
│ │ │ ├── environment.ts
│ │ │ ├── externals.ts
│ │ │ ├── global.d.ts
│ │ │ ├── handlers.ts
│ │ │ ├── index.ts
│ │ │ ├── internals.ts
│ │ │ ├── model.ts
│ │ │ ├── observable.ts
│ │ │ ├── observe.ts
│ │ │ ├── reaction.ts
│ │ │ ├── tracker.ts
│ │ │ ├── tree.ts
│ │ │ ├── types.ts
│ │ │ └── untracked.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── reactive-react
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ ├── useCompatEffect.ts
│ │ │ │ ├── useCompatFactory.ts
│ │ │ │ ├── useDidUpdate.ts
│ │ │ │ ├── useForceUpdate.ts
│ │ │ │ ├── useLayoutEffect.ts
│ │ │ │ └── useObserver.ts
│ │ │ ├── index.ts
│ │ │ ├── observer.ts
│ │ │ ├── shared
│ │ │ │ ├── gc.ts
│ │ │ │ ├── global.ts
│ │ │ │ ├── immediate.ts
│ │ │ │ └── index.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── reactive-test-cases-for-react18
│ │ ├── .npmignore
│ │ ├── .umirc.js
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── src
│ │ │ ├── index.js
│ │ │ └── MySlowList.js
│ │ ├── template.ejs
│ │ ├── tsconfig.build.json
│ │ ├── tsconfig.json
│ │ ├── webpack.base.ts
│ │ ├── webpack.dev.ts
│ │ └── webpack.prod.ts
│ ├── reactive-vue
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ └── observer.spec.ts
│ │ │ ├── hooks
│ │ │ │ ├── index.ts
│ │ │ │ └── useObserver.ts
│ │ │ ├── index.ts
│ │ │ ├── observer
│ │ │ │ ├── collectData.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── observerInVue2.ts
│ │ │ │ └── observerInVue3.ts
│ │ │ └── types.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── shared
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ └── index.spec.ts
│ │ │ ├── array.ts
│ │ │ ├── case.ts
│ │ │ ├── checkers.ts
│ │ │ ├── clone.ts
│ │ │ ├── compare.ts
│ │ │ ├── defaults.ts
│ │ │ ├── deprecate.ts
│ │ │ ├── global.ts
│ │ │ ├── index.ts
│ │ │ ├── instanceof.ts
│ │ │ ├── isEmpty.ts
│ │ │ ├── merge.ts
│ │ │ ├── middleware.ts
│ │ │ ├── path.ts
│ │ │ ├── string.ts
│ │ │ ├── subscribable.ts
│ │ │ └── uid.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ ├── validator
│ │ ├── .npmignore
│ │ ├── LICENSE.md
│ │ ├── package.json
│ │ ├── README.md
│ │ ├── rollup.config.js
│ │ ├── src
│ │ │ ├── __tests__
│ │ │ │ ├── parser.spec.ts
│ │ │ │ ├── registry.spec.ts
│ │ │ │ └── validator.spec.ts
│ │ │ ├── formats.ts
│ │ │ ├── index.ts
│ │ │ ├── locale.ts
│ │ │ ├── parser.ts
│ │ │ ├── registry.ts
│ │ │ ├── rules.ts
│ │ │ ├── template.ts
│ │ │ ├── types.ts
│ │ │ └── validator.ts
│ │ ├── tsconfig.build.json
│ │ └── tsconfig.json
│ └── vue
│ ├── .npmignore
│ ├── bin
│ │ ├── formily-vue-fix.js
│ │ └── formily-vue-switch.js
│ ├── docs
│ │ ├── .vuepress
│ │ │ ├── components
│ │ │ │ ├── createCodeSandBox.js
│ │ │ │ ├── dumi-previewer.vue
│ │ │ │ └── highlight.js
│ │ │ ├── config.js
│ │ │ ├── enhanceApp.js
│ │ │ └── styles
│ │ │ └── index.styl
│ │ ├── api
│ │ │ ├── components
│ │ │ │ ├── array-field.md
│ │ │ │ ├── expression-scope.md
│ │ │ │ ├── field.md
│ │ │ │ ├── form-consumer.md
│ │ │ │ ├── form-provider.md
│ │ │ │ ├── object-field.md
│ │ │ │ ├── recursion-field-with-component.md
│ │ │ │ ├── recursion-field.md
│ │ │ │ ├── schema-field-with-schema.md
│ │ │ │ ├── schema-field.md
│ │ │ │ └── void-field.md
│ │ │ ├── hooks
│ │ │ │ ├── use-field-schema.md
│ │ │ │ ├── use-field.md
│ │ │ │ ├── use-form-effects.md
│ │ │ │ ├── use-form.md
│ │ │ │ └── use-parent-form.md
│ │ │ └── shared
│ │ │ ├── connect.md
│ │ │ ├── injections.md
│ │ │ ├── map-props.md
│ │ │ ├── map-read-pretty.md
│ │ │ ├── observer.md
│ │ │ └── schema.md
│ │ ├── demos
│ │ │ ├── api
│ │ │ │ ├── components
│ │ │ │ │ ├── array-field.vue
│ │ │ │ │ ├── expression-scope.vue
│ │ │ │ │ ├── field.vue
│ │ │ │ │ ├── form-consumer.vue
│ │ │ │ │ ├── form-provider.vue
│ │ │ │ │ ├── object-field.vue
│ │ │ │ │ ├── recursion-field-with-component.vue
│ │ │ │ │ ├── recursion-field.vue
│ │ │ │ │ ├── schema-field-with-schema.vue
│ │ │ │ │ ├── schema-field.vue
│ │ │ │ │ └── void-field.vue
│ │ │ │ ├── hooks
│ │ │ │ │ ├── use-field-schema.vue
│ │ │ │ │ ├── use-field.vue
│ │ │ │ │ ├── use-form-effects.vue
│ │ │ │ │ ├── use-form.vue
│ │ │ │ │ └── use-parent-form.vue
│ │ │ │ └── shared
│ │ │ │ ├── connect.vue
│ │ │ │ ├── map-props.vue
│ │ │ │ ├── map-read-pretty.vue
│ │ │ │ └── observer.vue
│ │ │ ├── index.vue
│ │ │ └── questions
│ │ │ ├── default-slot.vue
│ │ │ ├── events.vue
│ │ │ ├── named-slot.vue
│ │ │ └── scoped-slot.vue
│ │ ├── guide
│ │ │ ├── architecture.md
│ │ │ ├── concept.md
│ │ │ └── README.md
│ │ ├── questions
│ │ │ └── README.md
│ │ └── README.md
│ ├── package.json
│ ├── README.md
│ ├── rollup.config.js
│ ├── scripts
│ │ ├── postinstall.js
│ │ ├── switch-cli.js
│ │ └── utils.js
│ ├── src
│ │ ├── __tests__
│ │ │ ├── expression.scope.spec.ts
│ │ │ ├── field.spec.ts
│ │ │ ├── form.spec.ts
│ │ │ ├── schema.json.spec.ts
│ │ │ ├── schema.markup.spec.ts
│ │ │ ├── shared.spec.ts
│ │ │ └── utils.spec.ts
│ │ ├── components
│ │ │ ├── ArrayField.ts
│ │ │ ├── ExpressionScope.ts
│ │ │ ├── Field.ts
│ │ │ ├── FormConsumer.ts
│ │ │ ├── FormProvider.ts
│ │ │ ├── index.ts
│ │ │ ├── ObjectField.ts
│ │ │ ├── ReactiveField.ts
│ │ │ ├── RecursionField.ts
│ │ │ ├── SchemaField.ts
│ │ │ └── VoidField.ts
│ │ ├── global.d.ts
│ │ ├── hooks
│ │ │ ├── index.ts
│ │ │ ├── useAttach.ts
│ │ │ ├── useField.ts
│ │ │ ├── useFieldSchema.ts
│ │ │ ├── useForm.ts
│ │ │ ├── useFormEffects.ts
│ │ │ ├── useInjectionCleaner.ts
│ │ │ └── useParentForm.ts
│ │ ├── index.ts
│ │ ├── shared
│ │ │ ├── connect.ts
│ │ │ ├── context.ts
│ │ │ ├── createForm.ts
│ │ │ ├── fragment.ts
│ │ │ ├── h.ts
│ │ │ └── index.ts
│ │ ├── types
│ │ │ └── index.ts
│ │ ├── utils
│ │ │ ├── formatVNodeData.ts
│ │ │ ├── getFieldProps.ts
│ │ │ ├── getRawComponent.ts
│ │ │ └── resolveSchemaProps.ts
│ │ └── vue2-components.ts
│ ├── tsconfig.build.json
│ ├── tsconfig.json
│ └── tsconfig.types.json
├── README.md
├── README.zh-cn.md
├── scripts
│ ├── build-style
│ │ ├── buildAllStyles.ts
│ │ ├── copy.ts
│ │ ├── helper.ts
│ │ └── index.ts
│ └── rollup.base.js
├── tsconfig.build.json
├── tsconfig.jest.json
├── tsconfig.json
└── yarn.lock
```
# Files
--------------------------------------------------------------------------------
/packages/next/docs/components/ArrayItems.zh-CN.md:
--------------------------------------------------------------------------------
```markdown
# ArrayItems
> 自增列表，对于简单的自增编辑场景比较适合，或者对于空间要求高的场景比较适合
>
> 注意：该组件只适用于 Schema 场景
## Markup Schema 案例
```tsx
import React from 'react'
import {
FormItem,
Input,
Editable,
Select,
DatePicker,
ArrayItems,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
DatePicker,
Editable,
Space,
Input,
Select,
ArrayItems,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="string_array"
title="字符串数组"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="FormItem"
required
name="input"
x-component="Input"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Copy"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayItems.Addition"
x-component-props={{ method: 'unshift' }}
title="添加条目"
/>
</SchemaField.Array>
<SchemaField.Array
name="array"
title="对象数组"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Object>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="FormItem"
required
title="日期"
name="date"
x-component="DatePicker.RangePicker"
x-component-props={{
style: {
width: 160,
},
}}
/>
<SchemaField.String
x-decorator="FormItem"
required
title="输入框"
name="input"
x-component="Input"
/>
<SchemaField.String
x-decorator="FormItem"
required
title="选择框"
name="select"
enum={[
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
]}
x-component="Select"
x-component-props={{
style: {
width: 160,
},
}}
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
<SchemaField.Array
name="array2"
title="对象数组"
x-decorator="FormItem"
x-component="ArrayItems"
x-component-props={{ style: { width: 300 } }}
>
<SchemaField.Object x-decorator="ArrayItems.Item">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="Editable"
title="输入框"
name="input"
x-component="Input"
/>
<SchemaField.Object
name="config"
x-component="Editable.Popover"
required
title="配置复杂数据"
x-reactions={(field) =>
(field.title = field.value?.input || field.title)
}
>
<SchemaField.String
x-decorator="FormItem"
required
title="日期"
name="date"
x-component="DatePicker.RangePicker"
x-component-props={{
style: { width: '100%' },
followTrigger: true,
}}
/>
<SchemaField.String
x-decorator="FormItem"
required
title="输入框"
name="input"
x-component="Input"
/>
</SchemaField.Object>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema 案例
```tsx
import React from 'react'
import {
FormItem,
Editable,
Input,
Select,
Radio,
DatePicker,
ArrayItems,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
Editable,
DatePicker,
Space,
Radio,
Input,
Select,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
string_array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
title: '字符串数组',
items: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
title: '对象数组',
items: {
type: 'object',
properties: {
space: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
date: {
type: 'string',
title: '日期',
'x-decorator': 'FormItem',
'x-component': 'DatePicker.RangePicker',
'x-component-props': {
style: {
width: 160,
},
},
},
input: {
type: 'string',
title: '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
type: 'string',
title: '下拉框',
enum: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 160,
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
properties: {
add: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
array2: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'x-component-props': { style: { width: 300 } },
title: '对象数组',
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
title: '输入框',
'x-decorator': 'Editable',
'x-component': 'Input',
},
config: {
type: 'object',
title: '配置复杂数据',
'x-component': 'Editable.Popover',
'x-reactions':
'{{(field)=>field.title = field.value && field.value.input || field.title}}',
properties: {
date: {
type: 'string',
title: '日期',
'x-decorator': 'FormItem',
'x-component': 'DatePicker.RangePicker',
'x-component-props': {
style: {
width: 160,
},
followTrigger: true,
},
},
input: {
type: 'string',
title: '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
type: 'string',
title: '下拉框',
enum: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 160,
},
},
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## Effects 联动案例
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayItems,
Editable,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm, onFieldChange, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
Space,
Editable,
FormItem,
Input,
ArrayItems,
},
})
const form = createForm({
effects: () => {
//主动联动模式
onFieldChange('array.*.aa', ['value'], (field, form) => {
form.setFieldState(field.query('.bb'), (state) => {
state.visible = field.value != '123'
})
})
//被动联动模式
onFieldReact('array.*.dd', (field) => {
field.visible = field.query('.cc').get('value') != '123'
})
},
})
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="array"
title="对象数组"
maxItems={3}
x-decorator="FormItem"
x-component="ArrayItems"
x-component-props={{
style: {
width: 300,
},
}}
>
<SchemaField.Object x-decorator="ArrayItems.Item">
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Index"
/>
</SchemaField.Void>
<SchemaField.Void x-component="Editable.Popover" title="配置数据">
<SchemaField.String
name="aa"
x-decorator="FormItem"
title="AA"
required
description="AA输入123时隐藏BB"
x-component="Input"
/>
<SchemaField.String
name="bb"
x-decorator="FormItem"
title="BB"
required
x-component="Input"
/>
<SchemaField.String
name="cc"
x-decorator="FormItem"
title="CC"
required
description="CC输入123时隐藏DD"
x-component="Input"
/>
<SchemaField.String
name="dd"
x-decorator="FormItem"
title="DD"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.MoveUp"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.MoveDown"
/>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema 联动案例
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayItems,
Editable,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
Space,
Editable,
FormItem,
Input,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
maxItems: 3,
title: '对象数组',
'x-component-props': { style: { width: 300 } },
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
properties: {
left: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
index: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Index',
},
},
},
edit: {
type: 'void',
'x-component': 'Editable.Popover',
title: '配置数据',
properties: {
aa: {
type: 'string',
'x-decorator': 'FormItem',
title: 'AA',
required: true,
'x-component': 'Input',
description: '输入123',
},
bb: {
type: 'string',
title: 'BB',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-reactions': [
{
dependencies: ['.aa'],
when: "{{$deps[0] != '123'}}",
fulfill: {
schema: {
title: 'BB',
'x-disabled': true,
},
},
otherwise: {
schema: {
title: 'Changed',
'x-disabled': false,
},
},
},
],
},
},
},
right: {
type: 'void',
'x-component': 'Space',
properties: {
remove: {
type: 'void',
'x-component': 'ArrayItems.Remove',
},
moveUp: {
type: 'void',
'x-component': 'ArrayItems.MoveUp',
},
moveDown: {
type: 'void',
'x-component': 'ArrayItems.MoveDown',
},
},
},
},
},
properties: {
addition: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## API
### ArrayItems
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ---------- | ------------------------- | ------------ | ------ |
| onAdd | `(index: number) => void` | 增加方法 | |
| onRemove | `(index: number) => void` | 删除方法 | |
| onCopy | `(index: number) => void` | 复制方法 | |
| onMoveUp | `(index: number) => void` | 向上移动方法 | |
| onMoveDown | `(index: number) => void` | 向下移动方法 | |
其余继承 HTMLDivElement Props
### ArrayItems.Item
> 列表区块
继承 HTMLDivElement Props
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | -------------------- | -------------- | ------ |
| type | `'card' \| 'divide'` | 卡片或者分割线 | |
### ArrayItems.SortHandle
> 拖拽手柄
参考 https://ant.design/components/icon-cn/
### ArrayItems.Addition
> 添加按钮
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ------------ | --------------------- | -------- | -------- |
| title | ReactText | 文案 | |
| method | `'push' \| 'unshift'` | 添加方式 | `'push'` |
| defaultValue | `any` | 默认值 | |
其余参考 https://fusion.design/pc/component/basic/button
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
### ArrayItems.Copy
> 复制按钮
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------------------- | -------- | -------- |
| title | ReactText | 文案 | |
| method | `'push' \| 'unshift'` | 添加方式 | `'push'` |
其余参考 https://fusion.design/pc/component/basic/button
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
### ArrayItems.Remove
> 删除按钮
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------- | ---- | ------ |
| title | ReactText | 文案 | |
其余参考 https://ant.design/components/icon-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
### ArrayItems.MoveDown
> 下移按钮
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------- | ---- | ------ |
| title | ReactText | 文案 | |
其余参考 https://ant.design/components/icon-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
### ArrayItems.MoveUp
> 上移按钮
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------- | ---- | ------ |
| title | ReactText | 文案 | |
其余参考 https://ant.design/components/icon-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
### ArrayItems.Index
> 索引渲染器
无属性
### ArrayItems.useIndex
> 读取当前渲染行索引的 React Hook
### ArrayItems.useRecord
> 读取当前渲染记录的 React Hook
```
--------------------------------------------------------------------------------
/packages/antd/docs/components/SelectTable.md:
--------------------------------------------------------------------------------
```markdown
# SelectTable
> Optional table components
## Markup Schema single case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Object
type="string"
name="selectTable"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
bordered: false,
mode: 'single',
}}
enum={[
{ key: '1', name: 'Title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</FormProvider>
)
}
```
## Markup Schema filter case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
type="array"
name="selectTable"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
bordered: false,
showSearch: true,
optionAsValue: true,
}}
enum={[
{ key: '1', name: 'Title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
>
<SchemaField.Object>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</FormProvider>
)
}
```
## Markup Schema async data source case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
const onSearch = (value) => {
const field = form.query('selectTable').take()
field.loading = true
setTimeout(() => {
field.setState({
dataSource: [
{
key: '3',
name: 'AAA' + value,
description: 'aaa',
},
{
key: '4',
name: 'BBB' + value,
description: 'bbb',
},
],
loading: false,
})
}, 1500)
}
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Object
type="object"
name="selectTable"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
showSearch: true,
filterOption: false,
onSearch,
}}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
]}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</FormProvider>
)
}
```
## Markup Schema read-pretty case
```tsx
import React from 'react'
import {
Form,
FormItem,
FormButtonGroup,
Submit,
SelectTable,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
return (
<Form form={form} layout="vertical">
<SchemaField>
<SchemaField.Object
title="single"
type="string"
name="selectTable1"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
mode: 'single',
}}
default="1"
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
x-read-pretty={true}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
<SchemaField.Object
title="single + optionAsValue"
type="string"
name="selectTable2"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
mode: 'single',
optionAsValue: true,
}}
default={{ key: '1', name: 'Title1', description: 'Description1' }}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
x-read-pretty={true}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
<SchemaField.Array
title="multiple"
type="array"
name="selectTable3"
x-decorator="FormItem"
x-component="SelectTable"
default={['1', '3']}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
{ key: '3', name: 'title-3', description: 'description-3' },
]}
x-read-pretty={true}
>
<SchemaField.Object>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField.Array>
<SchemaField.Array
title="multiple + optionAsValue"
type="array"
name="selectTable4"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
optionAsValue: true,
}}
default={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '3', name: 'title-3', description: 'description-3' },
]}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
{ key: '3', name: 'title-3', description: 'description-3' },
]}
x-read-pretty={true}
>
<SchemaField.Object>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</Form>
)
}
```
## JSON Schema multiple case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
SelectTable,
FormItem,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
selectTable: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'SelectTable',
'x-component-props': {
bordered: false,
mode: 'multiple',
},
enum: [
{ key: '1', name: 'Title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
],
properties: {
name: {
title: 'Title',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '40%',
},
},
description: {
title: 'Description',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '60%',
},
},
},
},
},
}
export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## JSON Schema custom filter case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
SelectTable,
FormItem,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
selectTable: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'SelectTable',
'x-component-props': {
bordered: false,
showSearch: true,
primaryKey: 'key',
isTree: true,
filterOption: (input, option) =>
option.description.toLowerCase().indexOf(input.toLowerCase()) >= 0,
filterSort: (optionA, optionB) =>
optionA.description
.toLowerCase()
.localeCompare(optionB.description.toLowerCase()),
optionAsValue: true,
rowSelection: {
checkStrictly: false,
},
},
enum: [
{ key: '1', name: 'title-1', description: 'A-description' },
{
key: '2',
name: 'title-2',
description: 'X-description',
children: [
{
key: '2-1',
name: 'title2-1',
description: 'Y-description',
children: [
{
key: '2-1-1',
name: 'title-2-1-1',
description: 'Z-description',
},
],
},
{
key: '2-2',
name: 'title2-2',
description: 'YY-description',
},
],
},
{ key: '3', name: 'title-3', description: 'C-description' },
],
properties: {
name: {
title: 'Title',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '40%',
},
},
description: {
title: 'Description',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '60%',
},
},
},
},
},
}
export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## JSON Schema async data source case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
SelectTable,
FormItem,
},
})
const loadData = async (value) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ key: '3', name: 'AAA' + value, description: 'aaa' },
{ key: '4', name: 'BBB' + value, description: 'bbb' },
])
}, 1500)
})
}
const useAsyncDataSource = (service, field) => (value) => {
field.loading = true
service(value).then((data) => {
field.setState({
dataSource: data,
loading: false,
})
})
}
const form = createForm()
const schema = {
type: 'object',
properties: {
selectTable: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'SelectTable',
'x-component-props': {
showSearch: true,
filterOption: false,
onSearch: '{{useAsyncDataSource(loadData,$self)}}',
},
enum: [
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
],
properties: {
name: {
title: 'Title',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '40%',
},
},
description: {
title: 'Description',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '60%',
},
},
},
},
},
}
export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} scope={{ useAsyncDataSource, loadData }} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## Pure JSX case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
const form = createForm()
export default () => (
<FormProvider form={form}>
<Field
name="SelectTable"
dataSource={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
]}
decorator={[FormItem]}
component={[
SelectTable,
{
columns: [
{ dataIndex: 'name', title: 'Title' },
{ dataIndex: 'description', title: 'Description' },
],
},
]}
/>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## API
### SelectTable
| Property name | Type | Description | Default value |
| ------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mode | `'multiple' \| 'single'` | Set mode of SelectTable | `'multiple'` |
| valueType | `'all' \| 'parent' \| 'child' \| 'path'` | value type, Only applies when checkStrictly is set to `false` | `'all'` |
| optionAsValue | boolean | use `option` as value, Only applies when valueType is not set to `'path'` | false |
| showSearch | boolean | show `Search` component | false |
| searchProps | object | `Search` component props | - |
| primaryKey | `string \| (record) => string` | Row's unique key | `'key'` |
| filterOption | `boolean \| (inputValue, option) => boolean` | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded |
| filterSort | (optionA, optionB) => number | Sort function for search options sorting, see Array.sort's compareFunction | - |
| onSearch | Callback function that is fired when input changed | (inputValue) => void | - |
`TableProps` type definition reference antd https://ant.design/components/table/
### rowSelection
| Property name | Type | Description | Default value |
| ------------- | ------- | -------------------------------------------------------------------------- | ------------- |
| checkStrictly | boolean | Check table row precisely; parent row and children rows are not associated | true |
`rowSelectionProps` type definition reference antd https://ant.design/components/table/#rowSelection
### SelectTable.Column
`ColumnProps` type definition reference antd https://ant.design/components/table/ Table.Column
```
--------------------------------------------------------------------------------
/packages/antd/docs/components/ArrayItems.zh-CN.md:
--------------------------------------------------------------------------------
```markdown
# ArrayItems
> 自增列表，对于简单的自增编辑场景比较适合，或者对于空间要求高的场景比较适合
>
> 注意：该组件只适用于 Schema 场景
## Markup Schema 案例
```tsx
import React from 'react'
import {
FormItem,
Input,
Editable,
Select,
DatePicker,
ArrayItems,
FormButtonGroup,
Submit,
Space,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
DatePicker,
Editable,
Space,
Input,
Select,
ArrayItems,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="string_array"
title="字符串数组"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="FormItem"
required
name="input"
x-component="Input"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Copy"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
<SchemaField.Array
name="array"
title="对象数组"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Object>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="FormItem"
required
title="日期"
name="date"
x-component="DatePicker.RangePicker"
x-component-props={{
style: {
width: 160,
},
}}
/>
<SchemaField.String
x-decorator="FormItem"
required
title="输入框"
name="input"
x-component="Input"
/>
<SchemaField.String
x-decorator="FormItem"
required
title="选择框"
name="select"
enum={[
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
]}
x-component="Select"
x-component-props={{
style: {
width: 160,
},
}}
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Copy"
/>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
<SchemaField.Array
name="array2"
title="对象数组"
x-decorator="FormItem"
x-component="ArrayItems"
x-component-props={{ style: { width: 300 } }}
>
<SchemaField.Object x-decorator="ArrayItems.Item">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="Editable"
title="输入框"
name="input"
x-component="Input"
x-component-props={{ bordered: false }}
/>
<SchemaField.Object
name="config"
x-component="Editable.Popover"
required
title="配置复杂数据"
x-reactions={(field) => {
field.title = field.value?.input || field.title
}}
>
<SchemaField.String
x-decorator="FormItem"
required
title="日期"
name="date"
x-component="DatePicker.RangePicker"
x-component-props={{ style: { width: '100%' } }}
/>
<SchemaField.String
x-decorator="FormItem"
required
title="输入框"
name="input"
x-component="Input"
/>
</SchemaField.Object>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema 案例
```tsx
import React from 'react'
import {
FormItem,
Editable,
Input,
Select,
Radio,
DatePicker,
ArrayItems,
FormButtonGroup,
Submit,
Space,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
Editable,
DatePicker,
Space,
Radio,
Input,
Select,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
string_array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
title: '字符串数组',
items: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
title: '对象数组',
items: {
type: 'object',
properties: {
space: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
date: {
type: 'string',
title: '日期',
'x-decorator': 'FormItem',
'x-component': 'DatePicker.RangePicker',
'x-component-props': {
style: {
width: 160,
},
},
},
input: {
type: 'string',
title: '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
type: 'string',
title: '下拉框',
enum: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 160,
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
properties: {
add: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
array2: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'x-component-props': { style: { width: 300 } },
title: '对象数组',
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
title: '输入框',
'x-decorator': 'Editable',
'x-component': 'Input',
'x-component-props': {
bordered: false,
},
},
config: {
type: 'object',
title: '配置复杂数据',
'x-component': 'Editable.Popover',
'x-reactions':
'{{(field)=>field.title = field.value && field.value.input || field.title}}',
properties: {
date: {
type: 'string',
title: '日期',
'x-decorator': 'FormItem',
'x-component': 'DatePicker.RangePicker',
'x-component-props': {
style: {
width: 160,
},
},
},
input: {
type: 'string',
title: '输入框',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
type: 'string',
title: '下拉框',
enum: [
{ label: '选项1', value: 1 },
{ label: '选项2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 160,
},
},
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## Effects 联动案例
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayItems,
Editable,
FormButtonGroup,
Submit,
Space,
} from '@formily/antd'
import { createForm, onFieldChange, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
Space,
Editable,
FormItem,
Input,
ArrayItems,
},
})
const form = createForm({
effects: () => {
//主动联动模式
onFieldChange('array.*.aa', ['value'], (field, form) => {
form.setFieldState(field.query('.bb'), (state) => {
state.visible = field.value != '123'
})
})
//被动联动模式
onFieldReact('array.*.dd', (field) => {
field.visible = field.query('.cc').get('value') != '123'
})
},
})
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="array"
title="对象数组"
maxItems={3}
x-decorator="FormItem"
x-component="ArrayItems"
x-component-props={{
style: {
width: 300,
},
}}
>
<SchemaField.Object x-decorator="ArrayItems.Item">
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Index"
/>
</SchemaField.Void>
<SchemaField.Void x-component="Editable.Popover" title="配置数据">
<SchemaField.String
name="aa"
x-decorator="FormItem"
title="AA"
required
description="AA输入123时隐藏BB"
x-component="Input"
/>
<SchemaField.String
name="bb"
x-decorator="FormItem"
title="BB"
required
x-component="Input"
/>
<SchemaField.String
name="cc"
x-decorator="FormItem"
title="CC"
required
description="CC输入123时隐藏DD"
x-component="Input"
/>
<SchemaField.String
name="dd"
x-decorator="FormItem"
title="DD"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.MoveUp"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.MoveDown"
/>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="添加条目"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema 联动案例
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayItems,
Editable,
FormButtonGroup,
Submit,
Space,
} from '@formily/antd'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
Space,
Editable,
FormItem,
Input,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
maxItems: 3,
title: '对象数组',
'x-component-props': { style: { width: 300 } },
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
properties: {
left: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
index: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Index',
},
},
},
edit: {
type: 'void',
'x-component': 'Editable.Popover',
title: '配置数据',
properties: {
aa: {
type: 'string',
'x-decorator': 'FormItem',
title: 'AA',
required: true,
'x-component': 'Input',
description: '输入123',
},
bb: {
type: 'string',
title: 'BB',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-reactions': [
{
dependencies: ['.aa'],
when: "{{$deps[0] != '123'}}",
fulfill: {
schema: {
title: 'BB',
'x-disabled': true,
},
},
otherwise: {
schema: {
title: 'Changed',
'x-disabled': false,
},
},
},
],
},
},
},
right: {
type: 'void',
'x-component': 'Space',
properties: {
remove: {
type: 'void',
'x-component': 'ArrayItems.Remove',
},
moveUp: {
type: 'void',
'x-component': 'ArrayItems.MoveUp',
},
moveDown: {
type: 'void',
'x-component': 'ArrayItems.MoveDown',
},
},
},
},
},
properties: {
addition: {
type: 'void',
title: '添加条目',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>提交</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## API
### ArrayItems
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ---------- | ------------------------- | ------------ | ------ |
| onAdd | `(index: number) => void` | 增加方法 | |
| onRemove | `(index: number) => void` | 删除方法 | |
| onCopy | `(index: number) => void` | 复制方法 | |
| onMoveUp | `(index: number) => void` | 向上移动方法 | |
| onMoveDown | `(index: number) => void` | 向下移动方法 | |
其余继承 HTMLDivElement Props
### ArrayItems.Item
> 列表区块
继承 HTMLDivElement Props
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | -------------------- | -------------- | ------ |
| type | `'card' \| 'divide'` | 卡片或者分割线 | |
### ArrayItems.SortHandle
> 拖拽手柄
参考 https://ant.design/components/icon-cn/
### ArrayItems.Addition
> 添加按钮
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ------------ | --------------------- | -------- | -------- |
| title | ReactText | 文案 | |
| method | `'push' \| 'unshift'` | 添加方式 | `'push'` |
| defaultValue | `any` | 默认值 | |
其余参考 https://ant.design/components/button-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
### ArrayItems.Copy
> 复制按钮
扩展属性
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------------------- | -------- | -------- |
| title | ReactText | 文案 | |
| method | `'push' \| 'unshift'` | 添加方式 | `'push'` |
其余参考 https://ant.design/components/button-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
### ArrayItems.Remove
> 删除按钮
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------- | ---- | ------ |
| title | ReactText | 文案 | |
其余参考 https://ant.design/components/icon-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
### ArrayItems.MoveDown
> 下移按钮
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------- | ---- | ------ |
| title | ReactText | 文案 | |
其余参考 https://ant.design/components/icon-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
### ArrayItems.MoveUp
> 上移按钮
| 属性名 | 类型 | 描述 | 默认值 |
| ------ | --------- | ---- | ------ |
| title | ReactText | 文案 | |
其余参考 https://ant.design/components/icon-cn/
注意：title 属性可以接收 Field 模型中的 title 映射，也就是在 Field 上传 title 也是生效的
注意：使用`onClick={e => e.preventDefault()}`可禁用默认行为。
### ArrayItems.Index
> 索引渲染器
无属性
### ArrayItems.useIndex
> 读取当前渲染行索引的 React Hook
### ArrayItems.useRecord
> 读取当前渲染记录的 React Hook
```
--------------------------------------------------------------------------------
/packages/next/docs/components/SelectTable.md:
--------------------------------------------------------------------------------
```markdown
# SelectTable
> Optional table components
## Markup Schema single case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Object
type="string"
name="selectTable"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
mode: 'single',
}}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</FormProvider>
)
}
```
## Markup Schema filter case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
type="array"
name="selectTable"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
showSearch: true,
optionAsValue: true,
}}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
>
<SchemaField.Object>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</FormProvider>
)
}
```
## Markup Schema async data source case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
const onSearch = (value) => {
const field = form.query('selectTable').take()
field.loading = true
setTimeout(() => {
field.setState({
dataSource: [
{
key: '3',
name: 'AAA' + value,
description: 'aaa',
},
{
key: '4',
name: 'BBB' + value,
description: 'bbb',
},
],
loading: false,
})
}, 1500)
}
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Object
type="object"
name="selectTable"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
showSearch: true,
filterOption: false,
onSearch,
}}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
]}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</FormProvider>
)
}
```
## Markup Schema read-pretty case
```tsx
import React from 'react'
import {
Form,
FormItem,
FormButtonGroup,
Submit,
SelectTable,
} from '@formily/next'
import { createForm } from '@formily/core'
import { createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
SelectTable,
},
})
const form = createForm()
export default () => {
return (
<Form form={form} layout="vertical">
<SchemaField>
<SchemaField.Object
title="single"
type="string"
name="selectTable1"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
mode: 'single',
}}
default="1"
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
x-read-pretty={true}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
<SchemaField.Object
title="single + optionAsValue"
type="string"
name="selectTable2"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
mode: 'single',
optionAsValue: true,
}}
default={{ key: '1', name: 'Title1', description: 'Description1' }}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
]}
x-read-pretty={true}
>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
<SchemaField.Array
title="multiple"
type="array"
name="selectTable3"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
}}
default={['1', '3']}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
{ key: '3', name: 'title-3', description: 'description-3' },
]}
x-read-pretty={true}
>
<SchemaField.Object>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField.Array>
<SchemaField.Array
title="multiple + optionAsValue"
type="array"
name="selectTable4"
x-decorator="FormItem"
x-component="SelectTable"
x-component-props={{
hasBorder: false,
optionAsValue: true,
}}
default={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '3', name: 'title-3', description: 'description-3' },
]}
enum={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
{ key: '3', name: 'title-3', description: 'description-3' },
]}
x-read-pretty={true}
>
<SchemaField.Object>
<SchemaField.Void
name="name"
title="Title"
x-component="SelectTable.Column"
/>
<SchemaField.Void
name="description"
title="Description"
x-component="SelectTable.Column"
/>
</SchemaField.Object>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup.FormItem>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup.FormItem>
</Form>
)
}
```
## JSON Schema multiple case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
SelectTable,
FormItem,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
selectTable: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'SelectTable',
'x-component-props': {
hasBorder: false,
mode: 'multiple',
},
enum: [
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'Title-2', description: 'description-2' },
],
properties: {
name: {
title: 'Title',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '40%',
},
},
description: {
title: 'Description',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '60%',
},
},
},
},
},
}
export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## JSON Schema custom filter case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
SelectTable,
FormItem,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
selectTable: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'SelectTable',
'x-component-props': {
hasBorder: false,
showSearch: true,
primaryKey: 'key',
isTree: true,
filterOption: (input, option) =>
option.description.toLowerCase().indexOf(input.toLowerCase()) >= 0,
filterSort: (optionA, optionB) =>
optionA.description
.toLowerCase()
.localeCompare(optionB.description.toLowerCase()),
optionAsValue: true,
rowSelection: {
checkStrictly: false,
},
},
enum: [
{ key: '1', name: 'title-1', description: 'A-description' },
{
key: '2',
name: 'title-2',
description: 'X-description',
children: [
{
key: '2-1',
name: 'title2-1',
description: 'Y-description',
children: [
{
key: '2-1-1',
name: 'title-2-1-1',
description: 'Z-description',
},
],
},
{
key: '2-2',
name: 'title2-2',
description: 'YY-description',
},
],
},
{ key: '3', name: 'title-3', description: 'C-description' },
],
properties: {
name: {
title: 'Title',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '40%',
},
},
description: {
title: 'Description',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '60%',
},
},
},
},
},
}
export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## JSON Schema async data source case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
SelectTable,
FormItem,
},
})
const loadData = async (value) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ key: '3', name: 'AAA' + value, description: 'aaa' },
{ key: '4', name: 'BBB' + value, description: 'bbb' },
])
}, 1500)
})
}
const useAsyncDataSource = (service, field) => (value) => {
field.loading = true
service(value).then((data) => {
field.setState({
dataSource: data,
loading: false,
})
})
}
const form = createForm()
const schema = {
type: 'object',
properties: {
selectTable: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'SelectTable',
'x-component-props': {
hasBorder: false,
showSearch: true,
filterOption: false,
onSearch: '{{useAsyncDataSource(loadData,$self)}}',
},
enum: [
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
],
properties: {
name: {
title: 'Title',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '40%',
},
},
description: {
title: 'Description',
type: 'string',
'x-component': 'SelectTable.Column',
'x-component-props': {
width: '60%',
},
},
},
},
},
}
export default () => (
<FormProvider form={form}>
<SchemaField schema={schema} scope={{ useAsyncDataSource, loadData }} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## Pure JSX case
```tsx
import React from 'react'
import { FormItem, FormButtonGroup, Submit, SelectTable } from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, Field } from '@formily/react'
const form = createForm()
export default () => (
<FormProvider form={form}>
<Field
name="SelectTable"
dataSource={[
{ key: '1', name: 'title-1', description: 'description-1' },
{ key: '2', name: 'title-2', description: 'description-2' },
]}
decorator={[FormItem]}
component={[
SelectTable,
{
hasBorder: false,
columns: [
{ dataIndex: 'name', title: 'Title' },
{ dataIndex: 'description', title: 'Description' },
],
},
]}
/>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
```
## API
### SelectTable
| Property name | Type | Description | Default value |
| ------------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| mode | `'multiple' \| 'single'` | Set mode of SelectTable | `'multiple'` |
| valueType | `'all' \| 'parent' \| 'child' \| 'path'` | value type, Only applies when checkStrictly is set to `false` | `'all'` |
| optionAsValue | boolean | use `option` as value, Only applies when valueType is not set to `'path'` | false |
| showSearch | boolean | show `Search` component | false |
| searchProps | object | `Search` component props | - |
| primaryKey | `string \| (record) => string` | Row's unique key | `'key'` |
| filterOption | `boolean \| (inputValue, option) => boolean` | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded |
| filterSort | (optionA, optionB) => number | Sort function for search options sorting, see Array.sort's compareFunction | - |
| onSearch | Callback function that is fired when input changed | (inputValue) => void | - |
`TableProps` type definition reference fusion https://fusion.design/pc/component/basic/table
### rowSelection
| Property name | Type | Description | Default value |
| ------------- | ------- | -------------------------------------------------------------------------- | ------------- |
| checkStrictly | boolean | Check table row precisely; parent row and children rows are not associated | true |
`rowSelectionProps` type definition reference fusion https://fusion.design/pc/component/basic/table rowSelection
### SelectTable.Column
`ColumnProps` type definition reference fusion https://fusion.design/pc/component/basic/table Table.Column
```
--------------------------------------------------------------------------------
/packages/next/docs/components/ArrayTable.md:
--------------------------------------------------------------------------------
```markdown
# ArrayTable
> Self-increasing table, it is more suitable to use this component for scenes with a large amount of data. Although the amount of data is large to a certain extent, it will be a little bit stuck, but it will not affect the basic operation
>
> Note: This component is only applicable to Schema scenarios and can only be an array of objects
## Markup Schema example
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayTable,
Editable,
FormButtonGroup,
Submit,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Button, Message } from '@alifd/next'
const SchemaField = createSchemaField({
components: {
FormItem,
Editable,
Input,
ArrayTable,
},
})
const form = createForm()
const range = (count: number) =>
Array.from(new Array(count)).map((_, key) => ({
aaa: key,
}))
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="array"
x-decorator="FormItem"
x-component="ArrayTable"
x-component-props={{
pagination: { pageSize: 10 },
style: { width: '100%' },
}}
>
<SchemaField.Object>
<SchemaField.Void
x-component="ArrayTable.Column"
x-component-props={{ width: 80, title: 'Sort', align: 'center' }}
>
<SchemaField.Void
x-decorator="FormItem"
required
x-component="ArrayTable.SortHandle"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
x-component-props={{
width: 120,
title: 'Index',
align: 'center',
}}
>
<SchemaField.Void
x-decorator="FormItem"
required
x-component="ArrayTable.Index"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
x-component-props={{ title: 'A1', dataIndex: 'a1', width: 200 }}
>
<SchemaField.String
name="a1"
x-decorator="Editable"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
x-component-props={{ title: 'A2', width: 200 }}
>
<SchemaField.String
x-decorator="FormItem"
name="a2"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
x-component-props={{ title: 'A3', width: 200 }}
>
<SchemaField.String
x-decorator="FormItem"
name="a3"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
x-component-props={{
title: 'Operations',
dataIndex: 'operations',
width: 200,
fixed: 'right',
}}
>
<SchemaField.Void x-component="FormItem">
<SchemaField.Void x-component="ArrayTable.Remove" />
<SchemaField.Void x-component="ArrayTable.MoveDown" />
<SchemaField.Void x-component="ArrayTable.MoveUp" />
</SchemaField.Void>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayTable.Addition"
title="Add entry"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
<Button
onClick={() => {
form.setInitialValues({
array: range(100000),
})
}}
>
Load 10W pieces of large data
</Button>
</FormButtonGroup>
<Message style={{ marginTop: 10 }} type="warning">
Note: Open the formily plug-in page, because there is data communication
in the background, which will occupy the browser's computing power, it
is best to test in the incognito mode (without the formily plug-in)
</Message>
</FormProvider>
)
}
```
## JSON Schema case
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayTable,
Editable,
FormButtonGroup,
Submit,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
Editable,
Input,
ArrayTable,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
array: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
'x-component-props': {
pagination: { pageSize: 10 },
style: { width: '100%' },
},
items: {
type: 'object',
properties: {
column1: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 80, title: 'Sort', align: 'center' },
properties: {
sort: {
type: 'void',
'x-component': 'ArrayTable.SortHandle',
},
},
},
column2: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
width: 120,
title: 'Index',
align: 'center',
},
properties: {
index: {
type: 'void',
'x-component': 'ArrayTable.Index',
},
},
},
column3: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 200, title: 'A1' },
properties: {
a1: {
type: 'string',
'x-decorator': 'Editable',
'x-component': 'Input',
},
},
},
column4: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 200, title: 'A2' },
properties: {
a2: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
column5: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 200, title: 'A3' },
properties: {
a3: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
column6: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: 'Operations',
dataIndex: 'operations',
width: 200,
fixed: 'right',
},
properties: {
item: {
type: 'void',
'x-component': 'FormItem',
properties: {
remove: {
type: 'void',
'x-component': 'ArrayTable.Remove',
},
moveDown: {
type: 'void',
'x-component': 'ArrayTable.MoveDown',
},
moveUp: {
type: 'void',
'x-component': 'ArrayTable.MoveUp',
},
},
},
},
},
},
},
properties: {
add: {
type: 'void',
'x-component': 'ArrayTable.Addition',
title: 'Add entry',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## Effects linkage case
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayTable,
Switch,
FormButtonGroup,
Submit,
} from '@formily/next'
import { createForm, onFieldChange, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
import { Button } from '@alifd/next'
const SchemaField = createSchemaField({
components: {
FormItem,
Switch,
Input,
Button,
ArrayTable,
},
})
const form = createForm({
effects: () => {
//Active linkage mode
onFieldChange('hideFirstColumn', ['value'], (field) => {
field.query('array.column4').take((target) => {
target.visible = !field.value
})
field.query('array.*.a2').take((target) => {
target.visible = !field.value
})
})
//Passive linkage mode
onFieldReact('array.*.a2', (field) => {
field.visible = !field.query('.a1').get('value')
})
},
})
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Boolean
name="hideFirstColumn"
x-decorator="FormItem"
x-component="Switch"
title="Hide A2"
/>
<SchemaField.Array
name="array"
x-decorator="FormItem"
x-component="ArrayTable"
x-component-props={{
pagination: { pageSize: 10 },
style: { width: '100%' },
}}
>
<SchemaField.Object>
<SchemaField.Void
x-component="ArrayTable.Column"
name="column1"
x-component-props={{ width: 80, title: 'Sort', align: 'center' }}
>
<SchemaField.Void
x-decorator="FormItem"
required
x-component="ArrayTable.SortHandle"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
name="column2"
x-component-props={{
width: 120,
title: 'Index',
align: 'center',
}}
>
<SchemaField.String
x-decorator="FormItem"
required
x-component="ArrayTable.Index"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
name="column3"
x-component-props={{
title: 'Explicitly hidden->A2',
dataIndex: 'a1',
width: 100,
}}
>
<SchemaField.Boolean
name="a1"
x-decorator="FormItem"
required
x-component="Switch"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
name="column4"
x-component-props={{ title: 'A2', width: 200 }}
>
<SchemaField.String
x-decorator="FormItem"
name="a2"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
name="column5"
x-component-props={{ title: 'A3', width: 200 }}
>
<SchemaField.String
x-decorator="FormItem"
name="a3"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayTable.Column"
name="column6"
x-component-props={{
title: 'Operations',
dataIndex: 'operations',
width: 200,
fixed: 'right',
}}
>
<SchemaField.Void x-component="FormItem">
<SchemaField.Void x-component="ArrayTable.Remove" />
<SchemaField.Void x-component="ArrayTable.MoveDown" />
<SchemaField.Void x-component="ArrayTable.MoveUp" />
</SchemaField.Void>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayTable.Addition"
title="Add entry"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema linkage case
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayTable,
Switch,
FormButtonGroup,
Submit,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
Switch,
Input,
ArrayTable,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
hideFirstColumn: {
type: 'boolean',
title: 'Hide A2',
'x-decorator': 'FormItem',
'x-component': 'Switch',
},
array: {
type: 'array',
'x-decorator': 'FormItem',
'x-component': 'ArrayTable',
'x-component-props': {
pagination: { pageSize: 10 },
style: { width: '100%' },
},
items: {
type: 'object',
properties: {
column1: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 80, title: 'Sort', align: 'center' },
properties: {
sort: {
type: 'void',
'x-component': 'ArrayTable.SortHandle',
},
},
},
column2: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
width: 120,
title: 'Index',
align: 'center',
},
properties: {
index: {
type: 'void',
'x-component': 'ArrayTable.Index',
},
},
},
column3: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 100, title: 'Explicitly hidden->A2' },
properties: {
a1: {
type: 'boolean',
'x-decorator': 'FormItem',
'x-component': 'Switch',
},
},
},
column4: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 200, title: 'A2' },
'x-reactions': [
{
dependencies: ['hideFirstColumn'],
when: '{{$deps[0]}}',
fulfill: {
schema: {
'x-visible': false,
},
},
otherwise: {
schema: {
'x-visible': true,
},
},
},
],
properties: {
a2: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
required: true,
'x-reactions': [
{
dependencies: ['.a1', 'hideFirstColumn'],
when: '{{$deps[1] || $deps[0]}}',
fulfill: {
schema: {
'x-visible': false,
},
},
otherwise: {
schema: {
'x-visible': true,
},
},
},
],
},
},
},
column5: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': { width: 200, title: 'A3' },
properties: {
a3: {
type: 'string',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
},
},
},
column6: {
type: 'void',
'x-component': 'ArrayTable.Column',
'x-component-props': {
title: 'Operations',
dataIndex: 'operations',
width: 200,
fixed: 'right',
},
properties: {
item: {
type: 'void',
'x-component': 'FormItem',
properties: {
remove: {
type: 'void',
'x-component': 'ArrayTable.Remove',
},
moveDown: {
type: 'void',
'x-component': 'ArrayTable.MoveDown',
},
moveUp: {
type: 'void',
'x-component': 'ArrayTable.MoveUp',
},
},
},
},
},
},
},
properties: {
add: {
type: 'void',
'x-component': 'ArrayTable.Addition',
title: 'Add entry',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## API
### ArrayTable
> Form Components
Extended attributes
| Property name | Type | Description | Default value |
| ------------- | ------------------------- | --------------- | ------------- |
| onAdd | `(index: number) => void` | add method | |
| onRemove | `(index: number) => void` | remove method | |
| onCopy | `(index: number) => void` | copy method | |
| onMoveUp | `(index: number) => void` | moveUp method | |
| onMoveDown | `(index: number) => void` | moveDown method | |
Other Reference https://fusion.design/pc/component/basic/table
### ArrayTable.Column
> Table Column
Reference https://fusion.design/pc/component/basic/table
### ArrayTable.SortHandle
> Drag handle
Reference https://ant.design/components/icon-cn/
### ArrayTable.Addition
> Add button
Extended attributes
| Property name | Type | Description | Default value |
| ------------- | -------------------- | ------------- | ------------- |
| title | ReactText | Copywriting | |
| method | `'push' \|'unshift'` | add method | `'push'` |
| defaultValue | `any` | Default value | |
Other references https://fusion.design/pc/component/basic/button
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayTable.Remove
> Delete button
| Property name | Type | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayTable.MoveDown
> Move down button
| Property name | Type | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayTable.MoveUp
> Move up button
| Property name | Type | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayTable.Index
> Index Renderer
No attributes
### ArrayTable.useIndex
> Read the React Hook of the current rendering row index
### ArrayTable.useRecord
> Read the React Hook of the current rendering row
```
--------------------------------------------------------------------------------
/packages/next/docs/components/ArrayItems.md:
--------------------------------------------------------------------------------
```markdown
# ArrayItems
> Self-increment list, suitable for simple self-increment editing scenes, or for scenes with high space requirements
>
> Note: This component is only applicable to Schema scenarios
## Markup Schema example
```tsx
import React from 'react'
import {
FormItem,
Input,
Editable,
Select,
DatePicker,
ArrayItems,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
DatePicker,
Editable,
Space,
Input,
Select,
ArrayItems,
},
})
const form = createForm()
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="string_array"
title="string array"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="FormItem"
required
name="input"
x-component="Input"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Copy"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="Add entry"
/>
</SchemaField.Array>
<SchemaField.Array
name="array"
title="Object array"
x-decorator="FormItem"
x-component="ArrayItems"
>
<SchemaField.Object>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="FormItem"
required
title="date"
name="date"
x-component="DatePicker.RangePicker"
x-component-props={{
style: {
width: 160,
},
}}
/>
<SchemaField.String
x-decorator="FormItem"
required
title="input box"
name="input"
x-component="Input"
/>
<SchemaField.String
x-decorator="FormItem"
required
title="select box"
name="select"
enum={[
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
]}
x-component="Select"
x-component-props={{
style: {
width: 160,
},
}}
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Copy"
/>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="Add entry"
/>
</SchemaField.Array>
<SchemaField.Array
name="array2"
title="Object array"
x-decorator="FormItem"
x-component="ArrayItems"
x-component-props={{ style: { width: 300 } }}
>
<SchemaField.Object x-decorator="ArrayItems.Item">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.String
x-decorator="Editable"
title="input box"
name="input"
x-component="Input"
/>
<SchemaField.Object
name="config"
x-component="Editable.Popover"
required
title="Configure complex data"
x-reactions={(field) =>
(field.title = field.value?.input || field.title)
}
>
<SchemaField.String
x-decorator="FormItem"
required
title="date"
name="date"
x-component="DatePicker.RangePicker"
x-component-props={{
style: { width: '100%' },
followTrigger: true,
}}
/>
<SchemaField.String
x-decorator="FormItem"
required
title="input box"
name="input"
x-component="Input"
/>
</SchemaField.Object>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="Add entry"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema case
```tsx
import React from 'react'
import {
FormItem,
Editable,
Input,
Select,
Radio,
DatePicker,
ArrayItems,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
FormItem,
Editable,
DatePicker,
Space,
Radio,
Input,
Select,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
string_array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
title: 'String array',
items: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: 'Add entry',
'x-component': 'ArrayItems.Addition',
},
},
},
array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
title: 'Object array',
items: {
type: 'object',
properties: {
space: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
date: {
type: 'string',
title: 'Date',
'x-decorator': 'FormItem',
'x-component': 'DatePicker.RangePicker',
'x-component-props': {
style: {
width: 160,
},
},
},
input: {
type: 'string',
title: 'input box',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
type: 'string',
title: 'drop-down box',
enum: [
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 160,
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
},
},
properties: {
add: {
type: 'void',
title: 'Add entry',
'x-component': 'ArrayItems.Addition',
},
},
},
array2: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
'x-component-props': { style: { width: 300 } },
title: 'Object array',
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
input: {
type: 'string',
title: 'input box',
'x-decorator': 'Editable',
'x-component': 'Input',
},
config: {
type: 'object',
title: 'Configure complex data',
'x-component': 'Editable.Popover',
'x-reactions':
'{{(field)=>field.title = field.value && field.value.input || field.title}}',
properties: {
date: {
type: 'string',
title: 'Date',
'x-decorator': 'FormItem',
'x-component': 'DatePicker.RangePicker',
'x-component-props': {
style: {
width: 160,
},
followTrigger: true,
},
},
input: {
type: 'string',
title: 'input box',
'x-decorator': 'FormItem',
'x-component': 'Input',
},
select: {
type: 'string',
title: 'drop-down box',
enum: [
{ label: 'Option 1', value: 1 },
{ label: 'Option 2', value: 2 },
],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
style: {
width: 160,
},
},
},
},
},
remove: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Remove',
},
},
},
properties: {
add: {
type: 'void',
title: 'Add entry',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## Effects linkage case
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayItems,
Editable,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm, onFieldChange, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
Space,
Editable,
FormItem,
Input,
ArrayItems,
},
})
const form = createForm({
effects: () => {
//Active linkage mode
onFieldChange('array.*.aa', ['value'], (field, form) => {
form.setFieldState(field.query('.bb'), (state) => {
state.visible = field.value != '123'
})
})
//Passive linkage mode
onFieldReact('array.*.dd', (field) => {
field.visible = field.query('.cc').get('value') != '123'
})
},
})
export default () => {
return (
<FormProvider form={form}>
<SchemaField>
<SchemaField.Array
name="array"
title="Object array"
maxItems={3}
x-decorator="FormItem"
x-component="ArrayItems"
x-component-props={{
style: {
width: 300,
},
}}
>
<SchemaField.Object x-decorator="ArrayItems.Item">
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.SortHandle"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Index"
/>
</SchemaField.Void>
<SchemaField.Void
x-component="Editable.Popover"
title="Configuration data"
>
<SchemaField.String
name="aa"
x-decorator="FormItem"
title="AA"
required
description="AA hide BB when entering 123"
x-component="Input"
/>
<SchemaField.String
name="bb"
x-decorator="FormItem"
title="BB"
required
x-component="Input"
/>
<SchemaField.String
name="cc"
x-decorator="FormItem"
title="CC"
required
description="Hide DD when CC enters 123"
x-component="Input"
/>
<SchemaField.String
name="dd"
x-decorator="FormItem"
title="DD"
required
x-component="Input"
/>
</SchemaField.Void>
<SchemaField.Void x-component="Space">
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.Remove"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.MoveUp"
/>
<SchemaField.Void
x-decorator="FormItem"
x-component="ArrayItems.MoveDown"
/>
</SchemaField.Void>
</SchemaField.Object>
<SchemaField.Void
x-component="ArrayItems.Addition"
title="Add entry"
/>
</SchemaField.Array>
</SchemaField>
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## JSON Schema linkage case
```tsx
import React from 'react'
import {
FormItem,
Input,
ArrayItems,
Editable,
FormButtonGroup,
Submit,
Space,
} from '@formily/next'
import { createForm } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/react'
const SchemaField = createSchemaField({
components: {
Space,
Editable,
FormItem,
Input,
ArrayItems,
},
})
const form = createForm()
const schema = {
type: 'object',
properties: {
array: {
type: 'array',
'x-component': 'ArrayItems',
'x-decorator': 'FormItem',
maxItems: 3,
title: 'Object array',
'x-component-props': { style: { width: 300 } },
items: {
type: 'object',
'x-decorator': 'ArrayItems.Item',
properties: {
left: {
type: 'void',
'x-component': 'Space',
properties: {
sort: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.SortHandle',
},
index: {
type: 'void',
'x-decorator': 'FormItem',
'x-component': 'ArrayItems.Index',
},
},
},
edit: {
type: 'void',
'x-component': 'Editable.Popover',
title: 'Configuration data',
properties: {
aa: {
type: 'string',
'x-decorator': 'FormItem',
title: 'AA',
required: true,
'x-component': 'Input',
description: 'Enter 123',
},
bb: {
type: 'string',
title: 'BB',
required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-reactions': [
{
dependencies: ['.aa'],
when: "{{$deps[0] != '123'}}",
fulfill: {
schema: {
title: 'BB',
'x-disabled': true,
},
},
otherwise: {
schema: {
title: 'Changed',
'x-disabled': false,
},
},
},
],
},
},
},
right: {
type: 'void',
'x-component': 'Space',
properties: {
remove: {
type: 'void',
'x-component': 'ArrayItems.Remove',
},
moveUp: {
type: 'void',
'x-component': 'ArrayItems.MoveUp',
},
moveDown: {
type: 'void',
'x-component': 'ArrayItems.MoveDown',
},
},
},
},
},
properties: {
addition: {
type: 'void',
title: 'Add entry',
'x-component': 'ArrayItems.Addition',
},
},
},
},
}
export default () => {
return (
<FormProvider form={form}>
<SchemaField schema={schema} />
<FormButtonGroup>
<Submit onSubmit={console.log}>Submit</Submit>
</FormButtonGroup>
</FormProvider>
)
}
```
## API
### ArrayItems
Extended attributes
| Property name | Type | Description | Default value |
| ------------- | ------------------------- | --------------- | ------------- |
| onAdd | `(index: number) => void` | add method | |
| onRemove | `(index: number) => void` | remove method | |
| onCopy | `(index: number) => void` | copy method | |
| onMoveUp | `(index: number) => void` | moveUp method | |
| onMoveDown | `(index: number) => void` | moveDown method | |
Other Inherit HTMLDivElement Props
### ArrayItems.Item
> List block
Inherit HTMLDivElement Props
Extended attributes
| Property name | Type | Description | Default value |
| ------------- | ------------------- | --------------------- | ------------- |
| type | `'card' \|'divide'` | card or dividing line | |
### ArrayItems.SortHandle
> Drag handle
Reference https://ant.design/components/icon-cn/
### ArrayItems.Addition
> Add button
Extended attributes
| Property name | Type | Description | Default value |
| ------------- | -------------------- | ------------- | ------------- |
| title | ReactText | Copywriting | |
| method | `'push' \|'unshift'` | add method | `'push'` |
| defaultValue | `any` | Default value | |
Other references https://fusion.design/pc/component/basic/button
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayItems.Copy
> Copy button
Extended attributes
| Property name | Type | Description | Default value |
| ------------- | -------------------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
| method | `'push' \|'unshift'` | add method | `'push'` |
Other references https://fusion.design/pc/component/basic/button
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayItems.Remove
> Delete button
| Property name | Type | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayItems.MoveDown
> Move down button
| Property name | Type | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayItems.MoveUp
> Move up button
| Property name | Type | Description | Default value |
| ------------- | --------- | ----------- | ------------- |
| title | ReactText | Copywriting | |
Other references https://ant.design/components/icon-cn/
Note: The title attribute can receive the title mapping in the Field model, that is, uploading the title in the Field is also effective
### ArrayItems.Index
> Index Renderer
No attributes
### ArrayItems.useIndex
> Read the React Hook of the current rendering row index
### ArrayItems.useRecord
> Read the React Hook of the current rendering row
```