tntd 3.0.0-beta.1 → 3.0.0-beta.2

package/es/tntd-form/FormItem/index.js

@@ -16,223 +16,249 @@ import { getFieldId, toArray } from '../util';
 import ItemHolder from './ItemHolder';
 const NAME_SPLIT = '__SPLIT__';
 const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
-const MemoInput = React.memo(({ children }) => children, (prev, next) => prev.value === next.value &&
-    prev.update === next.update &&
-    prev.childProps.length === next.childProps.length &&
-    prev.childProps.every((value, index) => value === next.childProps[index]));
+const MemoInput = React.memo(({
+  children
+}) => children, (prev, next) => prev.value === next.value && prev.update === next.update && prev.childProps.length === next.childProps.length && prev.childProps.every((value, index) => value === next.childProps[index]));
 function hasValidName(name) {
-    if (name === null) {
-        warning(false, 'Form.Item', '`null` is passed as `name` property');
-    }
-    return !(name === undefined || name === null);
+  if (name === null) {
+    warning(false, 'Form.Item', '`null` is passed as `name` property');
+  }
+  return !(name === undefined || name === null);
 }
 function genEmptyMeta() {
-    return {
-        errors: [],
-        warnings: [],
-        touched: false,
-        validating: false,
-        validated: false,
-        name: [],
-    };
+  return {
+    errors: [],
+    warnings: [],
+    touched: false,
+    validating: false,
+    validated: false,
+    name: []
+  };
 }
 function InternalFormItem(props) {
-    var _a, _b, _c, _d;
-    const { name, noStyle, dependencies, prefixCls: customizePrefixCls, shouldUpdate, rules, children, required, label, messageVariables, trigger = 'onChange', validateTrigger, hidden, } = props;
-    // TODO
-    // @ts-ignore
-    const { getPrefixCls } = useContext(ConfigContext);
-    const { name: formName } = useContext(FormContext);
-    const isRenderProps = typeof children === 'function';
-    const notifyParentMetaChange = useContext(NoStyleItemContext);
-    const contextDisabled = useContext(DisabledContext);
-    const { readonly: contextReadonly } = useContext(FormContext);
-    const { validateTrigger: contextValidateTrigger } = useContext(FieldContext);
-    const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
-    const hasName = hasValidName(name);
-    const prefixCls = getPrefixCls('form', customizePrefixCls);
-    // ========================= MISC =========================
-    // Get `noStyle` required info
-    const listContext = React.useContext(ListContext);
-    const fieldKeyPathRef = React.useRef();
-    // ======================== Errors ========================
-    // >>>>> Collect sub field errors
-    const [subFieldErrors, setSubFieldErrors] = useFrameState({});
-    // >>>>> Current field errors
-    const [meta, setMeta] = useState(() => genEmptyMeta());
-    const onMetaChange = (nextMeta) => {
-        // This keyInfo is not correct when field is removed
-        // Since origin keyManager no longer keep the origin key anymore
-        // Which means we need cache origin one and reuse when removed
-        const keyInfo = listContext === null || listContext === void 0 ? void 0 : listContext.getKey(nextMeta.name);
-        // Destroy will reset all the meta
-        setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
-        // Bump to parent since noStyle
-        if (noStyle && notifyParentMetaChange) {
-            let namePath = nextMeta.name;
-            if (!nextMeta.destroy) {
-                if (keyInfo !== undefined) {
-                    const [fieldKey, restPath] = keyInfo;
-                    namePath = [fieldKey, ...restPath];
-                    fieldKeyPathRef.current = namePath;
-                }
-            }
-            else {
-                // Use origin cache data
-                namePath = fieldKeyPathRef.current || namePath;
-            }
-            notifyParentMetaChange(nextMeta, namePath);
+  var _a, _b, _c, _d;
+  const {
+    name,
+    noStyle,
+    dependencies,
+    prefixCls: customizePrefixCls,
+    shouldUpdate,
+    rules,
+    children,
+    required,
+    label,
+    messageVariables,
+    trigger = 'onChange',
+    validateTrigger,
+    hidden
+  } = props;
+  // TODO
+  // @ts-ignore
+  const {
+    getPrefixCls
+  } = useContext(ConfigContext);
+  const {
+    name: formName
+  } = useContext(FormContext);
+  const isRenderProps = typeof children === 'function';
+  const notifyParentMetaChange = useContext(NoStyleItemContext);
+  const contextDisabled = useContext(DisabledContext);
+  const {
+    readonly: contextReadonly
+  } = useContext(FormContext);
+  const {
+    validateTrigger: contextValidateTrigger
+  } = useContext(FieldContext);
+  const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
+  const hasName = hasValidName(name);
+  const prefixCls = getPrefixCls('form', customizePrefixCls);
+  // ========================= MISC =========================
+  // Get `noStyle` required info
+  const listContext = React.useContext(ListContext);
+  const fieldKeyPathRef = React.useRef();
+  // ======================== Errors ========================
+  // >>>>> Collect sub field errors
+  const [subFieldErrors, setSubFieldErrors] = useFrameState({});
+  // >>>>> Current field errors
+  const [meta, setMeta] = useState(() => genEmptyMeta());
+  const onMetaChange = nextMeta => {
+    // This keyInfo is not correct when field is removed
+    // Since origin keyManager no longer keep the origin key anymore
+    // Which means we need cache origin one and reuse when removed
+    const keyInfo = listContext === null || listContext === void 0 ? void 0 : listContext.getKey(nextMeta.name);
+    // Destroy will reset all the meta
+    setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
+    // Bump to parent since noStyle
+    if (noStyle && notifyParentMetaChange) {
+      let namePath = nextMeta.name;
+      if (!nextMeta.destroy) {
+        if (keyInfo !== undefined) {
+          const [fieldKey, restPath] = keyInfo;
+          namePath = [fieldKey, ...restPath];
+          fieldKeyPathRef.current = namePath;
         }
-    };
-    // >>>>> Collect noStyle Field error to the top FormItem
-    const onSubItemMetaChange = (subMeta, uniqueKeys) => {
-        // Only `noStyle` sub item will trigger
-        setSubFieldErrors((prevSubFieldErrors) => {
-            const clone = Object.assign({}, prevSubFieldErrors);
-            // name: ['user', 1] + key: [4] = ['user', 4]
-            const mergedNamePath = [...subMeta.name.slice(0, -1), ...uniqueKeys];
-            const mergedNameKey = mergedNamePath.join(NAME_SPLIT);
-            if (subMeta.destroy) {
-                // Remove
-                delete clone[mergedNameKey];
-            }
-            else {
-                // Update
-                clone[mergedNameKey] = subMeta;
-            }
-            return clone;
-        });
-    };
-    // >>>>> Get merged errors
-    const [mergedErrors, mergedWarnings] = React.useMemo(() => {
-        const errorList = [...meta.errors];
-        const warningList = [...meta.warnings];
-        Object.values(subFieldErrors).forEach((subFieldError) => {
-            errorList.push(...(subFieldError.errors || []));
-            warningList.push(...(subFieldError.warnings || []));
-        });
-        return [errorList, warningList];
-    }, [subFieldErrors, meta.errors, meta.warnings]);
-    // ===================== Children Ref =====================
-    const getItemRef = useItemRef();
-    // ======================== Render ========================
-    function renderLayout(baseChildren, fieldId, isRequired) {
-        if (noStyle && !hidden) {
-            return baseChildren;
-        }
-        return (React.createElement(ItemHolder, Object.assign({ key: "row" }, props, { prefixCls: prefixCls, fieldId: fieldId, isRequired: isRequired, errors: mergedErrors, warnings: mergedWarnings, meta: meta, 
-            // TODO
-            // @ts-ignore
-            onSubItemMetaChange: onSubItemMetaChange }), baseChildren));
+      } else {
+        // Use origin cache data
+        namePath = fieldKeyPathRef.current || namePath;
+      }
+      notifyParentMetaChange(nextMeta, namePath);
     }
-    if (!hasName && !isRenderProps && !dependencies) {
-        if (isValidElement(children)) {
-            return renderLayout(cloneElement(children, Object.assign(Object.assign({}, children.props), { disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled, readonly: (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly })));
-        }
-        return renderLayout(children);
+  };
+  // >>>>> Collect noStyle Field error to the top FormItem
+  const onSubItemMetaChange = (subMeta, uniqueKeys) => {
+    // Only `noStyle` sub item will trigger
+    setSubFieldErrors(prevSubFieldErrors => {
+      const clone = Object.assign({}, prevSubFieldErrors);
+      // name: ['user', 1] + key: [4] = ['user', 4]
+      const mergedNamePath = [...subMeta.name.slice(0, -1), ...uniqueKeys];
+      const mergedNameKey = mergedNamePath.join(NAME_SPLIT);
+      if (subMeta.destroy) {
+        // Remove
+        delete clone[mergedNameKey];
+      } else {
+        // Update
+        clone[mergedNameKey] = subMeta;
+      }
+      return clone;
+    });
+  };
+  // >>>>> Get merged errors
+  const [mergedErrors, mergedWarnings] = React.useMemo(() => {
+    const errorList = [...meta.errors];
+    const warningList = [...meta.warnings];
+    Object.values(subFieldErrors).forEach(subFieldError => {
+      errorList.push(...(subFieldError.errors || []));
+      warningList.push(...(subFieldError.warnings || []));
+    });
+    return [errorList, warningList];
+  }, [subFieldErrors, meta.errors, meta.warnings]);
+  // ===================== Children Ref =====================
+  const getItemRef = useItemRef();
+  // ======================== Render ========================
+  function renderLayout(baseChildren, fieldId, isRequired) {
+    if (noStyle && !hidden) {
+      return baseChildren;
     }
-    let variables = {};
-    if (typeof label === 'string') {
-        variables.label = label;
+    return React.createElement(ItemHolder, Object.assign({
+      key: "row"
+    }, props, {
+      prefixCls: prefixCls,
+      fieldId: fieldId,
+      isRequired: isRequired,
+      errors: mergedErrors,
+      warnings: mergedWarnings,
+      meta: meta,
+      // TODO
+      // @ts-ignore
+      onSubItemMetaChange: onSubItemMetaChange
+    }), baseChildren);
+  }
+  if (!hasName && !isRenderProps && !dependencies) {
+    if (isValidElement(children)) {
+      return renderLayout(cloneElement(children, Object.assign(Object.assign({}, children.props), {
+        disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled,
+        readonly: (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly
+      })));
     }
-    else if (name) {
-        variables.label = String(name);
-    }
-    if (messageVariables) {
-        variables = Object.assign(Object.assign({}, variables), messageVariables);
-    }
-    // >>>>> With Field
-    return (React.createElement(Field, Object.assign({}, props, { messageVariables: variables, trigger: trigger, validateTrigger: mergedValidateTrigger, onMetaChange: onMetaChange }), (control, renderMeta, context) => {
-        var _a, _b, _c, _d;
-        const mergedName = toArray(name).length && renderMeta ? renderMeta.name : [];
-        const fieldId = getFieldId(mergedName, formName);
-        const isRequired = required !== undefined
-            ? required
-            : !!(rules &&
-                rules.some((rule) => {
-                    if (rule && typeof rule === 'object' && rule.required && !rule.warningOnly) {
-                        return true;
-                    }
-                    if (typeof rule === 'function') {
-                        const ruleEntity = rule(context);
-                        return ruleEntity && ruleEntity.required && !ruleEntity.warningOnly;
-                    }
-                    return false;
-                }));
-        // ======================= Children =======================
-        const mergedControl = Object.assign({}, control);
-        let childNode = null;
-        warning(!(shouldUpdate && dependencies), 'Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.");
-        if (Array.isArray(children) && hasName) {
-            warning(false, 'Form.Item', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.');
-            childNode = children;
-        }
-        else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
-            warning(!!(shouldUpdate || dependencies), 'Form.Item', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.');
-            warning(!hasName, 'Form.Item', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.');
-        }
-        else if (dependencies && !isRenderProps && !hasName) {
-            warning(false, 'Form.Item', 'Must set `name` or use a render function when `dependencies` is set.');
-        }
-        else if (isValidElement(children)) {
-            warning(children.props.defaultValue === undefined, 'Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
-            const childProps = Object.assign(Object.assign(Object.assign({}, children.props), mergedControl), { disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled });
-            if (contextReadonly !== undefined) {
-                childProps.readonly = (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly;
-            }
-            if (!childProps.id) {
-                childProps.id = fieldId;
-            }
-            if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
-                const describedbyArr = [];
-                if (props.help || mergedErrors.length > 0) {
-                    describedbyArr.push(`${fieldId}_help`);
-                }
-                if (props.extra) {
-                    describedbyArr.push(`${fieldId}_extra`);
-                }
-                childProps['aria-describedby'] = describedbyArr.join(' ');
-            }
-            if (mergedErrors.length > 0) {
-                childProps['aria-invalid'] = 'true';
-            }
-            if (isRequired) {
-                childProps['aria-required'] = 'true';
-            }
-            if (supportRef(children)) {
-                childProps.ref = getItemRef(mergedName, children);
-            }
-            // We should keep user origin event handler
-            const triggers = new Set([...toArray(trigger), ...toArray(mergedValidateTrigger)]);
-            triggers.forEach((eventName) => {
-                childProps[eventName] = (...args) => {
-                    var _a, _b, _c;
-                    (_a = mergedControl[eventName]) === null || _a === void 0 ? void 0 : _a.call(mergedControl, ...args);
-                    // @ts-ignore
-                    (_c = (_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
-                };
-            });
-            // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
-            const watchingChildProps = [
-                childProps['aria-required'],
-                childProps['aria-invalid'],
-                childProps['aria-describedby'],
-                childProps.disabled,
-                childProps.readonly,
-            ];
-            childNode = (React.createElement(MemoInput, { value: mergedControl[props.valuePropName || 'value'], update: children, childProps: watchingChildProps }, cloneElement(children, childProps)));
-        }
-        else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
-            childNode = children(context);
+    return renderLayout(children);
+  }
+  let variables = {};
+  if (typeof label === 'string') {
+    variables.label = label;
+  } else if (name) {
+    variables.label = String(name);
+  }
+  if (messageVariables) {
+    variables = Object.assign(Object.assign({}, variables), messageVariables);
+  }
+  // >>>>> With Field
+  return React.createElement(Field, Object.assign({}, props, {
+    messageVariables: variables,
+    trigger: trigger,
+    validateTrigger: mergedValidateTrigger,
+    onMetaChange: onMetaChange
+  }), (control, renderMeta, context) => {
+    var _a, _b, _c, _d;
+    const mergedName = toArray(name).length && renderMeta ? renderMeta.name : [];
+    const fieldId = getFieldId(mergedName, formName);
+    const isRequired = required !== undefined ? required : !!(rules && rules.some(rule => {
+      if (rule && typeof rule === 'object' && rule.required && !rule.warningOnly) {
+        return true;
+      }
+      if (typeof rule === 'function') {
+        const ruleEntity = rule(context);
+        return ruleEntity && ruleEntity.required && !ruleEntity.warningOnly;
+      }
+      return false;
+    }));
+    // ======================= Children =======================
+    const mergedControl = Object.assign({}, control);
+    let childNode = null;
+    warning(!(shouldUpdate && dependencies), 'Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.");
+    if (Array.isArray(children) && hasName) {
+      warning(false, 'Form.Item', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.');
+      childNode = children;
+    } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
+      warning(!!(shouldUpdate || dependencies), 'Form.Item', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.');
+      warning(!hasName, 'Form.Item', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.');
+    } else if (dependencies && !isRenderProps && !hasName) {
+      warning(false, 'Form.Item', 'Must set `name` or use a render function when `dependencies` is set.');
+    } else if (isValidElement(children)) {
+      warning(children.props.defaultValue === undefined, 'Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
+      const childProps = Object.assign(Object.assign(Object.assign({}, children.props), mergedControl), {
+        disabled: (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : contextDisabled
+      });
+      if (contextReadonly !== undefined) {
+        childProps.readonly = (_d = (_c = children.props) === null || _c === void 0 ? void 0 : _c.readonly) !== null && _d !== void 0 ? _d : contextReadonly;
+      }
+      if (!childProps.id) {
+        childProps.id = fieldId;
+      }
+      if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
+        const describedbyArr = [];
+        if (props.help || mergedErrors.length > 0) {
+          describedbyArr.push(`${fieldId}_help`);
         }
-        else {
-            warning(!mergedName.length, 'Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
-            childNode = children;
+        if (props.extra) {
+          describedbyArr.push(`${fieldId}_extra`);
         }
-        return renderLayout(childNode, fieldId, isRequired);
-    }));
+        childProps['aria-describedby'] = describedbyArr.join(' ');
+      }
+      if (mergedErrors.length > 0) {
+        childProps['aria-invalid'] = 'true';
+      }
+      if (isRequired) {
+        childProps['aria-required'] = 'true';
+      }
+      if (supportRef(children)) {
+        childProps.ref = getItemRef(mergedName, children);
+      }
+      // We should keep user origin event handler
+      const triggers = new Set([...toArray(trigger), ...toArray(mergedValidateTrigger)]);
+      triggers.forEach(eventName => {
+        childProps[eventName] = (...args) => {
+          var _a, _b, _c;
+          (_a = mergedControl[eventName]) === null || _a === void 0 ? void 0 : _a.call(mergedControl, ...args);
+          // @ts-ignore
+          (_c = (_b = children === null || children === void 0 ? void 0 : children.props) === null || _b === void 0 ? void 0 : _b[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
+        };
+      });
+      // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
+      const watchingChildProps = [childProps['aria-required'], childProps['aria-invalid'], childProps['aria-describedby'], childProps.disabled, childProps.readonly];
+      childNode = React.createElement(MemoInput, {
+        value: mergedControl[props.valuePropName || 'value'],
+        update: children,
+        childProps: watchingChildProps
+      }, cloneElement(children, childProps));
+    } else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
+      childNode = children(context);
+    } else {
+      warning(!mergedName.length, 'Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');
+      childNode = children;
+    }
+    return renderLayout(childNode, fieldId, isRequired);
+  });
 }
 const FormItem = InternalFormItem;
 FormItem.useStatus = useFormItemStatus;
-export default FormItem;
-//# sourceMappingURL=index.js.map
+export default FormItem;

package/es/tntd-form/FormItemInput.js

@@ -3,36 +3,77 @@ import * as React from 'react';
 import Col from '../grid-v4/col';
 import { FormContext, FormItemPrefixContext } from './context';
 import ErrorList from './ErrorList';
-const FormItemInput = (props) => {
-    const { prefixCls, status, wrapperCol, children, errors, warnings, _internalItemRender: formItemRender, extra, help, fieldId, marginBottom, onErrorVisibleChanged, } = props;
-    const baseClassName = `${prefixCls}-item`;
-    const formContext = React.useContext(FormContext);
-    const mergedWrapperCol = wrapperCol || formContext.wrapperCol || {};
-    const className = classNames(`${baseClassName}-control`, mergedWrapperCol.className);
-    // Pass to sub FormItem should not with col info
-    const subFormContext = React.useMemo(() => (Object.assign({}, formContext)), [formContext]);
-    delete subFormContext.labelCol;
-    delete subFormContext.wrapperCol;
-    const inputDom = (React.createElement("div", { className: `${baseClassName}-control-input` },
-        React.createElement("div", { className: `${baseClassName}-control-input-content` }, children)));
-    const formItemContext = React.useMemo(() => ({ prefixCls, status }), [prefixCls, status]);
-    const errorListDom = marginBottom !== null || errors.length || warnings.length ? (React.createElement("div", { style: { display: 'flex', flexWrap: 'nowrap' } },
-        React.createElement(FormItemPrefixContext.Provider, { value: formItemContext },
-            React.createElement(ErrorList, { fieldId: fieldId, errors: errors, warnings: warnings, help: help, helpStatus: status, className: `${baseClassName}-explain-connected`, onVisibleChanged: onErrorVisibleChanged })),
-        !!marginBottom && React.createElement("div", { style: { width: 0, height: marginBottom } }))) : null;
-    const extraProps = {};
-    if (fieldId) {
-        extraProps.id = `${fieldId}_extra`;
+const FormItemInput = props => {
+  const {
+    prefixCls,
+    status,
+    wrapperCol,
+    children,
+    errors,
+    warnings,
+    _internalItemRender: formItemRender,
+    extra,
+    help,
+    fieldId,
+    marginBottom,
+    onErrorVisibleChanged
+  } = props;
+  const baseClassName = `${prefixCls}-item`;
+  const formContext = React.useContext(FormContext);
+  const mergedWrapperCol = wrapperCol || formContext.wrapperCol || {};
+  const className = classNames(`${baseClassName}-control`, mergedWrapperCol.className);
+  // Pass to sub FormItem should not with col info
+  const subFormContext = React.useMemo(() => Object.assign({}, formContext), [formContext]);
+  delete subFormContext.labelCol;
+  delete subFormContext.wrapperCol;
+  const inputDom = React.createElement("div", {
+    className: `${baseClassName}-control-input`
+  }, React.createElement("div", {
+    className: `${baseClassName}-control-input-content`
+  }, children));
+  const formItemContext = React.useMemo(() => ({
+    prefixCls,
+    status
+  }), [prefixCls, status]);
+  const errorListDom = marginBottom !== null || errors.length || warnings.length ? React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexWrap: 'nowrap'
     }
-    // If extra = 0, && will goes wrong
-    // 0&&error -> 0
-    const extraDom = extra ? (React.createElement("div", Object.assign({}, extraProps, { className: `${baseClassName}-extra` }), extra)) : null;
-    const dom = formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (formItemRender.render(props, { input: inputDom, errorList: errorListDom, extra: extraDom })) : (React.createElement(React.Fragment, null,
-        inputDom,
-        errorListDom,
-        extraDom));
-    return (React.createElement(FormContext.Provider, { value: subFormContext },
-        React.createElement(Col, Object.assign({}, mergedWrapperCol, { className: className }), dom)));
+  }, React.createElement(FormItemPrefixContext.Provider, {
+    value: formItemContext
+  }, React.createElement(ErrorList, {
+    fieldId: fieldId,
+    errors: errors,
+    warnings: warnings,
+    help: help,
+    helpStatus: status,
+    className: `${baseClassName}-explain-connected`,
+    onVisibleChanged: onErrorVisibleChanged
+  })), !!marginBottom && React.createElement("div", {
+    style: {
+      width: 0,
+      height: marginBottom
+    }
+  })) : null;
+  const extraProps = {};
+  if (fieldId) {
+    extraProps.id = `${fieldId}_extra`;
+  }
+  // If extra = 0, && will goes wrong
+  // 0&&error -> 0
+  const extraDom = extra ? React.createElement("div", Object.assign({}, extraProps, {
+    className: `${baseClassName}-extra`
+  }), extra) : null;
+  const dom = formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? formItemRender.render(props, {
+    input: inputDom,
+    errorList: errorListDom,
+    extra: extraDom
+  }) : React.createElement(React.Fragment, null, inputDom, errorListDom, extraDom);
+  return React.createElement(FormContext.Provider, {
+    value: subFormContext
+  }, React.createElement(Col, Object.assign({}, mergedWrapperCol, {
+    className: className
+  }), dom));
 };
-export default FormItemInput;
-//# sourceMappingURL=FormItemInput.js.map
+export default FormItemInput;