1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React, { Component } from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import { func, dom } from '../util';
|
12 | import Animate from './animate';
|
13 |
|
14 | var noop = function noop() {};
|
15 | var getStyle = dom.getStyle;
|
16 | var Expand = (_temp = _class = function (_Component) {
|
17 | _inherits(Expand, _Component);
|
18 |
|
19 | function Expand(props) {
|
20 | _classCallCheck(this, Expand);
|
21 |
|
22 | var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
23 |
|
24 | func.bindCtx(_this, ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave']);
|
25 | return _this;
|
26 | }
|
27 |
|
28 | Expand.prototype.beforeEnter = function beforeEnter(node) {
|
29 | if (this.leaving) {
|
30 | this.afterLeave(node);
|
31 | }
|
32 |
|
33 | this.cacheCurrentStyle(node);
|
34 | this.cacheComputedStyle(node);
|
35 | this.setCurrentStyleToZero(node);
|
36 |
|
37 | this.props.beforeEnter(node);
|
38 | };
|
39 |
|
40 | Expand.prototype.onEnter = function onEnter(node) {
|
41 | this.setCurrentStyleToComputedStyle(node);
|
42 |
|
43 | this.props.onEnter(node);
|
44 | };
|
45 |
|
46 | Expand.prototype.afterEnter = function afterEnter(node) {
|
47 | this.restoreCurrentStyle(node);
|
48 |
|
49 | this.props.afterEnter(node);
|
50 | };
|
51 |
|
52 | Expand.prototype.beforeLeave = function beforeLeave(node) {
|
53 | this.leaving = true;
|
54 |
|
55 | this.cacheCurrentStyle(node);
|
56 | this.cacheComputedStyle(node);
|
57 | this.setCurrentStyleToComputedStyle(node);
|
58 |
|
59 | this.props.beforeLeave(node);
|
60 | };
|
61 |
|
62 | Expand.prototype.onLeave = function onLeave(node) {
|
63 | this.setCurrentStyleToZero(node);
|
64 |
|
65 | this.props.onLeave(node);
|
66 | };
|
67 |
|
68 | Expand.prototype.afterLeave = function afterLeave(node) {
|
69 | this.leaving = false;
|
70 |
|
71 | this.restoreCurrentStyle(node);
|
72 |
|
73 | this.props.afterLeave(node);
|
74 | };
|
75 |
|
76 | Expand.prototype.cacheCurrentStyle = function cacheCurrentStyle(node) {
|
77 | this.styleBorderTopWidth = node.style.borderTopWidth;
|
78 | this.stylePaddingTop = node.style.paddingTop;
|
79 | this.styleHeight = node.style.height;
|
80 | this.stylePaddingBottom = node.style.paddingBottom;
|
81 | this.styleBorderBottomWidth = node.style.borderBottomWidth;
|
82 | };
|
83 |
|
84 | Expand.prototype.cacheComputedStyle = function cacheComputedStyle(node) {
|
85 | this.borderTopWidth = getStyle(node, 'borderTopWidth');
|
86 | this.paddingTop = getStyle(node, 'paddingTop');
|
87 | this.height = node.offsetHeight;
|
88 | this.paddingBottom = getStyle(node, 'paddingBottom');
|
89 | this.borderBottomWidth = getStyle(node, 'borderBottomWidth');
|
90 | };
|
91 |
|
92 | Expand.prototype.setCurrentStyleToZero = function setCurrentStyleToZero(node) {
|
93 | node.style.borderTopWidth = '0px';
|
94 | node.style.paddingTop = '0px';
|
95 | node.style.height = '0px';
|
96 | node.style.paddingBottom = '0px';
|
97 | node.style.borderBottomWidth = '0px';
|
98 | };
|
99 |
|
100 | Expand.prototype.setCurrentStyleToComputedStyle = function setCurrentStyleToComputedStyle(node) {
|
101 | node.style.borderTopWidth = this.borderTopWidth + 'px';
|
102 | node.style.paddingTop = this.paddingTop + 'px';
|
103 | node.style.height = this.height + 'px';
|
104 | node.style.paddingBottom = this.paddingBottom + 'px';
|
105 | node.style.borderBottomWidth = this.borderBottomWidth + 'px';
|
106 | };
|
107 |
|
108 | Expand.prototype.restoreCurrentStyle = function restoreCurrentStyle(node) {
|
109 | node.style.borderTopWidth = this.styleBorderTopWidth;
|
110 | node.style.paddingTop = this.stylePaddingTop;
|
111 | node.style.height = this.styleHeight;
|
112 | node.style.paddingBottom = this.stylePaddingBottom;
|
113 | node.style.borderBottomWidth = this.styleBorderBottomWidth;
|
114 | };
|
115 |
|
116 | Expand.prototype.render = function render() {
|
117 | var _props = this.props,
|
118 | animation = _props.animation,
|
119 | others = _objectWithoutProperties(_props, ['animation']);
|
120 |
|
121 | var newAnimation = animation || 'expand';
|
122 |
|
123 | return React.createElement(Animate, _extends({}, others, {
|
124 | animation: newAnimation,
|
125 | beforeEnter: this.beforeEnter,
|
126 | onEnter: this.onEnter,
|
127 | afterEnter: this.afterEnter,
|
128 | beforeLeave: this.beforeLeave,
|
129 | onLeave: this.onLeave,
|
130 | afterLeave: this.afterLeave
|
131 | }));
|
132 | };
|
133 |
|
134 | return Expand;
|
135 | }(Component), _class.propTypes = {
|
136 | animation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
137 | beforeEnter: PropTypes.func,
|
138 | onEnter: PropTypes.func,
|
139 | afterEnter: PropTypes.func,
|
140 | beforeLeave: PropTypes.func,
|
141 | onLeave: PropTypes.func,
|
142 | afterLeave: PropTypes.func
|
143 | }, _class.defaultProps = {
|
144 | beforeEnter: noop,
|
145 | onEnter: noop,
|
146 | afterEnter: noop,
|
147 | beforeLeave: noop,
|
148 | onLeave: noop,
|
149 | afterLeave: noop
|
150 | }, _temp);
|
151 | Expand.displayName = 'Expand';
|
152 | export { Expand as default }; |
\ | No newline at end of file |