Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

3 лет назад
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. 'use strict';
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.AnimationPropType = undefined;
  6. var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
  7. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  8. exports.extractAnimatedPropValues = extractAnimatedPropValues;
  9. var _react = require('react');
  10. var _react2 = _interopRequireDefault(_react);
  11. var _propTypes = require('prop-types');
  12. var _propTypes2 = _interopRequireDefault(_propTypes);
  13. var _d3Interpolate = require('d3-interpolate');
  14. var _reactMotion = require('react-motion');
  15. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  16. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  17. function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
  18. function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  19. function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
  20. var ANIMATION_PROPTYPES = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.shape({
  21. stiffness: _propTypes2.default.number,
  22. nonAnimatedProps: _propTypes2.default.arrayOf(_propTypes2.default.string),
  23. damping: _propTypes2.default.number
  24. }), _propTypes2.default.bool]);
  25. var propTypes = {
  26. animatedProps: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
  27. animation: ANIMATION_PROPTYPES,
  28. onStart: _propTypes2.default.func,
  29. onEnd: _propTypes2.default.func
  30. };
  31. /**
  32. * Format the animation style object
  33. * @param {Object|String} animationStyle - The animation style property, either the name of a
  34. * presets are one of noWobble, gentle, wobbly, stiff
  35. */
  36. function getAnimationStyle() {
  37. var animationStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _reactMotion.presets.noWobble;
  38. if (typeof animationStyle === 'string') {
  39. return _reactMotion.presets[animationStyle] || _reactMotion.presets.noWobble;
  40. }
  41. var damping = animationStyle.damping,
  42. stiffness = animationStyle.stiffness;
  43. return _extends({
  44. damping: damping || _reactMotion.presets.noWobble.damping,
  45. stiffness: stiffness || _reactMotion.presets.noWobble.stiffness
  46. }, animationStyle);
  47. }
  48. /**
  49. * Extract the animated props from the entire props object.
  50. * @param {Object} props Props.
  51. * @returns {Object} Object of animated props.
  52. */
  53. function extractAnimatedPropValues(props) {
  54. var animatedProps = props.animatedProps,
  55. otherProps = _objectWithoutProperties(props, ['animatedProps']);
  56. return animatedProps.reduce(function (result, animatedPropName) {
  57. if (otherProps.hasOwnProperty(animatedPropName)) {
  58. result[animatedPropName] = otherProps[animatedPropName];
  59. }
  60. return result;
  61. }, {});
  62. }
  63. var Animation = function (_PureComponent) {
  64. _inherits(Animation, _PureComponent);
  65. function Animation(props) {
  66. _classCallCheck(this, Animation);
  67. var _this = _possibleConstructorReturn(this, (Animation.__proto__ || Object.getPrototypeOf(Animation)).call(this, props));
  68. _this._motionEndHandler = function () {
  69. if (_this.props.onEnd) {
  70. _this.props.onEnd();
  71. }
  72. };
  73. _this._renderChildren = function (_ref) {
  74. var i = _ref.i;
  75. var children = _this.props.children;
  76. var interpolator = _this._interpolator;
  77. var child = _react2.default.Children.only(children);
  78. var interpolatedProps = interpolator ? interpolator(i) : interpolator;
  79. // interpolator doesnt play nice with deeply nested objected
  80. // so we expose an additional prop for situations like these, soit _data,
  81. // which stores the full tree and can be recombined with the sanitized version
  82. // after interpolation
  83. var data = interpolatedProps && interpolatedProps.data || null;
  84. if (data && child.props._data) {
  85. data = data.map(function (row, index) {
  86. var correspondingCell = child.props._data[index];
  87. return _extends({}, row, {
  88. parent: correspondingCell.parent,
  89. children: correspondingCell.children
  90. });
  91. });
  92. }
  93. return _react2.default.cloneElement(child, _extends({}, child.props, interpolatedProps, {
  94. data: data || child.props.data || null,
  95. // enforce re-rendering
  96. _animation: Math.random()
  97. }));
  98. };
  99. _this._updateInterpolator(props);
  100. return _this;
  101. }
  102. _createClass(Animation, [{
  103. key: 'componentWillUpdate',
  104. value: function componentWillUpdate(props) {
  105. this._updateInterpolator(this.props, props);
  106. if (props.onStart) {
  107. props.onStart();
  108. }
  109. }
  110. /**
  111. * Render the child into the parent.
  112. * @param {Number} i Number generated by the spring.
  113. * @returns {React.Component} Rendered react element.
  114. * @private
  115. */
  116. }, {
  117. key: '_updateInterpolator',
  118. /**
  119. * Update the interpolator function and assign it to this._interpolator.
  120. * @param {Object} oldProps Old props.
  121. * @param {Object} newProps New props.
  122. * @private
  123. */
  124. value: function _updateInterpolator(oldProps, newProps) {
  125. this._interpolator = (0, _d3Interpolate.interpolate)(extractAnimatedPropValues(oldProps), newProps ? extractAnimatedPropValues(newProps) : null);
  126. }
  127. }, {
  128. key: 'render',
  129. value: function render() {
  130. var animationStyle = getAnimationStyle(this.props.animation);
  131. var defaultStyle = { i: 0 };
  132. var style = { i: (0, _reactMotion.spring)(1, animationStyle) };
  133. // In order to make Motion re-run animations each time, the random key is
  134. // always passed.
  135. // TODO: find a better solution for the spring.
  136. var key = Math.random();
  137. return _react2.default.createElement(
  138. _reactMotion.Motion,
  139. _extends({ defaultStyle: defaultStyle, style: style, key: key }, { onRest: this._motionEndHandler }),
  140. this._renderChildren
  141. );
  142. }
  143. }]);
  144. return Animation;
  145. }(_react.PureComponent);
  146. Animation.propTypes = propTypes;
  147. Animation.displayName = 'Animation';
  148. exports.default = Animation;
  149. var AnimationPropType = exports.AnimationPropType = ANIMATION_PROPTYPES;