` by default. You can change this
17 | * behavior by providing a `component` prop.
18 | */
19 | component: PropTypes.any,
20 |
21 | /**
22 | * A set of `
` components, that are toggled `in` and out as they
23 | * leave. the `` will inject specific transition props, so
24 | * remember to spread them throguh if you are wrapping the `` as
25 | * with our `` example.
26 | */
27 | children: PropTypes.node,
28 |
29 | /**
30 | * A convenience prop that enables or disabled appear animations
31 | * for all children. Note that specifiying this will override any defaults set
32 | * on individual children Transitions.
33 | */
34 |
35 | appear: PropTypes.object,
36 |
37 | /**
38 | * A convenience prop that enables or disabled enter animations
39 | * for all children. Note that specifiying this will override any defaults set
40 | * on individual children Transitions.
41 | */
42 | enter: PropTypes.object,
43 |
44 | /**
45 | * A convenience prop that enables or disabled exit animations
46 | * for all children. Note that specifiying this will override any defaults set
47 | * on individual children Transitions.
48 | */
49 | exit: PropTypes.object,
50 | }
51 |
52 | static defaultProps = {
53 | component: 'div',
54 | }
55 |
56 | constructor(props, context) {
57 | super(props, context)
58 |
59 | // Initial children should all be entering, dependent on appear
60 | this.state = {
61 | children: getChildMapping(props.children, child =>
62 | cloneElement(child, {
63 | in: true,
64 | appear: this.getProp(child, 'appear', props),
65 | enter: this.getProp(child, 'enter', props),
66 | exit: this.getProp(child, 'exit', props),
67 | onExited: () => {
68 | if (child.props.onExited) {
69 | child.props.onExited()
70 | }
71 | this.handleExited(child.key)
72 | },
73 | })
74 | ),
75 | }
76 | }
77 |
78 | getChildContext() {
79 | return {
80 | transitionGroup: { isMounting: !this.appeared },
81 | }
82 | }
83 |
84 | getProp(child, prop, props) {
85 | // use child config unless explictly set by the Group
86 | return props[prop] != null ? props[prop] : child.props[prop]
87 | }
88 |
89 | componentDidMount() {
90 | this.appeared = true
91 | }
92 |
93 | componentWillReceiveProps(nextProps) {
94 | const prevChildMapping = this.state.children
95 | const nextChildMapping = getChildMapping(nextProps.children)
96 | const children = mergeChildMappings(prevChildMapping, nextChildMapping)
97 |
98 | Object.keys(children).forEach(key => {
99 | let child = children[key]
100 |
101 | if (!isValidElement(child)) return
102 |
103 | const onExited = () => this.handleExited(key)
104 |
105 | const hasPrev = key in prevChildMapping
106 | const hasNext = key in nextChildMapping
107 |
108 | const prevChild = prevChildMapping[key]
109 | const isLeaving = isValidElement(prevChild) && !prevChild.props.in
110 |
111 | // item is new (entering)
112 | if (hasNext && (!hasPrev || isLeaving)) {
113 | children[key] = cloneElement(child, {
114 | onExited,
115 | in: true,
116 | exit: this.getProp(child, 'exit', nextProps),
117 | enter: this.getProp(child, 'enter', nextProps),
118 | })
119 | } else if (!hasNext && hasPrev && !isLeaving) {
120 | // item is old (exiting)
121 | children[key] = cloneElement(child, { in: false })
122 | } else if (hasNext && hasPrev && isValidElement(prevChild)) {
123 | // item hasn't changed transition states
124 | // copy over the last transition props;
125 | children[key] = cloneElement(child, {
126 | onExited,
127 | in: prevChild.props.in,
128 | exit: this.getProp(child, 'exit', nextProps),
129 | enter: this.getProp(child, 'enter', nextProps),
130 | })
131 | }
132 | })
133 | this.setState({ children })
134 | }
135 |
136 | handleExited = key => {
137 | let currentChildMapping = getChildMapping(this.props.children)
138 |
139 | if (key in currentChildMapping) return
140 |
141 | this.setState(state => {
142 | const children = { ...state.children }
143 | delete children[key]
144 | return { children }
145 | })
146 | }
147 |
148 | render() {
149 | const { component: Component, appear, enter, exit, ...props } = this.props
150 | const { children } = this.state
151 | return (
152 |
153 | {values(children)}
154 |
155 | )
156 | }
157 | }
158 |
159 | export default TransitionGroup
160 |
--------------------------------------------------------------------------------
/src/Toggle.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, createElement } from 'react'
2 | import PropTypes from 'prop-types'
3 | import Animated from 'animated/lib/targets/react-dom'
4 |
5 | const UNIT_TRANSFORMS = [
6 | 'translateX',
7 | 'translateY',
8 | 'translateZ',
9 | 'transformPerspective',
10 | ]
11 |
12 | const DEGREE_TRANFORMS = [
13 | 'rotate',
14 | 'rotateX',
15 | 'rotateY',
16 | 'rotateZ',
17 | 'skewX',
18 | 'skewY',
19 | 'scaleZ',
20 | ]
21 |
22 | const COLOR_PROPS = [
23 | 'backgroundColor',
24 | 'borderColor',
25 | 'borderBottomColor',
26 | 'borderLeftColor',
27 | 'borderRightColor',
28 | 'borderTopColor',
29 | 'color',
30 | 'fill',
31 | 'stroke',
32 | ]
33 |
34 | class Toggle extends Component {
35 | static propTypes = {
36 | component: PropTypes.any,
37 | config: PropTypes.object,
38 | type: PropTypes.string,
39 | isOn: PropTypes.bool,
40 | onStyles: PropTypes.object,
41 | offStyles: PropTypes.object,
42 | staticStyles: PropTypes.object,
43 | }
44 |
45 | static defaultProps = {
46 | component: 'div',
47 | config: {},
48 | type: 'spring',
49 | isOn: false,
50 | lazy: false,
51 | }
52 |
53 | state = {
54 | renderComponent: this.props.lazy ? this.props.isOn : true,
55 | }
56 |
57 | animatingKeys = {}
58 |
59 | animatedStyles = {}
60 |
61 | colorDrivers = {}
62 |
63 | height = null
64 |
65 | node = null
66 |
67 | transformDrivers = []
68 |
69 | width = null
70 |
71 | componentDidMount() {
72 | this.animatedStyles = this.createAnimatedStyles()
73 | this.animateStyles(this.props.isOn, true)
74 | }
75 |
76 | componentWillReceiveProps(nextProps) {
77 | if (this.props.lazy && this.props.isOn !== nextProps.isOn) {
78 | this.setState({ renderComponent: true })
79 | }
80 | }
81 |
82 | componentDidUpdate(lastProps) {
83 | if (lastProps.isOn !== this.props.isOn) {
84 | this.animateStyles(this.props.isOn)
85 | }
86 | }
87 |
88 | createAnimatedStyles() {
89 | return Object.keys(this.props.offStyles).reduce((acc, key) => {
90 | const animatedStyles = { ...acc }
91 | if (key === 'transform') {
92 | const offTransform = this.props.offStyles.transform
93 | const onTransform = this.props.onStyles.transform
94 | // create a driver for each transform
95 | this.transformDrivers = offTransform.map((prop, index) => {
96 | const key = Object.keys(prop)[0]
97 | return {
98 | key,
99 | driver: new Animated.Value(0),
100 | offValue: offTransform[index][key],
101 | onValue: onTransform[index][key],
102 | }
103 | })
104 | // interpolate each driver for the real transform value
105 | animatedStyles.transform = this.transformDrivers.map(
106 | ({ driver, key, offValue, onValue }) => {
107 | if (UNIT_TRANSFORMS.indexOf(key) > -1) {
108 | offValue += 'px'
109 | onValue += 'px'
110 | } else if (DEGREE_TRANFORMS.indexOf(key) > -1) {
111 | offValue += 'deg'
112 | onValue += 'deg'
113 | }
114 | return {
115 | [key]: driver.interpolate({
116 | inputRange: [0, 1],
117 | outputRange: [offValue, onValue],
118 | }),
119 | }
120 | }
121 | )
122 | } else if (COLOR_PROPS.indexOf(key) > -1) {
123 | const driver = new Animated.Value(0)
124 | const offColor = this.props.offStyles[key]
125 | const onColor = this.props.onStyles[key]
126 | this.colorDrivers[key] = driver
127 | animatedStyles[key] = driver.interpolate({
128 | inputRange: [0, 1],
129 | outputRange: [offColor, onColor],
130 | })
131 | } else {
132 | const offValue = this.props.offStyles[key]
133 | if (key === 'width' || key === 'height') {
134 | animatedStyles[key] = new Animated.Value(
135 | offValue === 'auto' ? this[key] : offValue
136 | )
137 | } else {
138 | animatedStyles[key] = new Animated.Value(offValue)
139 | }
140 | }
141 | return animatedStyles
142 | }, {})
143 | }
144 |
145 | animate = (key, instant) => {
146 | this.animatingKeys[key] = true
147 | return ({ driver, toValue }) => {
148 | if (instant) {
149 | driver.setValue(toValue)
150 | } else {
151 | Animated[this.props.type](driver, {
152 | ...this.props.config,
153 | toValue,
154 | }).start(({ finished }) => {
155 | if (finished) {
156 | delete this.animatingKeys[key]
157 | if (
158 | Object.keys(this.animatingKeys).length === 0 &&
159 | this.props.lazy &&
160 | !this.props.isOn
161 | ) {
162 | this.setState({ renderComponent: false })
163 | }
164 | }
165 | })
166 | }
167 | }
168 | }
169 |
170 | animateStyles(isOn, instant) {
171 | Object.keys(this.animatedStyles).forEach(key => {
172 | const runAnimation = this.animate(key, instant)
173 | if (key === 'transform') {
174 | this.transformDrivers.forEach(({ driver }) => {
175 | runAnimation({
176 | driver,
177 | toValue: isOn ? 1 : 0,
178 | })
179 | })
180 | } else if (COLOR_PROPS.indexOf(key) > -1) {
181 | runAnimation({
182 | driver: this.colorDrivers[key],
183 | toValue: isOn ? 1 : 0,
184 | })
185 | } else {
186 | const nextValue = isOn
187 | ? this.props.onStyles[key]
188 | : this.props.offStyles[key]
189 | let toValue = nextValue
190 | if (nextValue === 'auto' && (key === 'width' || key === 'height')) {
191 | toValue = this[key]
192 | }
193 | runAnimation({
194 | driver: this.animatedStyles[key],
195 | toValue,
196 | })
197 | }
198 | })
199 | }
200 |
201 | setRef = component => {
202 | if (component && component.refs.node) {
203 | this.node = component.refs.node
204 | if (this.node) {
205 | const width = this.node.scrollWidth
206 | const height = this.node.scrollHeight
207 | if (!this.width) {
208 | this.width = width
209 | }
210 | if (!this.height) {
211 | this.height = height
212 | }
213 | }
214 | }
215 | }
216 |
217 | render() {
218 | const {
219 | component,
220 | config,
221 | isOn,
222 | lazy,
223 | offStyles,
224 | onStyles,
225 | type,
226 | staticStyles,
227 | ...props
228 | } = this.props
229 | return (
230 | this.state.renderComponent &&
231 | createElement(Animated.createAnimatedComponent(component), {
232 | ref: this.setRef,
233 | style: { ...staticStyles, ...this.animatedStyles },
234 | ...props,
235 | })
236 | )
237 | }
238 | }
239 |
240 | export default Toggle
241 |
--------------------------------------------------------------------------------
/example/index.jsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | Component,
3 | PureComponent,
4 | Children,
5 | createElement,
6 | cloneElement,
7 | } from 'react'
8 | import PropTypes from 'prop-types'
9 | import ReactDOM, { findDOMNode } from 'react-dom'
10 | import { parseToRgb } from 'polished'
11 |
12 | import { Collapse, Fluid, Transition, TransitionGroup, Toggle } from '../src'
13 |
14 | // // enter, appear, leave
15 | // {child} }>
16 | // Cool
17 | // Cool
18 | // Cool
19 | //
20 |
21 | function toRgbaString(color) {
22 | const { red, green, blue, alpha = 1 } = parseToRgb(color)
23 | return `rgba(${red}, ${green}, ${blue}, ${alpha})`
24 | }
25 |
26 | function MyComponent({ innerRef, children }) {
27 | return (
28 |
36 | {children}
37 |
38 | )
39 | }
40 |
41 | class TodoList extends React.Component {
42 | constructor(props) {
43 | super(props)
44 | this.state = { items: ['hello', 'world', 'click', 'me'] }
45 | }
46 | handleAdd() {
47 | const newItems = this.state.items.concat([prompt('Enter some text')])
48 | this.setState({ items: newItems })
49 | }
50 | handleRemove(i) {
51 | let newItems = this.state.items.slice()
52 | newItems.splice(i, 1)
53 | this.setState({ items: newItems })
54 | }
55 | render() {
56 | return (
57 |
58 |
this.handleAdd()}>Add Item
59 |
60 | {this.state.items.map((item, i) => (
61 |
62 |
63 | {item}{' '}
64 | this.handleRemove(i)}>remove
65 |
66 |
67 | ))}
68 |
69 |
87 |
this.setState({ height: +e.target.value })}
90 | value={height}
91 | />
92 |
93 |
this.setState({ isAuto: !isAuto })}>
94 | Auto Height {isAuto ? 'Off' : 'On'}
95 |
96 |
97 |
99 | this.setState(
100 | { isOpen: !isOpen },
101 | () => this.input && this.input.focus()
102 | )}
103 | >
104 | Collapse Toggle
105 |
106 |
107 |
108 |
109 |
Collapse
110 |
114 |
115 | This is some really long text that might brek if it is long
116 | enough. This is some more really long text that might brek if it
117 | is long enough.
118 |
119 |
120 |
122 |
123 |
(
126 |
127 | This is a custom wrapped component using the render prop to pass
128 | the childRef down properly.
129 |
130 | )}
131 | />
132 |
133 |
147 | Animated 💫
148 |
149 |
150 |
163 |
169 |
170 |
187 | Color interpolation
188 |
189 |
190 |
211 | It works!!!!!!
212 |
213 |
214 |
218 | {isOpen && (
219 |
220 | It works!!!!!!
221 |
222 | )}
223 |
224 |
225 |
234 | 0}>
235 |
236 | {children}
237 |
238 | }
239 | /> */}
240 |
241 | {/*
245 | 0}>
246 |
247 | {children}
248 |
249 | }
250 | >
251 | Cool Beans
252 | What
253 | */}
254 |
213 | {children}
214 |
215 | )
216 | }
217 | }
218 |
219 | Transition.propTypes = {
220 | /**
221 | * Generally a React element to animate, all unknown props on Transition are
222 | * transfered to the **single** child element.
223 | *
224 | * For advanced uses, a `function` child can be used instead of a React element.
225 | * This function is called with the current transition status
226 | * ('entering', 'entered', 'exiting', 'exited', 'unmounted'), which can used
227 | * to apply context specific props to a component.
228 | *
229 | * ```jsx
230 | *
231 | * {(status) => (
232 | *
235 | * ```
236 | */
237 | // children: PropTypes.oneOfType([
238 | // PropTypes.func.isRequired,
239 | // PropTypes.element.isRequired,
240 | // ]).isRequired,
241 |
242 | /**
243 | * Show the component; triggers the enter or exit states
244 | */
245 | in: PropTypes.bool,
246 |
247 | /**
248 | * Unmount the component (remove it from the DOM) when it is not shown
249 | */
250 | lazy: PropTypes.bool,
251 |
252 | /**
253 | * Styles applied when component appears in DOM
254 | */
255 | appear: PropTypes.object,
256 |
257 | /**
258 | * Styles applied on enter.
259 | */
260 | enter: PropTypes.object,
261 |
262 | /**
263 | * Styles applied on exit.
264 | */
265 | exit: PropTypes.object,
266 |
267 | /**
268 | * Callback fired before the "entering" status is applied.
269 | *
270 | * @type Function(node: HtmlElement, isAppearing: bool)
271 | */
272 | onEnter: PropTypes.func,
273 |
274 | /**
275 | * Callback fired after the "entering" status is applied.
276 | *
277 | * @type Function(node: HtmlElement, isAppearing: bool)
278 | */
279 | onEntering: PropTypes.func,
280 |
281 | /**
282 | * Callback fired after the "enter" status is applied.
283 | *
284 | * @type Function(node: HtmlElement, isAppearing: bool)
285 | */
286 | onEntered: PropTypes.func,
287 |
288 | /**
289 | * Callback fired before the "exiting" status is applied.
290 | *
291 | * @type Function(node: HtmlElement)
292 | */
293 | onExit: PropTypes.func,
294 |
295 | /**
296 | * Callback fired after the "exiting" status is applied.
297 | *
298 | * @type Function(node: HtmlElement)
299 | */
300 | onExiting: PropTypes.func,
301 |
302 | /**
303 | * Callback fired after the "exited" status is applied.
304 | *
305 | * @type Function(node: HtmlElement)
306 | */
307 | onExited: PropTypes.func,
308 | }
309 |
310 | // Name the function so it is clearer in the documentation
311 | function noop() {}
312 |
313 | Transition.defaultProps = {
314 | in: false,
315 |
316 | lazy: false,
317 |
318 | // onEnter: noop,
319 | // onEntering: noop,
320 | // onEntered: noop,
321 | //
322 | // onExit: noop,
323 | // onExiting: noop,
324 | // onExited: noop,
325 | }
326 |
327 | export default Transition
328 |
--------------------------------------------------------------------------------