Skip to content

Commit c76f9fe

Browse files
author
Seth Lemmons
committed
Synced with updated examples
1 parent 8549fe4 commit c76f9fe

File tree

8 files changed

+44
-104
lines changed

8 files changed

+44
-104
lines changed

‎16-buttons/a-simple-button/src/App.css

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,4 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
15-
}
16-
17-
.App-title {
18-
font-size: 1.5em;
19-
}
20-
21-
.App-intro {
22-
font-size: large;
23-
}
24-
25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
1+
.top-toolbar {
2+
padding: 4px 8px;
3+
background: #e8e8e8;
284
}

‎16-buttons/a-simple-button/src/App.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,16 @@ class App extends Component {
55
return (
66
<div>
77
<div className="top-toolbar">
8-
<button onClick={this.onAddUser}>Add User</button>
8+
<button onClick={this.handleAddUser}>Add User</button>
99
</div>
1010
</div>
1111
);
1212
}
13-
onAddUser = () => {
13+
handleAddUser = () => {
1414
// handle button click
15-
alert('add user');
15+
console.log('add user');
1616
}
1717
}
18+
1819
export default App;
1920

‎16-buttons/b-button-icon/src/App.css

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,4 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
15-
}
16-
17-
.App-title {
18-
font-size: 1.5em;
19-
}
20-
21-
.App-intro {
22-
font-size: large;
23-
}
24-
25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
28-
}
1+
.top-toolbar {
2+
padding: 4px 8px;
3+
background: #e8e8e8;
4+
}

‎16-buttons/b-button-icon/src/App.js

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
import React, { Component } from 'react';
2-
import FontAwesome from '@fortawesome/react-fontawesome'
3-
import { faUserPlus } from '@fortawesome/fontawesome-free-solid'
2+
import FontAwesome from '@fortawesome/react-fontawesome';
3+
import { faUserPlus } from '@fortawesome/fontawesome-free-solid';
4+
45
class App extends Component {
56
render () {
67
const style = {
78
marginRight: '12px' // inline style example
89
};
10+
911
return (
1012
<div>
1113
<div className="top-toolbar">
12-
<button onClick={this.onAddUser}>
14+
<button onClick={this.handleAddUser}>
1315
<FontAwesome icon={faUserPlus} style={style} />
1416
Add User
1517
</button>
1618
</div>
1719
</div>
1820
);
1921
}
20-
onAddUser = () => {
22+
handleAddUser = () => {
2123
// handle button click
22-
alert('add user');
24+
console.log('add user');
2325
}
2426
}
27+
2528
export default App;
2629

‎16-buttons/c-advanced-button/public/index.html

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,6 @@
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
2222
<title>React App</title>
23-
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css">
24-
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
25-
2623
</head>
2724
<body>
2825
<noscript>

‎16-buttons/c-advanced-button/src/App.css

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,4 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
15-
}
16-
17-
.App-title {
18-
font-size: 1.5em;
19-
}
20-
21-
.App-intro {
22-
font-size: large;
23-
}
24-
25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
1+
.top-toolbar {
2+
padding: 8px 12px;
3+
background: #3d76b5;
284
}

‎16-buttons/c-advanced-button/src/App.js

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,40 @@
11
import React, { Component } from 'react';
22
import { Dropdown } from 'semantic-ui-react';
3+
import 'semantic-ui-css/semantic.min.css';
4+
35
const { Divider, Item, Menu } = Dropdown;
4-
class Main extends Component {
6+
7+
class App extends Component {
58
render () {
69
return (
710
<div>
811
<div className="top-toolbar">
9-
<Dropdown text="Add User" icon="add user" floating labeled button className="icon">
12+
<Dropdown
13+
text="User Controls"
14+
icon="add user"
15+
className="icon"
16+
floating labeled button
17+
>
1018
<Menu>
11-
<Item onClick={this.onFindUser}>Find User</Item>
19+
<Item onClick={this.handleAddUser}>Add User</Item>
1220
<Divider />
13-
<Item onClick={this.doSomething}>Do Something</Item>
21+
<Item onClick={this.handleRemoveUser}>Remove User</Item>
1422
</Menu>
1523
</Dropdown>
1624
</div>
1725
</div>
1826
);
1927
}
20-
onFindUser = () => {
28+
29+
handleAddUser = () => {
2130
// handle menu item click
22-
alert('find user');
31+
console.log('add user')
2332
}
24-
doSomething = () => {
33+
handleRemoveUser = () => {
2534
// handle menu item click
26-
alert('do something');
35+
console.log('remove user');
2736
}
2837
}
29-
export default Main;
38+
39+
export default App;
3040

‎16-buttons/d-segmented-button/src/SegmentedBtn.js renamed to ‎16-buttons/d-segmented-button/src/SegmentedButton.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {Component} from 'react'
22

3-
class SegmentedBtn extends Component {
3+
class SegmentedButton extends Component {
44
static defaultProps = {
55
pressed: [],
66
allowDepress: false
@@ -63,4 +63,5 @@ class SegmentedBtn extends Component {
6363
}
6464
}
6565
}
66-
export default SegmentedBtn;
66+
67+
export default SegmentedButton;

0 commit comments

Comments
 (0)