'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

exports['default'] = ErrorList;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _rcMotion = require('rc-motion');

var _rcMotion2 = _interopRequireDefault(_rcMotion);

var _useMemo = require('rc-util/lib/hooks/useMemo');

var _useMemo2 = _interopRequireDefault(_useMemo);

var _useCacheErrors3 = require('../hooks/useCacheErrors');

var _useCacheErrors4 = _interopRequireDefault(_useCacheErrors3);

var _useForceUpdate = require('./useForceUpdate');

var _useForceUpdate2 = _interopRequireDefault(_useForceUpdate);

var _context = require('./context');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var EMPTY_LIST = [];
function ErrorList(_ref) {
    var _ref$errors = _ref.errors,
        errors = _ref$errors === undefined ? EMPTY_LIST : _ref$errors,
        help = _ref.help,
        onDomErrorVisibleChange = _ref.onDomErrorVisibleChange;

    var forceUpdate = (0, _useForceUpdate2['default'])();

    var _React$useContext = React.useContext(_context.FormItemPrefixContext),
        prefixCls = _React$useContext.prefixCls,
        status = _React$useContext.status;

    var _useCacheErrors = (0, _useCacheErrors4['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 === null || onDomErrorVisibleChange === void 0 ? void 0 : onDomErrorVisibleChange(true);
            });
        }
        // @ts-ignore
        forceUpdate();
    }, !!help),
        _useCacheErrors2 = (0, _slicedToArray3['default'])(_useCacheErrors, 2),
        visible = _useCacheErrors2[0],
        cacheErrors = _useCacheErrors2[1];

    var memoErrors = (0, _useMemo2['default'])(function () {
        return cacheErrors;
    }, visible, function (_, nextVisible) {
        return nextVisible;
    });
    // Memo status in same visible

    var _React$useState = React.useState(status),
        _React$useState2 = (0, _slicedToArray3['default'])(_React$useState, 2),
        innerStatus = _React$useState2[0],
        setInnerStatus = _React$useState2[1];

    React.useEffect(function () {
        if (visible && status) {
            setInnerStatus(status);
        }
    }, [visible, status]);
    var baseClassName = prefixCls + '-item-explain';
    return React.createElement(
        _rcMotion2['default'],
        { motionDeadline: 500, visible: visible, motionName: 'show-help', onLeaveEnd: function onLeaveEnd() {
                onDomErrorVisibleChange === null || onDomErrorVisibleChange === void 0 ? void 0 : onDomErrorVisibleChange(false);
            }, motionAppear: true, removeOnLeave: true },
        function (_ref2) {
            var motionClassName = _ref2.className;

            return React.createElement(
                'div',
                { className: (0, _classnames2['default'])(baseClassName, (0, _defineProperty3['default'])({}, baseClassName + '-' + innerStatus, innerStatus), motionClassName), key: 'help' },
                memoErrors.map(function (error, index) {
                    return (
                        // eslint-disable-next-line react/no-array-index-key
                        React.createElement(
                            'div',
                            { key: index, role: 'alert' },
                            error
                        )
                    );
                })
            );
        }
    );
}
module.exports = exports['default'];