Sitelet https://github.com/developit/preact-compat-example/commit/eb98cd6c334a64abf269500cc2a27e5ec380d86f
Skip to content

Commit eb98cd6

Browse files
rsacconrsaccon
committed
fixed dependencies and added simple copy-pasted (original) examples for all toolbox componennts
1 parent 02e15cd commit eb98cd6

34 files changed

Lines changed: 924 additions & 25 deletions

File tree

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,12 @@
4444
},
4545
"dependencies": {
4646
"classnames": "^2.2.3",
47+
"core-js": "^2.1.1",
4748
"preact": "^4.1.0",
48-
"preact-compat": "^1.1.0",
49+
"preact-compat": "^1.2.1",
50+
"preact-router": "^1.2.4",
4951
"proptypes": "^0.14.3",
52+
"rc-css-transition-group": "^2.1.4",
5053
"react-toolbox": "^0.14.1"
5154
}
5255
}

‎src/components/app/index.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React from 'react';
2+
import ToolboxApp from 'react-toolbox/lib/app';
3+
import Router from 'preact-router';
4+
import Home from '../home';
5+
import Header from '../header';
6+
import AutocompleteExample from '../autocomplete-example';
7+
import AvatarExample from '../avatar-example';
8+
import ButtonExample from '../button-example';
9+
import CardExample from '../card-example';
10+
import CheckboxExample from '../checkbox-example';
11+
import DatepickerExample from '../datepicker-example';
12+
import DialogExample from '../dialog-example';
13+
import DrawerExample from '../drawer-example';
14+
import DropdownExample from '../dropdown-example';
15+
import FonticonExample from '../fonticon-example';
16+
import InputExample from '../input-example';
17+
import LinkExample from '../link-example';
18+
import ListExample from '../list-example';
19+
import MenuExample from '../menu-example';
20+
import NavigationExample from '../navigation-example';
21+
import ProgressBarExample from '../progressbar-example';
22+
import RadioExample from '../radio-example';
23+
import RippleExample from '../ripple-example';
24+
import SliderExample from '../slider-example';
25+
import SnackbarExample from '../snackbar-example';
26+
import SwitchExample from '../switch-example';
27+
import TableExample from '../table-example';
28+
import TabsExample from '../tabs-example';
29+
import TooltipExample from '../tooltip-example';
30+
import TimepickerExample from '../timepicker-example';
31+
import style from './style';
32+
33+
export default class App extends React.Component {
34+
35+
render() {
36+
return (
37+
<ToolboxApp>
38+
<Header />
39+
<section className={style.content}>
40+
<Router>
41+
<Home path="/" />
42+
<AutocompleteExample path="/autocomplete-example" />
43+
<AvatarExample path="/avatar-example" />
44+
<ButtonExample path="/button-example" />
45+
<CardExample path="/card-example" />
46+
<CheckboxExample path="/checkbox-example" />
47+
<DatepickerExample path="/datepicker-example" />
48+
<DialogExample path="/dialog-example" />
49+
<DrawerExample path="/drawer-example" />
50+
<DropdownExample path="/dropdown-example" />
51+
<FonticonExample path="/fonticon-example" />
52+
<InputExample path="/input-example" />
53+
<LinkExample path="/link-example" />
54+
<ListExample path="/list-example" />
55+
<MenuExample path="/menu-example" />
56+
<NavigationExample path="/navigation-example" />
57+
<ProgressBarExample path="/progressbar-example" />
58+
<RadioExample path="/radio-example" />
59+
<RippleExample path="/ripple-example" />
60+
<SliderExample path="/slider-example" />
61+
<SnackbarExample path="/snackbar-example" />
62+
<SwitchExample path="/switch-example" />
63+
<TableExample path="/table-example" />
64+
<TabsExample path="/tabs-example" />
65+
<TooltipExample path="/tooltip-example" />
66+
<TimepickerExample path="/timepicker-example" />
67+
</Router>
68+
</section>
69+
</ToolboxApp>
70+
)
71+
}
72+
73+
}

‎src/components/app/style.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "~react-toolbox/lib/commons";
2+
3+
.content {
4+
padding: $unit;
5+
}

‎src/components/autocomplete-example/index.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react'
2+
import Autocomplete from 'react-toolbox/lib/autocomplete';
3+
4+
const source = {'ES-es': 'Spain', 'TH-th': 'Thailand', 'EN-gb': 'England', 'EN-en': 'USA'};
5+
6+
export default class AutocompleteExample extends React.Component {
7+
8+
state = {
9+
countries: ['ES-es', 'TH-th']
10+
}
11+
12+
handleChange = (value) => {
13+
this.setState({countries: value});
14+
};
15+
16+
render () {
17+
return (
18+
<Autocomplete
19+
direction="down"
20+
label="Choose countries"
21+
name="countries"
22+
onChange={this.handleChange}
23+
source={source}
24+
value={this.state.countries}
25+
/>
26+
);
27+
}
28+
29+
}

‎src/components/avatar-example/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react'
2+
import Avatar from 'react-toolbox/lib/avatar';
3+
4+
const GithubIcon = () => (
5+
<svg viewBox="0 0 284 277">
6+
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
7+
</svg>
8+
);
9+
10+
export default class AutocompleteExample extends React.Component {
11+
12+
render () {
13+
return (
14+
<div>
15+
<Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
16+
<Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
17+
<Avatar title="Javier" image="https://placeimg.com/80/80/animals"/>
18+
<Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
19+
</div>
20+
);
21+
}
22+
23+
}

‎src/components/button-example/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import {Button, IconButton} from 'react-toolbox/lib/button';
3+
4+
const GithubIcon = () => (
5+
<svg viewBox="0 0 284 277">
6+
<g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
7+
</svg>
8+
);
9+
10+
export default class ButtonExample extends React.Component {
11+
12+
render () {
13+
return (
14+
<div>
15+
<Button href='http://github.com/javivelasco' target='_blank' raised>
16+
<GithubIcon /> Github
17+
</Button>
18+
<Button icon='bookmark' label='Bookmark' accent />
19+
<Button icon='bookmark' label='Bookmark' raised primary />
20+
<Button icon='inbox' label='Inbox' flat />
21+
<Button icon='add' floating />
22+
<Button icon='add' floating accent mini />
23+
<IconButton icon='favorite' accent />
24+
<IconButton primary><GithubIcon /></IconButton>
25+
<Button icon='add' label='Add this' flat primary />
26+
<Button icon='add' label='Add this' flat disabled />
27+
</div>
28+
);
29+
}
30+
31+
}

‎src/components/card-example/index.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import { Card, CardMedia, CardTitle, CardText, CardActions } from 'react-toolbox/lib/card';
3+
import {Button} from 'react-toolbox/lib/button';
4+
5+
const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
6+
7+
export default class CardExample extends React.Component {
8+
9+
render () {
10+
return (
11+
<Card style={{width: '350px'}}>
12+
<CardTitle
13+
avatar="https://placeimg.com/80/80/animals"
14+
title="Avatar style title"
15+
subtitle="Subtitle here"
16+
/>
17+
<CardMedia
18+
aspectRatio="wide"
19+
image="https://placeimg.com/800/450/nature"
20+
/>
21+
<CardTitle
22+
title="Title goes here"
23+
subtitle="Subtitle here"
24+
/>
25+
<CardText>{dummyText}</CardText>
26+
<CardActions>
27+
<Button label="Action 1" />
28+
<Button label="Action 2" />
29+
</CardActions>
30+
</Card>
31+
);
32+
}
33+
34+
}

‎src/components/checkbox-example/index.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import Checkbox from 'react-toolbox/lib/checkbox';
3+
4+
export default class CheckboxExample extends React.Component {
5+
6+
state = {
7+
check1: true,
8+
check2: false
9+
};
10+
11+
handleChange = (field, value) => {
12+
this.setState({...this.state, [field]: value});
13+
};
14+
15+
render () {
16+
return (
17+
<div>
18+
<Checkbox
19+
checked={this.state.check1}
20+
label="Checked option"
21+
onChange={this.handleChange.bind(this, 'check1')}
22+
/>
23+
<Checkbox
24+
checked={this.state.check2}
25+
label="Unchecked option"
26+
onChange={this.handleChange.bind(this, 'check2')}
27+
/>
28+
<Checkbox
29+
checked
30+
disabled
31+
label="Disabled checkbox"
32+
/>
33+
</div>
34+
);
35+
}
36+
37+
}

‎src/components/datepicker-example/index.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react'
2+
import DatePicker from 'react-toolbox/lib/date_picker';
3+
4+
const datetime = new Date(2015, 10, 16);
5+
const min_datetime = new Date(new Date(datetime).setDate(8));
6+
datetime.setHours(17);
7+
datetime.setMinutes(28);
8+
9+
export default class DatepickerExample extends React.Component {
10+
11+
state = {
12+
date1: datetime
13+
};
14+
15+
handleChange = (item, value) => {
16+
this.setState({...this.state, [item]: value});
17+
};
18+
19+
render () {
20+
return (
21+
<section>
22+
<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
23+
<DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
24+
</section>
25+
);
26+
}
27+
28+
}

‎src/components/dialog-example/index.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import Dialog from 'react-toolbox/lib/dialog';
3+
import {Button} from 'react-toolbox/lib/button';
4+
5+
export default class DialogExample extends React.Component {
6+
7+
state = {
8+
active: false
9+
};
10+
11+
handleToggle = () => {
12+
this.setState({active: !this.state.active});
13+
}
14+
15+
actions = [
16+
{ label: "Cancel", onClick: this.handleToggle },
17+
{ label: "Save", onClick: this.handleToggle }
18+
];
19+
20+
render () {
21+
return (
22+
<div>
23+
<Button label='Show my dialog' onClick={this.handleToggle} />
24+
<Dialog actions={this.actions} active={this.state.active} title='My awesome dialog'>
25+
<p>Here you can add arbitrary content. Components like Pickers are using dialogs now.</p>
26+
</Dialog>
27+
</div>
28+
);
29+
}
30+
31+
}

0 commit comments

Comments
 (0)