tntd 3.0.0-beta → 3.0.0-beta.1

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

@@ -16,249 +16,223 @@ 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;
+    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);
         }
-      } else {
-        // Use origin cache data
-        namePath = fieldKeyPathRef.current || namePath;
-      }
-      notifyParentMetaChange(nextMeta, 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));
     }
-  };
-  // >>>>> 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;
+    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);
     }
-    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
-      })));
+    let variables = {};
+    if (typeof label === 'string') {
+        variables.label = label;
     }
-    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 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;
         }
-        if (props.extra) {
-          describedbyArr.push(`${fieldId}_extra`);
+        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.');
         }
-        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);
-  });
+        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);
+        }
+        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;
+export default FormItem;
+//# sourceMappingURL=index.js.map

package/es/tntd-form/FormItemInput.js

@@ -3,77 +3,36 @@ 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'
+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`;
     }
-  }, 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));
+    // 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;
+export default FormItemInput;
+//# sourceMappingURL=FormItemInput.js.map