UNPKG

5.15 kBJavaScriptView Raw
1import _extends from 'babel-runtime/helpers/extends';
2import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
3import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
4import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
5import _inherits from 'babel-runtime/helpers/inherits';
6
7var _class, _temp;
8
9import React, { Component } from 'react';
10import PropTypes from 'prop-types';
11import { func, dom } from '../util';
12import Animate from './animate';
13
14var noop = function noop() {};
15var getStyle = dom.getStyle;
16var 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);
151Expand.displayName = 'Expand';
152export { Expand as default };
\No newline at end of file