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