CSSMotionList.js 7.5 KB

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