Skip to content

Commit 518dcbe

Browse files
committed
Added toggle
1 parent 8f55d05 commit 518dcbe

File tree

4 files changed

+85
-37
lines changed

4 files changed

+85
-37
lines changed
Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export const defaultCode = `
2+
class Demo extends React.Component {
3+
constructor(props) {
4+
super(props);
5+
6+
this.state = {
7+
toggled: true,
8+
};
9+
this.handleToggle = this.handleToggle.bind(this);
10+
}
11+
12+
handleToggle() {
13+
this.setState({
14+
toggled: !this.state.toggled,
15+
});
16+
}
17+
18+
render() {
19+
return (
20+
<div>
21+
{/* Preview Block 1 */}
22+
<PreviewBlock header="Default toggle (without toggable)">
23+
<Toggle />
24+
</PreviewBlock>
25+
{/* Preview Block 2 */}
26+
<PreviewBlock header="Toggle with switch on (with toggable)">
27+
<Toggle
28+
toggled={this.state.toggled}
29+
onClick={this.handleToggle}
30+
/>
31+
</PreviewBlock>
32+
</div>
33+
)
34+
}
35+
}
36+
`;
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { defaultCode as CardDefaultCode } from './Card';
22
export { defaultCode as ButtonDefaultCode } from './Button';
33
export { defaultCode as CheckboxDefaultCode } from './Checkbox';
4-
export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
4+
export { defaultCode as CheckboxGroupDefaultCode } from './CheckboxGroup';
5+
export { defaultCode as ToggleDefaultCode } from './Toggle';

docs/client/components/common/componentList.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,15 @@ import Checkbox from '../../../../src/checkbox';
66
import CheckboxReadme from '../../../../src/checkbox/readMe.md';
77
import CheckboxGroup from '../../../../src/checkbox';
88
import CheckboxGroupReadme from '../../../../src/checkbox/readMe.md';
9+
import Toggle from '../../../../src/toggle';
10+
import ToggleReadme from '../../../../src/toggle/readMe.md';
911

1012
import {
1113
CardDefaultCode,
1214
ButtonDefaultCode,
1315
CheckboxDefaultCode,
1416
CheckboxGroupDefaultCode,
17+
ToggleDefaultCode,
1518
} from './DefaultCode';
1619

1720
export const componentList = [
@@ -39,4 +42,10 @@ export const componentList = [
3942
component: CheckboxGroup,
4043
defaultCode: CheckboxGroupDefaultCode,
4144
},
45+
{
46+
name: 'Toggle',
47+
docs: CheckboxGroupReadme,
48+
component: Toggle,
49+
defaultCode: ToggleDefaultCode,
50+
},
4251
];

src/index.js

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,44 @@
1-
// import Button from './button';
2-
// import Card from './card';
3-
// import Checkbox from './checkbox';
4-
// import CheckboxGroup from './checkboxGroup';
1+
import Button from './button';
2+
import Card from './card';
3+
import Checkbox from './checkbox';
4+
import CheckboxGroup from './checkboxGroup';
5+
import Toggle from './toggle';
56

6-
// export default {
7-
// Button,
8-
// Card,
9-
// Checkbox,
10-
// CheckboxGroup,
11-
// };
7+
export default {
8+
Button,
9+
Card,
10+
Checkbox,
11+
CheckboxGroup,
12+
Toggle,
13+
};
1214

13-
import React from 'react';
14-
import ReactDOM from 'react-dom';
15-
import Toggle from './toggle';
15+
// import React from 'react';
16+
// import ReactDOM from 'react-dom';
17+
// import Toggle from './toggle';
18+
19+
// class ToggleDisplay extends React.Component {
20+
// constructor(props) {
21+
// super(props);
1622

17-
class ToggleDisplay extends React.Component {
18-
constructor(props) {
19-
super(props);
23+
// this.state = {
24+
// toggled: false,
25+
// };
26+
// }
2027

21-
this.state = {
22-
toggled: false,
23-
};
24-
}
25-
26-
handleToggle = () => {
27-
this.setState({
28-
toggled: !this.state.toggled,
29-
});
30-
}
28+
// handleToggle = () => {
29+
// this.setState({
30+
// toggled: !this.state.toggled,
31+
// });
32+
// }
3133

32-
render() {
33-
return (
34-
<Toggle
35-
toggled={this.state.toggled}
36-
onClick={this.handleToggle}
37-
/>
38-
);
39-
}
40-
}
34+
// render() {
35+
// return (
36+
// <Toggle
37+
// toggled={this.state.toggled}
38+
// onClick={this.handleToggle}
39+
// />
40+
// );
41+
// }
42+
// }
4143

42-
ReactDOM.render(<ToggleDisplay />, document.getElementById('index'));
44+
// ReactDOM.render(<ToggleDisplay />, document.getElementById('index'));

0 commit comments

Comments
 (0)