mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
rename (#17729)
This commit is contained in:
parent
ef66edd0c2
commit
779bc5f56a
@ -19,7 +19,7 @@ type RenderChildren = (form: FormInstance) => React.ReactElement;
|
||||
|
||||
interface FormItemProps extends FormItemLabelProps, FormItemInputProps, RcFieldProps {
|
||||
prefixCls?: string;
|
||||
inline?: boolean;
|
||||
noStyle?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
children: React.ReactElement | RenderChildren;
|
||||
@ -36,7 +36,7 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
|
||||
const {
|
||||
name,
|
||||
fieldKey,
|
||||
inline,
|
||||
noStyle,
|
||||
dependencies,
|
||||
prefixCls: customizePrefixCls,
|
||||
style,
|
||||
@ -85,8 +85,8 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
|
||||
const mergedName = toArray(name).length ? metaName : [];
|
||||
|
||||
// ======================== Errors ========================
|
||||
// Collect inline Field error to the top FormItem
|
||||
const updateChildItemErrors = inline
|
||||
// Collect noStyle Field error to the top FormItem
|
||||
const updateChildItemErrors = noStyle
|
||||
? updateItemErrors
|
||||
: (subName: string, subErrors: string[]) => {
|
||||
if (!isEqual(inlineErrors[subName], subErrors)) {
|
||||
@ -97,7 +97,7 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
|
||||
}
|
||||
};
|
||||
|
||||
if (inline) {
|
||||
if (noStyle) {
|
||||
nameRef.current = [...mergedName];
|
||||
if (fieldKey) {
|
||||
nameRef.current[nameRef.current.length - 1] = fieldKey;
|
||||
@ -188,7 +188,7 @@ const FormItem: React.FC<FormItemProps> = (props: FormItemProps) => {
|
||||
childNode = children(context);
|
||||
}
|
||||
|
||||
if (inline) {
|
||||
if (noStyle) {
|
||||
return childNode;
|
||||
}
|
||||
|
||||
|
@ -94,16 +94,16 @@ describe('Form', () => {
|
||||
</Form.Item>
|
||||
));
|
||||
|
||||
testList('nest inline', field => (
|
||||
testList('nest noStyle', field => (
|
||||
<Form.Item key={field.key}>
|
||||
<Form.Item inline {...field} rules={[{ required: true }]}>
|
||||
<Form.Item noStyle {...field} rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
));
|
||||
});
|
||||
|
||||
it('inline Form.Item', async () => {
|
||||
it('noStyle Form.Item', async () => {
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount(
|
||||
|
@ -25,7 +25,7 @@ export const FormContext = React.createContext<FormContextProps>({
|
||||
|
||||
/**
|
||||
* Form Item Context
|
||||
* Used for Form inline Item error collection
|
||||
* Used for Form noStyle Item error collection
|
||||
*/
|
||||
export interface FormItemContextProps {
|
||||
updateItemErrors: (name: string, errors: string[]) => void;
|
||||
|
@ -67,7 +67,7 @@ const Demo = () => {
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
inline
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
|
@ -68,7 +68,7 @@ class Demo extends React.Component {
|
||||
</Select>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
inline
|
||||
noStyle
|
||||
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
|
||||
>
|
||||
{({ getFieldValue }) => {
|
||||
|
@ -61,7 +61,7 @@ const DynamicFieldSet = () => {
|
||||
message: "Please input passenger's name or delete this field.",
|
||||
},
|
||||
]}
|
||||
inline
|
||||
noStyle
|
||||
>
|
||||
<Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
|
||||
</Form.Item>
|
||||
|
@ -48,7 +48,7 @@ const NormalLoginForm = () => {
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Form.Item name="remember" valuePropName="checked" inline>
|
||||
<Form.Item name="remember" valuePropName="checked" noStyle>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
|
@ -101,7 +101,7 @@ const RegistrationForm = () => {
|
||||
};
|
||||
|
||||
const prefixSelector = (
|
||||
<Form.Item name="prefix" inline>
|
||||
<Form.Item name="prefix" noStyle>
|
||||
<Select style={{ width: 70 }}>
|
||||
<Option value="86">+86</Option>
|
||||
<Option value="87">+87</Option>
|
||||
@ -237,7 +237,7 @@ const RegistrationForm = () => {
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
name="captcha"
|
||||
inline
|
||||
noStyle
|
||||
rules={[{ required: true, message: 'Please input the captcha you got!' }]}
|
||||
>
|
||||
<Input />
|
||||
|
@ -89,7 +89,7 @@ const Demo = () => {
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item label="InputNumber">
|
||||
<Form.Item name="input-number" inline>
|
||||
<Form.Item name="input-number" noStyle>
|
||||
<InputNumber min={1} max={10} />
|
||||
</Form.Item>
|
||||
<span className="ant-form-text"> machines</span>
|
||||
@ -172,7 +172,7 @@ const Demo = () => {
|
||||
|
||||
<Form.Item label="Dragger">
|
||||
<div className="dropbox">
|
||||
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} inline>
|
||||
<Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
|
||||
<Upload.Dragger name="files" action="/upload.do">
|
||||
<p className="ant-upload-drag-icon">
|
||||
<Icon type="inbox" />
|
||||
|
@ -74,7 +74,7 @@ Form field component for data bidirectional binding, validation, layout, and so
|
||||
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false |
|
||||
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | - |
|
||||
| htmlFor | Set sub label `htmlFor` | string | - |
|
||||
| inline | No style for `true`, used as a pure field control | boolean | false |
|
||||
| noStyle | No style for `true`, used as a pure field control | boolean | false |
|
||||
| label | Label text | string\|ReactNode | - |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - |
|
||||
| name | Field name, support array | [NamePath](#NamePath) | - |
|
||||
|
@ -75,7 +75,7 @@ const validateMessages = {
|
||||
| hasFeedback | 配合 `validateStatus` 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
|
||||
| help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|ReactNode | - |
|
||||
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - |
|
||||
| inline | 为 `true` 时不带样式,作为纯字段控件使用 | boolean | false |
|
||||
| noStyle | 为 `true` 时不带样式,作为纯字段控件使用 | boolean | false |
|
||||
| label | `label` 标签的文本 | string\|ReactNode | - |
|
||||
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid/#Col) | - |
|
||||
| name | 字段名,支持数组 | [NamePath](#NamePath) | - |
|
||||
|
@ -130,7 +130,7 @@ To:
|
||||
const Demo = () => {
|
||||
return (
|
||||
<Form>
|
||||
<Form.Item name="username" inline>
|
||||
<Form.Item name="username" noStyle>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
@ -132,7 +132,7 @@ const WrappedDemo = Form.create()(Demo);
|
||||
const Demo = () => {
|
||||
return (
|
||||
<Form>
|
||||
<Form.Item name="username" inline>
|
||||
<Form.Item name="username" noStyle>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
Loading…
Reference in New Issue
Block a user