feat(Transition): add component

README.md

@@ -130,7 +130,7 @@ Once you change the flag, you need to refresh your browser to see the changes in
 | ✓ Rail          |                 |                 | ✓ Sidebar       |                    |
 | ✓ Reveal        |                 |                 |   Sticky        |                    |
 | ✓ Segment       |                 |                 |   Tab           |                    |
-| ✓ Step          |                 |                 |   Transition    |                    |
+| ✓ Step          |                 |                 | ✓ Transition    |                    |
 
 ## Our Principles
 

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

@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+import { Button, Form, Grid, Image, Transition } from 'semantic-ui-react'
+
+const transitions = [
+  'scale',
+  'fade', 'fade up', 'fade down', 'fade left', 'fade right',
+  'horizontal flip', 'vertical flip',
+  'drop',
+  'fly left', 'fly right', 'fly up', 'fly down',
+  'swing left', 'swing right', 'swing up', 'swing down',
+  'browse', 'browse right',
+  'slide down', 'slide up', 'slide right',
+]
+const options = transitions.map(transition => ({ key: transition, text: transition, value: transition }))
+
+export default class TransitionExampleSingleExplorer extends Component {
+  state = {
+    duration: 500,
+    animation: 'scale',
+    visible: true,
+  }
+
+  handleDuration = (e, { value: duration }) => this.setState({ duration })
+
+  handleTransition = (e, { value: animation }) => this.setState({ animation })
+
+  handleVisibility = () => {
+    const { visible } = this.state
+    this.setState({ visible: !visible })
+  }
+
+  render() {
+    const { animation, duration, visible } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form}>
+          <Form.Select
+            label='Choose transition'
+            onChange={this.handleTransition}
+            options={options}
+            value={animation}
+          />
+          <Form.Input
+            label={`Duration: ${duration}ms `}
+            min={500}
+            max={5000}
+            onChange={this.handleDuration}
+            step={500}
+            type='range'
+            value={duration}
+          />
+          <Form.Button
+            content={visible ? 'Hide' : 'Show'}
+            onClick={this.handleVisibility}
+            type='button'
+          />
+        </Grid.Column>
+
+        <Grid.Column>
+          <Transition
+            animation={animation}
+            duration={duration}
+            into={visible}
+          >
+            <Image size='medium' src='/assets/images/leaves/4.png' />
+          </Transition>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

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

@@ -0,0 +1,65 @@
+import React, { Component } from 'react'
+import { Button, Form, Grid, Image, Transition } from 'semantic-ui-react'
+
+const transitions = [
+  'jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce',
+]
+const options = transitions.map(transition => ({ key: transition, text: transition, value: transition }))
+
+export default class TransitionExampleStaticExplorer extends Component {
+  state = {
+    duration: 500,
+    animation: 'jiggle',
+    visible: true,
+  }
+
+  handleDuration = (e, { value: duration }) => this.setState({ duration })
+
+  handleTransition = (e, { value: animation }) => this.setState({ animation })
+
+  handleVisibility = () => {
+    const { visible } = this.state
+    this.setState({ visible: !visible })
+  }
+
+  render() {
+    const { animation, duration, visible } = this.state
+
+    return (
+      <Grid columns={2}>
+        <Grid.Column as={Form}>
+          <Form.Select
+            label='Choose transition'
+            onChange={this.handleTransition}
+            options={options}
+            value={animation}
+          />
+          <Form.Input
+            label={`Duration: ${duration}ms `}
+            min={500}
+            max={5000}
+            onChange={this.handleDuration}
+            step={500}
+            type='range'
+            value={duration}
+          />
+          <Form.Button
+            content='Run'
+            onClick={this.handleVisibility}
+            type='button'
+          />
+        </Grid.Column>
+
+        <Grid.Column>
+          <Transition
+            animation={animation}
+            duration={duration}
+            into={visible}
+          >
+            <Image size='medium' src='/assets/images/leaves/5.png' />
+          </Transition>
+        </Grid.Column>
+      </Grid>
+    )
+  }
+}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const TransitionTypesExamples = () => (
+  <ExampleSection title='Explorers'>
+    <ComponentExample
+      title='Single item'
+      description='You can apply different animations and duration with a transition explorer.'
+      examplePath='modules/Transition/Explorers/TransitionExampleSingleExplorer'
+    />
+    <ComponentExample
+      title='Static animations'
+      description={[
+        'You can apply different static animations and duration with a transition explorer.',
+        'There are no special API for static animations at now.',
+      ].join(' ')}
+      examplePath='modules/Transition/Explorers/TransitionExampleStaticExplorer'
+    />
+  </ExampleSection>
+)
+
+export default TransitionTypesExamples

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

@@ -0,0 +1,49 @@
+import _ from 'lodash'
+import React, { Component } from 'react'
+import { Button, Image, List, Transition } from 'semantic-ui-react'
+
+const users = [
+  'ade', 'chris', 'christian', 'daniel', 'elliot', 'helen', 'jenny', 'joe', 'justen', 'laura', 'matt', 'nan', 'nom',
+  'steve', 'stevie', 'tom', 'veronika', 'zoe',
+]
+
+export default class TransitionExampleGroup extends Component {
+  state = { items: users.slice(0, 5) }
+
+  handleAdd = () => {
+    const { items } = this.state
+    this.setState({ items: users.slice(0, items.length + 1) })
+  }
+
+  handleRemove = () => {
+    const { items } = this.state
+    this.setState({ items: items.slice(0, -1) })
+  }
+
+  render() {
+    const { items } = this.state
+
+    return (
+      <div>
+        <Transition.Group
+          as={List}
+          duration={1000}
+          divided size='huge'
+          verticalAlign='middle'
+        >
+          {items.map(item => (
+            <List.Item key={item}>
+              <Image avatar src={`/assets/images/avatar/small/${item}.jpg`} />
+              <List.Content header={_.startCase(item)} />
+            </List.Item>
+          ))}
+        </Transition.Group>
+
+        <Button.Group>
+          <Button icon='minus' onClick={this.handleRemove} />
+          <Button icon='plus' onClick={this.handleAdd} />
+        </Button.Group>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Button, Divider, Image, Transition } from 'semantic-ui-react'
+
+export default class TransitionExampleTransition extends Component {
+  state = { visible: true }
+
+  handleVisibility = () => {
+    const { visible } = this.state
+    this.setState({ visible: !visible })
+  }
+
+  render() {
+    const { visible } = this.state
+
+    return (
+      <div>
+        <Transition
+          animation='scale'
+          duration={1500}
+          into={visible}
+        >
+          <Image size='small' src='/assets/images/leaves/1.png' />
+        </Transition>
+        <Divider hidden />
+        <Button
+          content={visible ? 'Hide' : 'Show'}
+          onClick={this.handleVisibility}
+          type='button'
+        />
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Transition/Types/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 TransitionTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Transition'
+      description='A transition can be applied to single item.'
+      examplePath='modules/Transition/Types/TransitionExampleTransition'
+    />
+    <ComponentExample
+      title='Transition Group'
+      description='A transition can be applied to items group.'
+      examplePath='modules/Transition/Types/TransitionExampleGroup'
+    />
+  </ExampleSection>
+)
+
+export default TransitionTypesExamples

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

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import Explorers from './Explorers'
+import Types from './Types'
+
+const TransitionExamples = () => (
+  <div>
+    <Types />
+    <Explorers />
+  </div>
+)
+
+export default TransitionExamples

index.d.ts

@@ -156,6 +156,9 @@ export { default as Sidebar, SidebarProps } from './dist/commonjs/modules/Sideba
 export { default as SidebarPushable, SidebarPushableProps } from './dist/commonjs/modules/Sidebar/SidebarPushable';
 export { default as SidebarPusher, SidebarPusherProps } from './dist/commonjs/modules/Sidebar/SidebarPusher';
 
+export { default as Transition, TransitionProps, TRANSITION_STATUSES } from './dist/commonjs/modules/Transition';
+export { default as TransitionGroup, TransitionGroupProps } from './dist/commonjs/modules/Transition/TransitionGroup';
+
 // Views
 export { default as Advertisement, AdvertisementProps } from './dist/commonjs/views/Advertisement';
 

src/collections/Message/Message.d.ts

@@ -9,7 +9,7 @@ import { default as MessageList } from './MessageList';
 export interface MessageProps {
   [key: string]: any;
 
-	/** An element type to render as (string or function). */
+  /** An element type to render as (string or function). */
   as?: any;
 
   /** A message can be formatted to attach itself to other content. */

src/index.d.ts

@@ -14,6 +14,15 @@ export type SemanticCOLORS = 'red' | 'orange' | 'yellow' | 'olive' |'green' | 't
   'pink' | 'brown' | 'grey' | 'black';
 export type SemanticSIZES = 'mini' | 'tiny' | 'small' | 'medium' | 'large' | 'big' | 'huge' | 'massive';
 
+// ======================================================
+// Transitions
+// ======================================================
+
+type SemanticENTIRETRANSITIONS = 'scale' | 'fade' | 'fade up' | 'fade down' | 'fade left' | 'fade right';
+type SemanticSTATICTRANSITIONS = 'jiggle' | 'flash';
+
+export type SemanticTRANSITIONS = SemanticENTIRETRANSITIONS | SemanticSTATICTRANSITIONS;
+
 // ======================================================
 // Widths
 // ======================================================

src/index.js

@@ -141,6 +141,9 @@ export { default as Sidebar } from './modules/Sidebar'
 export { default as SidebarPushable } from './modules/Sidebar/SidebarPushable'
 export { default as SidebarPusher } from './modules/Sidebar/SidebarPusher'
 
+export { default as Transition } from './modules/Transition'
+export { default as TransitionGroup } from './modules/Transition/TransitionGroup'
+
 // Views
 export { default as Advertisement } from './views/Advertisement'
 

src/lib/SUI.js

@@ -29,6 +29,21 @@ export const WIDTHS = [
   ..._.values(numberToWordMap),
 ]
 
+export const ENTIRE_TRANSITIONS = [
+  'scale',
+  'fade', 'fade up', 'fade down', 'fade left', 'fade right',
+  'horizontal flip', 'vertical flip',
+  'drop',
+  'fly left', 'fly right', 'fly up', 'fly down',
+  'swing left', 'swing right', 'swing up', 'swing down',
+  'browse', 'browse right',
+  'slide down', 'slide up', 'slide right',
+]
+export const STATIC_TRANSITIONS = [
+  'jiggle', 'flash', 'shake', 'pulse', 'tada', 'bounce',
+]
+export const TRANSITIONS = [...ENTIRE_TRANSITIONS, ...STATIC_TRANSITIONS]
+
 // Generated from:
 // https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/components/icon.css
 export const WEB_CONTENT_ICONS = [