|
1 | | -import React from 'react'; |
2 | | -import TransitionEvents from 'react/lib/ReactTransitionEvents'; |
| 1 | +import assign from './utils/Object.assign'; |
| 2 | +import deprecationWarning from './utils/deprecationWarning'; |
| 3 | +import CollapsibleMixin from './CollapsibleMixin'; |
3 | 4 |
|
4 | | -const CollapsableMixin = { |
5 | | - |
6 | | - propTypes: { |
7 | | - defaultExpanded: React.PropTypes.bool, |
8 | | - expanded: React.PropTypes.bool |
9 | | - }, |
10 | | - |
11 | | - getInitialState(){ |
12 | | - let defaultExpanded = this.props.defaultExpanded != null ? |
13 | | - this.props.defaultExpanded : |
14 | | - this.props.expanded != null ? |
15 | | - this.props.expanded : |
16 | | - false; |
17 | | - |
18 | | - return { |
19 | | - expanded: defaultExpanded, |
20 | | - collapsing: false |
21 | | - }; |
22 | | - }, |
23 | | - |
24 | | - componentWillUpdate(nextProps, nextState){ |
25 | | - let willExpanded = nextProps.expanded != null ? nextProps.expanded : nextState.expanded; |
26 | | - if (willExpanded === this.isExpanded()) { |
27 | | - return; |
28 | | - } |
29 | | - |
30 | | - // if the expanded state is being toggled, ensure node has a dimension value |
31 | | - // this is needed for the animation to work and needs to be set before |
32 | | - // the collapsing class is applied (after collapsing is applied the in class |
33 | | - // is removed and the node's dimension will be wrong) |
34 | | - |
35 | | - let node = this.getCollapsableDOMNode(); |
36 | | - let dimension = this.dimension(); |
37 | | - let value = '0'; |
38 | | - |
39 | | - if(!willExpanded){ |
40 | | - value = this.getCollapsableDimensionValue(); |
41 | | - } |
42 | | - |
43 | | - node.style[dimension] = value + 'px'; |
44 | | - |
45 | | - this._afterWillUpdate(); |
46 | | - }, |
47 | | - |
48 | | - componentDidUpdate(prevProps, prevState){ |
49 | | - // check if expanded is being toggled; if so, set collapsing |
50 | | - this._checkToggleCollapsing(prevProps, prevState); |
51 | | - |
52 | | - // check if collapsing was turned on; if so, start animation |
53 | | - this._checkStartAnimation(); |
54 | | - }, |
55 | | - |
56 | | - // helps enable test stubs |
57 | | - _afterWillUpdate(){ |
58 | | - }, |
59 | | - |
60 | | - _checkStartAnimation(){ |
61 | | - if(!this.state.collapsing) { |
62 | | - return; |
63 | | - } |
64 | | - |
65 | | - let node = this.getCollapsableDOMNode(); |
66 | | - let dimension = this.dimension(); |
67 | | - let value = this.getCollapsableDimensionValue(); |
68 | | - |
69 | | - // setting the dimension here starts the transition animation |
70 | | - let result; |
71 | | - if(this.isExpanded()) { |
72 | | - result = value + 'px'; |
73 | | - } else { |
74 | | - result = '0px'; |
75 | | - } |
76 | | - node.style[dimension] = result; |
77 | | - }, |
78 | | - |
79 | | - _checkToggleCollapsing(prevProps, prevState){ |
80 | | - let wasExpanded = prevProps.expanded != null ? prevProps.expanded : prevState.expanded; |
81 | | - let isExpanded = this.isExpanded(); |
82 | | - if(wasExpanded !== isExpanded){ |
83 | | - if(wasExpanded) { |
84 | | - this._handleCollapse(); |
85 | | - } else { |
86 | | - this._handleExpand(); |
87 | | - } |
88 | | - } |
89 | | - }, |
90 | | - |
91 | | - _handleExpand(){ |
92 | | - let node = this.getCollapsableDOMNode(); |
93 | | - let dimension = this.dimension(); |
94 | | - |
95 | | - let complete = () => { |
96 | | - this._removeEndEventListener(node, complete); |
97 | | - // remove dimension value - this ensures the collapsable item can grow |
98 | | - // in dimension after initial display (such as an image loading) |
99 | | - node.style[dimension] = ''; |
100 | | - this.setState({ |
101 | | - collapsing:false |
102 | | - }); |
103 | | - }; |
104 | | - |
105 | | - this._addEndEventListener(node, complete); |
106 | | - |
107 | | - this.setState({ |
108 | | - collapsing: true |
109 | | - }); |
110 | | - }, |
111 | | - |
112 | | - _handleCollapse(){ |
113 | | - let node = this.getCollapsableDOMNode(); |
114 | | - |
115 | | - let complete = () => { |
116 | | - this._removeEndEventListener(node, complete); |
117 | | - this.setState({ |
118 | | - collapsing: false |
119 | | - }); |
120 | | - }; |
121 | | - |
122 | | - this._addEndEventListener(node, complete); |
123 | | - |
124 | | - this.setState({ |
125 | | - collapsing: true |
126 | | - }); |
127 | | - }, |
128 | | - |
129 | | - // helps enable test stubs |
130 | | - _addEndEventListener(node, complete){ |
131 | | - TransitionEvents.addEndEventListener(node, complete); |
132 | | - }, |
133 | | - |
134 | | - // helps enable test stubs |
135 | | - _removeEndEventListener(node, complete){ |
136 | | - TransitionEvents.removeEndEventListener(node, complete); |
137 | | - }, |
138 | | - |
139 | | - dimension(){ |
140 | | - return (typeof this.getCollapsableDimension === 'function') ? |
141 | | - this.getCollapsableDimension() : |
142 | | - 'height'; |
143 | | - }, |
144 | | - |
145 | | - isExpanded(){ |
146 | | - return this.props.expanded != null ? this.props.expanded : this.state.expanded; |
147 | | - }, |
| 5 | +let link = 'https://github.com/react-bootstrap/react-bootstrap/issues/425#issuecomment-97110963'; |
148 | 6 |
|
| 7 | +const CollapsableMixin = assign({}, CollapsibleMixin, { |
149 | 8 | getCollapsableClassSet(className) { |
150 | | - let classes = {}; |
151 | | - |
152 | | - if (typeof className === 'string') { |
153 | | - className.split(' ').forEach(subClasses => { |
154 | | - if (subClasses) { |
155 | | - classes[subClasses] = true; |
156 | | - } |
157 | | - }); |
158 | | - } |
159 | | - |
160 | | - classes.collapsing = this.state.collapsing; |
161 | | - classes.collapse = !this.state.collapsing; |
162 | | - classes.in = this.isExpanded() && !this.state.collapsing; |
163 | | - |
164 | | - return classes; |
| 9 | + deprecationWarning( |
| 10 | + 'CollapsableMixin.getCollapsableClassSet()', |
| 11 | + 'CollapsibleMixin.getCollapsibleClassSet()', |
| 12 | + link |
| 13 | + ); |
| 14 | + return CollapsibleMixin.getCollapsibleClassSet.call(this, className); |
| 15 | + }, |
| 16 | + |
| 17 | + getCollapsibleDOMNode() { |
| 18 | + deprecationWarning( |
| 19 | + 'CollapsableMixin.getCollapsableDOMNode()', |
| 20 | + 'CollapsibleMixin.getCollapsibleDOMNode()', |
| 21 | + link |
| 22 | + ); |
| 23 | + return this.getCollapsableDOMNode(); |
| 24 | + }, |
| 25 | + |
| 26 | + getCollapsibleDimensionValue() { |
| 27 | + deprecationWarning( |
| 28 | + 'CollapsableMixin.getCollapsableDimensionValue()', |
| 29 | + 'CollapsibleMixin.getCollapsibleDimensionValue()', |
| 30 | + link |
| 31 | + ); |
| 32 | + return this.getCollapsableDimensionValue(); |
165 | 33 | } |
166 | | -}; |
| 34 | +}); |
| 35 | + |
| 36 | +deprecationWarning('CollapsableMixin', 'CollapsibleMixin', link); |
167 | 37 |
|
168 | 38 | export default CollapsableMixin; |
0 commit comments