mapReadPretty
Description
Since most third-party components do not support the read-pretty state, if you want to quickly support the read-pretty state, you can use the mapReadPretty function to map a read-pretty component.
Signature
ts
import type { JSXComponent } from '@silver-formily/react'
import type React from 'react'
declare function mapReadPretty<T extends JSXComponent, C extends JSXComponent>(
component: C,
readPrettyProps?: React.ComponentProps<C>,
): (target: T) => React.ComponentType<any>The second argument can declare extra props for the read-pretty component; when rendering in the read-pretty state, they are merged with the props received by the original component (the incoming props take precedence).
Usage
tsx
import { createForm, isVoidField, setValidateLanguage } from '@silver-formily/core'
import { connect, Field, FormProvider, mapProps, mapReadPretty } from '@silver-formily/react'
import { Input as AntdInput, Form } from 'antd'
setValidateLanguage('en')
const FormItem = connect(
Form.Item,
mapProps(
{
title: 'label',
description: 'extra',
required: true,
validateStatus: true,
},
(props, field) => ({
...props,
help: !isVoidField(field) && field.selfErrors.length
? field.selfErrors.join(', ')
: undefined,
}),
),
)
// 大多数第三方组件不支持阅读态，用 mapReadPretty 映射一个阅读态组件即可
function ReadPrettyInput(props: { value?: string }) {
return <div>{props.value}</div>
}
const Input = connect(
AntdInput,
mapReadPretty(ReadPrettyInput),
)
const form = createForm({ validateFirst: true, readPretty: true })
export default function Demo() {
return (
<FormProvider form={form}>
<Form layout="vertical">
<Field
name="name"
title="Name"
required
initialValue="Hello world"
decorator={[FormItem]}
component={[Input, { placeholder: 'Please Input' }]}
/>
</Form>
</FormProvider>
)
}tsx
import { createForm, isVoidField, setValidateLanguage } from '@silver-formily/core'
import { connect, Field, FormProvider, mapProps, mapReadPretty } from '@silver-formily/react'
import { Input as AntdInput, Form } from 'antd'
setValidateLanguage('en')
const FormItem = connect(
Form.Item,
mapProps(
{
title: 'label',
description: 'extra',
required: true,
validateStatus: true,
},
(props, field) => ({
...props,
help: !isVoidField(field) && field.selfErrors.length
? field.selfErrors.join(', ')
: undefined,
}),
),
)
// 大多数第三方组件不支持阅读态，用 mapReadPretty 映射一个阅读态组件即可
function ReadPrettyInput(props: { value?: string }) {
return <div>{props.value}</div>
}
const Input = connect(
AntdInput,
mapReadPretty(ReadPrettyInput),
)
const form = createForm({ validateFirst: true, readPretty: true })
export default function Demo() {
return (
<FormProvider form={form}>
<Form layout="vertical">
<Field
name="name"
title="Name"
required
initialValue="Hello world"
decorator={[FormItem]}
component={[Input, { placeholder: 'Please Input' }]}
/>
</Form>
</FormProvider>
)
}查看源码
The alternative renders only for a non-void field whose pattern is readPretty; void fields and other patterns keep the original component.