-
Notifications
You must be signed in to change notification settings - Fork 263
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Field support messageVariables
#80
Conversation
This pull request is being automatically deployed with ZEIT Now (learn more). 🔍 Inspect: https://zeit.co/react-component/field-form/8kd49rqll |
@mgcrea, how do you think about this prop name? |
|
||
it('messageVariables', async () => { | ||
const wrapper = renderForm( | ||
{ required: "You miss '${label}'!" }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
用 ${}
万一这个字符串写成 ` 的格式就会很复杂。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const username = '姓名';
...
{ required: `miss \${label} ${username}` },
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
${} 会被转化成字符串拼接的,应该没什么影响
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
写起来是不是比较难看?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
\${label}
有一些理解成本,第一眼不知道是什么东西
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
${xxx}
is used for validateMessages
for static message template:
const myMessages: ValidateMessages = {
default: '${name} 看起来怪怪的……',
required: '你需要一个 ${name}',
types: {
number: '嗨,这个 ${name} 不是一个合格的 ${type}',
},
enum: '${name} 不在 ${enum} 中呢',
whitespace: '${name} 不可以是空的啦',
pattern: {
mismatch: '${name} 并不符合格式:${pattern}',
},
};
If user use `
, it's no need to use ${xxx}
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
我的意思是如果这个字符串里需要用到别的变量(比如 username
)改造成 `
写法后,原有的 ${label}
写法就会和新的 ${username}
混淆在一起,需要转义。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
现在的 form 已经是支持 ${xxx}
了,这个 PR 只是拓展自定义变量的能力。
Current form is already support ${xxx}
. This PR is aim to extends the ability of message variables.
Not sure I see the point of not simply using template strings? Is there a specific use-case? To me it looks to be out of scope as every end user will have specific needs (eg. interfacing with a specific i18n lib, etc.) and you can't grow the API to cover all use cases. const label = '用户名';
return <Field
name="username"
rules={[{ required, message: `${label}是被需要的` }]}
/>; |
This comment has been minimized.
This comment has been minimized.
他应该只支持string,类似 模板字符串,i18 要转化为string之后再使用 |
In antd, Field is wrapped as <Form>
<Form.Item name="username" label="User Name">
<Input />
</Form.Item>
<Form.Item name="password" label="Password">
<Input />
</Form.Item>
</Form> It's useful to support <Form validateMessages={{ required: 'You need ${label}' }}>
<Form.Item name="username" label="User Name" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="password" label="Password" rules={[{ required: true }]}>
<Input />
</Form.Item>
</Form> |
Indeed just stumbled on this issue while I was trying to use If we want to allow using arbitrary props we could have something like Just to add that in my case I would actually need a lowercased version of the label prop. So maybe we should instead add a validateMessages API like.
That would remove the need for a eg: const validateMessages = {
required: ({label}) => `The input ${label.toLowerCase()} is required`} |
@mgcrea, this prop only works in |
close #79