-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Transition): add component (#1435)
* feat(Transition): add component * docs(Transition): update example * tests(Transition): improve coverage * docs(Transition): typo microseconds -> milliseconds * refactor(Transition): minimize and cleanup docs * docs(Transition): fix onStart description * docs(Transition): sort props * refactor(Transition): rename prop into -> visible * docs(Transition): clarify Transition vs Group * docs(ComponentExample): add description maxWidth * docs(Transition): clarify explorer differences * refactor(Transition): rename prop unmountOnExit -> unmountOnHide * fix(index): add missing transition typings * refactor(Transition): rename entire > directional * refactor(Transition): mountOnEnter -> mountOnShow * refactor(Transition): transitionAppear -> transitionOnMount
- Loading branch information
1 parent
c96363c
commit 049040a
Showing
27 changed files
with
1,495 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
docs/app/Examples/modules/Transition/Explorers/TransitionExampleGroupExplorer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
import React, { Component } from 'react' | ||
import { 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(name => ({ key: name, text: name, value: name })) | ||
|
||
export default class TransitionExampleSingleExplorer extends Component { | ||
state = { animation: transitions[0], duration: 500, visible: true } | ||
|
||
handleChange = (e, { name, value }) => this.setState({ [name]: value }) | ||
|
||
handleVisibility = () => this.setState({ visible: !this.state.visible }) | ||
|
||
render() { | ||
const { animation, duration, visible } = this.state | ||
|
||
return ( | ||
<Grid columns={2}> | ||
<Grid.Column as={Form}> | ||
<Form.Select | ||
label='Choose transition' | ||
name='animation' | ||
onChange={this.handleChange} | ||
options={options} | ||
value={animation} | ||
/> | ||
<Form.Input | ||
label={`Duration: ${duration}ms `} | ||
min={100} | ||
max={2000} | ||
name='duration' | ||
onChange={this.handleChange} | ||
step={100} | ||
type='range' | ||
value={duration} | ||
/> | ||
<Form.Button content={visible ? 'Unmount' : 'Mount'} onClick={this.handleVisibility} /> | ||
</Grid.Column> | ||
|
||
<Grid.Column> | ||
<Transition.Group animation={animation} duration={duration}> | ||
{visible && <Image centered size='small' src='/assets/images/leaves/4.png' />} | ||
</Transition.Group> | ||
</Grid.Column> | ||
</Grid> | ||
) | ||
} | ||
} |
49 changes: 49 additions & 0 deletions
49
docs/app/Examples/modules/Transition/Explorers/TransitionExampleTransitionExplorer.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
import React, { Component } from 'react' | ||
import { Form, Grid, Image, Transition } from 'semantic-ui-react' | ||
|
||
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 { | ||
state = { animation: transitions[0], duration: 500, visible: true } | ||
|
||
handleChange = (e, { name, value }) => this.setState({ [name]: value }) | ||
|
||
toggleVisibility = () => this.setState({ visible: !this.state.visible }) | ||
|
||
render() { | ||
const { animation, duration, visible } = this.state | ||
|
||
return ( | ||
<Grid columns={2}> | ||
<Grid.Column as={Form}> | ||
<Form.Select | ||
label='Choose transition' | ||
name='animation' | ||
onChange={this.handleChange} | ||
options={options} | ||
value={animation} | ||
/> | ||
<Form.Input | ||
label={`Duration: ${duration}ms `} | ||
min={100} | ||
max={2000} | ||
name='duration' | ||
onChange={this.handleChange} | ||
step={100} | ||
type='range' | ||
value={duration} | ||
/> | ||
<Form.Button content='Run' onClick={this.toggleVisibility} /> | ||
</Grid.Column> | ||
|
||
<Grid.Column> | ||
<Transition animation={animation} duration={duration} visible={visible}> | ||
<Image centered size='small' src='/assets/images/leaves/5.png' /> | ||
</Transition> | ||
</Grid.Column> | ||
</Grid> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import React from '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='Explorers'> | ||
<ComponentExample | ||
title='Directional Animations' | ||
description={[ | ||
'This explorer animates Transition Group children as they mount and unmount.', | ||
'Use it to try directional animations that show and hide the element.', | ||
].join(' ')} | ||
examplePath='modules/Transition/Explorers/TransitionExampleGroupExplorer' | ||
/> | ||
<ComponentExample | ||
title='Static Animations' | ||
description={[ | ||
'This explorer animates a single Transition child by toggling the visible prop.', | ||
'Use it to try unidirectional animations for elements that are always visible.', | ||
].join(' ')} | ||
examplePath='modules/Transition/Explorers/TransitionExampleTransitionExplorer' | ||
> | ||
<Message info> | ||
Trigger static animations just as you trigger directional animations, | ||
by toggling the <code>visible</code> prop. The value is not significant since | ||
static animations are unidirectional. | ||
</Message> | ||
</ComponentExample> | ||
</ExampleSection> | ||
) | ||
|
||
export default TransitionTypesExamples |
41 changes: 41 additions & 0 deletions
41
docs/app/Examples/modules/Transition/Types/TransitionExampleGroup.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
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'] | ||
|
||
export default class TransitionExampleGroup extends Component { | ||
state = { items: users.slice(0, 3) } | ||
|
||
handleAdd = () => this.setState({ items: users.slice(0, this.state.items.length + 1) }) | ||
|
||
handleRemove = () => this.setState({ items: this.state.items.slice(0, -1) }) | ||
|
||
render() { | ||
const { items } = this.state | ||
|
||
return ( | ||
<div> | ||
<Button.Group> | ||
<Button disabled={items.length === 0} icon='minus' onClick={this.handleRemove} /> | ||
<Button disabled={items.length === users.length} icon='plus' onClick={this.handleAdd} /> | ||
</Button.Group> | ||
|
||
<Transition.Group | ||
as={List} | ||
duration={200} | ||
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> | ||
</div> | ||
) | ||
} | ||
} |
22 changes: 22 additions & 0 deletions
22
docs/app/Examples/modules/Transition/Types/TransitionExampleTransition.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import React, { Component } from 'react' | ||
import { Button, Divider, Image, Transition } from 'semantic-ui-react' | ||
|
||
export default class TransitionExampleTransition extends Component { | ||
state = { visible: true } | ||
|
||
toggleVisibility = () => this.setState({ visible: !this.state.visible }) | ||
|
||
render() { | ||
const { visible } = this.state | ||
|
||
return ( | ||
<div> | ||
<Button content={visible ? 'Hide' : 'Show'} onClick={this.toggleVisibility} /> | ||
<Divider hidden /> | ||
<Transition visible={visible} animation='scale' duration={500}> | ||
<Image size='small' src='/assets/images/leaves/1.png' /> | ||
</Transition> | ||
</div> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import React from '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'> | ||
<ComponentExample | ||
title='Transition' | ||
description='A Transition animates a single child by toggling the the visible prop.' | ||
examplePath='modules/Transition/Types/TransitionExampleTransition' | ||
> | ||
<Message warning> | ||
<p>Do not unmount a Transition child or else it cannot be animated.</p> | ||
<Message.List> | ||
<Message.Item> | ||
Use the <code>unmountOnHide</code> prop to unmount the child after the animation exits. | ||
</Message.Item> | ||
<Message.Item> | ||
Use a <code>Transition.Group</code> to animate children as they mount and unmount. | ||
</Message.Item> | ||
</Message.List> | ||
</Message> | ||
</ComponentExample> | ||
<ComponentExample | ||
title='Transition Group' | ||
description='A Transition Group animates children as they mount and unmount.' | ||
examplePath='modules/Transition/Types/TransitionExampleGroup' | ||
/> | ||
</ExampleSection> | ||
) | ||
|
||
export default TransitionTypesExamples |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.