1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 | exports.default = undefined;
|
5 |
|
6 | var _extends2 = require('babel-runtime/helpers/extends');
|
7 |
|
8 | var _extends3 = _interopRequireDefault(_extends2);
|
9 |
|
10 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
11 |
|
12 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
13 |
|
14 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
15 |
|
16 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
17 |
|
18 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
19 |
|
20 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
21 |
|
22 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
23 |
|
24 | var _inherits3 = _interopRequireDefault(_inherits2);
|
25 |
|
26 | var _class, _temp;
|
27 |
|
28 | var _react = require('react');
|
29 |
|
30 | var _react2 = _interopRequireDefault(_react);
|
31 |
|
32 | var _propTypes = require('prop-types');
|
33 |
|
34 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
35 |
|
36 | var _util = require('../util');
|
37 |
|
38 | var _animate = require('./animate');
|
39 |
|
40 | var _animate2 = _interopRequireDefault(_animate);
|
41 |
|
42 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
43 |
|
44 | var noop = function noop() {};
|
45 | var getStyle = _util.dom.getStyle;
|
46 | var Expand = (_temp = _class = function (_Component) {
|
47 | (0, _inherits3.default)(Expand, _Component);
|
48 |
|
49 | function Expand(props) {
|
50 | (0, _classCallCheck3.default)(this, Expand);
|
51 |
|
52 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));
|
53 |
|
54 | _util.func.bindCtx(_this, ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave']);
|
55 | return _this;
|
56 | }
|
57 |
|
58 | Expand.prototype.beforeEnter = function beforeEnter(node) {
|
59 | if (this.leaving) {
|
60 | this.afterLeave(node);
|
61 | }
|
62 |
|
63 | this.cacheCurrentStyle(node);
|
64 | this.cacheComputedStyle(node);
|
65 | this.setCurrentStyleToZero(node);
|
66 |
|
67 | this.props.beforeEnter(node);
|
68 | };
|
69 |
|
70 | Expand.prototype.onEnter = function onEnter(node) {
|
71 | this.setCurrentStyleToComputedStyle(node);
|
72 |
|
73 | this.props.onEnter(node);
|
74 | };
|
75 |
|
76 | Expand.prototype.afterEnter = function afterEnter(node) {
|
77 | this.restoreCurrentStyle(node);
|
78 |
|
79 | this.props.afterEnter(node);
|
80 | };
|
81 |
|
82 | Expand.prototype.beforeLeave = function beforeLeave(node) {
|
83 | this.leaving = true;
|
84 |
|
85 | this.cacheCurrentStyle(node);
|
86 | this.cacheComputedStyle(node);
|
87 | this.setCurrentStyleToComputedStyle(node);
|
88 |
|
89 | this.props.beforeLeave(node);
|
90 | };
|
91 |
|
92 | Expand.prototype.onLeave = function onLeave(node) {
|
93 | this.setCurrentStyleToZero(node);
|
94 |
|
95 | this.props.onLeave(node);
|
96 | };
|
97 |
|
98 | Expand.prototype.afterLeave = function afterLeave(node) {
|
99 | this.leaving = false;
|
100 |
|
101 | this.restoreCurrentStyle(node);
|
102 |
|
103 | this.props.afterLeave(node);
|
104 | };
|
105 |
|
106 | Expand.prototype.cacheCurrentStyle = function cacheCurrentStyle(node) {
|
107 | this.styleBorderTopWidth = node.style.borderTopWidth;
|
108 | this.stylePaddingTop = node.style.paddingTop;
|
109 | this.styleHeight = node.style.height;
|
110 | this.stylePaddingBottom = node.style.paddingBottom;
|
111 | this.styleBorderBottomWidth = node.style.borderBottomWidth;
|
112 | };
|
113 |
|
114 | Expand.prototype.cacheComputedStyle = function cacheComputedStyle(node) {
|
115 | this.borderTopWidth = getStyle(node, 'borderTopWidth');
|
116 | this.paddingTop = getStyle(node, 'paddingTop');
|
117 | this.height = node.offsetHeight;
|
118 | this.paddingBottom = getStyle(node, 'paddingBottom');
|
119 | this.borderBottomWidth = getStyle(node, 'borderBottomWidth');
|
120 | };
|
121 |
|
122 | Expand.prototype.setCurrentStyleToZero = function setCurrentStyleToZero(node) {
|
123 | node.style.borderTopWidth = '0px';
|
124 | node.style.paddingTop = '0px';
|
125 | node.style.height = '0px';
|
126 | node.style.paddingBottom = '0px';
|
127 | node.style.borderBottomWidth = '0px';
|
128 | };
|
129 |
|
130 | Expand.prototype.setCurrentStyleToComputedStyle = function setCurrentStyleToComputedStyle(node) {
|
131 | node.style.borderTopWidth = this.borderTopWidth + 'px';
|
132 | node.style.paddingTop = this.paddingTop + 'px';
|
133 | node.style.height = this.height + 'px';
|
134 | node.style.paddingBottom = this.paddingBottom + 'px';
|
135 | node.style.borderBottomWidth = this.borderBottomWidth + 'px';
|
136 | };
|
137 |
|
138 | Expand.prototype.restoreCurrentStyle = function restoreCurrentStyle(node) {
|
139 | node.style.borderTopWidth = this.styleBorderTopWidth;
|
140 | node.style.paddingTop = this.stylePaddingTop;
|
141 | node.style.height = this.styleHeight;
|
142 | node.style.paddingBottom = this.stylePaddingBottom;
|
143 | node.style.borderBottomWidth = this.styleBorderBottomWidth;
|
144 | };
|
145 |
|
146 | Expand.prototype.render = function render() {
|
147 | var _props = this.props,
|
148 | animation = _props.animation,
|
149 | others = (0, _objectWithoutProperties3.default)(_props, ['animation']);
|
150 |
|
151 | var newAnimation = animation || 'expand';
|
152 |
|
153 | return _react2.default.createElement(_animate2.default, (0, _extends3.default)({}, others, {
|
154 | animation: newAnimation,
|
155 | beforeEnter: this.beforeEnter,
|
156 | onEnter: this.onEnter,
|
157 | afterEnter: this.afterEnter,
|
158 | beforeLeave: this.beforeLeave,
|
159 | onLeave: this.onLeave,
|
160 | afterLeave: this.afterLeave
|
161 | }));
|
162 | };
|
163 |
|
164 | return Expand;
|
165 | }(_react.Component), _class.propTypes = {
|
166 | animation: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
|
167 | beforeEnter: _propTypes2.default.func,
|
168 | onEnter: _propTypes2.default.func,
|
169 | afterEnter: _propTypes2.default.func,
|
170 | beforeLeave: _propTypes2.default.func,
|
171 | onLeave: _propTypes2.default.func,
|
172 | afterLeave: _propTypes2.default.func
|
173 | }, _class.defaultProps = {
|
174 | beforeEnter: noop,
|
175 | onEnter: noop,
|
176 | afterEnter: noop,
|
177 | beforeLeave: noop,
|
178 | onLeave: noop,
|
179 | afterLeave: noop
|
180 | }, _temp);
|
181 | Expand.displayName = 'Expand';
|
182 | exports.default = Expand;
|
183 | module.exports = exports['default']; |
\ | No newline at end of file |