You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
5.1 KiB
140 lines
5.1 KiB
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports["default"] = void 0;
|
|
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
|
|
|
|
var _CloseCircleFilled = _interopRequireDefault(require("@ant-design/icons/CloseCircleFilled"));
|
|
|
|
var _CheckCircleFilled = _interopRequireDefault(require("@ant-design/icons/CheckCircleFilled"));
|
|
|
|
var _ExclamationCircleFilled = _interopRequireDefault(require("@ant-design/icons/ExclamationCircleFilled"));
|
|
|
|
var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));
|
|
|
|
var _rcMotion = _interopRequireDefault(require("rc-motion"));
|
|
|
|
var _col = _interopRequireDefault(require("../grid/col"));
|
|
|
|
var _context = require("./context");
|
|
|
|
var _useCacheErrors3 = _interopRequireDefault(require("./hooks/useCacheErrors"));
|
|
|
|
var iconMap = {
|
|
success: _CheckCircleFilled["default"],
|
|
warning: _ExclamationCircleFilled["default"],
|
|
error: _CloseCircleFilled["default"],
|
|
validating: _LoadingOutlined["default"]
|
|
};
|
|
|
|
var FormItemInput = function FormItemInput(_ref) {
|
|
var prefixCls = _ref.prefixCls,
|
|
wrapperCol = _ref.wrapperCol,
|
|
children = _ref.children,
|
|
help = _ref.help,
|
|
errors = _ref.errors,
|
|
onDomErrorVisibleChange = _ref.onDomErrorVisibleChange,
|
|
hasFeedback = _ref.hasFeedback,
|
|
validateStatus = _ref.validateStatus,
|
|
extra = _ref.extra;
|
|
|
|
var _React$useState = React.useState({}),
|
|
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
|
forceUpdate = _React$useState2[1];
|
|
|
|
var baseClassName = "".concat(prefixCls, "-item");
|
|
var formContext = React.useContext(_context.FormContext);
|
|
var mergedWrapperCol = wrapperCol || formContext.wrapperCol || {};
|
|
var className = (0, _classnames["default"])("".concat(baseClassName, "-control"), mergedWrapperCol.className);
|
|
|
|
var _useCacheErrors = (0, _useCacheErrors3["default"])(errors, function (changedVisible) {
|
|
if (changedVisible) {
|
|
/**
|
|
* We trigger in sync to avoid dom shaking but this get warning in react 16.13.
|
|
* So use Promise to keep in micro async to handle this.
|
|
* https://github.com/ant-design/ant-design/issues/21698#issuecomment-593743485
|
|
*/
|
|
Promise.resolve().then(function () {
|
|
onDomErrorVisibleChange(true);
|
|
});
|
|
}
|
|
|
|
forceUpdate({});
|
|
}, !!help),
|
|
_useCacheErrors2 = (0, _slicedToArray2["default"])(_useCacheErrors, 2),
|
|
visible = _useCacheErrors2[0],
|
|
cacheErrors = _useCacheErrors2[1];
|
|
|
|
React.useEffect(function () {
|
|
return function () {
|
|
onDomErrorVisibleChange(false);
|
|
};
|
|
}, []);
|
|
var memoErrors = (0, _useMemo["default"])(function () {
|
|
return cacheErrors;
|
|
}, visible, function (_, nextVisible) {
|
|
return nextVisible;
|
|
}); // Should provides additional icon if `hasFeedback`
|
|
|
|
var IconNode = validateStatus && iconMap[validateStatus];
|
|
var icon = hasFeedback && IconNode ? /*#__PURE__*/React.createElement("span", {
|
|
className: "".concat(baseClassName, "-children-icon")
|
|
}, /*#__PURE__*/React.createElement(IconNode, null)) : null; // Pass to sub FormItem should not with col info
|
|
|
|
var subFormContext = (0, _extends2["default"])({}, formContext);
|
|
delete subFormContext.labelCol;
|
|
delete subFormContext.wrapperCol;
|
|
return /*#__PURE__*/React.createElement(_context.FormContext.Provider, {
|
|
value: subFormContext
|
|
}, /*#__PURE__*/React.createElement(_col["default"], (0, _extends2["default"])({}, mergedWrapperCol, {
|
|
className: className
|
|
}), /*#__PURE__*/React.createElement("div", {
|
|
className: "".concat(baseClassName, "-control-input")
|
|
}, /*#__PURE__*/React.createElement("div", {
|
|
className: "".concat(baseClassName, "-control-input-content")
|
|
}, children), icon), /*#__PURE__*/React.createElement(_rcMotion["default"], {
|
|
motionDeadline: 500,
|
|
visible: visible,
|
|
motionName: "show-help",
|
|
onLeaveEnd: function onLeaveEnd() {
|
|
onDomErrorVisibleChange(false);
|
|
},
|
|
motionAppear: true,
|
|
removeOnLeave: true
|
|
}, function (_ref2) {
|
|
var motionClassName = _ref2.className;
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: (0, _classnames["default"])("".concat(baseClassName, "-explain"), motionClassName),
|
|
key: "help"
|
|
}, memoErrors.map(function (error, index) {
|
|
return (
|
|
/*#__PURE__*/
|
|
// eslint-disable-next-line react/no-array-index-key
|
|
React.createElement("div", {
|
|
key: index,
|
|
role: "alert"
|
|
}, error)
|
|
);
|
|
}));
|
|
}), extra && /*#__PURE__*/React.createElement("div", {
|
|
className: "".concat(baseClassName, "-extra")
|
|
}, extra)));
|
|
};
|
|
|
|
var _default = FormItemInput;
|
|
exports["default"] = _default; |