@canard/schema-form-antd-mobile-plugin

Overview

@canard/schema-form-antd-mobile-plugin is a plugin for @canard/schema-form that provides Ant Design Mobile components.

Notice

⚠️ This plugin provides pre-implemented core components commonly needed when using @canard/schema-form in Ant Design Mobile environments.

📌 As the plugin's purpose is to enhance development convenience, it does not include every possible component.

💡 If you need FormTypeInput components not included in this plugin, you can freely implement them following the official @canard/schema-form guidelines.

How to use

yarn add @canard/schema-form @canard/schema-form-antd-mobile-plugin

import { SchemaForm, registerPlugin } from '@canard/schema-form';
import { plugin } from '@canard/schema-form-antd-mobile-plugin';

// Plugin will be registered globally
registerPlugin(plugin);

Supported Components

This plugin provides the following Ant Design Mobile components:

FormTypeInputBooleanSwitch.tsx

• Role: Display boolean type data as a Switch component
• Applied when: type is "boolean" and formType is "switch"
• Additional features: Support for custom labels for checked/unchecked states

FormTypeInputStringCheckbox.tsx

• Role: Display string arrays as checkbox groups
• Applied when: type is "array", formType is "checkbox", items.type is "string", and enum values exist
• Additional features: Support for custom labels for each checkbox option

FormTypeInputStringSwitch.tsx

• Role: Toggle between two string values using a Switch
• Applied when: type is "string", formType is "switch", and the enum array has exactly 2 values
• Additional features: Support for custom labels per switch state

FormTypeInputRadioGroup.tsx

• Role: Display single selection of string or number as radio group
• Applied when: type is "string", "number", or "integer", formType is "radio" or "radiogroup", and enum values exist
• Additional features: Support for custom labels for radio options

FormTypeInputArray.tsx

• Role: Display array data as a list with dynamic add/remove capabilities
• Applied when: type is "array"
• Additional features: Add/remove buttons hidden in read-only mode

FormTypeInputSlider.tsx

• Role: Input numeric values using a slider
• Applied when:
  • type is "number" or "integer" and format is "slider"
  • or type is "array", items.type is "number" or "integer", and format is "slider" (range slider)
• Additional features: Lazy update option, mark display, range slider support

FormTypeInputTextarea.tsx

• Role: Text area for multiline text input
• Applied when: type is "string" and format or formType is "textarea"
• Additional features: Support for automatic resizing via minRows, maxRows

FormTypeInputString.tsx

• Role: Default string input field
• Applied when: type is "string" (fallback when other conditions don't match)
• Additional features: Operates as password input field when format is "password"

FormTypeInputNumber.tsx

• Role: Stepper component for numeric input
• Applied when: type is "number" or "integer" (fallback when other conditions don't match)
• Additional features: Support for minimum, maximum, multipleOf schema properties

FormTypeInputBoolean.tsx

• Role: Display boolean values as checkboxes
• Applied when: type is "boolean" (fallback when other conditions don't match)
• Additional features: Support for indeterminate state for undefined values

Component Priority

Component selection is determined by the following priority order:

1. In-line component: Component specified as FormTypeInput property in the schema
2. FormTypeInputMap: Component explicitly mapped to a path
3. FormTypeInputDefinition: Automatic selection through each component's test condition
4. Provider FormTypeInputDefinition: Component definitions provided by parent Provider
5. Plugin: Components from registered plugins (including this plugin)
6. Fallback: Default fallback components

Within the same priority level, earlier items in the array take precedence. Components in this plugin are defined in the following order: FormTypeInputBooleanSwitch → FormTypeInputStringCheckbox → FormTypeInputStringSwitch → FormTypeInputRadioGroup → FormTypeInputArray → FormTypeInputSlider → FormTypeInputTextarea → FormTypeInputString → FormTypeInputNumber → FormTypeInputBoolean

Compatibility

@canard/schema-form-antd-mobile-plugin is built with ECMAScript 2020 (ES2020) syntax.

If you're using a JavaScript environment that doesn't support ES2020, you'll need to include this package in your transpilation process.

Supported environments:

• Node.js 14.17.0 or later
• Modern browsers (Chrome 91+, Firefox 90+, Safari 14+)

For legacy environment support: Please use a transpiler like Babel to transform the code for your target environment.

License

This repository is licensed under the MIT License. Please refer to the LICENSE file for details.

Contact

For inquiries or suggestions related to the project, please create an issue.