1 | 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); }
|
2 |
|
3 | import cn from 'classnames';
|
4 | import css from 'dom-helpers/css';
|
5 | import getHeight from 'dom-helpers/height';
|
6 | import transitionEnd from 'dom-helpers/transitionEnd';
|
7 | import PropTypes from 'prop-types';
|
8 | import React from 'react';
|
9 | import Transition, { ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
|
10 | const transitionClasses = {
|
11 | [ENTERING]: 'rw-slide-transition-entering',
|
12 | [EXITING]: 'rw-slide-transition-exiting',
|
13 | [EXITED]: 'rw-slide-transition-exited'
|
14 | };
|
15 |
|
16 | class SlideDownTransition extends React.Component {
|
17 | constructor(...args) {
|
18 | super(...args);
|
19 |
|
20 | this.setContainerHeight = elem => {
|
21 | elem.style.height = this.getHeight(elem) + 'px';
|
22 | };
|
23 |
|
24 | this.clearContainerHeight = elem => {
|
25 | elem.style.height = '';
|
26 | };
|
27 |
|
28 | this.handleEntered = elem => {
|
29 | this.clearContainerHeight(elem);
|
30 | if (this.props.onEntered) this.props.onEntered();
|
31 | };
|
32 |
|
33 | this.handleEntering = () => {
|
34 | if (this.props.onEntering) this.props.onEntering();
|
35 | };
|
36 |
|
37 | this.handleExit = elem => {
|
38 | this.setContainerHeight(elem);
|
39 | if (this.props.onExit) this.props.onExit();
|
40 | };
|
41 |
|
42 | this.handleExited = elem => {
|
43 | this.clearContainerHeight(elem);
|
44 | if (this.props.onExited) this.props.onExited();
|
45 | };
|
46 |
|
47 | this.handleTransitionEnd = (el, done) => {
|
48 | transitionEnd(el.firstChild, done);
|
49 | };
|
50 | }
|
51 |
|
52 | getHeight(container) {
|
53 | let content = container.firstChild;
|
54 | let margin = parseInt(css(content, 'margin-top'), 10) + parseInt(css(content, 'margin-bottom'), 10);
|
55 | let old = container.style.display;
|
56 | let height;
|
57 | container.style.display = 'block';
|
58 | height = (getHeight(content) || 0) + (isNaN(margin) ? 0 : margin);
|
59 | container.style.display = old;
|
60 | return height;
|
61 | }
|
62 |
|
63 | render() {
|
64 | const {
|
65 | children,
|
66 | className,
|
67 | dropUp
|
68 | } = this.props;
|
69 | return React.createElement(Transition, {
|
70 | appear: true,
|
71 | in: this.props.in,
|
72 | onEnter: this.setContainerHeight,
|
73 | onEntering: this.handleEntering,
|
74 | onEntered: this.handleEntered,
|
75 | onExit: this.handleExit,
|
76 | onExited: this.handleExited,
|
77 | addEndListener: this.handleTransitionEnd,
|
78 | timeout: undefined
|
79 |
|
80 |
|
81 | }, (status, innerProps) => React.createElement("div", _extends({}, innerProps, {
|
82 | className: cn(className, dropUp && 'rw-dropup', transitionClasses[status])
|
83 | }), React.cloneElement(children, {
|
84 | className: cn('rw-slide-transition', children.props.className)
|
85 | })));
|
86 | }
|
87 |
|
88 | }
|
89 |
|
90 | SlideDownTransition.propTypes = {
|
91 | in: PropTypes.bool.isRequired,
|
92 | innerClassName: PropTypes.string,
|
93 | dropUp: PropTypes.bool,
|
94 | onExit: PropTypes.func,
|
95 | onExited: PropTypes.func,
|
96 | onEntering: PropTypes.func,
|
97 | onEntered: PropTypes.func
|
98 | };
|
99 | export default SlideDownTransition; |
\ | No newline at end of file |