vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

use autobind-decorator

old
ustccjw 2015-10-21 14:13:24 +08:00
parent 227727e860
commit 6c278f25d0
50 changed files with 173 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/autocomplete/index.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import autobind from 'autobind-decorator'
import utils from '../utils';
import Input from '../input';
import style from './style';
@autobind
export default class Autocomplete extends React.Component {
static propTypes = {
className: React.PropTypes.string,

2
components/button/index.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import autobind from 'autobind-decorator'
import FontIcon from '../font_icon';
import Ripple from '../ripple';
import style from './style.scss';
import events from '../utils/events';
@autobind
export default class Button extends React.Component {
static propTypes = {
accent: React.PropTypes.bool,

2
components/card/index.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Navigation from '../navigation';
import Ripple from '../ripple';
import style from './style.scss';
@autobind
export default class Card extends React.Component {
static propTypes = {
className: React.PropTypes.string,

2
components/checkbox/index.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Ripple from '../ripple';
import style from './style';
import events from '../utils/events';
@autobind
export default class Checkbox extends React.Component {
static propTypes = {
checked: React.PropTypes.bool,

2
components/date_picker/calendar/day.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import time from '../../utils/time';
import style from './style';
@autobind
export default class Day extends React.Component {
static propTypes = {
day: React.PropTypes.number,

6
components/date_picker/calendar/index.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import autobind from 'autobind-decorator'
import CSSTransitionGroup from 'react-addons-css-transition-group';
import { SlideLeft, SlideRight } from '../../animations';
import FontIcon from '../../font_icon';
@ -7,6 +8,7 @@ import utils from '../../utils';
import Month from './month';
import style from './style';
@autobind
export default class Calendar extends React.Component {
static propTypes = {
display: React.PropTypes.oneOf(['months', 'years']),
@ -70,7 +72,7 @@ export default class Calendar extends React.Component {
let props = {
className: year === this.state.viewDate.getFullYear() ? style.active : '',
key: year,
onClick: ::this.onYearClick(year)
onClick: this.onYearClick.bind(this, year)
};
if (year === this.state.viewDate.getFullYear()) {
@ -103,7 +105,7 @@ export default class Calendar extends React.Component {
key={this.state.viewDate.getMonth()}
viewDate={this.state.viewDate}
selectedDate={this.state.selectedDate}
onDayClick={::this.onDayClick} />
onDayClick={this.onDayClick} />
</CSSTransitionGroup>
</div>
);

2
components/date_picker/calendar/month.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import utils from '../../utils';
import Day from './day';
import style from './style';
@autobind
export default class Month extends React.Component {
static propTypes = {
onDayClick: React.PropTypes.func,

8
components/date_picker/dialog.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import time from '../utils/time';
import Calendar from './calendar';
import Dialog from '../dialog';
@autobind
export default class CalendarDialog extends React.Component {
static propTypes = {
initialDate: React.PropTypes.object,
@ -18,8 +20,8 @@ export default class CalendarDialog extends React.Component {
date: this.props.initialDate,
display: 'months',
actions: [
{ label: 'Cancel', className: style.button, onClick: ::this.onDateCancel },
{ label: 'Ok', className: style.button, onClick: ::this.onDateSelected }
{ label: 'Cancel', className: style.button, onClick: this.onDateCancel },
{ label: 'Ok', className: style.button, onClick: this.onDateSelected }
]
};
@ -71,7 +73,7 @@ export default class CalendarDialog extends React.Component {
<Calendar
ref="calendar"
display={this.state.display}
onChange={::this.onCalendarChange}
onChange={this.onCalendarChange}
selectedDate={this.state.date} />
</div>
</Dialog>

4
components/date_picker/index.jsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import time from '../utils/time';
import events from '../utils/events';
import CalendarDialog from './dialog';
import Input from '../input';
@autobind
export default class DatePicker extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -48,7 +50,7 @@ export default class DatePicker extends React.Component {
<CalendarDialog
ref='dialog'
initialDate={this.state.value}
onDateSelected={::this.onDateSelected}
onDateSelected={this.onDateSelected}
/>
</div>
);

2
components/dialog/index.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Button from '../button';
import style from './style';
@autobind
export default class Dialog extends React.Component {
static propTypes = {
actions: React.PropTypes.array,

2
components/drawer/index.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style.scss';
@autobind
export default class Drawer extends React.Component {
static propTypes = {
active: React.PropTypes.bool,

2
components/dropdown/index.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import autobind from 'autobind-decorator'
import ReactDOM from 'react-dom';
import Ripple from '../ripple';
import style from './style';
@ -15,6 +16,7 @@ function _selectValue (value, dataSource) {
}
}
@autobind
export default class Dropdown extends React.Component {
static propTypes = {
className: React.PropTypes.string,

25
components/form/index.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import Autocomplete from '../autocomplete';
import Button from '../button';
@ -12,6 +12,7 @@ import Slider from '../slider';
import Switch from '../switch';
import TimePicker from '../time_picker';
@autobind
export default class Form extends React.Component {
static propTypes = {
attributes: React.PropTypes.array,
@ -75,23 +76,23 @@ export default class Form extends React.Component {
let className = `${style.root} ${this.props.className}`;
const attributes = this.state.attributes.map((attribute, index) => {
if (attribute.type === 'autocomplete') {
return <Autocomplete key={index} {...attribute} onChange={::this.onChange}/>;
return <Autocomplete key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'submit') {
return <Button key={index} {...attribute} type='square' ref='submit' onClick={::this.onSubmit}/>;
return <Button key={index} {...attribute} type='square' ref='submit' onClick={this.onSubmit}/>;
} else if (attribute.type === 'checkbox') {
return <Checkbox key={index} {...attribute} onChange={::this.onChange}/>;
return <Checkbox key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'date_picker') {
return <DatePicker key={index} {...attribute} onChange={::this.onChange}/>;
return <DatePicker key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'dropdown') {
return <Dropdown key={index} {...attribute} onChange={::this.onChange}/>;
return <Dropdown key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'radio_group') {
return <RadioGroup key={index} {...attribute} onChange={::this.onChange}/>;
return <RadioGroup key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'slider') {
return <Slider key={index} {...attribute} onChange={::this.onChange}/>;
return <Slider key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'switch') {
return <Switch key={index} {...attribute} onChange={::this.onChange}/>;
return <Switch key={index} {...attribute} onChange={this.onChange}/>;
} else if (attribute.type === 'time_picker') {
return <TimePicker key={index} {...attribute} onChange={::this.onChange}/>;
return <TimePicker key={index} {...attribute} onChange={this.onChange}/>;
} else {
return <Input key={index} {...attribute} />;
}
@ -101,8 +102,8 @@ export default class Form extends React.Component {
<form
data-react-toolbox='form'
className={className}
onChange={::this.onChange}
onSubmit={::this.onSubmit}
onChange={this.onChange}
onSubmit={this.onSubmit}
>
{ attributes }
{ this.props.children }

6
components/input/index.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style.scss';
import FontIcon from '../font_icon';
@autobind
export default class Input extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -50,7 +52,7 @@ export default class Input extends React.Component {
role='input'
{...this.props}
className={className}
onChange={::this.onChange}
onChange={this.onChange}
value={this.state.value} />
);
} else {
@ -61,7 +63,7 @@ export default class Input extends React.Component {
{...this.props}
className={className}
value={this.state.value}
onChange={::this.onChange} />
onChange={this.onChange} />
);
}
}

2
components/list/item.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import autobind from 'autobind-decorator'
import FontIcon from '../font_icon';
import ListItemContent from './content';
import Ripple from '../ripple';
import style from './style';
@autobind
export default class ListItem extends React.Component {
static propTypes = {
avatar: React.PropTypes.string,

2
components/list/list.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import ListItem from './item';
import style from './style';
@autobind
export default class List extends React.Component {
static propTypes = {
className: React.PropTypes.string,

2
components/menu/icon_menu.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import autobind from 'autobind-decorator'
import FontIcon from '../font_icon';
import Menu from './menu';
import Ripple from '../ripple';
import style from './style.icon_menu';
@autobind
export default class IconMenu extends React.Component {
static propTypes = {
className: React.PropTypes.string,

2
components/menu/menu.jsx
View File

@ -1,5 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import autobind from 'autobind-decorator'
import MenuItem from './menu_item';
import utils from '../utils';
import style from './style.menu';
@ -13,6 +14,7 @@ const POSITION = {
BOTTOM_RIGHT: 'bottom-right'
};
@autobind
export default class Menu extends React.Component {
static propTypes = {
active: React.PropTypes.bool,

2
components/menu/menu_item.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import FontIcon from '../font_icon';
import Ripple from '../ripple';
import style from './style.menu_item';
@autobind
export default class MenuItem extends React.Component {
static propTypes = {
caption: React.PropTypes.string,

2
components/progress_bar/index.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import prefixer from '../utils/prefixer';
@autobind
export default class progressBar extends React.Component {
static propTypes = {
buffer: React.PropTypes.number,

2
components/radio/radio_button.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Ripple from '../ripple';
import style from './style';
import events from '../utils/events';
@autobind
export default class RadioButton extends React.Component {
static propTypes = {
checked: React.PropTypes.bool,

2
components/radio/radio_group.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import RadioButton from './radio_button';
@autobind
export default class RadioGroup extends React.Component {
static propTypes = {
className: React.PropTypes.string,

2
components/ripple/index.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import autobind from 'autobind-decorator'
import style from './style.scss';
@autobind
export default class Ripple extends React.Component {
static propTypes = {
centered: React.PropTypes.bool,

30
components/slider/index.jsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom';
import autobind from 'autobind-decorator'
import style from './style';
import utils from '../utils';
import ProgressBar from '../progress_bar';
import Input from '../input';
@autobind
export default class Slider extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -36,12 +38,12 @@ export default class Slider extends React.Component {
};
componentDidMount () {
window.addEventListener('resize', ::this.onResize);
window.addEventListener('resize', this.onResize);
this.onResize();
}
componentWillUnmount () {
window.removeEventListener('resize', ::this.onResize);
window.removeEventListener('resize', this.onResize);
}
componentDidUpdate (prevProps, prevState) {
@ -106,21 +108,21 @@ export default class Slider extends React.Component {
getMouseEventMap () {
return {
mousemove: ::this.onMouseMove,
mouseup: ::this.onMouseUp
mousemove: this.onMouseMove,
mouseup: this.onMouseUp
};
}
getTouchEventMap () {
return {
touchmove: ::this.onTouchMove,
touchend: ::this.onTouchEnd
touchmove: this.onTouchMove,
touchend: this.onTouchEnd
};
}
getKeyboardEvents () {
return {
keydown: ::this.onKeyDown
keydown: this.onKeyDown
};
}
@ -187,7 +189,7 @@ export default class Slider extends React.Component {
<Input
ref='input'
className={style.input}
onChange={::this.onInputChange}
onChange={this.onInputChange}
value={this.valueForInput(this.state.value)} />
);
}
@ -206,21 +208,21 @@ export default class Slider extends React.Component {
data-react-toolbox='slider'
className={style.root + className}
tabIndex='0'
onFocus={::this.onSliderFocus}
onBlur={::this.onSliderBlur} >
onFocus={this.onSliderFocus}
onBlur={this.onSliderBlur} >
<div
ref='slider'
className={style.container}
onTouchStart={::this.onTouchStart}
onMouseDown={::this.onMouseDown} >
onTouchStart={this.onTouchStart}
onMouseDown={this.onMouseDown} >
<div
ref='knob'
className={style.knob}
style={knobStyles}
onMouseDown={::this.onMouseDown}
onTouchStart={::this.onTouchStart} >
onMouseDown={this.onMouseDown}
onTouchStart={this.onTouchStart} >
<div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
</div>

4
components/snackbar/index.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import Button from '../button';
import FontIcon from '../font_icon';
@autobind
export default class Slider extends React.Component {
static propTypes = {
action: React.PropTypes.string,
@ -31,7 +33,7 @@ export default class Slider extends React.Component {
kind='flat'
className={style.button}
label={this.props.action}
onClick={::this.handleClick}
onClick={this.handleClick}
/>
);
}

2
components/switch/index.jsx
View File

@ -1,8 +1,10 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Ripple from '../ripple';
import style from './style';
import events from '../utils/events';
@autobind
export default class Switch extends React.Component {
static propTypes = {
checked: React.PropTypes.bool,

2
components/tabs/tab.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
@autobind
export default class Tab extends React.Component {
static propTypes = {
active: React.PropTypes.bool,

4
components/tabs/tabs.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
@autobind
export default class Tabs extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -72,7 +74,7 @@ export default class Tabs extends React.Component {
className: className,
label: tab.props.label,
key: index,
onClick: !tab.props.disabled ? ::this.onClick(index) : null
onClick: !tab.props.disabled ? this.onClick.bind(this, index) : null
});
return React.cloneElement(tab, {active: active, key: index, tabIndex: index });

2
components/time_picker/clock/face.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
@autobind
export default class Face extends React.Component {
static defaultProps = {
active: null,

10
components/time_picker/clock/hand.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import utils from '../../utils';
@autobind
export default class Hand extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -27,15 +29,15 @@ export default class Hand extends React.Component {
getMouseEventMap () {
return {
mousemove: ::this.onMouseMove,
mouseup: ::this.onMouseUp
mousemove: this.onMouseMove,
mouseup: this.onMouseUp
};
}
getTouchEventMap () {
return {
touchmove: ::this.onTouchMove,
touchend: ::this.onTouchEnd
touchmove: this.onTouchMove,
touchend: this.onTouchEnd
};
}

12
components/time_picker/clock/hours.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import autobind from 'autobind-decorator'
import utils from '../../utils';
import Face from './face';
import Hand from './hand';
@ -8,6 +9,7 @@ const innerNumbers = [12, ...utils.range(1, 12)];
const innerSpacing = 1.7;
const step = 360 / 12;
@autobind
export default class Hours extends React.Component {
static propTypes = {
format: React.PropTypes.oneOf(['24hr', 'ampm']),
@ -51,8 +53,8 @@ export default class Hours extends React.Component {
if (this.props.format === '24hr') {
return (
<Face
onTouchStart={::this.onTouchStart}
onMouseDown={::this.onMouseDown}
onTouchStart={this.onTouchStart}
onMouseDown={this.onMouseDown}
numbers={innerNumbers}
spacing={this.props.spacing}
radius={innerRadius}
@ -69,8 +71,8 @@ export default class Hours extends React.Component {
return (
<div>
<Face
onTouchStart={::this.onTouchStart}
onMouseDown={::this.onMouseDown}
onTouchStart={this.onTouchStart}
onMouseDown={this.onMouseDown}
numbers={is24hr ? outerNumbers : innerNumbers}
spacing={spacing}
radius={radius}
@ -81,7 +83,7 @@ export default class Hours extends React.Component {
<Hand ref='hand'
angle={selected * step}
length={(this.state.inner ? radius - spacing * innerSpacing : radius) - spacing}
onMove={::this.onHandMove}
onMove={this.onHandMove}
onMoved={onHandMoved}
origin={center}
step={step}

6
components/time_picker/clock/index.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import time from '../../utils/time';
import Hours from './hours';
import Minutes from './minutes';
@autobind
export default class Clock extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -82,7 +84,7 @@ export default class Clock extends React.Component {
<Hours
center={this.state.center}
format={this.props.format}
onChange={::this.onHourChange}
onChange={this.onHourChange}
radius={this.state.radius}
selected={this.state.time.getHours()}
spacing={this.state.radius * 0.18}
@ -94,7 +96,7 @@ export default class Clock extends React.Component {
return (
<Minutes
center={this.state.center}
onChange={::this.onMinuteChange}
onChange={this.onMinuteChange}
radius={this.state.radius}
selected={this.state.time.getMinutes()}
spacing={this.state.radius * 0.18}

8
components/time_picker/clock/minutes.jsx
View File

@ -1,4 +1,5 @@
import React from 'react';
import autobind from 'autobind-decorator'
import utils from '../../utils';
import style from './style';
import Face from './face';
@ -7,6 +8,7 @@ import Hand from './hand';
const minutes = utils.range(0, 60, 5);
const step = 360 / 60;
@autobind
export default class Minutes extends React.Component {
static propTypes = {
selected: React.PropTypes.number,
@ -34,8 +36,8 @@ export default class Minutes extends React.Component {
return (
<div>
<Face
onTouchStart={::this.onTouchStart}
onMouseDown={::this.onMouseDown}
onTouchStart={this.onTouchStart}
onMouseDown={this.onMouseDown}
numbers={minutes}
spacing={this.props.spacing}
radius={this.props.radius}
@ -46,7 +48,7 @@ export default class Minutes extends React.Component {
className={minutes.indexOf(this.props.selected) === -1 ? style.small : ''}
angle={this.props.selected * step}
length={this.props.radius - this.props.spacing}
onMove={::this.onHandMove}
onMove={this.onHandMove}
origin={this.props.center}
step={step}
/>

8
components/time_picker/dialog.jsx
View File

@ -1,9 +1,11 @@
import React from 'react';
import autobind from 'autobind-decorator'
import style from './style';
import time from '../utils/time';
import Clock from './clock';
import Dialog from '../dialog';
@autobind
export default class TimePickerDialog extends React.Component {
static propTypes = {
className: React.PropTypes.string,
@ -22,8 +24,8 @@ export default class TimePickerDialog extends React.Component {
display: 'hours',
time: this.props.initialTime,
actions: [
{ label: 'Cancel', className: style.button, onClick: ::this.onTimeCancel },
{ label: 'Ok', className: style.button, onClick: ::this.onTimeSelected }
{ label: 'Cancel', className: style.button, onClick: this.onTimeCancel },
{ label: 'Ok', className: style.button, onClick: this.onTimeSelected }
]
};
@ -98,7 +100,7 @@ export default class TimePickerDialog extends React.Component {
display={this.state.display}
format={this.props.format}
initialTime={this.props.initialTime}
onChange={::this.onClockChange}
onChange={this.onClockChange}
/>
</Dialog>
);

2
components/time_picker/index.jsx
View File

@ -1,10 +1,12 @@
import React from 'react';
import autobind from 'autobind-decorator'
import time from '../utils/time';
import style from './style';
import events from '../utils/events';
import Input from '../input';
import TimeDialog from './dialog';
@autobind
export default class TimePicker extends React.Component {
static propTypes = {
format: React.PropTypes.oneOf(['24hr', 'ampm']),

1
package.json
View File

@ -41,6 +41,7 @@
],
"license": "MIT",
"dependencies": {
"autobind-decorator": "^1.3.2",
"react": "^0.14",
"react-addons-css-transition-group": "^0.14.0",
"react-dom": "^0.14.0"

6
spec/components/autocomplete.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Autocomplete from '../../components/autocomplete';
@autobind
export default class AutocompleteTest extends React.Component {
state = {
countries: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
@ -29,7 +31,7 @@ export default class AutocompleteTest extends React.Component {
<Autocomplete
ref="autocomplete_multiple"
label="Choose a country"
onChange={::this.onAutocompleteValues}
onChange={this.onAutocompleteValues}
placeholder="Elements is up to you..."
dataSource={this.state.countries}
value={countries_selected}/>
@ -37,7 +39,7 @@ export default class AutocompleteTest extends React.Component {
<Autocomplete
ref="autocomplete_simple"
multiple={false}
onChange={::this.onAutocompleteValues}
onChange={this.onAutocompleteValues}
dataSource={this.state.countries_obj}
value={countries_obj_selected}/>
</section>

10
spec/components/card.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Card from '../../components/card';
@autobind
export default class CardTest extends React.Component {
onClick () {
console.log('onClick', arguments);
@ -13,8 +15,8 @@ export default class CardTest extends React.Component {
render () {
const text = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
const actions = [
{ label: 'Save', icon: 'add', className: 'flat accent', onClick: ::this.onActionClick },
{ label: 'Close', className: 'flat', onClick: ::this.onActionClick }];
{ label: 'Save', icon: 'add', className: 'flat accent', onClick: this.onActionClick },
{ label: 'Close', className: 'flat', onClick: this.onActionClick }];
return (
<section>
@ -27,8 +29,8 @@ export default class CardTest extends React.Component {
<Card title='Default Card with text and image' text={text} image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
<Card title='Default Card with text, image and color' text={text} color='#e91e63' image='https://avatars2.githubusercontent.com/u/559654?v=3&s=460' />
<Card title='Default Card with text, image and color' text={text} color='#00bcd4' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
<Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={::this.onClick} />
<Card type='wide' title='Wide Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={::this.onClick} loading />
<Card title='Default Card with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} />
<Card type='wide' title='Wide Card loading with text, color and onClick event' text={text} color='#e91e63' onClick={this.onClick} loading />
<Card type='image' title='javivelasco.jpg' image='https://avatars2.githubusercontent.com/u/1634922?v=3&s=460' />
<Card type='event' title='Featured event: May 24, 2016 7-11pm' color='#00bcd4' />
</section>

2
spec/components/checkbox.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Checkbox from '../../components/checkbox';
@autobind
export default class CheckboxTest extends React.Component {
handleChange (event, instance) {
console.log('Changed!', instance.getValue());

8
spec/components/dialog.jsx
View File

@ -1,13 +1,15 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Button from '../../components/button';
import Dialog from '../../components/dialog';
@autobind
export default class DialogTest extends React.Component {
state = {
title: 'Use Google\'s location service?',
actions: [
{ label: 'Disagree', type: 'flat', className: 'primary', onClick: ::this.onClose },
{ label: 'Agree', type: 'flat', className: 'primary', onClick: ::this.onClose }]
{ label: 'Disagree', type: 'flat', className: 'primary', onClick: this.onClose },
{ label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose }]
};
onClose () {
@ -23,7 +25,7 @@ export default class DialogTest extends React.Component {
<section>
<h5>Dialog</h5>
<p>lorem ipsum...</p>
<Button kind='raised' label='Show Dialog' onClick={::this.onShow} />
<Button kind='raised' label='Show Dialog' onClick={this.onShow} />
<Dialog ref='dialog' type='small' title={this.state.title} actions={this.state.actions}>
<p>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</p>
</Dialog>

8
spec/components/drawer.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Button from '../../components/button';
import Drawer from '../../components/drawer';
@autobind
export default class DrawerTest extends React.Component {
onClick (ref, method) {
this.refs[ref][method]();
@ -20,12 +22,12 @@ export default class DrawerTest extends React.Component {
</Drawer>
<Drawer ref='right' type='right'>
<Button label='Close' onClick={::this.onClick('right', 'hide')} />
<Button label='Close' onClick={this.onClick.bind(this, 'right', 'hide')} />
</Drawer>
<nav>
<Button accent label='Drawer left hideable' kind='raised' onClick={::this.onClick('left', 'show')} />
<Button primary label='Drawer right' kind='raised' onClick={::this.onClick('right', 'show')} />
<Button accent label='Drawer left hideable' kind='raised' onClick={this.onClick.bind(this, 'left', 'show')} />
<Button primary label='Drawer right' kind='raised' onClick={this.onClick.bind(this, 'right', 'show')} />
</nav>
</section>
);

10
spec/components/dropdown.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Dropdown from '../../components/dropdown';
@autobind
export default class DropdownTest extends React.Component {
state = {
countries: [
@ -41,10 +43,10 @@ export default class DropdownTest extends React.Component {
<section>
<h5>Dropdown</h5>
<p>lorem ipsum...</p>
<Dropdown dataSource={this.state.countries} label="Countries" onChange={::this.onChange}/>
<Dropdown dataSource={this.state.countries} disabled={true} onChange={::this.onChange}/>
<Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={::this.onChange}/>
<Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={::this.onChange}/>
<Dropdown dataSource={this.state.countries} label="Countries" onChange={this.onChange}/>
<Dropdown dataSource={this.state.countries} disabled={true} onChange={this.onChange}/>
<Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={this.onChange}/>
<Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.onChange}/>
</section>
);
}

10
spec/components/form.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Form from '../../components/form';
@autobind
export default class FormTest extends React.Component {
state = {
attributes: [
@ -33,10 +35,10 @@ export default class FormTest extends React.Component {
<Form
attributes={this.state.attributes}
storage="example-form"
onChange={::this.onEvent('change')}
onError={::this.onEvent('error')}
onValid={::this.onEvent('valid')}
onSubmit={::this.onEvent('submit')} />
onChange={this.onEvent.bind(this, 'change')}
onError={this.onEvent.bind(this, 'error')}
onValid={this.onEvent.bind(this, 'valid')}
onSubmit={this.onEvent.bind(this, 'submit')} />
</section>
);
}

2
spec/components/icon_menu.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import { MenuItem, IconMenu } from '../../components/menu';
@autobind
export default class IconMenuTest extends React.Component {
handleShow () {
console.log('Showing menu...');

2
spec/components/menu.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import { Menu, MenuItem, MenuDivider } from '../../components/menu';
@autobind
export default class MenuTest extends React.Component {
handleSelect (e, instance) {
console.log('Menu selection changed!!, now its', instance.getValue());

2
spec/components/navigation.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Navigation from '../../components/navigation';
@autobind
export default class NavigationTest extends React.Component {
state = {
routes: [

2
spec/components/progress.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import ProgressBar from '../../components/progress_bar';
@autobind
export default class ProgressBarTest extends React.Component {
state = {
progress: 0,

2
spec/components/radio.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import { RadioGroup, RadioButton } from '../../components/radio';
@autobind
export default class RadioGroupTest extends React.Component {
handleChange (event, instance) {
console.log('Changed!', { comic: instance.getValue()});

6
spec/components/snackbar.jsx
View File

@ -1,7 +1,9 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Button from '../../components/button';
import Snackbar from '../../components/snackbar';
@autobind
export default class SnackbarTest extends React.Component {
handleClick (event, snackbar) {
console.log('handleClick', event, snackbar);
@ -16,13 +18,13 @@ export default class SnackbarTest extends React.Component {
<section>
<h5>Snackbars & Toasts</h5>
<p>lorem ipsum...</p>
<Button label='Show snackbar' kind='raised' onClick={::this.handleSnackbar} />
<Button label='Show snackbar' kind='raised' onClick={this.handleSnackbar} />
<Snackbar
ref='snackbar'
action='Dismiss'
icon='question-answer'
label='Snackbar action cancel'
onClick={::this.handleClick}
onClick={this.handleClick}
type='cancel'
/>
</section>

2
spec/components/switch.jsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import autobind from 'autobind-decorator'
import Switch from '../../components/switch';
@autobind
export default class SwitchTest extends React.Component {
onChange (event, instance) {
console.log('[Switch] Changed', instance.getValue());