├── .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 │ └── release.yml ├── .gitignore ├── .markdownlint.json ├── .npmrc ├── .prettierrc.js ├── .umirc.ts ├── .vscode ├── cspell.json └── settings.json ├── .yarnrc ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── README.zh-CN.md ├── commitlint.config.js ├── 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 │ ├── Input.md │ ├── Input.zh-CN.md │ ├── NumberPicker.md │ ├── NumberPicker.zh-CN.md │ ├── Password.md │ ├── Password.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 ├── demos │ ├── cascader │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── checkbox │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── date-picker │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── editable │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── form-grid │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── Native.tsx │ │ ├── Native.zh-CN.tsx │ │ ├── QueryForm.tsx │ │ ├── QueryForm.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── form │ │ ├── Form.tsx │ │ └── Form.zh-CN.tsx │ ├── input │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── number-picker │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── password │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── radio │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── reset │ │ ├── ForceEmpty.tsx │ │ ├── ForceEmpty.zh-CN.tsx │ │ ├── ForceEmptyAndVerfy.tsx │ │ ├── ForceEmptyAndVerfy.zh-CN.tsx │ │ ├── Normal.tsx │ │ ├── Normal.zh-CN.tsx │ │ ├── Verify.tsx │ │ └── Verify.zh-CN.tsx │ ├── select │ │ ├── MarkupAsync.tsx │ │ ├── MarkupAsync.zh-CN.tsx │ │ ├── MarkupAsyncLinkage.tsx │ │ ├── MarkupAsyncLinkage.zh-CN.tsx │ │ ├── MarkupSync.tsx │ │ ├── MarkupSync.zh-CN.tsx │ │ ├── PureJsxAsync.tsx │ │ ├── PureJsxAsync.zh-CN.tsx │ │ ├── PureJsxSync.tsx │ │ ├── PureJsxSync.zh-CN.tsx │ │ ├── SchemaAsync.tsx │ │ ├── SchemaAsync.zh-CN.tsx │ │ ├── SchemaSync.tsx │ │ └── SchemaSync.zh-CN.tsx │ ├── space │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── submit │ │ ├── Ordinary.tsx │ │ ├── Ordinary.zh-CN.tsx │ │ ├── PreventDuplicate.tsx │ │ └── PreventDuplicate.zh-CN.tsx │ ├── switch │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ ├── time-picker │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx │ └── transfer │ │ ├── Markup.tsx │ │ ├── Markup.zh-CN.tsx │ │ ├── PureJsx.tsx │ │ ├── PureJsx.zh-CN.tsx │ │ ├── Schema.tsx │ │ └── Schema.zh-CN.tsx ├── index.md ├── index.zh-CN.md └── types.ts ├── global.config.ts ├── jest.config.js ├── lerna.json ├── package.json ├── packages ├── .eslintrc ├── components │ ├── .npmignore │ ├── .npmignore.tpl │ ├── README.md │ ├── README.zh-CN.md │ ├── builder.config.ts │ ├── package.json │ ├── src │ │ ├── __builtins__ │ │ │ ├── dayjs.ts │ │ │ ├── hooks │ │ │ │ ├── index.ts │ │ │ │ ├── useClickAway.ts │ │ │ │ ├── useConfig.ts │ │ │ │ ├── usePrefixCls.ts │ │ │ │ └── useToken.ts │ │ │ ├── index.ts │ │ │ ├── loading.ts │ │ │ ├── moment.ts │ │ │ ├── pickDataProps.ts │ │ │ ├── portal.tsx │ │ │ ├── render.ts │ │ │ ├── sort.tsx │ │ │ └── style.ts │ │ ├── __tests__ │ │ │ └── dayjs.spec.ts │ │ ├── array-base │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── array-cards │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── array-collapse │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── array-items │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── array-table │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── array-tabs │ │ │ └── index.tsx │ │ ├── cascader │ │ │ └── index.tsx │ │ ├── checkbox │ │ │ └── index.tsx │ │ ├── date-picker │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── editable │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── form-button-group │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── form-collapse │ │ │ └── index.tsx │ │ ├── form-dialog │ │ │ └── index.tsx │ │ ├── form-drawer │ │ │ └── index.tsx │ │ ├── form-grid │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── form-item │ │ │ ├── hooks │ │ │ │ ├── index.ts │ │ │ │ ├── useFormItemLayout.tsx │ │ │ │ └── useOverflow.ts │ │ │ ├── index.tsx │ │ │ ├── style │ │ │ │ ├── animation.tsx │ │ │ │ ├── grid.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── other.tsx │ │ │ └── types.ts │ │ ├── form-layout │ │ │ ├── index.tsx │ │ │ └── useResponsiveFormLayout.ts │ │ ├── form-step │ │ │ └── index.tsx │ │ ├── form-tab │ │ │ └── index.tsx │ │ ├── form │ │ │ └── index.tsx │ │ ├── index.ts │ │ ├── input │ │ │ └── index.tsx │ │ ├── number-picker │ │ │ └── index.tsx │ │ ├── password │ │ │ ├── PasswordStrength.tsx │ │ │ └── index.tsx │ │ ├── preview-text │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── radio │ │ │ └── index.tsx │ │ ├── reset │ │ │ └── index.tsx │ │ ├── select-table │ │ │ ├── hooks │ │ │ │ ├── index.ts │ │ │ │ ├── useCheckSlackly.tsx │ │ │ │ ├── useFilterOptions.tsx │ │ │ │ ├── useFlatOptions.tsx │ │ │ │ ├── useSize.tsx │ │ │ │ └── useTitleAddon.tsx │ │ │ ├── index.tsx │ │ │ ├── style.ts │ │ │ └── utils.ts │ │ ├── select │ │ │ └── index.tsx │ │ ├── space │ │ │ └── index.tsx │ │ ├── submit │ │ │ └── index.tsx │ │ ├── switch │ │ │ └── index.tsx │ │ ├── time-picker │ │ │ ├── index.tsx │ │ │ └── style.ts │ │ ├── transfer │ │ │ └── index.tsx │ │ ├── tree-select │ │ │ └── index.tsx │ │ └── upload │ │ │ ├── index.tsx │ │ │ └── placeholder.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── prototypes │ ├── .npmignore │ ├── .npmignore.tpl │ ├── README.md │ ├── README.zh-CN.md │ ├── builder.config.ts │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── renderer │ ├── .npmignore │ ├── .npmignore.tpl │ ├── README.md │ ├── README.zh-CN.md │ ├── builder.config.ts │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── setters │ ├── .npmignore │ ├── .npmignore.tpl │ ├── README.md │ ├── README.zh-CN.md │ ├── builder.config.ts │ ├── package.json │ ├── src │ │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json └── settings-form │ ├── .npmignore │ ├── .npmignore.tpl │ ├── README.md │ ├── README.zh-CN.md │ ├── builder.config.ts │ ├── package.json │ ├── src │ └── index.ts │ ├── tsconfig.build.json │ └── tsconfig.json ├── tsconfig.build.json ├── tsconfig.jest.json ├── tsconfig.json └── yarn.lock /.codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | status: 3 | project: 4 | default: 5 | threshold: 0.1% 6 | patch: 7 | default: 8 | threshold: 0.1% 9 | target: 95% 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # Unix-style newlines with a newline ending every file 7 | [*] 8 | end_of_line = lf 9 | insert_final_newline = true 10 | indent_style = space 11 | indent_size = 2 12 | 13 | [*.gradle] 14 | indent_size = 4 -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | dist 4 | build 5 | coverage 6 | expected 7 | website 8 | gh-pages 9 | weex 10 | build.ts 11 | packages/vue 12 | packages/element 13 | esm 14 | doc-site 15 | public 16 | package -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "node": true 4 | }, 5 | "extends": [ 6 | "plugin:react/recommended", 7 | "plugin:@typescript-eslint/recommended", 8 | "prettier" 9 | ], 10 | "globals": { 11 | "sleep": true, 12 | "prettyFormat": true 13 | }, 14 | "parserOptions": { 15 | "ecmaVersion": 10, 16 | "sourceType": "module", 17 | "ecmaFeatures": { 18 | "jsx": true 19 | } 20 | }, 21 | "parser": "@typescript-eslint/parser", 22 | "plugins": ["@typescript-eslint", "react", "prettier", "markdown"], 23 | "settings": { 24 | "react": { 25 | "version": "detect" 26 | } 27 | }, 28 | "rules": { 29 | "@typescript-eslint/explicit-module-boundary-types": "off", 30 | "@typescript-eslint/no-var-requires": "off", 31 | "@typescript-eslint/no-explicit-any": "off", 32 | "@typescript-eslint/no-unused-vars": "error", 33 | "@typescript-eslint/ban-ts-comment": "off", 34 | "react/no-unescaped-entities": "off", 35 | "react/prop-types": "off" 36 | }, 37 | "overrides": [ 38 | { 39 | "files": ["**/*.md"], 40 | "processor": "markdown/markdown" 41 | }, 42 | { 43 | "files": ["**/*.md/*.{jsx,tsx}"], 44 | "rules": { 45 | "@typescript-eslint/no-unused-vars": "error", 46 | "no-unused-vars": "error", 47 | "no-console": "off", 48 | "react/display-name": "off", 49 | "react/prop-types": "off" 50 | } 51 | }, 52 | { 53 | "files": ["**/*.md/*.{js,ts}"], 54 | "rules": { 55 | "@typescript-eslint/no-unused-vars": "off", 56 | "no-unused-vars": "off", 57 | "no-console": "off", 58 | "react/display-name": "off", 59 | "react/prop-types": "off" 60 | } 61 | } 62 | ] 63 | } 64 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: formily # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | contact_links: 3 | - name: Create new issue 4 | url: https://formilyjs.org/guide/issue-helper 5 | about: The issue which is not created via https://formilyjs.org/guide/issue-helper will be closed immediately. 6 | - name: ✨ Question Answer / Idea 7 | url: https://github.com/alibaba/formily/discussions/new 8 | about: All questions can be solved here. At the same time you can provide all your ideas here. 9 | - name: 📖 View documentation 10 | url: https://formilyjs.org 11 | about: Official Formily documentation 12 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | _Before_ submitting a pull request, please make sure the following is done... 2 | 3 | - [ ] Ensure the pull request title and commit message follow the [Commit Specific](https://github.com/alibaba/formily/blob/master/.github/GIT_COMMIT_SPECIFIC.md) in **English**. 4 | - [ ] Fork the repo and create your branch from `master` or `master`. 5 | - [ ] If you've added code that should be tested, add tests! 6 | - [ ] If you've changed APIs, update the documentation. 7 | - [ ] Ensure the test suite passes (`npm test`). 8 | - [ ] Make sure your code lints (`npm run lint`) - we've done our best to make sure these rules match our internal linting guidelines. 9 | 10 | **Please do not delete the above content** 11 | 12 | --- 13 | 14 | ## What have you changed? 15 | -------------------------------------------------------------------------------- /.github/workflows/check-pr-title.yml: -------------------------------------------------------------------------------- 1 | name: Check PR title 2 | on: 3 | pull_request_target: 4 | types: 5 | - opened 6 | - reopened 7 | - edited 8 | - synchronize 9 | 10 | jobs: 11 | lint: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: aslafy-z/conventional-pr-title-action@v3.0.0 15 | with: 16 | preset: conventional-changelog-angular@^5.0.6 17 | env: 18 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 19 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | pull_request: 8 | branches: 9 | - master 10 | 11 | jobs: 12 | build: 13 | runs-on: ${{ matrix.os }} 14 | if: contains(github.event.head_commit.message, 'chore(versions)') == false 15 | strategy: 16 | matrix: 17 | node_version: [14.x] 18 | os: [ubuntu-latest] 19 | steps: 20 | - uses: actions/checkout@v1 21 | - name: Use Node.js ${{ matrix.node_version }} 22 | uses: actions/setup-node@v1 23 | with: 24 | node-version: ${{ matrix.node_version }} 25 | 26 | - run: yarn -v 27 | - run: yarn --ignore-engines 28 | - name: ESlint 29 | uses: reviewdog/action-eslint@v1 30 | with: 31 | reporter: github-check 32 | eslint_flags: '.' 33 | - run: yarn build 34 | - run: yarn test:prod 35 | env: 36 | CI: true 37 | HEADLESS: false 38 | PROGRESS: none 39 | NODE_ENV: test 40 | NODE_OPTIONS: --max_old_space_size=4096 41 | 42 | # - name: Upload coverage to Codecov 43 | # uses: codecov/codecov-action@v1 44 | # with: 45 | # token: ${{ secrets.CODECOV_TOKEN }} 46 | # fail_ci_if_error: true 47 | # verbose: true 48 | -------------------------------------------------------------------------------- /.github/workflows/commitlint.yml: -------------------------------------------------------------------------------- 1 | # This is a basic workflow to help you get started with Actions 2 | 3 | name: Check Commit spec 4 | 5 | # Controls when the action will run. 6 | on: 7 | # Triggers the workflow on push or pull request events but only for the master branch 8 | push: 9 | branches: [master] 10 | pull_request: 11 | branches: [master] 12 | 13 | # Allows you to run this workflow manually from the Actions tab 14 | workflow_dispatch: 15 | 16 | # A workflow run is made up of one or more jobs that can run sequentially or in parallel 17 | jobs: 18 | # This workflow contains a single job called "build" 19 | commitlint: 20 | # The type of runner that the job will run on 21 | runs-on: ubuntu-latest 22 | 23 | # Steps represent a sequence of tasks that will be executed as part of the job 24 | steps: 25 | # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it 26 | - uses: actions/checkout@v2 27 | with: 28 | fetch-depth: 0= 29 | - uses: wagoid/commitlint-github-action@v3 30 | -------------------------------------------------------------------------------- /.github/workflows/issue-open-check.yml: -------------------------------------------------------------------------------- 1 | name: Issue Open Check 2 | 3 | on: 4 | issues: 5 | types: [opened] 6 | 7 | jobs: 8 | check-issue: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions-cool/check-user-permission@v1.0.0 12 | id: checkUser 13 | with: 14 | require: 'write' 15 | 16 | - name: check invalid 17 | if: (contains(github.event.issue.body, 'formily-issue-helper') == false) && (steps.checkUser.outputs.result == 'false') 18 | uses: actions-cool/issues-helper@v1.2 19 | with: 20 | actions: 'create-comment,add-labels,close-issue' 21 | issue-number: ${{ github.event.issue.number }} 22 | labels: 'Invalid' 23 | body: | 24 | Hello @${{ github.event.issue.user.login }}, your issue has been closed because it does not conform to our issue requirements. Please use the [Issue Helper](https://formilyjs.org/guide/issue-helper) to create an issue, thank you! 25 | 你好 @${{ github.event.issue.user.login }}，为了能够进行高效沟通，我们对 issue 有一定的格式要求，你的 issue 因为不符合要求而被自动关闭。你可以通过 [issue 助手](https://formilyjs.org/guide/issue-helper) 来创建 issue 以方便我们定位错误。谢谢配合！ 26 | -------------------------------------------------------------------------------- /.github/workflows/package-size.yml: -------------------------------------------------------------------------------- 1 | name: Compressed Size 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | steps: 10 | - uses: actions/checkout@v2 11 | - uses: preactjs/compressed-size-action@v2 12 | with: 13 | repo-token: '${{ secrets.GITHUB_TOKEN }}' 14 | -------------------------------------------------------------------------------- /.github/workflows/pr-welcome.yml: -------------------------------------------------------------------------------- 1 | name: PR Welcome 2 | 3 | on: 4 | pull_request_target: 5 | types: [opened] 6 | 7 | jobs: 8 | welcome: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions-cool/pr-welcome@v1.1.2 12 | with: 13 | pr-emoji: '+1, heart' 14 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release 2 | 3 | on: 4 | push: 5 | branches: 6 | - master 7 | jobs: 8 | release: 9 | runs-on: ubuntu-latest 10 | if: contains(github.event.head_commit.message, 'chore(release)') 11 | steps: 12 | - uses: actions/checkout@v1 13 | with: 14 | ref: master 15 | fetch-depth: 0 16 | - uses: actions/setup-node@v1 17 | with: 18 | node-version: 14 19 | registry-url: https://registry.npmjs.org/ 20 | - run: | 21 | yarn -v 22 | yarn --ignore-engines 23 | yarn build 24 | yarn test:prod 25 | env: 26 | NODE_OPTIONS: --max_old_space_size=4096 27 | REGISTRY: https://registry.npmjs.org 28 | - uses: janrywang/github-tag-release@main 29 | with: 30 | github_token: ${{ secrets.GITHUB_TOKEN }} 31 | - run: yarn run release 32 | env: 33 | NODE_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}} 34 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 35 | ACCESS_KEY_ID: ${{ secrets.ACCESS_KEY_ID }} 36 | ACCESS_KEY_SECRET: ${{ secrets.ACCESS_KEY_SECRET }} 37 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *~ 2 | *.swp 3 | .DS_Store 4 | .changelog 5 | .tea 6 | npm-debug.log 7 | lerna-debug.log 8 | npm-debug.log* 9 | package-lock.json 10 | lib/ 11 | esm/ 12 | temp_esm/ 13 | dist/ 14 | build/ 15 | coverage/ 16 | node_modules/ 17 | examples/test 18 | .idea/ 19 | TODO.md 20 | tsconfig.tsbuildinfo 21 | package/ 22 | package.zip 23 | .umi 24 | .umi-production 25 | .cjsescache 26 | doc-site 27 | .lerna-changelog 28 | .history 29 | .lint-report.log -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD033": false, 4 | "MD013": false 5 | } 6 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.npmmirror.com/ -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | semi: false, 3 | tabWidth: 2, 4 | singleQuote: true, 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/cspell.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1", 3 | "language": "en", 4 | "ignoreWords": [ 5 | "autorun", 6 | "mutators", 7 | "Formily", 8 | "formily", 9 | "untrack", 10 | "untracker", 11 | "untracked", 12 | "Untracking", 13 | "Unmount", 14 | "octokit", 15 | "repos", 16 | "alibaba", 17 | "Lifecycles", 18 | "antd", 19 | "Antd", 20 | "alifd", 21 | "Mixins", 22 | "builtins", 23 | "cascader", 24 | "Cascader", 25 | "middlewares" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true 3 | } 4 | -------------------------------------------------------------------------------- /.yarnrc: -------------------------------------------------------------------------------- 1 | registry "https://registry.yarnpkg.com" -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015-present, lyca Holding Limited. All rights reserved. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | [English](./README.md) | 简体中文 2 | 3 |

4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | PRs Welcome 12 | 13 | 14 | 15 |

16 | 17 | --- 18 | 19 | ## 概要 20 | 21 | 这是一个结合了 Formily & Ant Design 的超酷组件库. 22 | 23 | ## 特性 24 | 25 | - 🖼 可设计，借助 Form Builder 可以快速搭建表单 26 | - 🚀 高性能，字段分布式渲染，大大减轻 React 渲染压力 27 | - 💡 支持 Ant Design/Fusion Next 组件体系 28 | - 🎨 JSX 标签化写法/JSON Schema 数据驱动方案无缝迁移过渡 29 | - 🏅 副作用逻辑独立管理，涵盖各种复杂联动校验逻辑 30 | - 🌯 支持各种表单复杂布局方案 31 | 32 | ## 表单设计器 33 | 34 | ![https://designable-antd.formilyjs.org/](https://img.alicdn.com/imgextra/i3/O1CN01xAJj1y1wcGzXYc1Uq_!!6000000006328-2-tps-2980-1740.png) 35 | 36 | ## 官网 37 | 38 | https://antd5.formilyjs.org 39 | 40 | ## 生态产品 41 | 42 | - [formily](https://github.com/alibaba/formily) 43 | - [formilyjs](https://github.com/formilyjs) 44 | - [designable](https://github.com/alibaba/designable) 45 | 46 | ## 如何贡献? 47 | 48 | - [Contribute document](https://formilyjs.org/zh-CN/guide/contribution) 49 | 50 | ## 贡献者 51 | 52 | This project exists thanks to all the people who contribute. 53 | 54 | 55 | ## LICENSE 56 | 57 | Formily is open source software licensed as 58 | [MIT](./LICENSE.md). 59 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { extends: ['@commitlint/config-conventional'] } 2 | -------------------------------------------------------------------------------- /docs/components/Cascader.md: -------------------------------------------------------------------------------- 1 | # Cascader 2 | 3 | > Cascade selector 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Cascader.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Cascader 2 | 3 | > 联级选择器 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/Checkbox.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | > Checkbox 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Checkbox.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | > 复选框 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/DatePicker.md: -------------------------------------------------------------------------------- 1 | # DatePicker 2 | 3 | > Date Picker 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/DatePicker.zh-CN.md: -------------------------------------------------------------------------------- 1 | # DatePicker 2 | 3 | > 日期选择器 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/Editable.md: -------------------------------------------------------------------------------- 1 | # Editable 2 | 3 | > Partial editor, you can use this component for some form areas with high space requirements 4 | > 5 | > Editable component is equivalent to a variant of FormItem component, so it is usually placed in decorator 6 | 7 | ## Markup Schema example 8 | 9 | 10 | 11 | ## JSON Schema case 12 | 13 | 14 | 15 | ## Pure JSX case 16 | 17 | 18 | 19 | ## API 20 | 21 | ### Editable API 22 | 23 | > Inline editing 24 | 25 | Refer to the FormItem property in 26 | 27 | ### Editable.Popover 28 | 29 | > Floating layer editing 30 | 31 | Reference 32 | -------------------------------------------------------------------------------- /docs/components/Editable.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Editable 2 | 3 | > 局部编辑器，对于一些空间要求较高的表单区域可以使用该组件 4 | > 5 | > Editable 组件相当于是 FormItem 组件的变体，所以通常放在 decorator 中 6 | 7 | ## Markup Schema 案例 8 | 9 | 10 | 11 | ## JSON Schema 案例 12 | 13 | 14 | 15 | ## 纯 JSX 案例 16 | 17 | 18 | 19 | ## API 20 | 21 | ### Editable API 22 | 23 | > 内联编辑 24 | 25 | 参考 中的 FormItem 属性 26 | 27 | ### Editable.Popover 28 | 29 | > 浮层编辑 30 | 31 | 参考 32 | -------------------------------------------------------------------------------- /docs/components/Form.md: -------------------------------------------------------------------------------- 1 | # Form 2 | 3 | > The combination of FormProvider + FormLayout + form tags can help us quickly implement forms that are submitted with carriage return and can be laid out in batches 4 | 5 | ## Use Cases 6 | 7 | 8 | 9 | 10 | Note: To realize the carriage return submission, we cannot pass the onSubmit event to it when using the Submit component, otherwise the carriage return submission will become invalid. The purpose of this is to prevent users from writing onSubmit event listeners in multiple places at the same time, and processing logic If they are inconsistent, it is difficult to locate the problem when submitting. 11 | 12 | 13 | ## API 14 | 15 | For layout-related API properties, we can refer to [FormLayout](./form-layout), and the rest are the unique API properties of the Form component 16 | 17 | | Property name | Type | Description | Default value | 18 | | ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- | ------------- | 19 | | form | [Form](https://core.formilyjs.org/api/models/form) | Form example | - | 20 | | component | string | Rendering component, can be specified as custom component rendering | `form` | 21 | | previewTextPlaceholder | ReactNode | Preview State Placeholder | `N/A` | 22 | | onAutoSubmit | `(values:any)=>any` | Carriage return submit event callback | - | 23 | | onAutoSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | Carriage return submission verification failure event callback | - | 24 | -------------------------------------------------------------------------------- /docs/components/Form.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Form 2 | 3 | > FormProvider + FormLayout + form 标签的组合组件，可以帮助我们快速实现带回车提交的且能批量布局的表单 4 | 5 | ## 使用案例 6 | 7 | 8 | 9 | 10 | 注意：想要实现回车提交，我们在使用Submit组件的时候不能给其传onSubmit事件，否则回车提交会失效，这样做的目的是为了防止用户同时在多处写onSubmit事件监听器，处理逻辑不一致的话，提交时很难定位问题。 11 | 12 | 13 | ## API 14 | 15 | 布局相关的 API 属性，我们参考 [FormLayout](./form-layout)即可，剩下是 Form 组件独有的 API 属性 16 | 17 | | 属性名 | 类型 | 描述 | 默认值 | 18 | | ---------------------- | ------------------------------------------------------------------------------------------------ | ---------------------------------- | ------ | 19 | | form | [Form](https://core.formilyjs.org/api/models/form) | Form 实例 | - | 20 | | component | string | 渲染组件，可以指定为自定义组件渲染 | `form` | 21 | | previewTextPlaceholder | ReactNode | 预览态占位符 | `N/A` | 22 | | onAutoSubmit | `(values:any)=>any` | 回车提交事件回调 | - | 23 | | onAutoSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 回车提交校验失败事件回调 | - | 24 | -------------------------------------------------------------------------------- /docs/components/Input.md: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | > Text input box 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Input.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | > Text input box 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## Pure JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/NumberPicker.md: -------------------------------------------------------------------------------- 1 | # NumberPicker 2 | 3 | > Number input box 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | ## API 17 | 18 | Reference 19 | -------------------------------------------------------------------------------- /docs/components/NumberPicker.zh-CN.md: -------------------------------------------------------------------------------- 1 | # NumberPicker 2 | 3 | > 数字输入框 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | ## API 17 | 18 | Reference 19 | -------------------------------------------------------------------------------- /docs/components/Password.md: -------------------------------------------------------------------------------- 1 | # Password 2 | 3 | > Password input box 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Password.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Password 2 | 3 | > 密码输入框 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/Radio.md: -------------------------------------------------------------------------------- 1 | # Radio 2 | 3 | > Single selection box 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Radio.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Radio 2 | 3 | > 单选框 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/Reset.md: -------------------------------------------------------------------------------- 1 | # Reset 2 | 3 | > Reset button 4 | 5 | ## Normal reset 6 | 7 | > Controls with default values cannot be cleared 8 | 9 | 10 | 11 | ## Force empty reset 12 | 13 | 14 | 15 | ## Reset and verify 16 | 17 | 18 | 19 | ## Force empty reset and verify 20 | 21 | 22 | 23 | ## API 24 | 25 | ### Reset API 26 | 27 | Other API reference 28 | 29 | | Property name | Type | Description | Default value | 30 | | ---------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------- | ------------- | 31 | | onClick | `(event: MouseEvent) => void \|boolean` | Click event, if it returns false, it can block resetting | - | 32 | | onResetValidateSuccess | (payload: any) => void | Reset validation success event | - | 33 | | onResetValidateFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | Reset validation failure event | - | 34 | -------------------------------------------------------------------------------- /docs/components/Reset.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Reset 2 | 3 | > 重置按钮 4 | 5 | ## 普通重置 6 | 7 | > 有默认值的控件无法被清空 8 | 9 | 10 | 11 | ## 强制清空重置 12 | 13 | 14 | 15 | ## 重置并校验 16 | 17 | 18 | 19 | ## 强制清空重置并校验 20 | 21 | 22 | 23 | ## API 24 | 25 | ### Reset API 26 | 27 | 其余 API 参考 28 | 29 | | 属性名 | 类型 | 描述 | 默认值 | 30 | | ---------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------- | ------ | 31 | | onClick | `(event: MouseEvent) => void \| boolean` | 点击事件，如果返回 false 可以阻塞重置 | - | 32 | | onResetValidateSuccess | (payload: any) => void | 重置校验成功事件 | - | 33 | | onResetValidateFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 重置校验失败事件 | 34 | -------------------------------------------------------------------------------- /docs/components/Select.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Select 2 | 3 | > 下拉框组件 4 | 5 | ## Markup Schema 同步数据源案例 6 | 7 | 8 | 9 | ## Markup Schema 异步搜索案例 10 | 11 | 12 | 13 | ## Markup Schema 异步联动数据源案例 14 | 15 | 16 | 17 | ## JSON Schema 同步数据源案例 18 | 19 | 20 | 21 | ## JSON Schema 异步联动数据源案例 22 | 23 | 24 | 25 | ## 纯 JSX 同步数据源案例 26 | 27 | 28 | 29 | ## 纯 JSX 异步联动数据源案例 30 | 31 | 32 | 33 | ## API 34 | 35 | 参考 36 | -------------------------------------------------------------------------------- /docs/components/Space.md: -------------------------------------------------------------------------------- 1 | # Space 2 | 3 | > Super convenient Flex layout component, can help users quickly realize the layout of any element side by side next to each other 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Space.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Space 2 | 3 | > 超级便捷的 Flex 布局组件，可以帮助用户快速实现任何元素的并排紧挨布局 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/Submit.md: -------------------------------------------------------------------------------- 1 | # Submit 2 | 3 | > Submit button 4 | 5 | ## Ordinary submission 6 | 7 | 8 | 9 | ## Prevent Duplicate Submission (Loading) 10 | 11 | 12 | 13 | ## API 14 | 15 | For button-related API properties, we can refer to , and the rest are the unique API properties of the Submit component 16 | 17 | | Property name | Type | Description | Default value | 18 | | --------------- | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ------------- | 19 | | onClick | `(event: MouseEvent) => void \| boolean` | Click event, if it returns false, it can block submission | - | 20 | | onSubmit | `(values: any) => Promise \| any` | Submit event callback | - | 21 | | onSubmitSuccess | (payload: any) => void | Submit successful response event | - | 22 | | onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | Submit verification failure event callback | - | 23 | -------------------------------------------------------------------------------- /docs/components/Submit.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Submit 2 | 3 | > 提交按钮 4 | 5 | ## 普通提交 6 | 7 | 8 | 9 | ## 防重复提交(Loading) 10 | 11 | 12 | 13 | ## API 14 | 15 | 按钮相关的 API 属性，我们参考 即可，剩下是 Submit 组件独有的 API 属性 16 | 17 | | 属性名 | 类型 | 描述 | 默认值 | 18 | | --------------- | ------------------------------------------------------------------------------------------------ | ------------------------------------- | ------ | 19 | | onClick | `(event: MouseEvent) => void \| boolean` | 点击事件，如果返回 false 可以阻塞提交 | - | 20 | | onSubmit | `(values: any) => Promise \| any` | 提交事件回调 | - | 21 | | onSubmitSuccess | (payload: any) => void | 提交成功响应事件 | - | 22 | | onSubmitFailed | (feedbacks: [IFormFeedback](https://core.formilyjs.org/api/models/form#iformfeedback)[]) => void | 提交校验失败事件回调 | - | 23 | -------------------------------------------------------------------------------- /docs/components/Switch.md: -------------------------------------------------------------------------------- 1 | # Switch 2 | 3 | > Switch Components 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Switch.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Switch 2 | 3 | > 开关组件 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/TimePicker.md: -------------------------------------------------------------------------------- 1 | # TimePicker 2 | 3 | > Time Picker 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/TimePicker.zh-CN.md: -------------------------------------------------------------------------------- 1 | # TimePicker 2 | 3 | > 时间选择器 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | 17 | ## API 18 | 19 | 参考 20 | -------------------------------------------------------------------------------- /docs/components/Transfer.md: -------------------------------------------------------------------------------- 1 | # Transfer 2 | 3 | > Shuttle Box 4 | 5 | ## Markup Schema example 6 | 7 | 8 | 9 | ## JSON Schema case 10 | 11 | 12 | 13 | ## Pure JSX case 14 | 15 | 16 | 17 | ## API 18 | 19 | Reference 20 | -------------------------------------------------------------------------------- /docs/components/Transfer.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Transfer 2 | 3 | > 穿梭框 4 | 5 | ## Markup Schema 案例 6 | 7 | 8 | 9 | ## JSON Schema 案例 10 | 11 | 12 | 13 | ## 纯 JSX 案例 14 | 15 | 16 | ## API 17 | 18 | 参考 19 | -------------------------------------------------------------------------------- /docs/components/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | # Ant Design 2 | 3 | ## 介绍 4 | 5 | @formily/antd-v5 是基于 Ant Design V5 封装的针对表单场景专业级(Professional)组件库，它主要有以下几个特点： 6 | 7 | - 仅支持 Formily2.x 8 | - 大部分组件无法向后兼容 9 | - 很遗憾，1.x 的很多组件在 API 设计上存在本质上的缺陷，这也是因为表单方案一直在探索之中，所以才会出现版本断裂。 10 | - 更丰富的组件体系 11 | - 布局组件 12 | - FormLayout 13 | - FormItem 14 | - FormGrid 15 | - FormButtonGroup 16 | - Space 17 | - Submit 18 | - Reset 19 | - 输入控件 20 | - Input 21 | - Password 22 | - Select 23 | - TreeSelect 24 | - DatePicker 25 | - TimePicker 26 | - NumberPicker 27 | - Transfer 28 | - Cascader 29 | - Radio 30 | - Checkbox 31 | - Upload 32 | - Switch 33 | - 场景组件 34 | - ArrayCards 35 | - ArrayItems 36 | - ArrayTable 37 | - ArrayTabs 38 | - FormCollapse 39 | - FormStep 40 | - FormTab 41 | - FormDialog 42 | - FormDrawer 43 | - Editable 44 | - 阅读态组件 45 | - PreviewText 46 | - 主题定制能力 47 | - 完全放弃了 1.x styled-components 方案，follow 组件库的样式体系，更方便定制主题 48 | - 支持二次封装 49 | - 所有组件都能二次封装，1.x 的组件体系是不能二次封装的，所以提供了这个能力则更方便用户做业务定制 50 | - 支持阅读态 51 | - 虽然 1.x 同样支持阅读态，但是 2.x 单独提供了 PreviewText 组件，用户可以基于它自己做阅读态封装，灵活性更强 52 | - 类型更加友好 53 | - 每个组件都有着极其完整的类型定义，用户在实际开发过程中，可以感受到前所未有的智能提示体验 54 | - 更完备的布局控制能力 55 | - 1.x 的布局能力基本上都收敛到了 FormMegaLayout 上，这次，我们直接去掉 Mega，Mega 就是标准组件，完全内化到 FormLayout 和 FormItem 组件中，同时将 MegaLayout 的网格布局能力放到了 FormGrid 组件中，也提供了更智能的布局能力。 56 | - 更优雅易用的 API，比如： 57 | - 过去的 FormStep，有很多问题，第一，类型不友好，第二，API 隐藏太深，想要控制前进后退需要理解一堆的私有事件。新版 FormStep，用户只需要关注 FormStep Reactive Model 即可，通过 createFormStep 就可以创建出 Reactive Model，传给 FormStep 组件即可快速通讯。同理，FormTab/FormCollapse 也是一样的通讯模式。 58 | - 弹窗表单，抽屉表单，想必过去，用户几乎每次都得在这两个场景上写大量的代码，这次直接提供了极其简易的 API 让用户使用，最大化提升开发效率。 59 | 60 | ## 安装 61 | 62 | ```bash 63 | npm install --save antd dayjs 64 | npm install --save @formily/core @formily/react @formily/antd-v5 65 | 66 | ``` 67 | 68 | ## Q/A 69 | 70 | 问：我想自己封装一套组件库，该怎么做？ 71 | 72 | 答：如果是开源组件库，可以直接参与项目共建，提供 PR，如果是企业内私有组件库，参考源码即可，源码并没有太多复杂逻辑。 73 | 74 | 问：为什么 ArrayCards/ArrayTable/FormStep 这类组件只支持 Schema 模式，不支持纯 JSX 模式？ 75 | 76 | 答：这就是 Schema 模式的核心优势，借助协议，我们可以做场景化抽象，相反，纯 JSX 模式，受限于 JSX 的不可解析性，我们很难做到 UI 级别的场景化抽象，更多的只是抽象 Hook。 77 | -------------------------------------------------------------------------------- /docs/demos/cascader/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Cascader, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { 4 | createForm, 5 | onFieldReact, 6 | FormPathPattern, 7 | FieldDataSource, 8 | Field as FieldType, 9 | } from '@formily/core' 10 | import { FormProvider, Field } from '@formily/react' 11 | import { action } from '@formily/reactive' 12 | 13 | interface AddressInfo { 14 | code: string 15 | name: string 16 | cities?: Record 17 | districts?: Record 18 | } 19 | 20 | const useAddress = (pattern: FormPathPattern) => { 21 | const transform = (data: Record = {}) => { 22 | return Object.entries(data).reduce((buf, [key, value]) => { 23 | if (typeof value === 'string') 24 | return buf.concat({ 25 | label: value, 26 | value: key, 27 | }) 28 | const { name, code, cities, districts } = value 29 | const _cities = transform(cities) 30 | const _districts = transform(districts) 31 | return buf.concat({ 32 | label: name, 33 | value: code, 34 | children: _cities.length 35 | ? _cities 36 | : _districts.length 37 | ? _districts 38 | : undefined, 39 | }) 40 | }, []) 41 | } 42 | onFieldReact(pattern, (field: FieldType) => { 43 | field.loading = true 44 | fetch('//unpkg.com/china-location/dist/location.json') 45 | .then((res) => res.json()) 46 | .then( 47 | action.bound?.((data) => { 48 | field.dataSource = transform(data) 49 | field.loading = false 50 | }) 51 | ) 52 | }) 53 | } 54 | 55 | const form = createForm({ 56 | effects: () => { 57 | useAddress('address') 58 | }, 59 | }) 60 | 61 | const Demo = () => { 62 | return ( 63 | 64 | 77 | 78 | Submit 79 | 80 | 81 | ) 82 | } 83 | 84 | export default Demo 85 | -------------------------------------------------------------------------------- /docs/demos/cascader/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { Cascader, FormButtonGroup, FormItem, Submit } from '@formily/antd-v5' 2 | import { 3 | createForm, 4 | Field as FieldType, 5 | FieldDataSource, 6 | FormPathPattern, 7 | onFieldReact, 8 | } from '@formily/core' 9 | import { Field, FormProvider } from '@formily/react' 10 | import { action } from '@formily/reactive' 11 | import React from 'react' 12 | 13 | interface AddressInfo { 14 | code: string 15 | name: string 16 | cities?: Record 17 | districts?: Record 18 | } 19 | 20 | const useAddress = (pattern: FormPathPattern) => { 21 | const transform = (data: Record = {}) => { 22 | return Object.entries(data).reduce((buf, [key, value]) => { 23 | if (typeof value === 'string') 24 | return buf.concat({ 25 | label: value, 26 | value: key, 27 | }) 28 | const { name, code, cities, districts } = value 29 | const _cities = transform(cities) 30 | const _districts = transform(districts) 31 | return buf.concat({ 32 | label: name, 33 | value: code, 34 | children: _cities.length 35 | ? _cities 36 | : _districts.length 37 | ? _districts 38 | : undefined, 39 | }) 40 | }, []) 41 | } 42 | onFieldReact(pattern, (field: FieldType) => { 43 | field.loading = true 44 | fetch('//unpkg.com/china-location/dist/location.json') 45 | .then((res) => res.json()) 46 | .then( 47 | action.bound?.((data) => { 48 | field.dataSource = transform(data) 49 | field.loading = false 50 | }) 51 | ) 52 | }) 53 | } 54 | 55 | const form = createForm({ 56 | effects: () => { 57 | useAddress('address') 58 | }, 59 | }) 60 | 61 | const Demo = () => { 62 | return ( 63 | 64 | 77 | 78 | 提交 79 | 80 | 81 | ) 82 | } 83 | 84 | export default Demo 85 | -------------------------------------------------------------------------------- /docs/demos/checkbox/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox, FormButtonGroup, FormItem, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | FormItem, 9 | Checkbox, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 25 | 41 | 42 | 43 | Submit 44 | 45 | 46 | ) 47 | } 48 | export default Demo 49 | -------------------------------------------------------------------------------- /docs/demos/checkbox/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { Checkbox, FormButtonGroup, FormItem, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | FormItem, 9 | Checkbox, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 25 | 41 | 42 | 43 | 提交 44 | 45 | 46 | ) 47 | } 48 | export default Demo 49 | -------------------------------------------------------------------------------- /docs/demos/checkbox/Schema.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Checkbox, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | import type { CheckboxChangeEvent } from 'antd/es/checkbox' 6 | 7 | const SchemaField = createSchemaField({ 8 | components: { 9 | Checkbox, 10 | FormItem, 11 | }, 12 | }) 13 | 14 | const form = createForm() 15 | 16 | const schema = { 17 | type: 'object', 18 | properties: { 19 | single: { 20 | type: 'boolean', 21 | title: 'Are you sure', 22 | 'x-decorator': 'FormItem', 23 | 'x-component': 'Checkbox', 24 | 'x-component-props': { 25 | onInput(e: CheckboxChangeEvent) { 26 | console.log(`checked = ${e.target.checked}`) 27 | }, 28 | }, 29 | }, 30 | multiple: { 31 | type: 'array', 32 | title: 'Check', 33 | enum: [ 34 | { 35 | label: 'Option 1', 36 | value: 1, 37 | }, 38 | { 39 | label: 'Option 2', 40 | value: 2, 41 | }, 42 | ], 43 | 'x-decorator': 'FormItem', 44 | 'x-component': 'Checkbox.Group', 45 | }, 46 | }, 47 | } 48 | 49 | const Demo: React.FC = () => { 50 | return ( 51 | 52 | 53 | 54 | Submit 55 | 56 | 57 | ) 58 | } 59 | 60 | export default Demo 61 | -------------------------------------------------------------------------------- /docs/demos/checkbox/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Checkbox, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | import type { CheckboxChangeEvent } from 'antd/es/checkbox' 6 | 7 | const SchemaField = createSchemaField({ 8 | components: { 9 | Checkbox, 10 | FormItem, 11 | }, 12 | }) 13 | 14 | const form = createForm() 15 | 16 | const schema = { 17 | type: 'object', 18 | properties: { 19 | single: { 20 | type: 'boolean', 21 | title: '是否确认', 22 | 'x-decorator': 'FormItem', 23 | 'x-component': 'Checkbox', 24 | 'x-component-props': { 25 | onInput(e: CheckboxChangeEvent) { 26 | console.log(`checked = ${e.target.checked}`) 27 | }, 28 | }, 29 | }, 30 | multiple: { 31 | type: 'array', 32 | title: 'Check', 33 | enum: [ 34 | { 35 | label: '选项1', 36 | value: 1, 37 | }, 38 | { 39 | label: '选项2', 40 | value: 2, 41 | }, 42 | ], 43 | 'x-decorator': 'FormItem', 44 | 'x-component': 'Checkbox.Group', 45 | }, 46 | }, 47 | } 48 | 49 | const Demo: React.FC = () => { 50 | return ( 51 | 52 | 53 | 54 | 提交 55 | 56 | 57 | ) 58 | } 59 | 60 | export default Demo 61 | -------------------------------------------------------------------------------- /docs/demos/editable/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | DatePicker, 3 | Editable, 4 | FormButtonGroup, 5 | FormItem, 6 | Input, 7 | Submit, 8 | } from '@formily/antd-v5' 9 | import { createForm } from '@formily/core' 10 | import { Field, FormProvider, ObjectField, VoidField } from '@formily/react' 11 | import React from 'react' 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 24 | 30 | { 34 | field.title = field.query('.void.date2').get('value') || field.title 35 | }} 36 | component={[Editable.Popover]} 37 | > 38 | 44 | 50 | 51 | { 55 | field.title = field.value?.date || field.title 56 | }} 57 | component={[Editable.Popover]} 58 | > 59 | 65 | 71 | 72 | 73 | 74 | Submit 75 | 76 | 77 | ) 78 | } 79 | export default Demo 80 | -------------------------------------------------------------------------------- /docs/demos/editable/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | DatePicker, 3 | Editable, 4 | FormButtonGroup, 5 | FormItem, 6 | Input, 7 | Submit, 8 | } from '@formily/antd-v5' 9 | import { createForm } from '@formily/core' 10 | import { Field, FormProvider, ObjectField, VoidField } from '@formily/react' 11 | import React from 'react' 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 24 | 30 | { 34 | field.title = field.query('.void.date2').get('value') || field.title 35 | }} 36 | component={[Editable.Popover]} 37 | > 38 | 44 | 50 | 51 | { 55 | field.title = field.value?.date || field.title 56 | }} 57 | component={[Editable.Popover]} 58 | > 59 | 65 | 71 | 72 | 73 | 74 | 提交 75 | 76 | 77 | ) 78 | } 79 | export default Demo 80 | -------------------------------------------------------------------------------- /docs/demos/form-grid/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormGrid, 4 | FormItem, 5 | Input, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Input, 15 | FormItem, 16 | FormGrid, 17 | }, 18 | }) 19 | 20 | const form = createForm() 21 | 22 | const Demo: React.FC = () => { 23 | return ( 24 | 25 | 26 | 33 | 40 | 46 | 52 | 58 | 64 | 70 | 76 | 77 | 78 | 79 | Submit 80 | 81 | 82 | ) 83 | } 84 | export default Demo 85 | -------------------------------------------------------------------------------- /docs/demos/form-grid/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormGrid, 4 | FormItem, 5 | Input, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Input, 15 | FormItem, 16 | FormGrid, 17 | }, 18 | }) 19 | 20 | const form = createForm() 21 | 22 | const Demo: React.FC = () => { 23 | return ( 24 | 25 | 26 | 33 | 40 | 46 | 52 | 58 | 64 | 70 | 76 | 77 | 78 | 79 | 提交 80 | 81 | 82 | ) 83 | } 84 | export default Demo 85 | -------------------------------------------------------------------------------- /docs/demos/form-grid/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormGrid, 4 | FormItem, 5 | Input, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Input, 15 | FormItem, 16 | FormGrid, 17 | }, 18 | }) 19 | 20 | const form = createForm() 21 | 22 | const schema: ISchema = { 23 | type: 'object', 24 | properties: { 25 | grid: { 26 | type: 'void', 27 | 'x-component': 'FormGrid', 28 | 'x-component-props': { 29 | minColumns: [4, 6, 10], 30 | }, 31 | properties: { 32 | aaa: { 33 | type: 'string', 34 | title: 'AAA', 35 | 'x-decorator': 'FormItem', 36 | 'x-component': 'Input', 37 | }, 38 | bbb: { 39 | type: 'string', 40 | title: 'BBB', 41 | 'x-decorator': 'FormItem', 42 | 'x-component': 'Input', 43 | }, 44 | ccc: { 45 | type: 'string', 46 | title: 'CCC', 47 | 'x-decorator': 'FormItem', 48 | 'x-component': 'Input', 49 | }, 50 | ddd: { 51 | type: 'string', 52 | title: 'DDD', 53 | 'x-decorator': 'FormItem', 54 | 'x-component': 'Input', 55 | }, 56 | eee: { 57 | type: 'string', 58 | title: 'EEE', 59 | 'x-decorator': 'FormItem', 60 | 'x-component': 'Input', 61 | }, 62 | fff: { 63 | type: 'string', 64 | title: 'FFF', 65 | 'x-decorator': 'FormItem', 66 | 'x-component': 'Input', 67 | }, 68 | ggg: { 69 | type: 'string', 70 | title: 'GGG', 71 | 'x-decorator': 'FormItem', 72 | 'x-component': 'Input', 73 | }, 74 | }, 75 | }, 76 | }, 77 | } 78 | const Demo: React.FC = () => { 79 | return ( 80 | 81 | 82 | 83 | Submit 84 | 85 | 86 | ) 87 | } 88 | 89 | export default Demo 90 | -------------------------------------------------------------------------------- /docs/demos/form-grid/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormGrid, 4 | FormItem, 5 | Input, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Input, 15 | FormItem, 16 | FormGrid, 17 | }, 18 | }) 19 | 20 | const form = createForm() 21 | 22 | const schema: ISchema = { 23 | type: 'object', 24 | properties: { 25 | grid: { 26 | type: 'void', 27 | 'x-component': 'FormGrid', 28 | 'x-component-props': { 29 | minColumns: [4, 6, 10], 30 | }, 31 | properties: { 32 | aaa: { 33 | type: 'string', 34 | title: 'AAA', 35 | 'x-decorator': 'FormItem', 36 | 'x-component': 'Input', 37 | }, 38 | bbb: { 39 | type: 'string', 40 | title: 'BBB', 41 | 'x-decorator': 'FormItem', 42 | 'x-component': 'Input', 43 | }, 44 | ccc: { 45 | type: 'string', 46 | title: 'CCC', 47 | 'x-decorator': 'FormItem', 48 | 'x-component': 'Input', 49 | }, 50 | ddd: { 51 | type: 'string', 52 | title: 'DDD', 53 | 'x-decorator': 'FormItem', 54 | 'x-component': 'Input', 55 | }, 56 | eee: { 57 | type: 'string', 58 | title: 'EEE', 59 | 'x-decorator': 'FormItem', 60 | 'x-component': 'Input', 61 | }, 62 | fff: { 63 | type: 'string', 64 | title: 'FFF', 65 | 'x-decorator': 'FormItem', 66 | 'x-component': 'Input', 67 | }, 68 | ggg: { 69 | type: 'string', 70 | title: 'GGG', 71 | 'x-decorator': 'FormItem', 72 | 'x-component': 'Input', 73 | }, 74 | }, 75 | }, 76 | }, 77 | } 78 | const Demo: React.FC = () => { 79 | return ( 80 | 81 | 82 | 83 | Submit 84 | 85 | 86 | ) 87 | } 88 | 89 | export default Demo 90 | -------------------------------------------------------------------------------- /docs/demos/form/Form.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Input, 4 | Select, 5 | Form, 6 | FormItem, 7 | FormGrid, 8 | FormButtonGroup, 9 | Submit, 10 | } from '@formily/antd-v5' 11 | import { createForm } from '@formily/core' 12 | import { Field } from '@formily/react' 13 | 14 | const form = createForm() 15 | const Demo = () => { 16 | return ( 17 |
24 | 25 | 41 | 48 | 54 | 60 | 66 | 67 | Query 68 | 69 | 70 |
71 | ) 72 | } 73 | 74 | export default Demo 75 | -------------------------------------------------------------------------------- /docs/demos/form/Form.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Input, 4 | Select, 5 | Form, 6 | FormItem, 7 | FormGrid, 8 | FormButtonGroup, 9 | Submit, 10 | } from '@formily/antd-v5' 11 | import { createForm } from '@formily/core' 12 | import { Field } from '@formily/react' 13 | 14 | const form = createForm() 15 | const Demo = () => { 16 | return ( 17 |
24 | 25 | 41 | 48 | 54 | 60 | 66 | 67 | 查询 68 | 69 | 70 |
71 | ) 72 | } 73 | 74 | export default Demo 75 | -------------------------------------------------------------------------------- /docs/demos/input/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 31 | 43 | 44 | 45 | Submit 46 | 47 | 48 | ) 49 | } 50 | export default Demo 51 | -------------------------------------------------------------------------------- /docs/demos/input/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 31 | 43 | 44 | 45 | 提交 46 | 47 | 48 | ) 49 | } 50 | export default Demo 51 | -------------------------------------------------------------------------------- /docs/demos/input/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, Field } from '@formily/react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 24 | 38 | 39 | Submit 40 | 41 | 42 | ) 43 | } 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/input/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, Field } from '@formily/react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 24 | 38 | 39 | 提交 40 | 41 | 42 | ) 43 | } 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/input/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | input: { 19 | type: 'string', 20 | title: 'input box', 21 | 'x-decorator': 'FormItem', 22 | 'x-component': 'Input', 23 | required: true, 24 | 'x-component-props': { 25 | style: { 26 | width: 240, 27 | }, 28 | }, 29 | }, 30 | textarea: { 31 | type: 'string', 32 | title: 'text box', 33 | required: true, 34 | 'x-decorator': 'FormItem', 35 | 'x-component': 'Input.TextArea', 36 | 'x-component-props': { 37 | style: { 38 | width: 400, 39 | }, 40 | }, 41 | }, 42 | }, 43 | } 44 | 45 | const Demo: React.FC = () => { 46 | return ( 47 | 48 | 49 | 50 | Submit 51 | 52 | 53 | ) 54 | } 55 | 56 | export default Demo 57 | -------------------------------------------------------------------------------- /docs/demos/input/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | input: { 19 | type: 'string', 20 | title: '输入框', 21 | 'x-decorator': 'FormItem', 22 | 'x-component': 'Input', 23 | required: true, 24 | 'x-component-props': { 25 | style: { 26 | width: 240, 27 | }, 28 | }, 29 | }, 30 | textarea: { 31 | type: 'string', 32 | title: '文本框', 33 | required: true, 34 | 'x-decorator': 'FormItem', 35 | 'x-component': 'Input.TextArea', 36 | 'x-component-props': { 37 | style: { 38 | width: 400, 39 | }, 40 | }, 41 | }, 42 | }, 43 | } 44 | 45 | const Demo: React.FC = () => { 46 | return ( 47 | 48 | 49 | 50 | 提交 51 | 52 | 53 | ) 54 | } 55 | 56 | export default Demo 57 | -------------------------------------------------------------------------------- /docs/demos/number-picker/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | NumberPicker, 5 | Submit, 6 | } from '@formily/antd-v5' 7 | import { createForm } from '@formily/core' 8 | import { createSchemaField, FormProvider } from '@formily/react' 9 | import React from 'react' 10 | 11 | const SchemaField = createSchemaField({ 12 | components: { 13 | NumberPicker, 14 | FormItem, 15 | }, 16 | }) 17 | 18 | const form = createForm() 19 | 20 | const Demo: React.FC = () => { 21 | return ( 22 | 23 | 24 | 36 | 37 | 38 | Submit 39 | 40 | 41 | ) 42 | } 43 | export default Demo 44 | -------------------------------------------------------------------------------- /docs/demos/number-picker/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | NumberPicker, 5 | Submit, 6 | } from '@formily/antd-v5' 7 | import { createForm } from '@formily/core' 8 | import { createSchemaField, FormProvider } from '@formily/react' 9 | import React from 'react' 10 | 11 | const SchemaField = createSchemaField({ 12 | components: { 13 | NumberPicker, 14 | FormItem, 15 | }, 16 | }) 17 | 18 | const form = createForm() 19 | 20 | const Demo: React.FC = () => { 21 | return ( 22 | 23 | 24 | 36 | 37 | 38 | 提交 39 | 40 | 41 | ) 42 | } 43 | export default Demo 44 | -------------------------------------------------------------------------------- /docs/demos/number-picker/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | NumberPicker, 4 | FormItem, 5 | FormButtonGroup, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { FormProvider, Field } from '@formily/react' 10 | 11 | const form = createForm() 12 | const Demo: React.FC = () => { 13 | return ( 14 | 15 | 29 | 30 | 31 | Submit 32 | 33 | 34 | ) 35 | } 36 | export default Demo 37 | -------------------------------------------------------------------------------- /docs/demos/number-picker/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | NumberPicker, 4 | FormItem, 5 | FormButtonGroup, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { FormProvider, Field } from '@formily/react' 10 | 11 | const form = createForm() 12 | const Demo: React.FC = () => { 13 | return ( 14 | 15 | 29 | 30 | 31 | 提交 32 | 33 | 34 | ) 35 | } 36 | export default Demo 37 | -------------------------------------------------------------------------------- /docs/demos/number-picker/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | NumberPicker, 5 | Submit, 6 | } from '@formily/antd-v5' 7 | import { createForm } from '@formily/core' 8 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 9 | import React from 'react' 10 | 11 | const SchemaField = createSchemaField({ 12 | components: { 13 | NumberPicker, 14 | FormItem, 15 | }, 16 | }) 17 | 18 | const form = createForm() 19 | 20 | const schema: ISchema = { 21 | type: 'object', 22 | properties: { 23 | input: { 24 | type: 'string', 25 | title: 'input box', 26 | 'x-decorator': 'FormItem', 27 | 'x-component': 'NumberPicker', 28 | required: true, 29 | 'x-component-props': { 30 | style: { 31 | width: 240, 32 | }, 33 | }, 34 | }, 35 | }, 36 | } 37 | 38 | const Demo: React.FC = () => { 39 | return ( 40 | 41 | 42 | 43 | Submit 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Demo 50 | -------------------------------------------------------------------------------- /docs/demos/number-picker/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | NumberPicker, 5 | Submit, 6 | } from '@formily/antd-v5' 7 | import { createForm } from '@formily/core' 8 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 9 | import React from 'react' 10 | 11 | const SchemaField = createSchemaField({ 12 | components: { 13 | NumberPicker, 14 | FormItem, 15 | }, 16 | }) 17 | 18 | const form = createForm() 19 | 20 | const schema: ISchema = { 21 | type: 'object', 22 | properties: { 23 | input: { 24 | type: 'string', 25 | title: '输入框', 26 | 'x-decorator': 'FormItem', 27 | 'x-component': 'NumberPicker', 28 | required: true, 29 | 'x-component-props': { 30 | style: { 31 | width: 240, 32 | }, 33 | }, 34 | }, 35 | }, 36 | } 37 | 38 | const Demo: React.FC = () => { 39 | return ( 40 | 41 | 42 | 43 | 提交 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Demo 50 | -------------------------------------------------------------------------------- /docs/demos/password/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | FormLayout, 5 | Password, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Password, 15 | FormItem, 16 | }, 17 | }) 18 | 19 | const form = createForm() 20 | 21 | const Demo: React.FC = () => { 22 | return ( 23 | 24 | 25 | 26 | 36 | 37 | 38 | Submit 39 | 40 | 41 | 42 | ) 43 | } 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/password/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | FormLayout, 5 | Password, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Password, 15 | FormItem, 16 | }, 17 | }) 18 | 19 | const form = createForm() 20 | 21 | const Demo: React.FC = () => { 22 | return ( 23 | 24 | 25 | 26 | 36 | 37 | 38 | 提交 39 | 40 | 41 | 42 | ) 43 | } 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/password/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | FormLayout, 5 | Password, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { Field, FormProvider } from '@formily/react' 10 | import React from 'react' 11 | 12 | const form = createForm() 13 | const Demo: React.FC = () => { 14 | return ( 15 | 16 | 17 | 29 | 30 | Submit 31 | 32 | 33 | 34 | ) 35 | } 36 | export default Demo 37 | -------------------------------------------------------------------------------- /docs/demos/password/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | FormLayout, 5 | Password, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { Field, FormProvider } from '@formily/react' 10 | import React from 'react' 11 | 12 | const form = createForm() 13 | const Demo: React.FC = () => { 14 | return ( 15 | 16 | 17 | 29 | 30 | 提交 31 | 32 | 33 | 34 | ) 35 | } 36 | export default Demo 37 | -------------------------------------------------------------------------------- /docs/demos/password/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | FormLayout, 5 | Password, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Password, 15 | FormItem, 16 | }, 17 | }) 18 | 19 | const form = createForm() 20 | 21 | const schema: ISchema = { 22 | type: 'object', 23 | properties: { 24 | input: { 25 | type: 'string', 26 | title: 'input box', 27 | 'x-decorator': 'FormItem', 28 | 'x-component': 'Password', 29 | 'x-component-props': { 30 | checkStrength: true, 31 | }, 32 | }, 33 | }, 34 | } 35 | 36 | const Demo: React.FC = () => { 37 | return ( 38 | 39 | 40 | 41 | 42 | Submit 43 | 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Demo 50 | -------------------------------------------------------------------------------- /docs/demos/password/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FormButtonGroup, 3 | FormItem, 4 | FormLayout, 5 | Password, 6 | Submit, 7 | } from '@formily/antd-v5' 8 | import { createForm } from '@formily/core' 9 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 10 | import React from 'react' 11 | 12 | const SchemaField = createSchemaField({ 13 | components: { 14 | Password, 15 | FormItem, 16 | }, 17 | }) 18 | 19 | const form = createForm() 20 | 21 | const schema: ISchema = { 22 | type: 'object', 23 | properties: { 24 | input: { 25 | type: 'string', 26 | title: '输入框', 27 | 'x-decorator': 'FormItem', 28 | 'x-component': 'Password', 29 | 'x-component-props': { 30 | checkStrength: true, 31 | }, 32 | }, 33 | }, 34 | } 35 | 36 | const Demo: React.FC = () => { 37 | return ( 38 | 39 | 40 | 41 | 42 | 提交 43 | 44 | 45 | 46 | ) 47 | } 48 | 49 | export default Demo 50 | -------------------------------------------------------------------------------- /docs/demos/radio/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Radio, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Radio, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 35 | 36 | 37 | Submit 38 | 39 | 40 | ) 41 | } 42 | export default Demo 43 | -------------------------------------------------------------------------------- /docs/demos/radio/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Radio, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Radio, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 35 | 36 | 37 | 提交 38 | 39 | 40 | ) 41 | } 42 | export default Demo 43 | -------------------------------------------------------------------------------- /docs/demos/radio/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Radio, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 26 | 27 | Submit 28 | 29 | 30 | ) 31 | } 32 | export default Demo 33 | -------------------------------------------------------------------------------- /docs/demos/radio/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Radio, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 26 | 27 | 提交 28 | 29 | 30 | ) 31 | } 32 | export default Demo 33 | -------------------------------------------------------------------------------- /docs/demos/radio/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Radio, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Radio, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | radio: { 19 | type: 'number', 20 | title: 'Single selection', 21 | enum: [ 22 | { 23 | label: 'Option 1', 24 | value: 1, 25 | }, 26 | { 27 | label: 'Option 2', 28 | value: 2, 29 | }, 30 | ], 31 | 'x-decorator': 'FormItem', 32 | 'x-component': 'Radio.Group', 33 | }, 34 | }, 35 | } 36 | 37 | const Demo: React.FC = () => { 38 | return ( 39 | 40 | 41 | 42 | Submit 43 | 44 | 45 | ) 46 | } 47 | 48 | export default Demo 49 | -------------------------------------------------------------------------------- /docs/demos/radio/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Radio, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Radio, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | radio: { 19 | type: 'number', 20 | title: '单选', 21 | enum: [ 22 | { 23 | label: '选项1', 24 | value: 1, 25 | }, 26 | { 27 | label: '选项2', 28 | value: 2, 29 | }, 30 | ], 31 | 'x-decorator': 'FormItem', 32 | 'x-component': 'Radio.Group', 33 | }, 34 | }, 35 | } 36 | 37 | const Demo: React.FC = () => { 38 | return ( 39 | 40 | 41 | 42 | 提交 43 | 44 | 45 | ) 46 | } 47 | 48 | export default Demo 49 | -------------------------------------------------------------------------------- /docs/demos/reset/ForceEmpty.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Reset } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | Reset 37 | 38 | 39 | ) 40 | } 41 | 42 | export default Demo 43 | -------------------------------------------------------------------------------- /docs/demos/reset/ForceEmpty.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Reset } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | 重置 37 | 38 | 39 | ) 40 | } 41 | 42 | export default Demo 43 | -------------------------------------------------------------------------------- /docs/demos/reset/ForceEmptyAndVerfy.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Reset } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | export const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 33 | 34 | 35 | 36 | 重置 37 | 38 | 39 | 40 | ) 41 | } 42 | 43 | export default Demo 44 | -------------------------------------------------------------------------------- /docs/demos/reset/ForceEmptyAndVerfy.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Reset } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | export const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | 37 | 重置 38 | 39 | 40 | 41 | ) 42 | } 43 | 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/reset/Normal.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Reset } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | Reset 37 | 38 | 39 | ) 40 | } 41 | export default Demo 42 | -------------------------------------------------------------------------------- /docs/demos/reset/Normal.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Reset } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | 重置 37 | 38 | 39 | ) 40 | } 41 | export default Demo 42 | -------------------------------------------------------------------------------- /docs/demos/reset/Verify.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Reset } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | Reset 37 | 38 | 39 | ) 40 | } 41 | 42 | export default Demo 43 | -------------------------------------------------------------------------------- /docs/demos/reset/Verify.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Reset } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | 重置 37 | 38 | 39 | ) 40 | } 41 | 42 | export default Demo 43 | -------------------------------------------------------------------------------- /docs/demos/select/MarkupSync.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Select, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 36 | 37 | 38 | Submit 39 | 40 | 41 | ) 42 | } 43 | export default Demo 44 | -------------------------------------------------------------------------------- /docs/demos/select/MarkupSync.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Select, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Select, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 36 | 37 | 38 | 提交 39 | 40 | 41 | ) 42 | } 43 | 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/select/PureJsxSync.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Select, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, Field } from '@formily/react' 5 | 6 | const form = createForm() 7 | 8 | const Demo = () => { 9 | return ( 10 | 11 | 28 | 29 | Submit 30 | 31 | 32 | ) 33 | } 34 | 35 | export default Demo 36 | -------------------------------------------------------------------------------- /docs/demos/select/PureJsxSync.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, Field } from '@formily/react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 24 | 38 | 39 | 提交 40 | 41 | 42 | ) 43 | } 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/select/SchemaSync.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Select, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Select, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | select: { 19 | type: 'string', 20 | title: 'Select box', 21 | 'x-decorator': 'FormItem', 22 | 'x-component': 'Select', 23 | enum: [ 24 | { label: 'Option 1', value: 1 }, 25 | { label: 'Option 2', value: 2 }, 26 | ], 27 | 'x-component-props': { 28 | style: { 29 | width: 120, 30 | }, 31 | }, 32 | }, 33 | }, 34 | } 35 | const Demo: React.FC = () => { 36 | return ( 37 | 38 | 39 | 40 | Submit 41 | 42 | 43 | ) 44 | } 45 | 46 | export default Demo 47 | -------------------------------------------------------------------------------- /docs/demos/select/SchemaSync.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Select, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Select, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | select: { 19 | type: 'string', 20 | title: '选择框', 21 | 'x-decorator': 'FormItem', 22 | 'x-component': 'Select', 23 | enum: [ 24 | { label: '选项1', value: 1 }, 25 | { label: '选项2', value: 2 }, 26 | ], 27 | 'x-component-props': { 28 | style: { 29 | width: 120, 30 | }, 31 | }, 32 | }, 33 | }, 34 | } 35 | const Demo: React.FC = () => { 36 | return ( 37 | 38 | 39 | 40 | 提交 41 | 42 | 43 | ) 44 | } 45 | 46 | export default Demo 47 | -------------------------------------------------------------------------------- /docs/demos/submit/Ordinary.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | Submit 37 | 38 | 39 | ) 40 | } 41 | export default Demo 42 | -------------------------------------------------------------------------------- /docs/demos/submit/Ordinary.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Input, FormItem, FormButtonGroup, Submit } from '@formily/antd-v5' 3 | import { createForm } from '@formily/core' 4 | import { FormProvider, createSchemaField } from '@formily/react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | 提交 37 | 38 | 39 | ) 40 | } 41 | export default Demo 42 | -------------------------------------------------------------------------------- /docs/demos/submit/PreventDuplicate.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | { 38 | return new Promise((resolve) => { 39 | setTimeout(() => { 40 | console.log(values) 41 | resolve() 42 | }, 2000) 43 | }) 44 | }} 45 | onSubmitFailed={console.log} 46 | > 47 | submit 48 | 49 | 50 | 51 | ) 52 | } 53 | 54 | export default Demo 55 | -------------------------------------------------------------------------------- /docs/demos/submit/PreventDuplicate.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Input, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Input, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo = () => { 16 | return ( 17 | 18 | 19 | 26 | 34 | 35 | 36 | { 38 | return new Promise((resolve) => { 39 | setTimeout(() => { 40 | console.log(values) 41 | resolve() 42 | }, 2000) 43 | }) 44 | }} 45 | onSubmitFailed={console.log} 46 | > 47 | 提交 48 | 49 | 50 | 51 | ) 52 | } 53 | 54 | export default Demo 55 | -------------------------------------------------------------------------------- /docs/demos/switch/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Switch } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Switch, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 25 | 26 | 27 | Submit 28 | 29 | 30 | ) 31 | } 32 | export default Demo 33 | -------------------------------------------------------------------------------- /docs/demos/switch/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Switch } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Switch, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 25 | 26 | 27 | 提交 28 | 29 | 30 | ) 31 | } 32 | export default Demo 33 | -------------------------------------------------------------------------------- /docs/demos/switch/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Switch } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 16 | 17 | Submit 18 | 19 | 20 | ) 21 | } 22 | export default Demo 23 | -------------------------------------------------------------------------------- /docs/demos/switch/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Switch } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 16 | 17 | 提交 18 | 19 | 20 | ) 21 | } 22 | export default Demo 23 | -------------------------------------------------------------------------------- /docs/demos/switch/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Switch } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Switch, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | switch: { 19 | type: 'boolean', 20 | title: 'Switch', 21 | 'x-decorator': 'FormItem', 22 | 'x-component': 'Switch', 23 | }, 24 | }, 25 | } 26 | 27 | const Demo: React.FC = () => { 28 | return ( 29 | 30 | 31 | 32 | Submit 33 | 34 | 35 | ) 36 | } 37 | 38 | export default Demo 39 | -------------------------------------------------------------------------------- /docs/demos/switch/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Switch } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Switch, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | switch: { 19 | type: 'boolean', 20 | title: '开关', 21 | 'x-decorator': 'FormItem', 22 | 'x-component': 'Switch', 23 | }, 24 | }, 25 | } 26 | 27 | const Demo: React.FC = () => { 28 | return ( 29 | 30 | 31 | 32 | 提交 33 | 34 | 35 | ) 36 | } 37 | 38 | export default Demo 39 | -------------------------------------------------------------------------------- /docs/demos/time-picker/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { TimePicker, FormButtonGroup, FormItem, Submit } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | FormItem, 9 | TimePicker, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 32 | 33 | 34 | Submit 35 | 36 | 37 | ) 38 | } 39 | export default Demo 40 | -------------------------------------------------------------------------------- /docs/demos/time-picker/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, TimePicker } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | TimePicker, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | 26 | 32 | 33 | 34 | 提交 35 | 36 | 37 | ) 38 | } 39 | export default Demo 40 | -------------------------------------------------------------------------------- /docs/demos/time-picker/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, TimePicker } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 16 | 22 | 23 | Submit 24 | 25 | 26 | ) 27 | } 28 | export default Demo 29 | -------------------------------------------------------------------------------- /docs/demos/time-picker/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, TimePicker } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | 16 | 22 | 23 | 提交 24 | 25 | 26 | ) 27 | } 28 | export default Demo 29 | -------------------------------------------------------------------------------- /docs/demos/time-picker/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, TimePicker } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | FormItem, 9 | TimePicker, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | time: { 19 | title: 'Time', 20 | 'x-decorator': 'FormItem', 21 | 'x-component': 'TimePicker', 22 | type: 'string', 23 | }, 24 | '[startTime,endTime]': { 25 | title: 'Time Range', 26 | 'x-decorator': 'FormItem', 27 | 'x-component': 'TimePicker.RangePicker', 28 | type: 'string', 29 | }, 30 | }, 31 | } 32 | const Demo: React.FC = () => { 33 | return ( 34 | 35 | 36 | 37 | Submit 38 | 39 | 40 | ) 41 | } 42 | 43 | export default Demo 44 | -------------------------------------------------------------------------------- /docs/demos/time-picker/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, TimePicker } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | TimePicker, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const schema: ISchema = { 16 | type: 'object', 17 | properties: { 18 | time: { 19 | title: '时间', 20 | 'x-decorator': 'FormItem', 21 | 'x-component': 'TimePicker', 22 | type: 'string', 23 | }, 24 | '[startTime,endTime]': { 25 | title: '时间范围', 26 | 'x-decorator': 'FormItem', 27 | 'x-component': 'TimePicker.RangePicker', 28 | type: 'string', 29 | }, 30 | }, 31 | } 32 | 33 | const Demo: React.FC = () => { 34 | return ( 35 | 36 | 37 | 38 | 提交 39 | 40 | 41 | ) 42 | } 43 | 44 | export default Demo 45 | -------------------------------------------------------------------------------- /docs/demos/transfer/Markup.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Transfer } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | FormItem, 9 | Transfer, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | item.title ?? null, 30 | }} 31 | /> 32 | 33 | 34 | Submit 35 | 36 | 37 | ) 38 | } 39 | 40 | export default Demo 41 | -------------------------------------------------------------------------------- /docs/demos/transfer/Markup.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Transfer } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const SchemaField = createSchemaField({ 7 | components: { 8 | Transfer, 9 | FormItem, 10 | }, 11 | }) 12 | 13 | const form = createForm() 14 | 15 | const Demo: React.FC = () => { 16 | return ( 17 | 18 | 19 | item.title ?? null, 30 | }} 31 | /> 32 | 33 | 34 | 提交 35 | 36 | 37 | ) 38 | } 39 | export default Demo 40 | -------------------------------------------------------------------------------- /docs/demos/transfer/PureJsx.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Transfer } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | item.title, 22 | }, 23 | ]} 24 | /> 25 | 26 | Submit 27 | 28 | 29 | ) 30 | } 31 | export default Demo 32 | -------------------------------------------------------------------------------- /docs/demos/transfer/PureJsx.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Transfer } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { Field, FormProvider } from '@formily/react' 4 | import React from 'react' 5 | 6 | const form = createForm() 7 | const Demo: React.FC = () => { 8 | return ( 9 | 10 | item.title, 22 | }, 23 | ]} 24 | /> 25 | 26 | 提交 27 | 28 | 29 | ) 30 | } 31 | export default Demo 32 | -------------------------------------------------------------------------------- /docs/demos/transfer/Schema.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Transfer } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import type { TransferItem } from 'antd/es/transfer' 5 | import React from 'react' 6 | 7 | const SchemaField = createSchemaField({ 8 | components: { 9 | FormItem, 10 | Transfer, 11 | }, 12 | }) 13 | 14 | const form = createForm() 15 | 16 | const renderTitle = (item: TransferItem) => item.title 17 | 18 | const schema: ISchema = { 19 | type: 'object', 20 | properties: { 21 | transfer: { 22 | type: 'array', 23 | title: 'shuttle box', 24 | 'x-decorator': 'FormItem', 25 | 'x-component': 'Transfer', 26 | enum: [ 27 | { title: 'Option 1', key: 1 }, 28 | { title: 'Option 2', key: 2 }, 29 | ], 30 | 'x-component-props': { 31 | render: '{{renderTitle}}', 32 | }, 33 | }, 34 | }, 35 | } 36 | 37 | const Demo: React.FC = () => { 38 | return ( 39 | 40 | 41 | 42 | Submit 43 | 44 | 45 | ) 46 | } 47 | 48 | export default Demo 49 | -------------------------------------------------------------------------------- /docs/demos/transfer/Schema.zh-CN.tsx: -------------------------------------------------------------------------------- 1 | import { FormButtonGroup, FormItem, Submit, Transfer } from '@formily/antd-v5' 2 | import { createForm } from '@formily/core' 3 | import { createSchemaField, FormProvider, ISchema } from '@formily/react' 4 | import type { TransferItem } from 'antd/es/transfer' 5 | import React from 'react' 6 | 7 | const SchemaField = createSchemaField({ 8 | components: { 9 | FormItem, 10 | Transfer, 11 | }, 12 | }) 13 | 14 | const form = createForm() 15 | 16 | const renderTitle = (item: TransferItem) => item.title 17 | 18 | const schema: ISchema = { 19 | type: 'object', 20 | properties: { 21 | transfer: { 22 | type: 'array', 23 | title: '穿梭框', 24 | 'x-decorator': 'FormItem', 25 | 'x-component': 'Transfer', 26 | enum: [ 27 | { title: '选项1', key: 1 }, 28 | { title: '选项2', key: 2 }, 29 | ], 30 | 'x-component-props': { 31 | render: '{{renderTitle}}', 32 | }, 33 | }, 34 | }, 35 | } 36 | 37 | const Demo: React.FC = () => { 38 | return ( 39 | 40 | 41 | 42 | 提交 43 | 44 | 45 | ) 46 | } 47 | 48 | export default Demo 49 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Formily-Alibaba unified front-end form solution 3 | order: 10 4 | hero: 5 | title: Formily Antd 6 | desc: Formily Component System Based on Ant Design Encapsulation 7 | actions: 8 | - text: Home Site 9 | link: //formilyjs.org 10 | - text: Document 11 | link: /components 12 | features: 13 | - icon: https://img.alicdn.com/imgextra/i2/O1CN016i72sH1c5wh1kyy9U_!!6000000003550-55-tps-800-800.svg 14 | title: Easier To Use 15 | desc: Out of the box, rich cases 16 | - icon: https://img.alicdn.com/imgextra/i1/O1CN01bHdrZJ1rEOESvXEi5_!!6000000005599-55-tps-800-800.svg 17 | title: More Efficient 18 | desc: Stupid writing, super high performance 19 | - icon: https://img.alicdn.com/imgextra/i3/O1CN01xlETZk1G0WSQT6Xii_!!6000000000560-55-tps-800-800.svg 20 | title: More Professional 21 | desc: complete, flexible, elegant 22 | footer: Open-source MIT Licensed | Copyright © 2019-present
Powered by self 23 | --- 24 | 25 | ## Installation 26 | 27 | ```bash 28 | npm install --save antd dayjs 29 | npm install --save @formily/core @formily/react @formily/antd-v5 30 | 31 | ``` 32 | -------------------------------------------------------------------------------- /docs/index.zh-CN.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Formily - 阿里巴巴统一前端表单解决方案 3 | order: 10 4 | hero: 5 | title: Formily Antd 6 | desc: 基于Ant Design封装的优雅且易用的Formily2.x组件体系 7 | actions: 8 | - text: 主站文档 9 | link: //formilyjs.org 10 | - text: 组件文档 11 | link: /zh-CN/components 12 | features: 13 | - icon: https://img.alicdn.com/imgextra/i2/O1CN016i72sH1c5wh1kyy9U_!!6000000003550-55-tps-800-800.svg 14 | title: 更易用 15 | desc: 开箱即用，案例丰富 16 | - icon: https://img.alicdn.com/imgextra/i1/O1CN01bHdrZJ1rEOESvXEi5_!!6000000005599-55-tps-800-800.svg 17 | title: 更高效 18 | desc: 傻瓜写法，超高性能 19 | - icon: https://img.alicdn.com/imgextra/i3/O1CN01xlETZk1G0WSQT6Xii_!!6000000000560-55-tps-800-800.svg 20 | title: 更专业 21 | desc: 完备，灵活，优雅 22 | footer: Open-source MIT Licensed | Copyright © 2019-present
Powered by self 23 | --- 24 | 25 | ## 安装 26 | 27 | ```bash 28 | npm install --save antd dayjs 29 | npm install --save @formily/core @formily/react @formily/antd-v5 30 | 31 | ``` 32 | 33 | ## 快速开始 34 | -------------------------------------------------------------------------------- /docs/types.ts: -------------------------------------------------------------------------------- 1 | declare module 'mfetch' { 2 | type Fetch = typeof fetch 3 | const mfetch: Fetch 4 | export { mfetch as fetch } 5 | } 6 | -------------------------------------------------------------------------------- /global.config.ts: -------------------------------------------------------------------------------- 1 | import prettyFormat from 'pretty-format' 2 | 3 | global['prettyFormat'] = prettyFormat 4 | 5 | global['sleep'] = (time) => { 6 | return new Promise((resolve) => setTimeout(resolve, time)) 7 | } 8 | 9 | global['requestAnimationFrame'] = (fn) => setTimeout(fn) 10 | 11 | global.document.documentElement.style['grid-column-gap'] = true 12 | 13 | // 把 console.error 转换成 error，方便断言 14 | ;(() => { 15 | const spy = jest.spyOn(console, 'error') 16 | beforeAll(() => { 17 | spy.mockImplementation((message) => { 18 | console.log(message) 19 | throw new Error(message) 20 | }) 21 | }) 22 | 23 | afterAll(() => { 24 | spy.mockRestore() 25 | }) 26 | })() 27 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | collectCoverage: true, 3 | verbose: true, 4 | testEnvironment: 'jsdom', 5 | preset: 'ts-jest', 6 | testMatch: ['**/__tests__/**/*.spec.[jt]s?(x)'], 7 | setupFilesAfterEnv: [ 8 | require.resolve('jest-dom/extend-expect'), 9 | './global.config.ts', 10 | ], 11 | // moduleNameMapper: process.env.TEST_ENV === 'production' ? undefined : alias, 12 | globals: { 13 | 'ts-jest': { 14 | babelConfig: false, 15 | tsconfig: './tsconfig.jest.json', 16 | diagnostics: false, 17 | }, 18 | }, 19 | coveragePathIgnorePatterns: [ 20 | '/node_modules/', 21 | '/__tests__/', 22 | '/esm/', 23 | '/lib/', 24 | 'package.json', 25 | '/demo/', 26 | '/packages/builder/src/__tests__/', 27 | '/packages/builder/src/components/', 28 | '/packages/builder/src/configs/', 29 | 'package-lock.json', 30 | ], 31 | } 32 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.2.4", 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "npmClientArgs": ["--ignore-engines"], 6 | "command": { 7 | "version": { 8 | "forcePublish": true, 9 | "exact": true, 10 | "message": "chore(release): 😊 publish %s" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /packages/components/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/components/.npmignore.tpl: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/components/README.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5 2 | 3 | > Formily Component Adaptor 4 | 5 | ## Install 6 | 7 | ```bash 8 | npm install @formily/antd-v5 --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/components/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5 2 | 3 | > Formily 组件库桥接层 4 | 5 | ## 安装 6 | 7 | ```bash 8 | npm install @formily/antd-v5 --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/components/builder.config.ts: -------------------------------------------------------------------------------- 1 | import { IBuilderConfig } from '@formily/template' 2 | 3 | export const BuilderConfig: IBuilderConfig = { 4 | targetLibName: 'antd', 5 | targetLibCjsDir: 'lib', 6 | targetLibEsDir: 'es', 7 | externals: { 8 | antd: 'antd', 9 | dayjs: 'dayjs', 10 | }, 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formily/antd-v5", 3 | "version": "1.2.4", 4 | "license": "MIT", 5 | "main": "lib", 6 | "types": "lib/index.d.ts", 7 | "engines": { 8 | "npm": ">=3.0.0" 9 | }, 10 | "module": "esm", 11 | "umd:main": "dist/formily.antd.umd.production.js", 12 | "unpkg": "dist/formily.antd.umd.production.js", 13 | "jsdelivr": "dist/formily.antd.umd.production.js", 14 | "jsnext:main": "esm", 15 | "sideEffects": [ 16 | "dist/*", 17 | "esm/*.js", 18 | "lib/*.js", 19 | "src/*.ts", 20 | "*.less", 21 | "*.scss", 22 | "**/*/style.js" 23 | ], 24 | "scripts": { 25 | "build": "formily-tpl build" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/formilyjs/antd.git" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/formilyjs/antd/issues" 33 | }, 34 | "homepage": "https://github.com/formilyjs/antd#readme", 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "peerDependencies": { 39 | "@types/react": ">=16.8.0 || >=17.0.0", 40 | "@types/react-dom": ">=16.8.0 || >=17.0.0", 41 | "antd": "^5.13.0", 42 | "react": ">=16.8.0 || >=17.0.0", 43 | "react-dom": ">=16.8.0", 44 | "react-is": ">=16.8.0 || >=17.0.0" 45 | }, 46 | "dependencies": { 47 | "@ant-design/cssinjs": "^1.3.1", 48 | "@ant-design/icons": "^5.0.0", 49 | "@dnd-kit/core": "^6.0.0", 50 | "@dnd-kit/sortable": "^7.0.0", 51 | "@formily/core": "^2.2.0", 52 | "@formily/grid": "^2.2.0", 53 | "@formily/json-schema": "^2.2.0", 54 | "@formily/react": "^2.2.0", 55 | "@formily/reactive": "^2.2.0", 56 | "@formily/reactive-react": "^2.2.0", 57 | "@formily/shared": "^2.2.0", 58 | "classnames": "^2.2.6", 59 | "react-sticky-box": "^1.0.2" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/dayjs.ts: -------------------------------------------------------------------------------- 1 | import { isArr, isFn, isEmpty } from '@formily/shared' 2 | import dayjs, { ConfigType, Dayjs } from 'dayjs' 3 | 4 | export function dayjsable(value: ConfigType, format?: string): Dayjs 5 | export function dayjsable(value: ConfigType[], format?: string): Dayjs[] 6 | 7 | export function dayjsable( 8 | value: ConfigType | ConfigType[], 9 | format?: string 10 | ): any { 11 | if (!value) return value 12 | if (Array.isArray(value)) { 13 | return value.map((val) => { 14 | const date = dayjs(val, format) 15 | if (date.isValid()) return date 16 | const _date = dayjs(val) 17 | return _date.isValid() ? _date : val 18 | }) 19 | } else { 20 | const date = dayjs(value, format) 21 | if (date.isValid()) return date 22 | const _date = dayjs(value) 23 | return _date.isValid() ? _date : value 24 | } 25 | } 26 | 27 | export const formatDayjsValue = ( 28 | value: any, 29 | format: any, 30 | placeholder?: string 31 | ): string | string[] => { 32 | const validFormatDate = (date: any, format: any) => { 33 | if (typeof date === 'number') { 34 | return dayjs(date).format(format) 35 | } 36 | const _date = dayjs(date, format) 37 | return _date.isValid() ? _date.format(format) : date 38 | } 39 | 40 | const formatDate = (date: any, format: any, i = 0) => { 41 | if (!date) return placeholder 42 | if (isArr(format)) { 43 | const _format = format[i] 44 | if (isFn(_format)) { 45 | return _format(date) 46 | } 47 | if (isEmpty(_format)) { 48 | return date 49 | } 50 | return validFormatDate(date, _format) 51 | } else { 52 | if (isFn(format)) { 53 | return format(date) 54 | } 55 | if (isEmpty(format)) { 56 | return date 57 | } 58 | return validFormatDate(date, format) 59 | } 60 | } 61 | if (isArr(value)) { 62 | return value.map((val, index) => { 63 | return formatDate(val, format, index) 64 | }) 65 | } else { 66 | return value ? formatDate(value, format) : value || placeholder 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useClickAway' 2 | export * from './useConfig' 3 | export * from './usePrefixCls' 4 | export * from './useToken' 5 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/hooks/useClickAway.ts: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect, MutableRefObject } from 'react' 2 | 3 | const defaultEvent = 'click' 4 | 5 | type EventType = MouseEvent | TouchEvent 6 | 7 | type BasicTarget = 8 | | (() => T | null) 9 | | T 10 | | null 11 | | MutableRefObject 12 | 13 | type TargetElement = HTMLElement | Element | Document | Window 14 | 15 | function getTargetElement( 16 | target?: BasicTarget, 17 | defaultElement?: TargetElement 18 | ): TargetElement | undefined | null { 19 | if (!target) { 20 | return defaultElement 21 | } 22 | 23 | let targetElement: TargetElement | undefined | null 24 | 25 | if (typeof target === 'function') { 26 | targetElement = target() 27 | } else if ('current' in target) { 28 | targetElement = target.current 29 | } else { 30 | targetElement = target 31 | } 32 | 33 | return targetElement 34 | } 35 | 36 | export const useClickAway = ( 37 | onClickAway: (event: EventType) => void, 38 | target: BasicTarget | BasicTarget[], 39 | eventName: string = defaultEvent 40 | ) => { 41 | const onClickAwayRef = useRef(onClickAway) 42 | onClickAwayRef.current = onClickAway 43 | 44 | useEffect(() => { 45 | const handler = (event: any) => { 46 | const targets = Array.isArray(target) ? target : [target] 47 | if ( 48 | targets.some((targetItem) => { 49 | const targetElement = getTargetElement(targetItem) as HTMLElement 50 | return !targetElement || targetElement?.contains(event.target) 51 | }) 52 | ) { 53 | return 54 | } 55 | onClickAwayRef.current(event) 56 | } 57 | 58 | document.addEventListener(eventName, handler) 59 | 60 | return () => { 61 | document.removeEventListener(eventName, handler) 62 | } 63 | }, [target, eventName]) 64 | } 65 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/hooks/useConfig.ts: -------------------------------------------------------------------------------- 1 | import { ConfigProvider } from 'antd' 2 | import { useContext } from 'react' 3 | 4 | const { ConfigContext } = ConfigProvider 5 | export const useConfig = () => useContext(ConfigContext) 6 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/hooks/usePrefixCls.ts: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react' 2 | import { ConfigProvider } from 'antd' 3 | 4 | export const usePrefixCls = ( 5 | tag?: string, 6 | props?: { 7 | prefixCls?: string 8 | } 9 | ) => { 10 | if ('ConfigContext' in ConfigProvider) { 11 | const { getPrefixCls } = useContext(ConfigProvider.ConfigContext) 12 | return getPrefixCls(tag, props?.prefixCls) 13 | } else { 14 | const prefix = props?.prefixCls ?? 'ant-' 15 | return `${prefix}${tag ?? ''}` 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/hooks/useToken.ts: -------------------------------------------------------------------------------- 1 | import { theme } from 'antd' 2 | const { useToken } = theme 3 | export { useToken } 4 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/index.ts: -------------------------------------------------------------------------------- 1 | export * from './dayjs' 2 | export * from './hooks' 3 | export * from './loading' 4 | export * from './pickDataProps' 5 | export * from './portal' 6 | export * from './sort' 7 | export * from './style' 8 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/loading.ts: -------------------------------------------------------------------------------- 1 | import { message } from 'antd' 2 | 3 | export const loading = async ( 4 | title: React.ReactNode = 'Loading...', 5 | processor: () => Promise 6 | ) => { 7 | let hide: any = null 8 | let loading = setTimeout(() => { 9 | hide = message.loading(title) 10 | }, 100) 11 | try { 12 | return await processor() 13 | } finally { 14 | hide?.() 15 | clearTimeout(loading) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/moment.ts: -------------------------------------------------------------------------------- 1 | // FOR: https://github.com/ant-design/antd-moment-webpack-plugin 2 | import { isArr, isFn, isEmpty } from '@formily/shared' 3 | import moment, { MomentInput, Moment } from 'moment' 4 | 5 | export function dayjsable(value: MomentInput, format?: string): Moment 6 | export function dayjsable(value: MomentInput[], format?: string): Moment[] 7 | 8 | export function dayjsable( 9 | value: MomentInput | MomentInput[], 10 | format?: string 11 | ): any { 12 | if (!value) return value 13 | if (Array.isArray(value)) { 14 | return value.map((val) => { 15 | const date = moment(val, format) 16 | if (date.isValid()) return date 17 | const _date = moment(val) 18 | return _date.isValid() ? _date : val 19 | }) 20 | } else { 21 | const date = moment(value, format) 22 | if (date.isValid()) return date 23 | const _date = moment(value) 24 | return _date.isValid() ? _date : value 25 | } 26 | } 27 | 28 | export const formatDayjsValue = ( 29 | value: any, 30 | format: any, 31 | placeholder?: string 32 | ): string | string[] => { 33 | const validFormatDate = (date: any, format: any) => { 34 | if (typeof date === 'number') { 35 | return moment(date).format(format) 36 | } 37 | const _date = moment(date, format) 38 | return _date.isValid() ? _date.format(format) : date 39 | } 40 | 41 | const formatDate = (date: any, format: any, i = 0) => { 42 | if (!date) return placeholder 43 | if (isArr(format)) { 44 | const _format = format[i] 45 | if (isFn(_format)) { 46 | return _format(date) 47 | } 48 | if (isEmpty(_format)) { 49 | return date 50 | } 51 | return validFormatDate(date, _format) 52 | } else { 53 | if (isFn(format)) { 54 | return format(date) 55 | } 56 | if (isEmpty(format)) { 57 | return date 58 | } 59 | return validFormatDate(date, format) 60 | } 61 | } 62 | if (isArr(value)) { 63 | return value.map((val, index) => { 64 | return formatDate(val, format, index) 65 | }) 66 | } else { 67 | return value ? formatDate(value, format) : value || placeholder 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/pickDataProps.ts: -------------------------------------------------------------------------------- 1 | export const pickDataProps = (props: any = {}) => { 2 | const results = {} 3 | 4 | for (let key in props) { 5 | if (key.indexOf('data-') > -1) { 6 | results[key] = props[key] 7 | } 8 | } 9 | 10 | return results 11 | } 12 | -------------------------------------------------------------------------------- /packages/components/src/__builtins__/portal.tsx: -------------------------------------------------------------------------------- 1 | import { Observer, ReactFC } from '@formily/react' 2 | import { observable } from '@formily/reactive' 3 | import React, { Fragment } from 'react' 4 | import { createPortal } from 'react-dom' 5 | import { render as reactRender, unmount as reactUnmount } from './render' 6 | export interface IPortalProps { 7 | id?: string | symbol 8 | } 9 | 10 | const PortalMap = observable(new Map()) 11 | 12 | export const createPortalProvider = (id: string | symbol) => { 13 | const Portal: ReactFC = (props) => { 14 | const portalId = props.id ?? id 15 | if (portalId && !PortalMap.has(portalId)) { 16 | PortalMap.set(portalId, null) 17 | } 18 | 19 | return ( 20 | 21 | {props.children} 22 | 23 | {() => { 24 | if (portalId!) return <> 25 | const portal = PortalMap.get(portalId) 26 | if (portal) return createPortal(portal, document.body) 27 | return <> 28 | }} 29 | 30 | 31 | ) 32 | } 33 | 34 | return Portal 35 | } 36 | 37 | export function createPortalRoot( 38 | host: HTMLElement, 39 | id: string 40 | ) { 41 | function render(renderer?: () => T) { 42 | if (PortalMap.has(id)) { 43 | PortalMap.set(id, renderer?.()) 44 | } else if (host) { 45 | reactRender({renderer?.()}, host) 46 | } 47 | } 48 | 49 | function unmount() { 50 | if (PortalMap.has(id)) { 51 | PortalMap.set(id, null) 52 | } 53 | if (host) { 54 | const unmountResult = reactUnmount(host) 55 | if (unmountResult && host.parentNode) { 56 | host.parentNode?.removeChild(host) 57 | } 58 | } 59 | } 60 | 61 | return { 62 | render, 63 | unmount, 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /packages/components/src/array-base/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | 3 | export default genStyleHook('array-base', (token) => { 4 | const { 5 | componentCls, 6 | colorText, 7 | fontSizeLG, 8 | colorPrimaryText, 9 | colorTextDisabled, 10 | } = token 11 | return { 12 | [componentCls]: { 13 | '&-remove, &-copy': { 14 | transition: 'all 0.25s ease-in-out', 15 | color: colorText, 16 | fontSize: fontSizeLG, 17 | 18 | ':hover': { 19 | color: colorPrimaryText, 20 | }, 21 | 22 | '&-disabled': { 23 | color: colorTextDisabled, 24 | cursor: 'not-allowed !important', 25 | 26 | '&:hover': { 27 | color: colorTextDisabled, 28 | }, 29 | }, 30 | }, 31 | 32 | '&-sort-handle': { 33 | cursor: 'move', 34 | color: '#888 !important', 35 | }, 36 | 37 | '&-addition': { 38 | transition: 'all 0.25s ease-in-out', 39 | }, 40 | 41 | '&-move-down, &-move-up': { 42 | transition: 'all 0.25s ease-in-out', 43 | color: colorText, 44 | fontSize: fontSizeLG, 45 | marginInlineStart: 6, 46 | 47 | ':hover': { 48 | color: colorPrimaryText, 49 | }, 50 | 51 | '&-disabled': { 52 | color: colorTextDisabled, 53 | cursor: 'not-allowed !important', 54 | 55 | '&:hover': { 56 | color: colorTextDisabled, 57 | }, 58 | }, 59 | }, 60 | }, 61 | } 62 | }) 63 | -------------------------------------------------------------------------------- /packages/components/src/array-cards/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from '../__builtins__' 2 | 3 | export default genStyleHook('array-cards', (token) => { 4 | const { componentCls, antCls } = token 5 | const arrayBase = `${antCls}-formily-array-base` 6 | return { 7 | [componentCls]: { 8 | '&-item': { 9 | marginBottom: '10px !important', 10 | }, 11 | 12 | [`${arrayBase}-copy`]: { 13 | marginInlineStart: 6, 14 | }, 15 | }, 16 | } 17 | }) 18 | -------------------------------------------------------------------------------- /packages/components/src/array-collapse/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | export default genStyleHook('', (token) => { 3 | const { componentCls } = token 4 | return { 5 | [componentCls]: { 6 | '&-item': { 7 | marginBottom: '10px !important', 8 | }, 9 | }, 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /packages/components/src/array-items/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | export default genStyleHook('array-items', (token) => { 3 | const { 4 | componentCls, 5 | antCls, 6 | colorBgBase, 7 | fontSizeSM, 8 | colorBorder, 9 | colorText, 10 | } = token 11 | 12 | const itemCls = `${antCls}-formily-item` 13 | return { 14 | [componentCls]: { 15 | [`${componentCls}-item-inner`]: { 16 | visibility: 'visible', 17 | }, 18 | 19 | '&-item': { 20 | zIndex: 100000, 21 | }, 22 | 23 | '&-card': { 24 | display: 'flex', 25 | border: `1px solid ${colorBorder}`, 26 | marginBottom: 10, 27 | padding: '3px 6px', 28 | background: colorBgBase, 29 | justifyContent: 'space-between', 30 | color: colorText, 31 | 32 | [`${itemCls}:not(${itemCls}-feedback-layout-popover)`]: { 33 | marginBottom: '0 !important', 34 | 35 | [`${itemCls}-help`]: { 36 | position: 'absolute', 37 | fontSize: fontSizeSM, 38 | top: '100%', 39 | background: colorBgBase, 40 | width: '100%', 41 | marginTop: 3, 42 | padding: 3, 43 | zIndex: 1, 44 | borderRadius: 3, 45 | boxShadow: `0 0 10px ${colorBorder}`, 46 | }, 47 | }, 48 | }, 49 | 50 | '&-divide': { 51 | display: 'flex', 52 | borderBottom: `1px solid ${colorBorder}`, 53 | padding: '10px 0', 54 | justifyContent: 'space-between', 55 | 56 | [`${itemCls}:not(${itemCls}-feedback-layout-popover)`]: { 57 | marginBottom: '0 !important', 58 | 59 | [`${itemCls}-help`]: { 60 | position: 'absolute', 61 | fontSize: fontSizeSM, 62 | top: '100%', 63 | background: colorBgBase, 64 | width: '100%', 65 | marginTop: 3, 66 | padding: 3, 67 | zIndex: 1, 68 | borderRadius: 3, 69 | boxShadow: `0 0 10px ${colorBorder}`, 70 | }, 71 | }, 72 | }, 73 | }, 74 | } 75 | }) 76 | -------------------------------------------------------------------------------- /packages/components/src/array-table/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from '../__builtins__' 2 | 3 | export default genStyleHook('array-table', (token) => { 4 | const { 5 | componentCls, 6 | antCls, 7 | colorErrorBorder, 8 | fontSizeSM, 9 | colorBgBase, 10 | colorBorder, 11 | colorBgContainer, 12 | } = token 13 | const itemCls = `${antCls}-formily-item` 14 | 15 | return { 16 | [componentCls]: { 17 | [`${componentCls}-pagination`]: { 18 | display: 'flex', 19 | justifyContent: 'center', 20 | 21 | [`${componentCls}-status-select.has-error`]: { 22 | [`${antCls}-select-selector`]: { 23 | borderColor: `${colorErrorBorder} !important`, 24 | }, 25 | }, 26 | }, 27 | [`${antCls}-table`]: { 28 | td: { 29 | visibility: 'visible', 30 | [`${itemCls}:not(${itemCls}-feedback-layout-popover)`]: { 31 | marginBottom: '0 !important', 32 | 33 | [`${itemCls}-help`]: { 34 | position: 'absolute', 35 | fontSize: fontSizeSM, 36 | top: '100%', 37 | background: colorBgBase, 38 | width: '100%', 39 | marginTop: 3, 40 | padding: 3, 41 | zIndex: 1, 42 | borderRadius: 3, 43 | boxShadow: `0 0 10px ${colorBorder}`, 44 | animation: 'none', 45 | transform: 'translateY(0)', 46 | opacity: 1, 47 | }, 48 | }, 49 | }, 50 | 51 | table: { 52 | overflow: 'hidden', 53 | }, 54 | }, 55 | 56 | [`${componentCls}-sort-helper`]: { 57 | background: colorBgContainer, 58 | border: `1px solid ${colorBorder}`, 59 | zIndex: 10, 60 | }, 61 | }, 62 | } 63 | }) 64 | -------------------------------------------------------------------------------- /packages/components/src/cascader/index.tsx: -------------------------------------------------------------------------------- 1 | import { LoadingOutlined } from '@ant-design/icons' 2 | import { connect, mapProps, mapReadPretty } from '@formily/react' 3 | import { Cascader as AntdCascader } from 'antd' 4 | import React from 'react' 5 | import { PreviewText } from '../preview-text' 6 | 7 | export const Cascader = connect( 8 | AntdCascader, 9 | mapProps( 10 | { 11 | dataSource: 'options', 12 | }, 13 | (props, field) => { 14 | return { 15 | ...props, 16 | suffixIcon: 17 | field?.['loading'] || field?.['validating'] ? ( 18 | 19 | ) : ( 20 | props.suffixIcon 21 | ), 22 | } 23 | } 24 | ), 25 | mapReadPretty(PreviewText.Cascader) 26 | ) 27 | 28 | export default Cascader 29 | -------------------------------------------------------------------------------- /packages/components/src/checkbox/index.tsx: -------------------------------------------------------------------------------- 1 | import { connect, mapProps, mapReadPretty } from '@formily/react' 2 | import { Checkbox as AntdCheckbox } from 'antd' 3 | import { PreviewText } from '../preview-text' 4 | 5 | const InternalCheckbox = connect( 6 | AntdCheckbox, 7 | mapProps({ 8 | value: 'checked', 9 | onInput: 'onChange', 10 | }) 11 | ) 12 | 13 | const Group = connect( 14 | AntdCheckbox.Group, 15 | mapProps({ 16 | dataSource: 'options', 17 | }), 18 | mapReadPretty(PreviewText.Select, { 19 | mode: 'tags', 20 | }) 21 | ) 22 | 23 | export const Checkbox = Object.assign(InternalCheckbox, { 24 | __ANT_CHECKBOX: true, 25 | Group, 26 | }) 27 | 28 | export default Checkbox 29 | -------------------------------------------------------------------------------- /packages/components/src/date-picker/index.tsx: -------------------------------------------------------------------------------- 1 | import { connect, mapProps, mapReadPretty } from '@formily/react' 2 | import { DatePicker as AntdDatePicker } from 'antd' 3 | import { DatePickerProps as AntdDatePickerProps } from 'antd/es/date-picker' 4 | import dayjs from 'dayjs' 5 | import { PreviewText } from '../preview-text' 6 | import { dayjsable, formatDayjsValue } from '../__builtins__' 7 | 8 | type DatePickerProps = Exclude< 9 | PickerProps, 10 | 'value' | 'onChange' 11 | > & { 12 | value: string 13 | onChange: (value: string | string[]) => void 14 | } 15 | 16 | const mapDateFormat = function () { 17 | const getDefaultFormat = (props: DatePickerProps) => { 18 | if (props['picker'] === 'month') { 19 | return 'YYYY-MM' 20 | } else if (props['picker'] === 'quarter') { 21 | return 'YYYY-\\QQ' 22 | } else if (props['picker'] === 'year') { 23 | return 'YYYY' 24 | } else if (props['picker'] === 'week') { 25 | return 'gggg-wo' 26 | } 27 | return props['showTime'] ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD' 28 | } 29 | return (props: any) => { 30 | const format = props['format'] || getDefaultFormat(props) 31 | const onChange = props.onChange 32 | return { 33 | ...props, 34 | format: format, 35 | value: dayjsable(props.value, format === 'gggg-wo' ? 'gggg-ww' : format), 36 | onChange: (value: dayjs.Dayjs | dayjs.Dayjs[]) => { 37 | if (onChange) { 38 | onChange(formatDayjsValue(value, format)) 39 | } 40 | }, 41 | } 42 | } 43 | } 44 | 45 | const InternalDatePicker = connect( 46 | AntdDatePicker, 47 | mapProps(mapDateFormat()), 48 | mapReadPretty(PreviewText.DatePicker) 49 | ) 50 | const RangePicker = connect( 51 | AntdDatePicker.RangePicker, 52 | mapProps(mapDateFormat()), 53 | mapReadPretty(PreviewText.DateRangePicker) 54 | ) 55 | export const DatePicker = Object.assign(InternalDatePicker, { 56 | RangePicker, 57 | }) 58 | 59 | export default DatePicker 60 | -------------------------------------------------------------------------------- /packages/components/src/date-picker/style.ts: -------------------------------------------------------------------------------- 1 | import 'antd/lib/date-picker/style/index' 2 | -------------------------------------------------------------------------------- /packages/components/src/editable/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | export default genStyleHook('editable', (token) => { 3 | const { antCls, componentCls, fontSizeSM, colorPrimary } = token 4 | return { 5 | [componentCls]: { 6 | cursor: 'pointer', 7 | display: 'inline-block !important', 8 | 9 | [`${antCls}-form-text`]: { 10 | display: 'flex', 11 | alignItems: 'center', 12 | 13 | [`${antCls}-tag`]: { 14 | transition: 'none !important', 15 | }, 16 | 17 | [`${antCls}-tag:last-child`]: { 18 | paddingInlineEnd: '0 !important', 19 | }, 20 | }, 21 | 22 | [`${componentCls}-content`]: { 23 | display: 'flex', 24 | alignItems: 'center', 25 | '> *': { 26 | marginInlineEnd: 3, 27 | 28 | '&:last-child': { 29 | marginInlineEnd: 0, 30 | }, 31 | }, 32 | }, 33 | 34 | [`${componentCls}-edit-btn, 35 | ${componentCls}-close-btn`]: { 36 | transition: 'all .25s ease-in-out', 37 | color: '#aaa', 38 | fontSize: fontSizeSM, 39 | 40 | '&:hover': { 41 | color: colorPrimary, 42 | }, 43 | }, 44 | 45 | [`${componentCls}-preview`]: { 46 | whiteSpace: 'nowrap', 47 | textOverflow: 'ellipsis', 48 | overflow: 'hidden', 49 | wordBreak: 'break-all', 50 | maxWidth: '100%', 51 | display: 'block', 52 | }, 53 | }, 54 | } 55 | }) 56 | -------------------------------------------------------------------------------- /packages/components/src/form-button-group/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | 3 | export default genStyleHook('form-button-group', (token) => { 4 | const { componentCls, antCls, colorBorder } = token 5 | return { 6 | [componentCls]: { 7 | '&-sticky': { 8 | padding: '10px 0', 9 | borderTop: `1px solid ${colorBorder}`, 10 | zIndex: 999, 11 | 12 | [`${componentCls}-sticky-inner`]: { 13 | display: 'flex', 14 | [`${antCls}-formily-item`]: { 15 | flex: 2, 16 | }, 17 | }, 18 | }, 19 | }, 20 | } 21 | }) 22 | -------------------------------------------------------------------------------- /packages/components/src/form-grid/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | export default genStyleHook('form-grid', (token) => { 3 | const { componentCls } = token 4 | return { 5 | [`${componentCls}-layout`]: { 6 | display: 'grid', 7 | }, 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /packages/components/src/form-item/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useOverflow' 2 | export * from './useFormItemLayout' 3 | -------------------------------------------------------------------------------- /packages/components/src/form-item/hooks/useFormItemLayout.tsx: -------------------------------------------------------------------------------- 1 | import { QuestionCircleOutlined } from '@ant-design/icons' 2 | import React from 'react' 3 | import { useFormLayout } from '../../form-layout' 4 | import { IFormItemProps } from '../types' 5 | 6 | export const useFormItemLayout = (props: IFormItemProps) => { 7 | const layout = useFormLayout() 8 | const layoutType = props.layout ?? layout.layout ?? 'horizontal' 9 | return { 10 | ...props, 11 | layout: layoutType, 12 | colon: props.colon ?? layout.colon, 13 | labelAlign: 14 | layoutType === 'vertical' 15 | ? props.labelAlign ?? 'left' 16 | : props.labelAlign ?? layout.labelAlign ?? 'right', 17 | labelWrap: props.labelWrap ?? layout.labelWrap, 18 | labelWidth: props.labelWidth ?? layout.labelWidth, 19 | wrapperWidth: props.wrapperWidth ?? layout.wrapperWidth, 20 | labelCol: props.labelCol ?? layout.labelCol, 21 | wrapperCol: props.wrapperCol ?? layout.wrapperCol, 22 | wrapperAlign: props.wrapperAlign ?? layout.wrapperAlign, 23 | wrapperWrap: props.wrapperWrap ?? layout.wrapperWrap, 24 | fullness: props.fullness ?? layout.fullness, 25 | size: props.size ?? layout.size, 26 | inset: props.inset ?? layout.inset, 27 | asterisk: props.asterisk, 28 | bordered: props.bordered ?? layout.bordered, 29 | feedbackIcon: props.feedbackIcon, 30 | feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? 'loose', 31 | tooltipLayout: props.tooltipLayout ?? layout.tooltipLayout ?? 'icon', 32 | tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? ( 33 | 34 | ), 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/components/src/form-item/hooks/useOverflow.ts: -------------------------------------------------------------------------------- 1 | import { useState, useRef, useEffect } from 'react' 2 | import { useFormLayout } from '../../form-layout' 3 | 4 | export function useOverflow< 5 | Container extends HTMLElement, 6 | Content extends HTMLElement 7 | >() { 8 | const [overflow, setOverflow] = useState(false) 9 | const containerRef = useRef(null) 10 | const contentRef = useRef(null) 11 | const layout = useFormLayout() 12 | const labelCol = JSON.stringify(layout.labelCol) 13 | 14 | useEffect(() => { 15 | requestAnimationFrame(() => { 16 | if (containerRef.current && contentRef.current) { 17 | const contentWidth = contentRef.current.getBoundingClientRect().width 18 | const containerWidth = 19 | containerRef.current.getBoundingClientRect().width 20 | if (contentWidth && containerWidth && containerWidth < contentWidth) { 21 | if (!overflow) setOverflow(true) 22 | } else { 23 | if (overflow) setOverflow(false) 24 | } 25 | } 26 | }) 27 | }, [labelCol]) 28 | 29 | return { 30 | overflow, 31 | containerRef, 32 | contentRef, 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /packages/components/src/form-item/style/animation.tsx: -------------------------------------------------------------------------------- 1 | import { Keyframes } from '@ant-design/cssinjs' 2 | import { GenerateStyle } from '../../__builtins__' 3 | 4 | const antShowHelpIn = new Keyframes('antShowHelpIn', { 5 | '0%': { 6 | transform: 'translateY(-5px)', 7 | opacity: 0, 8 | }, 9 | to: { 10 | transform: ' translateY(0)', 11 | opacity: 1, 12 | }, 13 | }) 14 | 15 | export const getAnimationStyle: GenerateStyle = (token) => { 16 | const { componentCls } = token 17 | const helpCls = `${componentCls}-help` 18 | 19 | return { 20 | [helpCls]: { 21 | '&-appear, &-enter': { 22 | animationDuration: '0.3s', 23 | animationFillMode: 'both', 24 | animationPlayState: 'paused', 25 | opacity: 0, 26 | animationTimingFunction: 'cubic-bezier(0.645, 0.045, 0.355, 1)', 27 | 28 | '&-active': { 29 | animationPlayState: 'running', 30 | animationName: antShowHelpIn, 31 | }, 32 | }, 33 | }, 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /packages/components/src/form-item/style/grid.tsx: -------------------------------------------------------------------------------- 1 | import { GenerateStyle } from '../../__builtins__' 2 | 3 | export const getGridStyle: GenerateStyle = (token) => { 4 | const { componentCls } = token 5 | 6 | const colCls = `${componentCls}-item-col` 7 | 8 | const genGrid = (grid: number) => { 9 | return { 10 | flex: `0 0 ${(grid / 24) * 100}%`, 11 | maxWidth: `${(grid / 24) * 100}%`, 12 | } 13 | } 14 | const genGrids = () => { 15 | return Array.from({ length: 24 }, (_, i) => { 16 | const gridCls = `${colCls}-${i + 1}` 17 | return { 18 | [gridCls]: genGrid(i + 1), 19 | } 20 | }).reduce((acc, cur) => ({ ...acc, ...cur }), {}) 21 | } 22 | 23 | return { 24 | [componentCls]: { 25 | ...genGrids(), 26 | }, 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /packages/components/src/form-item/types.ts: -------------------------------------------------------------------------------- 1 | export interface IFormItemProps { 2 | className?: string 3 | style?: React.CSSProperties 4 | prefixCls?: string 5 | label?: React.ReactNode 6 | colon?: boolean 7 | tooltip?: React.ReactNode 8 | tooltipIcon?: React.ReactNode 9 | layout?: 'vertical' | 'horizontal' | 'inline' 10 | tooltipLayout?: 'icon' | 'text' 11 | labelStyle?: React.CSSProperties 12 | labelAlign?: 'left' | 'right' 13 | labelWrap?: boolean 14 | labelWidth?: number | string 15 | wrapperWidth?: number | string 16 | labelCol?: number 17 | wrapperCol?: number 18 | wrapperAlign?: 'left' | 'right' 19 | wrapperWrap?: boolean 20 | wrapperStyle?: React.CSSProperties 21 | fullness?: boolean 22 | addonBefore?: React.ReactNode 23 | addonAfter?: React.ReactNode 24 | size?: 'small' | 'default' | 'large' 25 | inset?: boolean 26 | extra?: React.ReactNode 27 | feedbackText?: React.ReactNode 28 | feedbackLayout?: 'loose' | 'terse' | 'popover' | 'none' | (string & {}) 29 | feedbackStatus?: 'error' | 'warning' | 'success' | 'pending' | (string & {}) 30 | feedbackIcon?: React.ReactNode 31 | getPopupContainer?: (node: HTMLElement) => HTMLElement 32 | asterisk?: boolean 33 | gridSpan?: number 34 | bordered?: boolean 35 | } 36 | -------------------------------------------------------------------------------- /packages/components/src/form/index.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Form as FormType, 3 | IFormFeedback, 4 | isForm, 5 | ObjectField, 6 | } from '@formily/core' 7 | import { 8 | FormProvider, 9 | JSXComponent, 10 | RecordScope, 11 | useParentForm, 12 | } from '@formily/react' 13 | import React from 'react' 14 | import { FormLayout, IFormLayoutProps } from '../form-layout' 15 | import { PreviewText } from '../preview-text' 16 | export interface FormProps extends IFormLayoutProps { 17 | form?: FormType 18 | component?: JSXComponent 19 | onAutoSubmit?: (values: any) => any 20 | onAutoSubmitFailed?: (feedbacks: IFormFeedback[]) => void 21 | previewTextPlaceholder?: React.ReactNode 22 | } 23 | 24 | export const Form: React.FC> = ({ 25 | form, 26 | component = 'form', 27 | onAutoSubmit, 28 | onAutoSubmitFailed, 29 | previewTextPlaceholder, 30 | ...props 31 | }) => { 32 | const top = useParentForm() 33 | const renderContent = (form: FormType | ObjectField) => ( 34 | (isForm(form) ? form.values : form.value)}> 35 | 36 | 37 | {React.createElement( 38 | component as string, 39 | { 40 | onSubmit(e: React.FormEvent) { 41 | e?.stopPropagation?.() 42 | e?.preventDefault?.() 43 | form.submit(onAutoSubmit).catch(onAutoSubmitFailed) 44 | }, 45 | }, 46 | props.children 47 | )} 48 | 49 | 50 | 51 | ) 52 | if (form) 53 | return {renderContent(form)} 54 | if (!top) throw new Error('must pass form instance by createForm') 55 | return renderContent(top) 56 | } 57 | 58 | export default Form 59 | -------------------------------------------------------------------------------- /packages/components/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './array-base' 2 | export * from './array-cards' 3 | export * from './array-collapse' 4 | export * from './array-items' 5 | export * from './array-table' 6 | export * from './array-tabs' 7 | export * from './cascader' 8 | export * from './checkbox' 9 | export * from './date-picker' 10 | export * from './editable' 11 | export * from './form' 12 | export * from './form-button-group' 13 | export * from './form-collapse' 14 | export * from './form-dialog' 15 | export * from './form-drawer' 16 | export * from './form-grid' 17 | export * from './form-item' 18 | export * from './form-layout' 19 | export * from './form-step' 20 | export * from './form-tab' 21 | export * from './input' 22 | export * from './number-picker' 23 | export * from './password' 24 | export * from './preview-text' 25 | export * from './radio' 26 | export * from './reset' 27 | export * from './select' 28 | export * from './select-table' 29 | export * from './space' 30 | export * from './submit' 31 | export * from './switch' 32 | export * from './time-picker' 33 | export * from './transfer' 34 | export * from './tree-select' 35 | export * from './upload' 36 | -------------------------------------------------------------------------------- /packages/components/src/input/index.tsx: -------------------------------------------------------------------------------- 1 | import { LoadingOutlined } from '@ant-design/icons' 2 | import { connect, mapProps, mapReadPretty, ReactFC } from '@formily/react' 3 | import { Input as AntdInput } from 'antd' 4 | import type { InputProps } from 'antd/es/input' 5 | import React from 'react' 6 | import { PreviewText } from '../preview-text' 7 | 8 | const InternalInput: ReactFC = connect( 9 | AntdInput, 10 | mapProps((props, field) => { 11 | return { 12 | ...props, 13 | suffix: ( 14 | 15 | {field?.['loading'] || field?.['validating'] ? ( 16 | 17 | ) : ( 18 | props.suffix 19 | )} 20 | 21 | ), 22 | } 23 | }), 24 | mapReadPretty(PreviewText.Input) 25 | ) 26 | const TextArea = connect(AntdInput.TextArea, mapReadPretty(PreviewText.Input)) 27 | 28 | export const Input = Object.assign(InternalInput, { 29 | TextArea, 30 | }) 31 | 32 | export default Input 33 | -------------------------------------------------------------------------------- /packages/components/src/number-picker/index.tsx: -------------------------------------------------------------------------------- 1 | import { connect, mapReadPretty } from '@formily/react' 2 | import { InputNumber } from 'antd' 3 | import { PreviewText } from '../preview-text' 4 | 5 | export const NumberPicker = connect( 6 | InputNumber, 7 | mapReadPretty(PreviewText.NumberPicker) 8 | ) 9 | 10 | export default NumberPicker 11 | -------------------------------------------------------------------------------- /packages/components/src/password/index.tsx: -------------------------------------------------------------------------------- 1 | import { connect, mapReadPretty } from '@formily/react' 2 | import { Input } from 'antd' 3 | import { PasswordProps } from 'antd/lib/input' 4 | import React from 'react' 5 | import { PreviewText } from '../preview-text' 6 | import { PasswordStrength } from './PasswordStrength' 7 | 8 | export interface IPasswordProps extends PasswordProps { 9 | checkStrength: boolean 10 | } 11 | 12 | export const Password = connect((props: IPasswordProps) => { 13 | const { value, className, checkStrength, ...others } = props 14 | const blockStyle: React.CSSProperties = { 15 | position: 'absolute', 16 | zIndex: 1, 17 | height: 8, 18 | top: 0, 19 | background: '#fff', 20 | width: 1, 21 | transform: 'translate(-50%, 0)', 22 | } 23 | return ( 24 | 25 | 26 | {checkStrength && ( 27 | 28 | {(score) => { 29 | return ( 30 |
37 |
38 |
39 |
40 |
41 |
53 |
54 | ) 55 | }} 56 | 57 | )} 58 | 59 | ) 60 | }, mapReadPretty(PreviewText.Input)) 61 | 62 | export default Password 63 | -------------------------------------------------------------------------------- /packages/components/src/preview-text/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | 3 | export default genStyleHook('preview-text', (token) => { 4 | const { componentCls, antCls, fontSize, fontWeightStrong } = token 5 | return [ 6 | { 7 | [componentCls]: { 8 | fontSize, 9 | fontWeight: fontWeightStrong, 10 | 11 | [`${antCls}-tag:last-child`]: { 12 | marginInlineEnd: 0, 13 | }, 14 | }, 15 | }, 16 | ] 17 | }) 18 | -------------------------------------------------------------------------------- /packages/components/src/radio/index.tsx: -------------------------------------------------------------------------------- 1 | import { connect, mapProps, mapReadPretty } from '@formily/react' 2 | import { Radio as AntdRadio } from 'antd' 3 | import { PreviewText } from '../preview-text' 4 | 5 | export const InternalRadio = connect( 6 | AntdRadio, 7 | mapProps({ 8 | value: 'checked', 9 | onInput: 'onChange', 10 | }) 11 | ) 12 | 13 | const Group = connect( 14 | AntdRadio.Group, 15 | mapProps({ 16 | dataSource: 'options', 17 | }), 18 | mapReadPretty(PreviewText.Select) 19 | ) 20 | 21 | export const Radio = Object.assign(InternalRadio, { 22 | __ANT_RADIO: true, 23 | Group, 24 | }) 25 | 26 | export default Radio 27 | -------------------------------------------------------------------------------- /packages/components/src/reset/index.tsx: -------------------------------------------------------------------------------- 1 | import { IFieldResetOptions, IFormFeedback } from '@formily/core' 2 | import { useParentForm } from '@formily/react' 3 | import { isFn } from '@formily/shared' 4 | import { Button, ButtonProps } from 'antd' 5 | import React from 'react' 6 | 7 | export interface IResetProps extends IFieldResetOptions, ButtonProps { 8 | onClick?: (e: React.MouseEvent) => any 9 | onResetValidateSuccess?: (payload: any) => void 10 | onResetValidateFailed?: (feedbacks: IFormFeedback[]) => void 11 | } 12 | 13 | export const Reset: React.FC> = ({ 14 | forceClear, 15 | validate, 16 | onResetValidateSuccess, 17 | onResetValidateFailed, 18 | ...props 19 | }) => { 20 | const form = useParentForm() 21 | return ( 22 | 39 | ) 40 | } 41 | 42 | export default Reset 43 | -------------------------------------------------------------------------------- /packages/components/src/select-table/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from './useCheckSlackly' 2 | export * from './useFilterOptions' 3 | export * from './useFlatOptions' 4 | export * from './useSize' 5 | export * from './useTitleAddon' 6 | -------------------------------------------------------------------------------- /packages/components/src/select-table/hooks/useFlatOptions.tsx: -------------------------------------------------------------------------------- 1 | const useFlatOptions = (tree: any[]) => { 2 | const flatData = (data?: any[]) => { 3 | let list: any[] = [] 4 | data?.forEach((item) => { 5 | list = [...list, item] 6 | if (item?.children?.length) { 7 | list = [...list, ...flatData(item.children)] 8 | } 9 | }) 10 | return list 11 | } 12 | return flatData(tree) 13 | } 14 | 15 | export { useFlatOptions } 16 | -------------------------------------------------------------------------------- /packages/components/src/select-table/hooks/useSize.tsx: -------------------------------------------------------------------------------- 1 | import { SizeType } from 'antd/es/config-provider/SizeContext' 2 | 3 | interface ISize { 4 | (fieldSize: SizeType, searchSize: SizeType, tableSize: SizeType): { 5 | searchSize: SizeType 6 | tableSize: SizeType 7 | } 8 | } 9 | 10 | const useSize: ISize = (fieldSize = 'middle', searchSize, tableSize) => { 11 | const fieldSizeMap: any = { 12 | small: { 13 | searchSize: 'small', 14 | tableSize: 'small', 15 | }, 16 | default: { 17 | searchSize: 'middle', 18 | tableSize: 'middle', 19 | }, 20 | large: { 21 | searchSize: 'large', 22 | tableSize: 'default', 23 | }, 24 | } 25 | const { searchSize: fieldSearchSize, tableSize: fieldTableSize } = 26 | fieldSizeMap[fieldSize] || {} 27 | 28 | return { 29 | searchSize: searchSize || fieldSearchSize, 30 | tableSize: tableSize || fieldTableSize, 31 | } 32 | } 33 | 34 | export { useSize } 35 | -------------------------------------------------------------------------------- /packages/components/src/select-table/style.ts: -------------------------------------------------------------------------------- 1 | import { genStyleHook } from './../__builtins__' 2 | 3 | export default genStyleHook('select-table', (token) => { 4 | const { componentCls } = token 5 | return { 6 | [componentCls]: { 7 | [`${componentCls}-search`]: { 8 | marginBottom: 8, 9 | }, 10 | }, 11 | } 12 | }) 13 | -------------------------------------------------------------------------------- /packages/components/src/select/index.tsx: -------------------------------------------------------------------------------- 1 | import { LoadingOutlined } from '@ant-design/icons' 2 | import { connect, mapProps, mapReadPretty, ReactFC } from '@formily/react' 3 | import { Select as AntdSelect } from 'antd' 4 | import { SelectProps } from 'antd/lib/select' 5 | import React from 'react' 6 | import { PreviewText } from '../preview-text' 7 | 8 | export const Select: ReactFC> = connect( 9 | AntdSelect, 10 | mapProps( 11 | { 12 | dataSource: 'options', 13 | loading: true, 14 | }, 15 | (props, field) => { 16 | return { 17 | ...props, 18 | suffixIcon: 19 | field?.['loading'] || field?.['validating'] ? ( 20 | 21 | ) : ( 22 | props.suffixIcon 23 | ), 24 | } 25 | } 26 | ), 27 | mapReadPretty(PreviewText.Select) 28 | ) 29 | 30 | export default Select 31 | -------------------------------------------------------------------------------- /packages/components/src/space/index.tsx: -------------------------------------------------------------------------------- 1 | import { Space as AntdSpace, SpaceProps } from 'antd' 2 | import React from 'react' 3 | import { useFormLayout } from '../form-layout' 4 | 5 | export const Space: React.FC> = (props) => { 6 | const layout = useFormLayout() 7 | return React.createElement(AntdSpace, { 8 | size: props.size ?? layout?.spaceGap, 9 | ...props, 10 | }) 11 | } 12 | 13 | export default Space 14 | -------------------------------------------------------------------------------- /packages/components/src/submit/index.tsx: -------------------------------------------------------------------------------- 1 | import { IFormFeedback } from '@formily/core' 2 | import { observer, useParentForm } from '@formily/react' 3 | import { Button } from 'antd' 4 | import { ButtonProps } from 'antd/lib/button' 5 | import React from 'react' 6 | 7 | export interface ISubmitProps extends ButtonProps { 8 | onClick?: (e: React.MouseEvent) => any 9 | onSubmit?: (values: any) => any 10 | onSubmitSuccess?: (payload: any) => void 11 | onSubmitFailed?: (feedbacks: IFormFeedback[]) => void 12 | } 13 | 14 | export const Submit: React.FC> = observer( 15 | ({ onSubmit, onSubmitFailed, onSubmitSuccess, ...props }: ISubmitProps) => { 16 | const form = useParentForm() 17 | return ( 18 | 34 | ) 35 | }, 36 | { 37 | forwardRef: true, 38 | } 39 | ) 40 | 41 | export default Submit 42 | -------------------------------------------------------------------------------- /packages/components/src/switch/index.tsx: -------------------------------------------------------------------------------- 1 | import { Switch as AntdSwitch } from 'antd' 2 | import { connect, mapProps } from '@formily/react' 3 | 4 | export const Switch = connect( 5 | AntdSwitch, 6 | mapProps( 7 | { 8 | value: 'checked', 9 | }, 10 | (props) => { 11 | delete props['value'] 12 | return { 13 | ...props, 14 | } 15 | } 16 | ) 17 | ) 18 | 19 | export default Switch 20 | -------------------------------------------------------------------------------- /packages/components/src/time-picker/index.tsx: -------------------------------------------------------------------------------- 1 | import { connect, mapProps, mapReadPretty } from '@formily/react' 2 | import { 3 | TimePicker as AntdTimePicker, 4 | TimePickerProps as AntdTimePickerProps, 5 | TimeRangePickerProps, 6 | } from 'antd' 7 | import dayjs from 'dayjs' 8 | import { PreviewText } from '../preview-text' 9 | import { dayjsable, formatDayjsValue } from '../__builtins__' 10 | 11 | type ComposedTimePicker = React.FC< 12 | React.PropsWithChildren 13 | > & { 14 | RangePicker?: React.FC> 15 | } 16 | 17 | const mapTimeFormat = function () { 18 | return (props: any) => { 19 | const format = props['format'] || 'HH:mm:ss' 20 | const onChange = props.onChange 21 | return { 22 | ...props, 23 | format, 24 | value: dayjsable(props.value, format), 25 | onChange: (value: dayjs.Dayjs | dayjs.Dayjs[]) => { 26 | if (onChange) { 27 | onChange(formatDayjsValue(value, format)) 28 | } 29 | }, 30 | } 31 | } 32 | } 33 | 34 | const InternalTimePicker: ComposedTimePicker = connect( 35 | AntdTimePicker, 36 | mapProps(mapTimeFormat()), 37 | mapReadPretty(PreviewText.TimePicker) 38 | ) 39 | 40 | const RangePicker = connect( 41 | AntdTimePicker.RangePicker, 42 | mapProps(mapTimeFormat()), 43 | mapReadPretty(PreviewText.TimeRangePicker) 44 | ) 45 | 46 | export const TimePicker = Object.assign(InternalTimePicker, { RangePicker }) 47 | 48 | export default TimePicker 49 | -------------------------------------------------------------------------------- /packages/components/src/time-picker/style.ts: -------------------------------------------------------------------------------- 1 | import 'antd/lib/time-picker/style/index' 2 | -------------------------------------------------------------------------------- /packages/components/src/transfer/index.tsx: -------------------------------------------------------------------------------- 1 | import { isVoidField } from '@formily/core' 2 | import { connect, mapProps } from '@formily/react' 3 | import { Transfer as AntdTransfer } from 'antd' 4 | 5 | const renderTitle = (item) => item.title ?? null 6 | export const Transfer = connect( 7 | AntdTransfer, 8 | mapProps( 9 | { 10 | value: 'targetKeys', 11 | }, 12 | (props, field) => { 13 | if (isVoidField(field)) return props 14 | return { 15 | ...props, 16 | render: props.render || renderTitle, 17 | dataSource: 18 | field.dataSource?.map((item) => { 19 | return { 20 | ...item, 21 | title: item.title || item.label, 22 | key: item.key || item.value, 23 | } 24 | }) || [], 25 | } 26 | } 27 | ) 28 | ) 29 | 30 | export default Transfer 31 | -------------------------------------------------------------------------------- /packages/components/src/tree-select/index.tsx: -------------------------------------------------------------------------------- 1 | import { LoadingOutlined } from '@ant-design/icons' 2 | import { connect, mapProps, mapReadPretty } from '@formily/react' 3 | import { TreeSelect as AntdTreeSelect } from 'antd' 4 | import React from 'react' 5 | import { PreviewText } from '../preview-text' 6 | 7 | export const TreeSelect = connect( 8 | AntdTreeSelect, 9 | mapProps( 10 | { 11 | dataSource: 'treeData', 12 | }, 13 | (props, field) => { 14 | return { 15 | ...props, 16 | suffixIcon: 17 | field?.['loading'] || field?.['validating'] ? ( 18 | 19 | ) : ( 20 | props.suffixIcon 21 | ), 22 | } 23 | } 24 | ), 25 | mapReadPretty(PreviewText.TreeSelect) 26 | ) 27 | 28 | export default TreeSelect 29 | -------------------------------------------------------------------------------- /packages/components/src/upload/placeholder.ts: -------------------------------------------------------------------------------- 1 | export const UPLOAD_PLACEHOLDER = [ 2 | { 3 | ext: /\.docx$/i, 4 | icon: '//img.alicdn.com/tfs/TB1n8jfr1uSBuNjy1XcXXcYjFXa-200-200.png', 5 | }, 6 | { 7 | ext: /\.pptx$/i, 8 | icon: '//img.alicdn.com/tfs/TB1ItgWr_tYBeNjy1XdXXXXyVXa-200-200.png', 9 | }, 10 | { 11 | ext: /\.jpe?g$/i, 12 | icon: '//img.alicdn.com/tfs/TB1wrT5r9BYBeNjy0FeXXbnmFXa-200-200.png', 13 | }, 14 | { 15 | ext: /\.pdf$/i, 16 | icon: '//img.alicdn.com/tfs/TB1GwD8r9BYBeNjy0FeXXbnmFXa-200-200.png', 17 | }, 18 | { 19 | ext: /\.png$/i, 20 | icon: '//img.alicdn.com/tfs/TB1BHT5r9BYBeNjy0FeXXbnmFXa-200-200.png', 21 | }, 22 | { 23 | ext: /\.eps$/i, 24 | icon: '//img.alicdn.com/tfs/TB1G_iGrVOWBuNjy0FiXXXFxVXa-200-200.png', 25 | }, 26 | { 27 | ext: /\.ai$/i, 28 | icon: '//img.alicdn.com/tfs/TB1B2cVr_tYBeNjy1XdXXXXyVXa-200-200.png', 29 | }, 30 | { 31 | ext: /\.gif$/i, 32 | icon: '//img.alicdn.com/tfs/TB1DTiGrVOWBuNjy0FiXXXFxVXa-200-200.png', 33 | }, 34 | { 35 | ext: /\.svg$/i, 36 | icon: '//img.alicdn.com/tfs/TB1uUm9rY9YBuNjy0FgXXcxcXXa-200-200.png', 37 | }, 38 | { 39 | ext: /\.xlsx?$/i, 40 | icon: '//img.alicdn.com/tfs/TB1any1r1OSBuNjy0FdXXbDnVXa-200-200.png', 41 | }, 42 | { 43 | ext: /\.psd?$/i, 44 | icon: '//img.alicdn.com/tfs/TB1_nu1r1OSBuNjy0FdXXbDnVXa-200-200.png', 45 | }, 46 | { 47 | ext: /\.(wav|aif|aiff|au|mp1|mp2|mp3|ra|rm|ram|mid|rmi)$/i, 48 | icon: '//img.alicdn.com/tfs/TB1jPvwr49YBuNjy0FfXXXIsVXa-200-200.png', 49 | }, 50 | { 51 | ext: /\.(avi|wmv|mpg|mpeg|vob|dat|3gp|mp4|mkv|rm|rmvb|mov|flv)/i, 52 | icon: '//img.alicdn.com/tfs/TB1FrT5r9BYBeNjy0FeXXbnmFXa-200-200.png', 53 | }, 54 | { 55 | ext: /\.(zip|rar|arj|z|gz|iso|jar|ace|tar|uue|dmg|pkg|lzh|cab)$/i, 56 | icon: '//img.alicdn.com/tfs/TB10jmfr29TBuNjy0FcXXbeiFXa-200-200.png', 57 | }, 58 | { 59 | ext: /\.[^.]+/i, 60 | icon: '//img.alicdn.com/tfs/TB10.R4r3mTBuNjy1XbXXaMrVXa-200-200.png', 61 | }, 62 | ] 63 | -------------------------------------------------------------------------------- /packages/components/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "paths": { 6 | "@formily/*": ["packages/*"] 7 | }, 8 | "declaration": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx"], 4 | "exclude": ["./src/__tests__/*"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/prototypes/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/prototypes/.npmignore.tpl: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/prototypes/README.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-prototypes 2 | 3 | > Formily Designable Component Adaptor 4 | 5 | ## Install 6 | 7 | ```bash 8 | npm install @formily/antd-v5-prototypes --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/prototypes/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-prototypes 2 | 3 | > Formily Designable 画布组件库 4 | 5 | ## 安装 6 | 7 | ```bash 8 | npm install @formily/antd-v5-prototypes --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/prototypes/builder.config.ts: -------------------------------------------------------------------------------- 1 | import { IBuilderConfig } from '@formily/template' 2 | 3 | export const BuilderConfig: IBuilderConfig = { 4 | targetLibName: 'antd', 5 | targetLibCjsDir: 'lib', 6 | targetLibEsDir: 'es', 7 | } 8 | -------------------------------------------------------------------------------- /packages/prototypes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formily/antd-v5-prototypes", 3 | "version": "1.2.4", 4 | "license": "MIT", 5 | "main": "lib", 6 | "types": "lib/index.d.ts", 7 | "engines": { 8 | "npm": ">=3.0.0" 9 | }, 10 | "module": "esm", 11 | "umd:main": "dist/formily.antd-prototypes.umd.production.js", 12 | "unpkg": "dist/formily.antd-prototypes.umd.production.js", 13 | "jsdelivr": "dist/formily.antd-prototypes.umd.production.js", 14 | "jsnext:main": "esm", 15 | "sideEffects": [ 16 | "dist/*", 17 | "esm/*.js", 18 | "lib/*.js", 19 | "src/*.ts", 20 | "*.less", 21 | "*.scss", 22 | "**/*/style.js" 23 | ], 24 | "scripts": { 25 | "build": "formily-tpl build" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/formilyjs/antd.git" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/formilyjs/antd/issues" 33 | }, 34 | "homepage": "https://github.com/formilyjs/antd#readme", 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "peerDependencies": { 39 | "react": ">=16.8.0 || >=17.0.0", 40 | "react-dom": ">=16.8.0", 41 | "react-is": ">=16.8.0 || >=17.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/prototypes/src/index.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | -------------------------------------------------------------------------------- /packages/prototypes/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "paths": { 6 | "@formily/*": ["packages/*"] 7 | }, 8 | "declaration": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/prototypes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx"], 4 | "exclude": ["./src/__tests__/*"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/renderer/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/renderer/.npmignore.tpl: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/renderer/README.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-renderer 2 | 3 | > Formily Designable Settings Form 4 | 5 | ## Install 6 | 7 | ```bash 8 | npm install @formily/antd-v5-renderer --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/renderer/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-renderer 2 | 3 | > Formily Designable Settings Form 4 | 5 | ## 安装 6 | 7 | ```bash 8 | npm install @formily/antd-v5-renderer --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/renderer/builder.config.ts: -------------------------------------------------------------------------------- 1 | import { IBuilderConfig } from '@formily/template' 2 | 3 | export const BuilderConfig: IBuilderConfig = { 4 | targetLibName: 'antd', 5 | targetLibCjsDir: 'lib', 6 | targetLibEsDir: 'es', 7 | } 8 | -------------------------------------------------------------------------------- /packages/renderer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formily/antd-v5-renderer", 3 | "version": "1.2.4", 4 | "license": "MIT", 5 | "main": "lib", 6 | "types": "lib/index.d.ts", 7 | "engines": { 8 | "npm": ">=3.0.0" 9 | }, 10 | "module": "esm", 11 | "umd:main": "dist/formily.antd-renderer.umd.production.js", 12 | "unpkg": "dist/formily.antd-renderer.umd.production.js", 13 | "jsdelivr": "dist/formily.antd-renderer.umd.production.js", 14 | "jsnext:main": "esm", 15 | "sideEffects": [ 16 | "dist/*", 17 | "esm/*.js", 18 | "lib/*.js", 19 | "src/*.ts", 20 | "*.less", 21 | "*.scss", 22 | "**/*/style.js" 23 | ], 24 | "scripts": { 25 | "build": "formily-tpl build" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/formilyjs/antd.git" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/formilyjs/antd/issues" 33 | }, 34 | "homepage": "https://github.com/formilyjs/antd#readme", 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "peerDependencies": { 39 | "react": ">=16.8.0 || >=17.0.0", 40 | "react-dom": ">=16.8.0", 41 | "react-is": ">=16.8.0 || >=17.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/renderer/src/index.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | -------------------------------------------------------------------------------- /packages/renderer/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "paths": { 6 | "@formily/*": ["packages/*"] 7 | }, 8 | "declaration": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/renderer/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx"], 4 | "exclude": ["./src/__tests__/*"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/setters/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/setters/.npmignore.tpl: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/setters/README.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-setters 2 | 3 | > Formily Designable Component Adaptor 4 | 5 | ## Install 6 | 7 | ```bash 8 | npm install @formily/antd-v5-setters --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/setters/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-setters 2 | 3 | > Formily Designable 设置器 4 | 5 | ## 安装 6 | 7 | ```bash 8 | npm install @formily/antd-v5-setters --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/setters/builder.config.ts: -------------------------------------------------------------------------------- 1 | import { IBuilderConfig } from '@formily/template' 2 | 3 | export const BuilderConfig: IBuilderConfig = { 4 | targetLibName: 'antd', 5 | targetLibCjsDir: 'lib', 6 | targetLibEsDir: 'es', 7 | } 8 | -------------------------------------------------------------------------------- /packages/setters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formily/antd-v5-setters", 3 | "version": "1.2.4", 4 | "license": "MIT", 5 | "main": "lib", 6 | "types": "lib/index.d.ts", 7 | "engines": { 8 | "npm": ">=3.0.0" 9 | }, 10 | "module": "esm", 11 | "umd:main": "dist/formily.antd-setters.umd.production.js", 12 | "unpkg": "dist/formily.antd-setters.umd.production.js", 13 | "jsdelivr": "dist/formily.antd-setters.umd.production.js", 14 | "jsnext:main": "esm", 15 | "sideEffects": [ 16 | "dist/*", 17 | "esm/*.js", 18 | "lib/*.js", 19 | "src/*.ts", 20 | "*.less", 21 | "*.scss", 22 | "**/*/style.js" 23 | ], 24 | "scripts": { 25 | "build": "formily-tpl build" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/formilyjs/antd.git" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/formilyjs/antd/issues" 33 | }, 34 | "homepage": "https://github.com/formilyjs/antd#readme", 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "peerDependencies": { 39 | "react": ">=16.8.0 || >=17.0.0", 40 | "react-dom": ">=16.8.0", 41 | "react-is": ">=16.8.0 || >=17.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/setters/src/index.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | -------------------------------------------------------------------------------- /packages/setters/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "paths": { 6 | "@formily/*": ["packages/*"] 7 | }, 8 | "declaration": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/setters/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx"], 4 | "exclude": ["./src/__tests__/*"] 5 | } 6 | -------------------------------------------------------------------------------- /packages/settings-form/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/settings-form/.npmignore.tpl: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log 3 | build 4 | docs 5 | doc-site 6 | __tests__ 7 | .eslintrc 8 | jest.config.js 9 | tsconfig.json 10 | .umi 11 | src -------------------------------------------------------------------------------- /packages/settings-form/README.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-settings-form 2 | 3 | > Formily Designable Settings Form 4 | 5 | ## Install 6 | 7 | ```bash 8 | npm install @formily/antd-v5-settings-form --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/settings-form/README.zh-CN.md: -------------------------------------------------------------------------------- 1 | # @formily/antd-v5-settings-form 2 | 3 | > Formily Designable Settings Form 4 | 5 | ## 安装 6 | 7 | ```bash 8 | npm install @formily/antd-v5-settings-form --save 9 | ``` 10 | -------------------------------------------------------------------------------- /packages/settings-form/builder.config.ts: -------------------------------------------------------------------------------- 1 | import { IBuilderConfig } from '@formily/template' 2 | 3 | export const BuilderConfig: IBuilderConfig = { 4 | targetLibName: 'antd', 5 | targetLibCjsDir: 'lib', 6 | targetLibEsDir: 'es', 7 | } 8 | -------------------------------------------------------------------------------- /packages/settings-form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@formily/antd-v5-settings-form", 3 | "version": "1.2.4", 4 | "license": "MIT", 5 | "main": "lib", 6 | "types": "lib/index.d.ts", 7 | "engines": { 8 | "npm": ">=3.0.0" 9 | }, 10 | "module": "esm", 11 | "umd:main": "dist/formily.antd-settings-form.umd.production.js", 12 | "unpkg": "dist/formily.antd-settings-form.umd.production.js", 13 | "jsdelivr": "dist/formily.antd-settings-form.umd.production.js", 14 | "jsnext:main": "esm", 15 | "sideEffects": [ 16 | "dist/*", 17 | "esm/*.js", 18 | "lib/*.js", 19 | "src/*.ts", 20 | "*.less", 21 | "*.scss", 22 | "**/*/style.js" 23 | ], 24 | "scripts": { 25 | "build": "formily-tpl build" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/formilyjs/antd.git" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/formilyjs/antd/issues" 33 | }, 34 | "homepage": "https://github.com/formilyjs/antd#readme", 35 | "publishConfig": { 36 | "access": "public" 37 | }, 38 | "peerDependencies": { 39 | "react": ">=16.8.0 || >=17.0.0", 40 | "react-dom": ">=16.8.0", 41 | "react-is": ">=16.8.0 || >=17.0.0" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/settings-form/src/index.ts: -------------------------------------------------------------------------------- 1 | export {} 2 | -------------------------------------------------------------------------------- /packages/settings-form/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "paths": { 6 | "@formily/*": ["packages/*"] 7 | }, 8 | "declaration": true 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /packages/settings-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "include": ["./src/**/*.js", "./src/**/*.ts", "./src/**/*.tsx"], 4 | "exclude": ["./src/__tests__/*"] 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "moduleResolution": "node", 5 | "allowJs": true, 6 | "module": "commonjs", 7 | "target": "es5" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.jest.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "jsx": "react", 5 | "esModuleInterop": true, 6 | "moduleResolution": "node", 7 | "allowJs": true, 8 | "module": "commonjs", 9 | "target": "es5", 10 | "paths": { 11 | "@formily/*": ["./packages/*/src"] 12 | } 13 | }, 14 | "exclude": ["./packages/*/esm", "./packages/*/lib"] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "esModuleInterop": true, 4 | "moduleResolution": "node", 5 | "jsx": "react", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "allowJs": false, 9 | "noUnusedLocals": false, 10 | "preserveConstEnums": true, 11 | "skipLibCheck": true, 12 | "sourceMap": true, 13 | "inlineSources": true, 14 | "declaration": true, 15 | "experimentalDecorators": true, 16 | "downlevelIteration": true, 17 | "strictNullChecks": true, 18 | "baseUrl": ".", 19 | "paths": { 20 | "@formily/antd-v5": ["packages/components/src"] 21 | }, 22 | "lib": ["ESNext", "DOM"] 23 | } 24 | } 25 | --------------------------------------------------------------------------------