This commit is contained in:
zombieJ 2019-07-19 14:07:39 +08:00 committed by GitHub
parent ef66edd0c2
commit 779bc5f56a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 22 additions and 22 deletions

View File

@ -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;
}

View File

@ -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(

View File

@ -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;

View File

@ -67,7 +67,7 @@ const Demo = () => {
</Select>
</Form.Item>
<Form.Item
inline
noStyle
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
>
{({ getFieldValue }) => {

View File

@ -68,7 +68,7 @@ class Demo extends React.Component {
</Select>
</Form.Item>
<Form.Item
inline
noStyle
shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}
>
{({ getFieldValue }) => {

View File

@ -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>

View File

@ -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>

View File

@ -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 />

View File

@ -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" />

View File

@ -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) | - |

View File

@ -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) | - |

View File

@ -130,7 +130,7 @@ To:
const Demo = () => {
return (
<Form>
<Form.Item name="username" inline>
<Form.Item name="username" noStyle>
<Input />
</Form.Item>
</Form>

View File

@ -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>