import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; import _createClass from "@babel/runtime/helpers/esm/createClass"; import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized"; import _inherits from "@babel/runtime/helpers/esm/inherits"; import _createSuper from "@babel/runtime/helpers/esm/createSuper"; import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; var _excluded = ["component", "children", "onVisibleChanged", "onAllRemoved"], _excluded2 = ["status"]; /* eslint react/prop-types: 0 */ import * as React from 'react'; import OriginCSSMotion from "./CSSMotion"; import { diffKeys, parseKeys, STATUS_ADD, STATUS_KEEP, STATUS_REMOVE, STATUS_REMOVED } from "./util/diff"; import { supportTransition } from "./util/motion"; var MOTION_PROP_NAMES = ['eventProps', 'visible', 'children', 'motionName', 'motionAppear', 'motionEnter', 'motionLeave', 'motionLeaveImmediately', 'motionDeadline', 'removeOnLeave', 'leavedClassName', 'onAppearPrepare', 'onAppearStart', 'onAppearActive', 'onAppearEnd', 'onEnterStart', 'onEnterActive', 'onEnterEnd', 'onLeaveStart', 'onLeaveActive', 'onLeaveEnd']; /** * Generate a CSSMotionList component with config * @param transitionSupport No need since CSSMotionList no longer depends on transition support * @param CSSMotion CSSMotion component */ export function genCSSMotionList(transitionSupport) { var CSSMotion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : OriginCSSMotion; var CSSMotionList = /*#__PURE__*/function (_React$Component) { _inherits(CSSMotionList, _React$Component); var _super = _createSuper(CSSMotionList); function CSSMotionList() { var _this; _classCallCheck(this, CSSMotionList); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _super.call.apply(_super, [this].concat(args)); _defineProperty(_assertThisInitialized(_this), "state", { keyEntities: [] }); // ZombieJ: Return the count of rest keys. It's safe to refactor if need more info. _defineProperty(_assertThisInitialized(_this), "removeKey", function (removeKey) { var keyEntities = _this.state.keyEntities; var nextKeyEntities = keyEntities.map(function (entity) { if (entity.key !== removeKey) return entity; return _objectSpread(_objectSpread({}, entity), {}, { status: STATUS_REMOVED }); }); _this.setState({ keyEntities: nextKeyEntities }); return nextKeyEntities.filter(function (_ref) { var status = _ref.status; return status !== STATUS_REMOVED; }).length; }); return _this; } _createClass(CSSMotionList, [{ key: "render", value: function render() { var _this2 = this; var keyEntities = this.state.keyEntities; var _this$props = this.props, component = _this$props.component, children = _this$props.children, _onVisibleChanged = _this$props.onVisibleChanged, onAllRemoved = _this$props.onAllRemoved, restProps = _objectWithoutProperties(_this$props, _excluded); var Component = component || React.Fragment; var motionProps = {}; MOTION_PROP_NAMES.forEach(function (prop) { motionProps[prop] = restProps[prop]; delete restProps[prop]; }); delete restProps.keys; return /*#__PURE__*/React.createElement(Component, restProps, keyEntities.map(function (_ref2, index) { var status = _ref2.status, eventProps = _objectWithoutProperties(_ref2, _excluded2); var visible = status === STATUS_ADD || status === STATUS_KEEP; return /*#__PURE__*/React.createElement(CSSMotion, _extends({}, motionProps, { key: eventProps.key, visible: visible, eventProps: eventProps, onVisibleChanged: function onVisibleChanged(changedVisible) { _onVisibleChanged === null || _onVisibleChanged === void 0 ? void 0 : _onVisibleChanged(changedVisible, { key: eventProps.key }); if (!changedVisible) { var restKeysCount = _this2.removeKey(eventProps.key); if (restKeysCount === 0 && onAllRemoved) { onAllRemoved(); } } } }), function (props, ref) { return children(_objectSpread(_objectSpread({}, props), {}, { index: index }), ref); }); })); } }], [{ key: "getDerivedStateFromProps", value: function getDerivedStateFromProps(_ref3, _ref4) { var keys = _ref3.keys; var keyEntities = _ref4.keyEntities; var parsedKeyObjects = parseKeys(keys); var mixedKeyEntities = diffKeys(keyEntities, parsedKeyObjects); return { keyEntities: mixedKeyEntities.filter(function (entity) { var prevEntity = keyEntities.find(function (_ref5) { var key = _ref5.key; return entity.key === key; }); // Remove if already mark as removed if (prevEntity && prevEntity.status === STATUS_REMOVED && entity.status === STATUS_REMOVE) { return false; } return true; }) }; } }]); return CSSMotionList; }(React.Component); _defineProperty(CSSMotionList, "defaultProps", { component: 'div' }); return CSSMotionList; } export default genCSSMotionList(supportTransition);