feat(Transition): make duration prop more advanced (#1967)

* feat(Transition): make `duration` prop more advanced

* feat(Transition): support string duration propType

docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js

@@ -5,7 +5,7 @@ const transitions = ['jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce']
 
 const options = transitions.map(name => ({ key: name, text: name, value: name }))
 
-export default class TransitionExampleStaticExplorer extends Component {
+export default class TransitionExampleTransitionExplorer extends Component {
   state = { animation: transitions[0], duration: 500, visible: true }
 
   handleChange = (e, { name, value }) => this.setState({ [name]: value })

docs/app/Examples/modules/Transition/Explorers/index.js

@@ -1,11 +1,10 @@
 import React from 'react'
+import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-import { Message } from 'semantic-ui-react'
-
-const TransitionTypesExamples = () => (
+const TransitionExplorersExamples = () => (
   <ExampleSection title='Explorers'>
     <ComponentExample
       title='Directional Animations'
@@ -32,4 +31,4 @@ const TransitionTypesExamples = () => (
   </ExampleSection>
 )
 
-export default TransitionTypesExamples
+export default TransitionExplorersExamples

docs/app/Examples/modules/Transition/Types/index.js

@@ -1,8 +1,8 @@
 import React from 'react'
+import { Message } from 'semantic-ui-react'
 
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
-import { Message } from 'semantic-ui-react'
 
 const TransitionTypesExamples = () => (
   <ExampleSection title='Types'>

docs/app/Examples/modules/Transition/Usage/TransitionExampleDuration.js

@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import { Form, Grid, Image, Transition } from 'semantic-ui-react'
+
+export default class TransitionExampleDuration extends Component {
+  state = { hide: 500, show: 500, visible: true }
+
+  handleChange = (e, { name, value }) => this.setState({ [name]: value })
+
+  toggleVisibility = () => this.setState({ visible: !this.state.visible })
+
+  render() {
+    const { hide, show, visible } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form}>
+          <Form.Input
+            label={`Hide duration: ${hide}ms `}
+            min={100}
+            max={5000}
+            name='hide'
+            onChange={this.handleChange}
+            step={100}
+            type='range'
+            value={hide}
+          />
+          <Form.Input
+            label={`Show duration: ${show}ms `}
+            min={100}
+            max={5000}
+            name='show'
+            onChange={this.handleChange}
+            step={100}
+            type='range'
+            value={show}
+          />
+          <Form.Button content='Run' onClick={this.toggleVisibility} />
+        </Grid.Column>
+
+        <Grid.Column>
+          <Transition duration={{ hide, show }} visible={visible}>
+            <Image centered size='small' src='/assets/images/leaves/3.png' />
+          </Transition>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

docs/app/Examples/modules/Transition/Usage/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const TransitionUsageExamples = () => (
+  <ExampleSection title='Usage'>
+    <ComponentExample
+      title='Duration'
+      description={(
+        <span>
+          Duration of the CSS transition animation can be defined separately for <code>hide</code> and <code>show</code>
+          animations.
+        </span>
+      )}
+      examplePath='modules/Transition/Usage/TransitionExampleDuration'
+    />
+  </ExampleSection>
+)
+
+export default TransitionUsageExamples

docs/app/Examples/modules/Transition/index.js

@@ -2,11 +2,13 @@ import React from 'react'
 
 import Explorers from './Explorers'
 import Types from './Types'
+import Usage from './Usage'
 
 const TransitionExamples = () => (
   <div>
     <Types />
     <Explorers />
+    <Usage />
   </div>
 )
 

index.d.ts

@@ -165,7 +165,12 @@ export { default as Sticky, StickyProps } from './dist/commonjs/modules/Sticky';
 export { default as Tab, TabProps } from './dist/commonjs/modules/Tab';
 export { default as TabPane, TabPaneProps } from './dist/commonjs/modules/Tab/TabPane';
 
-export { default as Transition, TransitionProps, TRANSITION_STATUSES } from './dist/commonjs/modules/Transition';
+export {
+  default as Transition,
+  TransitionProps,
+  TransitionPropDuration,
+  TRANSITION_STATUSES
+} from './dist/commonjs/modules/Transition';
 export { default as TransitionGroup, TransitionGroupProps } from './dist/commonjs/modules/Transition/TransitionGroup';
 
 // Views

src/lib/index.js

@@ -38,4 +38,5 @@ export * as SUI from './SUI'
 
 export { default as keyboardKey } from './keyboardKey'
 export { numberToWordMap, numberToWord } from './numberToWord'
+export normalizeTransitionDuration from './normalizeTransitionDuration'
 export { default as objectDiff } from './objectDiff'

src/lib/normalizeTransitionDuration.js

@@ -0,0 +1,9 @@
+/**
+ * Normalizes the duration of a transition.
+ * @param {number|object} duration The value to normalize.
+ * @param {'hide'|'show'} type The type of transition.
+ * @returns {number}
+ */
+export default (duration, type) => (
+  (typeof duration === 'number' || typeof duration === 'string') ? duration : duration[type]
+)

src/modules/Transition/Transition.d.ts

@@ -15,7 +15,7 @@ export interface TransitionProps {
   children?: React.ReactNode;
 
   /** Duration of the CSS transition animation in milliseconds. */
-  duration?: number;
+  duration?: number | string | TransitionPropDuration;
 
   /** Show the component; triggers the enter or exit animation. */
   visible?: boolean;
@@ -69,6 +69,11 @@ export interface TransitionEventData extends TransitionProps {
   status: TRANSITION_STATUSES;
 }
 
+export interface TransitionPropDuration {
+  hide: number;
+  show: number;
+}
+
 interface TransitionComponent extends React.ComponentClass<TransitionProps> {
   Group: typeof TransitionGroup;
 

src/modules/Transition/Transition.js

@@ -6,13 +6,19 @@ import { cloneElement, Component } from 'react'
 import {
   makeDebugger,
   META,
+  normalizeTransitionDuration,
   SUI,
   useKeyOnly,
 } from '../../lib'
 import TransitionGroup from './TransitionGroup'
 
 const debug = makeDebugger('transition')
 
+const TRANSITION_TYPE = {
+  ENTERING: 'show',
+  EXITING: 'hide',
+}
+
 /**
  * A transition is an animation usually used to move content in or out of view.
  */
@@ -25,7 +31,14 @@ export default class Transition extends Component {
     children: PropTypes.element.isRequired,
 
     /** Duration of the CSS transition animation in milliseconds. */
-    duration: PropTypes.number,
+    duration: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        hide: PropTypes.number,
+        show: PropTypes.number,
+      }),
+      PropTypes.string,
+    ]),
 
     /** Show the component; triggers the enter or exit animation. */
     visible: PropTypes.bool,
@@ -145,7 +158,7 @@ export default class Transition extends Component {
     this.nextStatus = null
     this.setState({ status, animating: true }, () => {
       _.invoke(this.props, 'onStart', null, { ...this.props, status })
-      setTimeout(this.handleComplete, duration)
+      setTimeout(this.handleComplete, normalizeTransitionDuration(duration, 'show'))
     })
   }
 
@@ -262,9 +275,13 @@ export default class Transition extends Component {
 
   computeStyle = () => {
     const { children, duration } = this.props
+    const { status } = this.state
+
     const childStyle = _.get(children, 'props.style')
+    const type = TRANSITION_TYPE[status]
+    const animationDuration = type && `${normalizeTransitionDuration(duration, type)}ms`
 
-    return { ...childStyle, animationDuration: `${duration}ms` }
+    return { ...childStyle, animationDuration }
   }
 
   // ----------------------------------------

src/modules/Transition/TransitionGroup.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
+
 import { SemanticTRANSITIONS } from '../../';
+import { TransitionPropDuration } from './Transition';
 
 export interface TransitionGroupProps {
   [key: string]: any;
@@ -14,7 +16,7 @@ export interface TransitionGroupProps {
   children?: React.ReactNode;
 
   /** Duration of the CSS transition animation in milliseconds. */
-  duration?: number;
+  duration?: number | string | TransitionPropDuration;
 }
 
 interface TransitionGroupComponent extends React.ComponentClass<TransitionGroupProps> {

src/modules/Transition/TransitionGroup.js

@@ -31,7 +31,14 @@ export default class TransitionGroup extends React.Component {
     children: PropTypes.node,
 
     /** Duration of the CSS transition animation in milliseconds. */
-    duration: PropTypes.number,
+    duration: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.shape({
+        hide: PropTypes.number.isRequired,
+        show: PropTypes.number.isRequired,
+      }),
+      PropTypes.string,
+    ]),
   }
 
   static defaultProps = {

src/modules/Transition/index.d.ts

@@ -1 +1 @@
-export { default, TransitionProps, TRANSITION_STATUSES } from './Transition';
+export { default, TransitionProps, TransitionPropDuration, TRANSITION_STATUSES } from './Transition';

test/specs/modules/Transition/Transition-test.js

@@ -160,20 +160,58 @@ describe('Transition', () => {
   })
 
   describe('duration', () => {
-    it('applies default value to style', () => {
-      wrapperShallow(
-        <Transition>
-          <p />
-        </Transition>,
-      ).should.have.style('animation-duration', '500ms')
+    it('does not apply to style when ENTERED', () => {
+      wrapperShallow(<Transition transitionOnMount={false}><p /></Transition>)
+        .should.not.have.style('animation-duration')
     })
 
-    it('applies value to style', () => {
-      wrapperShallow(
-        <Transition duration={1000}>
-          <p />
-        </Transition>,
-      ).should.have.style('animation-duration', '1000ms')
+    it('applies default value to style when ENTERING', () => {
+      wrapperShallow(<Transition><p /></Transition>)
+
+      wrapper.setState({ status: Transition.ENTERING })
+      wrapper.should.have.style('animation-duration', '500ms')
+    })
+
+    it('applies numeric value to style when ENTERING', () => {
+      wrapperShallow(<Transition duration={1000}><p /></Transition>)
+
+      wrapper.setState({ status: Transition.ENTERING })
+      wrapper.should.have.style('animation-duration', '1000ms')
+    })
+
+    it('applies object value to style when ENTERING', () => {
+      wrapperShallow(<Transition duration={{ hide: 1000, show: 2000 }}><p /></Transition>)
+
+      wrapper.setState({ status: Transition.ENTERING })
+      wrapper.should.have.style('animation-duration', '2000ms')
+    })
+
+    it('does not apply to style when EXITED', () => {
+      wrapperShallow(<Transition><p /></Transition>)
+
+      wrapper.setState({ status: Transition.EXITED })
+      wrapper.should.not.have.style('animation-duration')
+    })
+
+    it('applies default value to style when EXITING', () => {
+      wrapperShallow(<Transition><p /></Transition>)
+
+      wrapper.setState({ animating: true, status: Transition.EXITING })
+      wrapper.should.have.style('animation-duration')
+    })
+
+    it('applies numeric value to style when EXITING', () => {
+      wrapperShallow(<Transition duration={1000}><p /></Transition>)
+      wrapper.setState({ status: Transition.ENTERING })
+
+      wrapper.should.have.style('animation-duration', '1000ms')
+    })
+
+    it('applies object value to style when EXITING', () => {
+      wrapperShallow(<Transition duration={{ hide: 1000, show: 2000 }}><p /></Transition>)
+
+      wrapper.setState({ status: Transition.EXITING })
+      wrapper.should.have.style('animation-duration', '1000ms')
     })
   })