import Basic from './demo/basic.md'
import Extra from './demo/extra.md'
import Layout from './demo/layout.md'
import Method from './demo/method.md'
import ComplexLayout from './demo/complex-layout.md'
import ValidateTrigger from './demo/validate-trigger.md'
import Modal from './demo/modal.md'
import OtherControls from './demo/other-controls.md'

# Form

Form data management, including data collection, verification, and styles.

## Scenario

- When you need to create an instance or collect information.
- When you need to validate fields in certain rules.

## Usages

```jsx
import { Form } from 'tiny-ui';

const { Item, useForm, FormInstance } = Form;
```

## Examples

<Basic />
<Extra />
<Layout />
<Method />
<ComplexLayout />
<ValidateTrigger />
<Modal />
<OtherControls />

## API

### Form

| Property          | Description                                                                                   | Type                                              | Default       |
| ----------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------- | ------------- |
| form              | form control instance created by `Form.useForm()`. Automatically created when not provided    | `FormInstance`                                    | -             |
| initialValues     | set value by Form initialisation or reset                                                     | object                                            | false         |
| labelCol          | label layout, like `<Col>` component                                                          | number &#124; { span: number, offset: number }    | 8             |
| wrapperCol        | the layout for input controls, same as `labelCol`                                             | number &#124; { span: number, offset: number }    | 16            |
| validateTrigger   | config field validate trigger                                                                 | `onChange` &#124; `onBlur` &#124; `onSubmit`      | `onChange`    |
| layout            | form layout                                                                                   | `horizontal` &#124; `vertical` &#124; `inline`    | `horizontal`  |
| onFinish          | trigger after submitting the form and verifying data successfully                             | (values) => void                                  | -             |
| onFinishFailed    | trigger after submitting the form and verifying data unsuccessfully                           | (values, errors) => void                          | -             |

### Form.Item

Form field component for data bidirectional binding, validation and layout.

| Property          | Description                                                               | Type                                              | Default   |
| ----------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | --------- |
| name              | field name                                                                | string                                            | -         |
| required          | display required style. It will be generated by the validation rule       | boolean                                           | -         |
| colon             | display `:` after the label text                                          | boolean                                           | true      |
| label             | label text                                                                | string                                            | -         |
| rules             | rules for field validation                                                | `Rule`[]                                          | -         |
| helper            | the prompt message                                                        | ReactNode                                         | -         |
| notice            | similar with `help`, but more impressive                                  | ReactNode                                         | -         |
| valuePropName     | props of children node. For example, the prop of `Switch` is 'checked'.   | string                                            | 'value'   |
| valueGetter       | specify how to get value from event or other `onChange` arguments         | (..args: any[]) => any                            | -         |
| labelCol          | the layout of label                                                       | number &#124; { span: number, offset: number }    | -         |
| wrapperCol        | the layout of controls                                                    | number &#124; { span: number, offset: number }    | -         |

### FormInstance

| Method            | Description                                       | Type                                      |
| ----------------- | ------------------------------------------------- | ----------------------------------------- |
| getFieldValues    | get values by a set of field names                | () => { [name: string]: any }             |
| getFieldValue     | get the value by the field name                   | (name: string) => any                     |
| setFieldValues    | set values by a set of field names                | ({ [name: string]: any }) => void         |
| setFieldValue     | set the value by the field name                   | (name: string, value: any) => void        |
| getFiledErrors    | get errors by a set of field names                | () => { [name: string]: string[] }        |
| getFieldError     | get the error messages by the field name          | (name: string) => string[]                |
| setFieldError     | set the error messages by the field name          | (name: string, errors: string[]) => void  |
| resetFields       | reset fields to initialValues                     | () => void                                |
| validateFields    | validate all fields                               | (name: string) => void                    |
| validateField     | validate a field by the field name                | () => void                                |

### Rule

| Property          | Description                                               | Type                                          |
| ----------------- | --------------------------------------------------------- | --------------------------------------------- |
| type              | specific type                                             | `string` &#124; `number` &#124; `boolean`     |
| message           | error message. auto generate by template if not provided  | string                                        |
| max               | type required: max length of string, number, array        | number                                        |
| min               | type required: min length of string, number, array        | number                                        |
| required          | required field                                            | boolean                                       |
| enum              | match enum value                                          | any[]                                         |
| len               | length of string, number, array                           | number                                        |
| pattern           | regex pattern                                             | RegExp                                        |
| transform         | transform value to the rule before validation             | (value) => any                                |
| validator         | customize validation rule                                 | (value) => boolean &#124; `Promise<boolean>`  |
| whitespace        | failed if only has whitespace                             | boolean                                       |
