1 | 'use strict';
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 |
|
7 | var _extends2 = require('babel-runtime/helpers/extends');
|
8 |
|
9 | var _extends3 = _interopRequireDefault(_extends2);
|
10 |
|
11 | var _react = require('react');
|
12 |
|
13 | var _react2 = _interopRequireDefault(_react);
|
14 |
|
15 | var _Transition = require('react-transition-group/Transition');
|
16 |
|
17 | var _Transition2 = _interopRequireDefault(_Transition);
|
18 |
|
19 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
20 |
|
21 | var RTGTransition = function RTGTransition(_ref) {
|
22 | var _ref$duration = _ref.duration,
|
23 | duration = _ref$duration === undefined ? 300 : _ref$duration,
|
24 | _ref$transitionType = _ref.transitionType,
|
25 | transitionType = _ref$transitionType === undefined ? 'fade' : _ref$transitionType,
|
26 | inProp = _ref.in,
|
27 | children = _ref.children,
|
28 | transitionProps = _ref.transitionProps,
|
29 | _ref$maxHeight = _ref.maxHeight,
|
30 | maxHeight = _ref$maxHeight === undefined ? '200vh' : _ref$maxHeight;
|
31 |
|
32 | var baseStyle = {
|
33 | transition: 'all ' + duration + 'ms ease-out'
|
34 | };
|
35 | var transitionStyles = {
|
36 | entering: {
|
37 | shared: {
|
38 | cursor: 'pointer'
|
39 | },
|
40 | fade: {
|
41 | opacity: '0.01'
|
42 | },
|
43 | dropdown: {
|
44 | transform: 'scale(1, 0.9) translateY(-100%)',
|
45 | zIndex: '-1'
|
46 | },
|
47 | height: {
|
48 | maxHeight: '0'
|
49 | }
|
50 | },
|
51 | entered: {
|
52 | height: {
|
53 | maxHeight: maxHeight
|
54 | },
|
55 | fade: {
|
56 | opacity: '1'
|
57 | },
|
58 | dropdown: {
|
59 | transform: 'scale(1) translateY(0%)'
|
60 | }
|
61 | },
|
62 | exiting: {
|
63 | fade: {
|
64 | opacity: '0.01'
|
65 | },
|
66 | dropdown: {
|
67 | transform: 'scale(1, 0.9) translateY(-100%)'
|
68 | },
|
69 | height: {
|
70 | maxHeight: '0'
|
71 | }
|
72 | },
|
73 | exited: {
|
74 | fade: {
|
75 | opacity: '0'
|
76 | },
|
77 | dropdown: {
|
78 | transform: 'scale(1, 0.9) translateY(-100%)'
|
79 | },
|
80 | height: {
|
81 | maxHeight: '0'
|
82 | }
|
83 | }
|
84 | };
|
85 | return _react2.default.createElement(
|
86 | _Transition2.default,
|
87 | (0, _extends3.default)({
|
88 | in: inProp,
|
89 | timeout: { enter: 0, exit: duration },
|
90 | mountOnEnter: true,
|
91 | unmountOnExit: true
|
92 | }, transitionProps),
|
93 | function (state) {
|
94 | var getStatefulStyles = function getStatefulStyles() {
|
95 | if (transitionStyles[state]) {
|
96 | if (Array.isArray(transitionType)) {
|
97 | var transitions = {};
|
98 | transitionType.forEach(function (t) {
|
99 | transitions = (0, _extends3.default)({}, transitions, transitionStyles[state][t]);
|
100 | });
|
101 |
|
102 | return (0, _extends3.default)({}, transitionStyles[state].shared, transitions);
|
103 | } else {
|
104 | return (0, _extends3.default)({}, transitionStyles[state].shared, transitionStyles[state][transitionType]);
|
105 | }
|
106 | }
|
107 | };
|
108 | return children({
|
109 | style: (0, _extends3.default)({}, baseStyle, getStatefulStyles())
|
110 | });
|
111 | }
|
112 | );
|
113 | };
|
114 | RTGTransition.defaultProps = {};
|
115 |
|
116 | exports.default = RTGTransition; |
\ | No newline at end of file |