123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- 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) {
- _this.setState(function (prevState) {
- var nextKeyEntities = prevState.keyEntities.map(function (entity) {
- if (entity.key !== removeKey) return entity;
- return _objectSpread(_objectSpread({}, entity), {}, {
- status: STATUS_REMOVED
- });
- });
- return {
- keyEntities: nextKeyEntities
- };
- }, function () {
- var keyEntities = _this.state.keyEntities;
- var restKeysCount = keyEntities.filter(function (_ref) {
- var status = _ref.status;
- return status !== STATUS_REMOVED;
- }).length;
- if (restKeysCount === 0 && _this.props.onAllRemoved) {
- _this.props.onAllRemoved();
- }
- });
- });
- 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 || _onVisibleChanged(changedVisible, {
- key: eventProps.key
- });
- if (!changedVisible) {
- _this2.removeKey(eventProps.key);
- }
- }
- }), 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);
|