Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 13281af

Browse files
Basic Route Transition Added
1 parent 3855b34 commit 13281af

File tree

4 files changed

+58
-9
lines changed

4 files changed

+58
-9
lines changed

‎react-color-palettes/src/App.js‎

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import MoreShades from './Components/MoreShades';
66
import CreatePalette from './Components/CreatePalette';
77
import {generateColors} from './colorHelper';
88
import {Route, Switch} from 'react-router-dom';
9+
import {CSSTransition, TransitionGroup} from 'react-transition-group';
10+
import './App.css';
911

1012
class App extends Component {
1113
constructor(props){
@@ -44,14 +46,60 @@ class App extends Component {
4446
}
4547
render(){
4648
return (
47-
<Switch>
48-
<Route exact path='/palette/create' render={(routeProps) => <CreatePalette palettes={this.state.palettes} savePalette={this.savePalette} {...routeProps}/>}/>
49-
<Route exact path='/' render={(routeProps) => <PaletteList palettes={this.state.palettes} deletePalette={this.deletePalette} {...routeProps}/>}/>
50-
<Route exact path='/palette/:id' render={(routeProps) => <Palette palette={generateColors(this.findPalette(routeProps.match.params.id), 10)}/>}/>
51-
<Route exact path='/palette/:paletteId/:colorId' render={(routeProps) =>
52-
<MoreShades colorId={routeProps.match.params.colorId} palette={generateColors(this.findPalette(routeProps.match.params.paletteId), 10)}/>}
49+
<Route render={({location}) => (
50+
<TransitionGroup>
51+
<CSSTransition key={location.key} classNames='fade' timeout={500}>
52+
<Switch location={location}>
53+
<Route exact
54+
path='/palette/create'
55+
render={(routeProps) =>
56+
<div className="page">
57+
<CreatePalette
58+
palettes={this.state.palettes}
59+
savePalette={this.savePalette}
60+
{...routeProps}
61+
/>
62+
</div>
63+
}
64+
/>
65+
<Route exact
66+
path='/'
67+
render={(routeProps) =>
68+
<div className="page">
69+
<PaletteList
70+
palettes={this.state.palettes}
71+
deletePalette={this.deletePalette}
72+
{...routeProps}
73+
/>
74+
</div>
75+
}
76+
/>
77+
<Route exact
78+
path='/palette/:id'
79+
render={(routeProps) =>
80+
<div className="page">
81+
<Palette
82+
palette={generateColors(this.findPalette(routeProps.match.params.id), 10)}
83+
/>
84+
</div>
85+
}
86+
/>
87+
<Route exact
88+
path='/palette/:paletteId/:colorId'
89+
render={(routeProps) =>
90+
<div className="page">
91+
<MoreShades
92+
colorId={routeProps.match.params.colorId}
93+
palette={generateColors(this.findPalette(routeProps.match.params.paletteId), 10)}
94+
/>
95+
</div>
96+
}
5397
/>
5498
</Switch>
99+
</CSSTransition>
100+
</TransitionGroup>
101+
)}>
102+
</Route>
55103

56104
// <div className="App">
57105
//<Palette palette={generateColors(seedPalettes[1], 10)}/>

‎react-color-palettes/src/Components/DraggableColorList.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const DraggableColorList = SortableContainer(({colors, deleteColorBox}) => {
1111
color={color.color}
1212
name={color.name}
1313
deleteColorBox={() => deleteColorBox(color.name)}
14+
distance={20} /*gives a distance to considered it as delete event (not dragging event)*/
1415
/>
1516
))}
1617
</div>

‎react-color-palettes/src/Components/PaletteList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ class PaletteList extends Component{
5252
</nav>
5353
<TransitionGroup className={classes.palettes}>
5454
{palettes.map(palette => (
55-
<CSSTransition key={palette.id} className='fade' timeout={500}>
55+
<CSSTransition key={palette.id} classNames='fade' timeout={500}>
5656
<MiniPalettes
5757
key={palette.id}
5858
id={palette.id}

‎react-color-palettes/src/styles/PaletteListStyles.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import bg from './bg.svg';
33

44
export default{
55
"@global":{
6-
".exit":{
6+
".fade-exit":{
77
opacity: 1
88
},
9-
".exit-active":{
9+
".fade-exit-active":{
1010
opacity: 0,
1111
transition: "opacity 500ms ease-out"
1212
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /