1 | const _excluded = ["direction", "children", "onTransitionEnd"];
|
2 |
|
3 | function _extends() { _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; }; return _extends.apply(this, arguments); }
|
4 |
|
5 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
6 |
|
7 | import cn from 'classnames';
|
8 | import transitionEnd from 'dom-helpers/transitionEnd';
|
9 | import PropTypes from 'prop-types';
|
10 | import React from 'react';
|
11 | const DirectionPropType = PropTypes.oneOf(['left', 'right', 'top', 'bottom']);
|
12 | const prefix = 'rw-calendar-transition';
|
13 | const active = 'rw-calendar-transition-active';
|
14 | const next = 'rw-calendar-transition-next';
|
15 | const prev = 'rw-calendar-transition-prev';
|
16 |
|
17 | const clone = (el, cls) => el && React.cloneElement(el, {
|
18 | className: cn(el.props.className, prefix, cls)
|
19 | });
|
20 |
|
21 | class SlideTransitionGroup extends React.Component {
|
22 | constructor(args) {
|
23 | super(args);
|
24 |
|
25 | this.handleTransitionEnd = hadFocus => {
|
26 | this.isTransitioning = false;
|
27 | let current = this.container.current.lastChild;
|
28 | if (this.props.onTransitionEnd) this.props.onTransitionEnd(current, hadFocus);
|
29 | };
|
30 |
|
31 | this.current = this.props.children;
|
32 | this.container = React.createRef();
|
33 | this.state = {
|
34 | prevClasses: '',
|
35 | currentClasses: ''
|
36 | };
|
37 | }
|
38 |
|
39 | componentDidUpdate() {
|
40 | if (!this.flush || this.isTransitioning) return;
|
41 | this.flush = false;
|
42 | this.isTransitioning = true;
|
43 | let previous = this.container.current.firstChild;
|
44 | const hadFocus = document.activeElement && previous.contains(document.activeElement);
|
45 | this.setState({
|
46 | prevClasses: '',
|
47 | currentClasses: next
|
48 | }, () => {
|
49 | let current = this.container.current.lastChild;
|
50 | current.clientHeight;
|
51 |
|
52 | this.setState({
|
53 | prevClasses: prev,
|
54 | currentClasses: cn(next, active)
|
55 | }, () => {
|
56 | transitionEnd(current, () => {
|
57 | this.prev = null;
|
58 |
|
59 | if (this.current.key !== this.props.children.key) {
|
60 | this.current = this.props.children;
|
61 | }
|
62 |
|
63 | this.setState({
|
64 | prevClasses: '',
|
65 | currentClasses: ''
|
66 | }, () => this.handleTransitionEnd(hadFocus));
|
67 | });
|
68 | });
|
69 | });
|
70 | }
|
71 |
|
72 | render() {
|
73 | let _this$props = this.props,
|
74 | {
|
75 | direction,
|
76 | children
|
77 | } = _this$props,
|
78 | props = _objectWithoutPropertiesLoose(_this$props, _excluded);
|
79 |
|
80 | if (!this.isTransitioning) {
|
81 | if (this.current.key !== children.key) {
|
82 | this.prev = this.current;
|
83 | this.flush = true;
|
84 | }
|
85 |
|
86 | this.current = children;
|
87 | }
|
88 |
|
89 | let {
|
90 | prevClasses,
|
91 | currentClasses
|
92 | } = this.state;
|
93 | return React.createElement("div", _extends({}, props, {
|
94 | ref: this.container,
|
95 | className: cn(`rw-calendar-transition-group`, direction === 'top' && 'rw-calendar-transition-top', direction === 'right' && 'rw-calendar-transition-right', direction === 'bottom' && 'rw-calendar-transition-bottom', direction === 'left' && 'rw-calendar-transition-left')
|
96 | }), clone(this.prev, prevClasses), clone(this.current, currentClasses));
|
97 | }
|
98 |
|
99 | }
|
100 |
|
101 | SlideTransitionGroup.defaultProps = {
|
102 | direction: 'left'
|
103 | };
|
104 | SlideTransitionGroup.propTypes = {
|
105 | direction: DirectionPropType,
|
106 | onTransitionEnd: PropTypes.func
|
107 | };
|
108 | export default SlideTransitionGroup; |
\ | No newline at end of file |