CSSMotionList.js 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  3. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  4. import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
  5. import _createClass from "@babel/runtime/helpers/esm/createClass";
  6. import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
  7. import _inherits from "@babel/runtime/helpers/esm/inherits";
  8. import _createSuper from "@babel/runtime/helpers/esm/createSuper";
  9. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  10. var _excluded = ["component", "children", "onVisibleChanged", "onAllRemoved"],
  11. _excluded2 = ["status"];
  12. /* eslint react/prop-types: 0 */
  13. import * as React from 'react';
  14. import OriginCSSMotion from "./CSSMotion";
  15. import { diffKeys, parseKeys, STATUS_ADD, STATUS_KEEP, STATUS_REMOVE, STATUS_REMOVED } from "./util/diff";
  16. import { supportTransition } from "./util/motion";
  17. 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'];
  18. /**
  19. * Generate a CSSMotionList component with config
  20. * @param transitionSupport No need since CSSMotionList no longer depends on transition support
  21. * @param CSSMotion CSSMotion component
  22. */
  23. export function genCSSMotionList(transitionSupport) {
  24. var CSSMotion = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : OriginCSSMotion;
  25. var CSSMotionList = /*#__PURE__*/function (_React$Component) {
  26. _inherits(CSSMotionList, _React$Component);
  27. var _super = _createSuper(CSSMotionList);
  28. function CSSMotionList() {
  29. var _this;
  30. _classCallCheck(this, CSSMotionList);
  31. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  32. args[_key] = arguments[_key];
  33. }
  34. _this = _super.call.apply(_super, [this].concat(args));
  35. _defineProperty(_assertThisInitialized(_this), "state", {
  36. keyEntities: []
  37. });
  38. // ZombieJ: Return the count of rest keys. It's safe to refactor if need more info.
  39. _defineProperty(_assertThisInitialized(_this), "removeKey", function (removeKey) {
  40. _this.setState(function (prevState) {
  41. var nextKeyEntities = prevState.keyEntities.map(function (entity) {
  42. if (entity.key !== removeKey) return entity;
  43. return _objectSpread(_objectSpread({}, entity), {}, {
  44. status: STATUS_REMOVED
  45. });
  46. });
  47. return {
  48. keyEntities: nextKeyEntities
  49. };
  50. }, function () {
  51. var keyEntities = _this.state.keyEntities;
  52. var restKeysCount = keyEntities.filter(function (_ref) {
  53. var status = _ref.status;
  54. return status !== STATUS_REMOVED;
  55. }).length;
  56. if (restKeysCount === 0 && _this.props.onAllRemoved) {
  57. _this.props.onAllRemoved();
  58. }
  59. });
  60. });
  61. return _this;
  62. }
  63. _createClass(CSSMotionList, [{
  64. key: "render",
  65. value: function render() {
  66. var _this2 = this;
  67. var keyEntities = this.state.keyEntities;
  68. var _this$props = this.props,
  69. component = _this$props.component,
  70. children = _this$props.children,
  71. _onVisibleChanged = _this$props.onVisibleChanged,
  72. onAllRemoved = _this$props.onAllRemoved,
  73. restProps = _objectWithoutProperties(_this$props, _excluded);
  74. var Component = component || React.Fragment;
  75. var motionProps = {};
  76. MOTION_PROP_NAMES.forEach(function (prop) {
  77. motionProps[prop] = restProps[prop];
  78. delete restProps[prop];
  79. });
  80. delete restProps.keys;
  81. return /*#__PURE__*/React.createElement(Component, restProps, keyEntities.map(function (_ref2, index) {
  82. var status = _ref2.status,
  83. eventProps = _objectWithoutProperties(_ref2, _excluded2);
  84. var visible = status === STATUS_ADD || status === STATUS_KEEP;
  85. return /*#__PURE__*/React.createElement(CSSMotion, _extends({}, motionProps, {
  86. key: eventProps.key,
  87. visible: visible,
  88. eventProps: eventProps,
  89. onVisibleChanged: function onVisibleChanged(changedVisible) {
  90. _onVisibleChanged === null || _onVisibleChanged === void 0 || _onVisibleChanged(changedVisible, {
  91. key: eventProps.key
  92. });
  93. if (!changedVisible) {
  94. _this2.removeKey(eventProps.key);
  95. }
  96. }
  97. }), function (props, ref) {
  98. return children(_objectSpread(_objectSpread({}, props), {}, {
  99. index: index
  100. }), ref);
  101. });
  102. }));
  103. }
  104. }], [{
  105. key: "getDerivedStateFromProps",
  106. value: function getDerivedStateFromProps(_ref3, _ref4) {
  107. var keys = _ref3.keys;
  108. var keyEntities = _ref4.keyEntities;
  109. var parsedKeyObjects = parseKeys(keys);
  110. var mixedKeyEntities = diffKeys(keyEntities, parsedKeyObjects);
  111. return {
  112. keyEntities: mixedKeyEntities.filter(function (entity) {
  113. var prevEntity = keyEntities.find(function (_ref5) {
  114. var key = _ref5.key;
  115. return entity.key === key;
  116. });
  117. // Remove if already mark as removed
  118. if (prevEntity && prevEntity.status === STATUS_REMOVED && entity.status === STATUS_REMOVE) {
  119. return false;
  120. }
  121. return true;
  122. })
  123. };
  124. }
  125. }]);
  126. return CSSMotionList;
  127. }(React.Component);
  128. _defineProperty(CSSMotionList, "defaultProps", {
  129. component: 'div'
  130. });
  131. return CSSMotionList;
  132. }
  133. export default genCSSMotionList(supportTransition);