Skip to content

Commit c3aeaf2

Browse files
author
awn_lunchon
committed
semantic ui added
1 parent 1f25652 commit c3aeaf2

File tree

5 files changed

+133
-131
lines changed

5 files changed

+133
-131
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@
88
"react-dom": "^16.2.0",
99
"react-router-dom": "^4.2.2",
1010
"react-scripts": "1.1.0",
11-
"react-transition-group": "^2.2.1"
11+
"react-transition-group": "^2.2.1",
12+
"semantic-ui-react": "^0.77.2"
1213
},
1314
"scripts": {
1415
"start": "react-scripts start",

‎src/App.js

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import { Route, Link, Switch } from 'react-router-dom';
33
import { CSSTransition } from 'react-transition-group';
4+
import { Dropdown, Menu } from 'semantic-ui-react'
45
import Home from './Home';
56
import Subpage from './Subpage';
67
import ListTransition from './ListTransitions';
@@ -21,18 +22,28 @@ const RenderPage = Component => (
2122
class App extends Component {
2223
render() {
2324
return (
24-
<div className="App">
25-
<div className="TopBar">
26-
<Link to="/">Home</Link>
27-
<Link to="/subpage">Subpage</Link>
28-
<Link to="/list">List</Link>
29-
30-
<Link to="/page1">Page 1</Link>
31-
<Link to="/page2">Page 2</Link>
32-
<Link to="/page3">Page 3</Link>
33-
<Link to="/container">Containers</Link>
34-
<Link to="/slide">Slide Pages</Link>
35-
</div>
25+
<div className="ui container">
26+
<Menu size='mini'>
27+
<Menu.Menu>
28+
<Dropdown item text='Animate.Js'>
29+
<Dropdown.Menu>
30+
<Dropdown.Item><Link to="/">Home</Link></Dropdown.Item>
31+
<Dropdown.Item><Link to="/subpage">Subpage</Link></Dropdown.Item>
32+
</Dropdown.Menu>
33+
</Dropdown>
34+
</Menu.Menu>
35+
<Menu.Menu>
36+
<Dropdown item text='Page Fade'>
37+
<Dropdown.Menu>
38+
<Dropdown.Item><Link to="/page1">Page 1</Link></Dropdown.Item>
39+
<Dropdown.Item><Link to="/page2">Page 2</Link></Dropdown.Item>
40+
<Dropdown.Item><Link to="/page3">Page 3</Link></Dropdown.Item>
41+
</Dropdown.Menu>
42+
</Dropdown>
43+
</Menu.Menu>
44+
<Menu.Item name='home' ><Link to="/container">Containers</Link></Menu.Item>
45+
<Menu.Item name='messages'><Link className="item" to="/slide">Slide Pages</Link></Menu.Item>
46+
</Menu>
3647
<Switch>
3748
<AnimatedRoutes>
3849
<Route exact path="/" component={Home} />

‎src/ContainerAnimations/index.js

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -7,60 +7,57 @@ class Container extends Component {
77
render() {
88
return (
99
<div>
10+
<h1>Components</h1>
1011
<div
11-
className={
12-
'page animated-page-wrapper ' + (!this.state.show ? 'fade-out' : '')
13-
}
12+
style={{ width: '50%', textAlign: 'center' }}
13+
className={'ui message ' + (!this.state.show ? 'fade-out' : '')}
1414
>
15-
<h1>Components</h1>
16-
<div className="ui message">
17-
<div className="header">Changes in Service</div>
18-
<p className={this.state.scale ? 'scale-out' : ''}>
19-
We just updated our privacy policy here to better service our
20-
customers. We recommend reviewing the changes.
21-
</p>
22-
<button className="ui primary button" onClick={this.onHide}>
23-
Hide
24-
</button>
25-
<button className="ui button" onClick={this.onScale}>
26-
Scale
27-
</button>
28-
</div>
29-
<div className="ui message slide-left">
30-
<div className="header">Slide Left</div>
31-
<p>
32-
We just updated our privacy policy here to better service our
33-
customers. We recommend reviewing the changes.
34-
</p>
35-
</div>
36-
<div className="ui message slide-right">
37-
<div className="header">Slide Right</div>
38-
<p>
39-
We just updated our privacy policy here to better service our
40-
customers. We recommend reviewing the changes.
41-
</p>
42-
</div>
43-
<div className="ui message slide-top">
44-
<div className="header">Slid Top</div>
45-
<p>
46-
We just updated our privacy policy here to better service our
47-
customers. We recommend reviewing the changes.
48-
</p>
49-
</div>
50-
<div className="ui message slide-bottom">
51-
<div className="header">Slid bottom</div>
52-
<p>
53-
We just updated our privacy policy here to better service our
54-
customers. We recommend reviewing the changes.
55-
</p>
56-
</div>
57-
<div className="ui message flip">
58-
<div className="header">Slid bottom</div>
59-
<p>
60-
We just updated our privacy policy here to better service our
61-
customers. We recommend reviewing the changes.
62-
</p>
63-
</div>
15+
<div className="header">Changes in Service</div>
16+
<p className={this.state.scale ? 'scale-out' : ''}>
17+
We just updated our privacy policy here to better service our
18+
customers. We recommend reviewing the changes.
19+
</p>
20+
<button className="ui primary button" onClick={this.onHide}>
21+
Hide
22+
</button>
23+
<button className="ui button" onClick={this.onScale}>
24+
Scale
25+
</button>
26+
</div>
27+
<div className="ui message slide-left">
28+
<div className="header">Slide Left</div>
29+
<p>
30+
We just updated our privacy policy here to better service our
31+
customers. We recommend reviewing the changes.
32+
</p>
33+
</div>
34+
<div className="ui message slide-right">
35+
<div className="header">Slide Right</div>
36+
<p>
37+
We just updated our privacy policy here to better service our
38+
customers. We recommend reviewing the changes.
39+
</p>
40+
</div>
41+
<div className="ui message slide-top">
42+
<div className="header">Slid Top</div>
43+
<p>
44+
We just updated our privacy policy here to better service our
45+
customers. We recommend reviewing the changes.
46+
</p>
47+
</div>
48+
<div className="ui message slide-bottom">
49+
<div className="header">Slid bottom</div>
50+
<p>
51+
We just updated our privacy policy here to better service our
52+
customers. We recommend reviewing the changes.
53+
</p>
54+
</div>
55+
<div className="ui message flip">
56+
<div className="header">Slid bottom</div>
57+
<p>
58+
We just updated our privacy policy here to better service our
59+
customers. We recommend reviewing the changes.
60+
</p>
6461
</div>
6562
</div>
6663
);

‎src/ListTransitions.js

Lines changed: 47 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,30 @@
11
import React, { Component } from 'react';
22
import './App.css';
33
import { CSSTransition, TransitionGroup } from 'react-transition-group';
4+
5+
const Transition = ({ items, classNames, timeout = 1000, onEnter, onExit }) => (
6+
<ul>
7+
<TransitionGroup>
8+
{items.map((f, i) => (
9+
<CSSTransition
10+
timeout={timeout}
11+
classNames={classNames}
12+
onEnter={onEnter}
13+
onExit={onExit}
14+
in={true}
15+
key={i}
16+
appear
17+
>
18+
<li style={{backgroundColor: 'blue'}}>
19+
{f}
20+
<span onClick={() => this.removeFood(i)}> X</span>
21+
</li>
22+
</CSSTransition>
23+
))}
24+
</TransitionGroup>
25+
</ul>
26+
);
27+
428
class Home extends Component {
529
constructor(...args) {
630
super(...args);
@@ -23,27 +47,15 @@ class Home extends Component {
2347
<h1>Listpage</h1>
2448
<button onClick={this.addFood}>Add</button>
2549
<h1>Fade transition</h1>
26-
<ul>
27-
<TransitionGroup>
28-
{this.state.items.map((f, i) => (
29-
<CSSTransition
30-
timeout={3000}
31-
classNames="fade"
32-
onEnter={this.onEnter}
33-
onExit={this.onExit}
34-
in={true}
35-
key={i}
36-
appear
37-
>
38-
<li>
39-
{f}
40-
<span onClick={() => this.removeFood(i)}> X</span>
41-
</li>
42-
</CSSTransition>
43-
))}
44-
</TransitionGroup>
45-
</ul>
46-
<h1>Flip transition ( with Css only )</h1><span></span>
50+
<Transition
51+
items={this.state.items}
52+
classNames="fade"
53+
timeout={1000}
54+
onEnter={this.onEnter}
55+
onExit={this.onExit}
56+
/>
57+
<h1>Flip transition ( with Css only )</h1>
58+
<span />
4759
<ul>
4860
{this.state.items.map((f, i) => (
4961
<li className="flip-list-css-appear-active" key={i}>
@@ -53,47 +65,21 @@ class Home extends Component {
5365
))}
5466
</ul>
5567
<h1>Flip transition</h1>
56-
<ul>
57-
<TransitionGroup>
58-
{this.state.items.map((f, i) => (
59-
<CSSTransition
60-
timeout={1000}
61-
classNames="flip-item"
62-
onEnter={this.onEnter}
63-
onExit={this.onExit}
64-
in={true}
65-
key={i}
66-
appear
67-
>
68-
<li style={{backgroundColor: 'red', width: '70px'}}>
69-
{f}
70-
<span onClick={() => this.removeFood(i)}> X</span>
71-
</li>
72-
</CSSTransition>
73-
))}
74-
</TransitionGroup>
75-
</ul>
68+
<Transition
69+
items={this.state.items}
70+
classNames="flip-item"
71+
timeout={1000}
72+
onEnter={this.onEnter}
73+
onExit={this.onExit}
74+
/>
7675
<h1>Slide transition</h1>
77-
<ul>
78-
<TransitionGroup>
79-
{this.state.items.map((f, i) => (
80-
<CSSTransition
81-
timeout={1000}
82-
classNames="slide-list"
83-
onEnter={this.onEnter}
84-
onExit={this.onExit}
85-
in={true}
86-
key={i}
87-
appear
88-
>
89-
<li>
90-
{f}
91-
<span onClick={() => this.removeFood(i)}> X</span>
92-
</li>
93-
</CSSTransition>
94-
))}
95-
</TransitionGroup>
96-
</ul>
76+
<Transition
77+
items={this.state.items}
78+
classNames="slide-list"
79+
timeout={1000}
80+
onEnter={this.onEnter}
81+
onExit={this.onExit}
82+
/>
9783
</div>
9884
);
9985
}

‎src/PageTransition/slide/index.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Link, Route, Switch } from 'react-router-dom';
3+
import { Menu } from 'semantic-ui-react'
34
import { TransitionGroup, CSSTransition } from 'react-transition-group';
45
import Page1 from './FirstPage';
56
import Page2 from './SecondPage';
@@ -21,11 +22,17 @@ const SlideTransition = props => {
2122
const locationKey = props.location.pathname;
2223

2324
return (
24-
<div className="page animated-page-wrapper ui container ">
25-
<Link to="/slide">Page 1</Link>
26-
<Link to="/slide/trans2">Page 2</Link>
27-
<Link to="/slide/trans3">Page 3</Link>
28-
<Link to="/slide/trans4">Page 4</Link>
25+
<div>
26+
<Menu fluid widths={4}>
27+
<Menu.Item name='buy' ><Link to="/slide">Page 1</Link></Menu.Item>
28+
<Menu.Item name='sell'><Link to="/slide/trans2">Page 2</Link></Menu.Item>
29+
<Menu.Item name='rent'><Link to="/slide/trans3">Page 3</Link></Menu.Item>
30+
<Menu.Item name='rent1'><Link to="/slide/trans4">Page 4</Link></Menu.Item>
31+
</Menu>
32+
33+
34+
35+
2936
<TransitionGroup>
3037
<PageSlide key={locationKey}>
3138
<Switch location={props.location}>

0 commit comments

Comments
 (0)