Babel to stage 2 and remove decorators
Javi Velasco
parent
ec6e72bbd9
commit
7c43f935a1
4
.babelrc
4
.babelrc
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"stage": 0,
|
||||
"loose": "all"
|
||||
"stage": 2,
|
||||
"optional": ["es7.classProperties"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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';
|
||||
import utils from '../utils';
|
||||
|
||||
@autobind
|
||||
export default class Autocomplete extends React.Component {
|
||||
class Autocomplete extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
dataSource: React.PropTypes.any,
|
||||
|
|
@ -51,14 +49,14 @@ export default class Autocomplete extends React.Component {
|
|||
this.refs.input.setValue(state.query);
|
||||
}
|
||||
|
||||
handleQueryChange () {
|
||||
handleQueryChange = () => {
|
||||
const query = this.refs.input.getValue();
|
||||
if (this.state.query !== query) {
|
||||
this.setState({query: query});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleKeyPress (event) {
|
||||
handleKeyPress = (event) => {
|
||||
if (event.which === 13 && this.state.active) {
|
||||
this._selectOption(this.state.active);
|
||||
}
|
||||
|
|
@ -70,9 +68,9 @@ export default class Autocomplete extends React.Component {
|
|||
if (index >= suggestionsKeys.length) index = 0;
|
||||
this.setState({active: suggestionsKeys[index]});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleFocus () {
|
||||
handleFocus = () => {
|
||||
let client = event.target.getBoundingClientRect();
|
||||
let screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||
|
||||
|
|
@ -82,23 +80,79 @@ export default class Autocomplete extends React.Component {
|
|||
up: client.top > ((screen_height / 2) + client.height),
|
||||
focus: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleBlur () {
|
||||
handleBlur = () => {
|
||||
if (this.state.focus) this.setState({focus: false});
|
||||
}
|
||||
};
|
||||
|
||||
handleHover (event) {
|
||||
handleHover = (event) => {
|
||||
this.setState({active: event.target.getAttribute('id')});
|
||||
}
|
||||
};
|
||||
|
||||
handleSelect (event) {
|
||||
handleSelect = (event) => {
|
||||
utils.events.pauseEvent(event);
|
||||
this._selectOption(event.target.getAttribute('id'));
|
||||
};
|
||||
|
||||
handleUnselect = (event) => {
|
||||
this._unselectOption(event.target.getAttribute('id'));
|
||||
};
|
||||
|
||||
renderSelected () {
|
||||
if (this.props.multiple) {
|
||||
return (
|
||||
<ul className={style.values} onClick={this.handleUnselect}>
|
||||
{[...this.state.values].map(([key, value]) => {
|
||||
return (<li className={style.value} key={key} id={key}>{value}</li>);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
handleUnselect (event) {
|
||||
this._unselectOption(event.target.getAttribute('id'));
|
||||
renderSuggestions () {
|
||||
return [...this._getSuggestions()].map(([key, value]) => {
|
||||
let className = style.suggestion;
|
||||
if (this.state.active === key) className += ` ${style.active}`;
|
||||
return <li id={key} key={key} className={className}>{value}</li>;
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
let className = style.root;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
if (this.state.focus) className += ` ${style.focus}`;
|
||||
|
||||
let suggestionsClassName = style.suggestions;
|
||||
if (this.state.up) suggestionsClassName += ` ${style.up}`;
|
||||
let suggestionsStyle = {width: this.state.width};
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='autocomplete' className={className}>
|
||||
{this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
|
||||
{this.renderSelected()}
|
||||
<Input
|
||||
ref='input'
|
||||
{...this.props}
|
||||
label=''
|
||||
value=''
|
||||
className={style.input}
|
||||
onBlur={this.handleBlur}
|
||||
onChange={this.handleQueryChange}
|
||||
onFocus={this.handleFocus}
|
||||
onKeyUp={this.handleKeyPress} />
|
||||
<ul
|
||||
ref='suggestions'
|
||||
className={suggestionsClassName}
|
||||
onMouseDown={this.handleSelect}
|
||||
onMouseOver={this.handleHover}
|
||||
style={suggestionsStyle}
|
||||
>
|
||||
{this.renderSuggestions()}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
_indexDataSource (data = {}) {
|
||||
|
|
@ -161,60 +215,6 @@ export default class Autocomplete extends React.Component {
|
|||
setError (data) {
|
||||
this.input.setError(data);
|
||||
}
|
||||
|
||||
renderSelected () {
|
||||
if (this.props.multiple) {
|
||||
return (
|
||||
<ul className={style.values} onClick={this.handleUnselect}>
|
||||
{[...this.state.values].map(([key, value]) => {
|
||||
return (<li className={style.value} key={key} id={key}>{value}</li>);
|
||||
})}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
renderSuggestions () {
|
||||
return [...this._getSuggestions()].map(([key, value]) => {
|
||||
let className = style.suggestion;
|
||||
if (this.state.active === key) className += ` ${style.active}`;
|
||||
return <li id={key} key={key} className={className}>{value}</li>;
|
||||
});
|
||||
}
|
||||
|
||||
render () {
|
||||
let className = style.root;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
if (this.state.focus) className += ` ${style.focus}`;
|
||||
|
||||
let suggestionsClassName = style.suggestions;
|
||||
if (this.state.up) suggestionsClassName += ` ${style.up}`;
|
||||
let suggestionsStyle = {width: this.state.width};
|
||||
|
||||
return (
|
||||
<div data-react-toolbox='autocomplete' className={className}>
|
||||
{this.props.label ? <label className={style.label}>{this.props.label}</label> : ''}
|
||||
{this.renderSelected()}
|
||||
<Input
|
||||
ref='input'
|
||||
{...this.props}
|
||||
label=''
|
||||
value=''
|
||||
className={style.input}
|
||||
onBlur={this.handleBlur}
|
||||
onChange={this.handleQueryChange}
|
||||
onFocus={this.handleFocus}
|
||||
onKeyUp={this.handleKeyPress} />
|
||||
<ul
|
||||
ref='suggestions'
|
||||
className={suggestionsClassName}
|
||||
onMouseDown={this.handleSelect}
|
||||
onMouseOver={this.handleHover}
|
||||
style={suggestionsStyle}
|
||||
>
|
||||
{this.renderSuggestions()}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Autocomplete;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 {
|
||||
class Button extends React.Component {
|
||||
static propTypes = {
|
||||
accent: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -31,7 +29,7 @@ export default class Button extends React.Component {
|
|||
ripple: true
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
events.pauseEvent(event);
|
||||
this.refs.ripple.start(event);
|
||||
}
|
||||
|
|
@ -60,3 +58,5 @@ export default class Button extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Button;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
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 {
|
||||
class Card extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
color: React.PropTypes.string,
|
||||
|
|
@ -23,17 +21,13 @@ export default class Card extends React.Component {
|
|||
type: 'default'
|
||||
};
|
||||
|
||||
state = {
|
||||
loading: this.props.loading
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (this.props.onClick) {
|
||||
event.preventDefault();
|
||||
this.refs.ripple.start(event);
|
||||
this.props.onClick(event, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
renderTitle () {
|
||||
let styleFigure = {}, styleOverflow = {};
|
||||
|
|
@ -68,7 +62,7 @@ export default class Card extends React.Component {
|
|||
if (this.props.onClick) className += ` ${style.touch}`;
|
||||
if (this.props.image || this.props.color) className += ` ${style.contrast}`;
|
||||
if (this.props.color) className += ` ${style.color}`;
|
||||
if (this.state.loading) className += ` ${style.loading}`;
|
||||
if (this.props.loading) className += ` ${style.loading}`;
|
||||
if (this.props.className) className += ` ${this.props.className}`;
|
||||
|
||||
return (
|
||||
|
|
@ -83,14 +77,12 @@ export default class Card extends React.Component {
|
|||
<Ripple
|
||||
ref='ripple'
|
||||
className={style.ripple}
|
||||
loading={this.state.loading}
|
||||
loading={this.props.loading}
|
||||
spread={2.5}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
loading (value) {
|
||||
this.setState({loading: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default Card;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Ripple from '../ripple';
|
||||
import style from './style';
|
||||
import events from '../utils/events';
|
||||
import style from './style';
|
||||
|
||||
@autobind
|
||||
export default class Checkbox extends React.Component {
|
||||
class Checkbox extends React.Component {
|
||||
static propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -27,31 +25,31 @@ export default class Checkbox extends React.Component {
|
|||
checked: this.props.checked
|
||||
};
|
||||
|
||||
handleChange (event) {
|
||||
handleChange = (event) => {
|
||||
this.setState({checked: !this.state.checked}, () => {
|
||||
if (this.props.onChange) this.props.onChange(event, this);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
events.pauseEvent(event);
|
||||
if (!this.props.disabled) this.handleChange(event);
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (!this.props.disabled) this.refs.ripple.start(event);
|
||||
}
|
||||
};
|
||||
|
||||
handleInputClick (event) {
|
||||
handleInputClick = (event) => {
|
||||
events.pauseEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let fieldClassName = style.field;
|
||||
let checkboxClassName = style.check;
|
||||
if (this.state.checked) checkboxClassName += ` ${style.checked}`;
|
||||
if (this.props.disabled) fieldClassName += ` ${style.disabled}`;
|
||||
if (this.props.className) fieldClassName += ` ${this.props.className}`;
|
||||
if (this.state.checked) checkboxClassName += ` ${style.checked}`;
|
||||
|
||||
return (
|
||||
<label
|
||||
|
|
@ -63,8 +61,8 @@ export default class Checkbox extends React.Component {
|
|||
{...this.props}
|
||||
ref='input'
|
||||
type='checkbox'
|
||||
checked={this.state.checked}
|
||||
className={style.input}
|
||||
checked={this.state.checked}
|
||||
onChange={this.handleChange}
|
||||
onClick={this.handleInputClick}
|
||||
/>
|
||||
|
|
@ -92,3 +90,5 @@ export default class Checkbox extends React.Component {
|
|||
this.setState({checked: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default Checkbox;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class Day extends React.Component {
|
||||
static propTypes = {
|
||||
day: React.PropTypes.number,
|
||||
onClick: React.PropTypes.func,
|
||||
|
|
@ -28,10 +26,15 @@ export default class Day extends React.Component {
|
|||
}
|
||||
|
||||
render () {
|
||||
const className = this.isSelected() ? `${style.day} ${style.active}` : style.day;
|
||||
return (
|
||||
<div className={this.isSelected() ? `${style.day} ${style.active}` : style.day} style={this.dayStyle()}>
|
||||
<span onClick={this.props.onClick}>{this.props.day}</span>
|
||||
<div className={className} style={this.dayStyle()}>
|
||||
<span onClick={this.props.onClick}>
|
||||
{this.props.day}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Day;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
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';
|
||||
import Ripple from '../../ripple';
|
||||
import utils from '../../utils';
|
||||
import Month from './month';
|
||||
import utils from '../../utils';
|
||||
import style from './style';
|
||||
|
||||
@autobind
|
||||
export default class Calendar extends React.Component {
|
||||
class Calendar extends React.Component {
|
||||
static propTypes = {
|
||||
display: React.PropTypes.oneOf(['months', 'years']),
|
||||
onChange: React.PropTypes.func,
|
||||
|
|
@ -33,18 +31,6 @@ export default class Calendar extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onDayClick (day) {
|
||||
let newDate = utils.time.setDay(this.state.viewDate, day);
|
||||
this.setState({selectedDate: newDate});
|
||||
if (this.props.onChange) this.props.onChange(newDate);
|
||||
}
|
||||
|
||||
onYearClick (year) {
|
||||
let newDate = utils.time.setYear(this.state.selectedDate, year);
|
||||
this.setState({selectedDate: newDate, viewDate: newDate});
|
||||
if (this.props.onChange) this.props.onChange(newDate);
|
||||
}
|
||||
|
||||
scrollToActive () {
|
||||
this.refs.years.scrollTop =
|
||||
this.refs.activeYear.offsetTop -
|
||||
|
|
@ -52,15 +38,27 @@ export default class Calendar extends React.Component {
|
|||
this.refs.activeYear.offsetHeight / 2;
|
||||
}
|
||||
|
||||
incrementViewMonth () {
|
||||
handleDayClick = (day) => {
|
||||
let newDate = utils.time.setDay(this.state.viewDate, day);
|
||||
this.setState({selectedDate: newDate});
|
||||
if (this.props.onChange) this.props.onChange(newDate);
|
||||
};
|
||||
|
||||
handleYearClick = (year) => {
|
||||
let newDate = utils.time.setYear(this.state.selectedDate, year);
|
||||
this.setState({selectedDate: newDate, viewDate: newDate});
|
||||
if (this.props.onChange) this.props.onChange(newDate);
|
||||
};
|
||||
|
||||
incrementViewMonth = () => {
|
||||
this.refs.rippleRight.start(event);
|
||||
this.setState({
|
||||
direction: 'right',
|
||||
viewDate: utils.time.addMonths(this.state.viewDate, 1)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
decrementViewMonth () {
|
||||
decrementViewMonth = () => {
|
||||
this.refs.rippleLeft.start(event);
|
||||
this.setState({
|
||||
direction: 'left',
|
||||
|
|
@ -72,20 +70,20 @@ export default class Calendar extends React.Component {
|
|||
let props = {
|
||||
className: year === this.state.viewDate.getFullYear() ? style.active : '',
|
||||
key: year,
|
||||
onClick: this.onYearClick.bind(this, year)
|
||||
onClick: this.handleYearClick.bind(this, year)
|
||||
};
|
||||
|
||||
if (year === this.state.viewDate.getFullYear()) {
|
||||
props.ref = 'activeYear';
|
||||
}
|
||||
|
||||
return (<li {...props}>{ year }</li>);
|
||||
return <li {...props}>{ year }</li>;
|
||||
}
|
||||
|
||||
renderYears () {
|
||||
return (
|
||||
<ul ref="years" className={style.years}>
|
||||
{ utils.range(1900, 2100).map(i => { return this.renderYear(i); })}
|
||||
{ utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
|
@ -105,7 +103,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.handleDayClick} />
|
||||
</CSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -119,3 +117,5 @@ export default class Calendar extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
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 {
|
||||
class Month extends React.Component {
|
||||
static propTypes = {
|
||||
onDayClick: React.PropTypes.func,
|
||||
selectedDate: React.PropTypes.object,
|
||||
viewDate: React.PropTypes.object
|
||||
};
|
||||
|
||||
handleDayClick (day) {
|
||||
handleDayClick = (day) => {
|
||||
if (this.props.onDayClick) this.props.onDayClick(day);
|
||||
}
|
||||
};
|
||||
|
||||
renderWeeks () {
|
||||
return utils.range(0, 7).map(i => {
|
||||
|
|
@ -40,7 +38,8 @@ export default class Month extends React.Component {
|
|||
return (
|
||||
<div className={style.month}>
|
||||
<span className={style.title}>
|
||||
{ utils.time.getFullMonth(this.props.viewDate)} {this.props.viewDate.getFullYear() }
|
||||
{ utils.time.getFullMonth(this.props.viewDate)}
|
||||
{ this.props.viewDate.getFullYear() }
|
||||
</span>
|
||||
<div className={style.week}>{ this.renderWeeks() }</div>
|
||||
<div className={style.days}>{ this.renderDays() }</div>
|
||||
|
|
@ -48,3 +47,5 @@ export default class Month extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Month;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 {
|
||||
class CalendarDialog extends React.Component {
|
||||
static propTypes = {
|
||||
initialDate: React.PropTypes.object,
|
||||
onDateSelected: React.PropTypes.func
|
||||
|
|
@ -20,14 +18,22 @@ 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.bind(this) },
|
||||
{ label: 'Ok', className: style.button, onClick: this.onDateSelected.bind(this) }
|
||||
]
|
||||
};
|
||||
|
||||
onCalendarChange (date) {
|
||||
handleCalendarChange = (date) => {
|
||||
this.setState({date: date, display: 'months'});
|
||||
}
|
||||
};
|
||||
|
||||
displayMonths = () => {
|
||||
this.setState({display: 'months'});
|
||||
};
|
||||
|
||||
displayYears = () => {
|
||||
this.setState({display: 'years'});
|
||||
};
|
||||
|
||||
onDateCancel () {
|
||||
this.refs.dialog.hide();
|
||||
|
|
@ -42,14 +48,6 @@ export default class CalendarDialog extends React.Component {
|
|||
this.refs.dialog.show();
|
||||
}
|
||||
|
||||
displayMonths () {
|
||||
this.setState({display: 'months'});
|
||||
}
|
||||
|
||||
displayYears () {
|
||||
this.setState({display: 'years'});
|
||||
}
|
||||
|
||||
render () {
|
||||
const display = `display-${this.state.display}`;
|
||||
const headerClassName = `${style.header} ${style[display]}`;
|
||||
|
|
@ -73,10 +71,12 @@ export default class CalendarDialog extends React.Component {
|
|||
<Calendar
|
||||
ref="calendar"
|
||||
display={this.state.display}
|
||||
onChange={this.onCalendarChange}
|
||||
onChange={this.handleCalendarChange}
|
||||
selectedDate={this.state.date} />
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CalendarDialog;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
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';
|
||||
import events from '../utils/events';
|
||||
import time from '../utils/time';
|
||||
import style from './style';
|
||||
|
||||
@autobind
|
||||
export default class DatePicker extends React.Component {
|
||||
class DatePicker extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
value: React.PropTypes.object
|
||||
|
|
@ -21,15 +19,15 @@ export default class DatePicker extends React.Component {
|
|||
value: this.props.value
|
||||
};
|
||||
|
||||
openCalendarDialog (event) {
|
||||
handleMouseDown = (event) => {
|
||||
events.pauseEvent(event);
|
||||
this.refs.dialog.show();
|
||||
}
|
||||
};
|
||||
|
||||
onDateSelected (value) {
|
||||
handleDateSelected = (value) => {
|
||||
this.refs.input.setValue(this.formatDate(value));
|
||||
this.setState({value: value});
|
||||
}
|
||||
};
|
||||
|
||||
formatDate (date) {
|
||||
return `${date.getDate()} ${time.getFullMonth(date)} ${date.getFullYear()}`;
|
||||
|
|
@ -43,14 +41,14 @@ export default class DatePicker extends React.Component {
|
|||
type='text'
|
||||
readOnly={true}
|
||||
className={style.input}
|
||||
onMouseDown={this.openCalendarDialog}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
placeholder='Pick up date'
|
||||
value={this.state.value ? this.formatDate(this.state.value) : null}
|
||||
/>
|
||||
<CalendarDialog
|
||||
ref='dialog'
|
||||
initialDate={this.state.value}
|
||||
onDateSelected={this.onDateSelected}
|
||||
onDateSelected={this.handleDateSelected}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -64,3 +62,5 @@ export default class DatePicker extends React.Component {
|
|||
this.setState({value: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default DatePicker;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class Dialog extends React.Component {
|
||||
static propTypes = {
|
||||
actions: React.PropTypes.array,
|
||||
active: React.PropTypes.bool,
|
||||
|
|
@ -59,3 +57,5 @@ export default class Dialog extends React.Component {
|
|||
this.setState({active: false});
|
||||
}
|
||||
}
|
||||
|
||||
export default Dialog;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import style from './style.scss';
|
||||
|
||||
@autobind
|
||||
export default class Drawer extends React.Component {
|
||||
class Drawer extends React.Component {
|
||||
static propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -20,11 +18,11 @@ export default class Drawer extends React.Component {
|
|||
active: this.props.active
|
||||
};
|
||||
|
||||
handleOverlayClick () {
|
||||
handleOverlayClick = () => {
|
||||
if (this.props.hideable) {
|
||||
this.setState({active: false});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let className = `${style.drawer} ${style[this.props.type]}`;
|
||||
|
|
@ -49,3 +47,5 @@ export default class Drawer extends React.Component {
|
|||
this.setState({active: false});
|
||||
}
|
||||
}
|
||||
|
||||
export default Drawer;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Ripple from '../ripple';
|
||||
import style from './style';
|
||||
|
||||
function _selectValue (value, dataSource) {
|
||||
const _selectValue = (value, dataSource) => {
|
||||
let item;
|
||||
if (value) {
|
||||
for (item of dataSource) {
|
||||
|
|
@ -14,10 +13,9 @@ function _selectValue (value, dataSource) {
|
|||
} else {
|
||||
return dataSource[0];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@autobind
|
||||
export default class Dropdown extends React.Component {
|
||||
class Dropdown extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
dataSource: React.PropTypes.array,
|
||||
|
|
@ -52,7 +50,7 @@ export default class Dropdown extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
let client = event.target.getBoundingClientRect();
|
||||
let screen_height = window.innerHeight || document.documentElement.offsetHeight;
|
||||
|
||||
|
|
@ -60,22 +58,19 @@ export default class Dropdown extends React.Component {
|
|||
active: true,
|
||||
up: client.top > ((screen_height / 2) + client.height)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleClickValue (id) {
|
||||
handleClickValue = (id) => {
|
||||
if (!this.props.disabled) {
|
||||
let value = id.toString();
|
||||
for (let item of this.props.dataSource) {
|
||||
if (item.value.toString() === value) {
|
||||
this.setState({
|
||||
active: false,
|
||||
selected: item
|
||||
});
|
||||
this.setState({active: false, selected: item});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
renderValues () {
|
||||
let items = this.props.dataSource.map((item, index) => {
|
||||
|
|
@ -127,3 +122,5 @@ export default class Dropdown extends React.Component {
|
|||
this.setState({selected: data});
|
||||
}
|
||||
}
|
||||
|
||||
export default Dropdown;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import style from './style';
|
||||
import Autocomplete from '../autocomplete';
|
||||
import Button from '../button';
|
||||
|
|
@ -12,8 +11,7 @@ import Slider from '../slider';
|
|||
import Switch from '../switch';
|
||||
import TimePicker from '../time_picker';
|
||||
|
||||
@autobind
|
||||
export default class Form extends React.Component {
|
||||
class Form extends React.Component {
|
||||
static propTypes = {
|
||||
attributes: React.PropTypes.array,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -41,14 +39,14 @@ export default class Form extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onSubmit (event) {
|
||||
onSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
if (this.props.onSubmit) {
|
||||
this.props.onSubmit(event, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onChange (event) {
|
||||
onChange = (event) => {
|
||||
let is_valid = true;
|
||||
let value = this.getValue();
|
||||
for (let attr of this.state.attributes) {
|
||||
|
|
@ -70,7 +68,7 @@ export default class Form extends React.Component {
|
|||
if (this.refs.submit) this.refs.submit.getDOMNode().setAttribute('disabled', true);
|
||||
if (this.props.onError) this.props.onError(event, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let className = `${style.root} ${this.props.className}`;
|
||||
|
|
@ -164,3 +162,5 @@ export default class Form extends React.Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Form;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class Input extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
|
|
@ -35,11 +33,11 @@ export default class Input extends React.Component {
|
|||
value: this.props.value
|
||||
};
|
||||
|
||||
onChange (event) {
|
||||
onChange = (event) => {
|
||||
this.setState({value: event.target.value}, () => {
|
||||
if (this.props.onChange) this.props.onChange(event, this);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderInput () {
|
||||
let className = style.input;
|
||||
|
|
@ -105,3 +103,5 @@ export default class Input extends React.Component {
|
|||
this.setState({value: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default Input;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||
import style from './style';
|
||||
import FontIcon from '../font_icon';
|
||||
|
||||
const Link = props => {
|
||||
const Link = (props) => {
|
||||
let className = style.root;
|
||||
if (props.className) className += ` ${props.className}`;
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 {
|
||||
class ListItem extends React.Component {
|
||||
static propTypes = {
|
||||
avatar: React.PropTypes.string,
|
||||
caption: React.PropTypes.string.isRequired,
|
||||
|
|
@ -24,17 +22,17 @@ export default class ListItem extends React.Component {
|
|||
selectable: false
|
||||
};
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
if (this.props.onClick && !this.props.disabled) {
|
||||
this.props.onClick(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (this.refs.ripple && !this.props.disabled) {
|
||||
this.refs.ripple.start(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let className = style.item;
|
||||
|
|
@ -58,3 +56,5 @@ export default class ListItem extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ListItem;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class List extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
onClick: React.PropTypes.func,
|
||||
|
|
@ -41,3 +39,5 @@ export default class List extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default List;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 {
|
||||
class IconMenu extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
|
|
@ -27,16 +25,16 @@ export default class IconMenu extends React.Component {
|
|||
selectable: false
|
||||
};
|
||||
|
||||
handleButtonClick () {
|
||||
handleButtonClick = () => {
|
||||
this.refs.menu.show();
|
||||
if (this.props.onClick) this.props.onClick();
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (this.props.iconRipple) {
|
||||
this.refs.ripple.start(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let className = style.root;
|
||||
|
|
@ -66,3 +64,5 @@ export default class IconMenu extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default IconMenu;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
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';
|
||||
|
|
@ -14,8 +13,7 @@ const POSITION = {
|
|||
BOTTOM_RIGHT: 'bottom-right'
|
||||
};
|
||||
|
||||
@autobind
|
||||
export default class Menu extends React.Component {
|
||||
class Menu extends React.Component {
|
||||
static propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -84,11 +82,19 @@ export default class Menu extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleDocumentClick (event) {
|
||||
handleDocumentClick = (event) => {
|
||||
if (this.state.active && !utils.events.targetIsDescendant(event, ReactDOM.findDOMNode(this))) {
|
||||
this.setState({active: false, rippled: false});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleSelect = (item) => {
|
||||
let { value, onClick } = item.props;
|
||||
this.setState({value: value, active: false, rippled: this.props.ripple}, () => {
|
||||
if (onClick) onClick();
|
||||
if (this.props.onSelect) this.props.onSelect(value, this);
|
||||
});
|
||||
};
|
||||
|
||||
calculatePosition () {
|
||||
const {top, left, height, width} = ReactDOM.findDOMNode(this).parentNode.getBoundingClientRect();
|
||||
|
|
@ -121,14 +127,6 @@ export default class Menu extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
handleSelect (item) {
|
||||
let { value, onClick } = item.props;
|
||||
this.setState({value: value, active: false, rippled: this.props.ripple}, () => {
|
||||
if (onClick) onClick();
|
||||
if (this.props.onSelect) this.props.onSelect(value, this);
|
||||
});
|
||||
}
|
||||
|
||||
renderItems () {
|
||||
return React.Children.map(this.props.children, (item) => {
|
||||
if (item.type === MenuItem) {
|
||||
|
|
@ -172,3 +170,5 @@ export default class Menu extends React.Component {
|
|||
this.setState({active: false});
|
||||
}
|
||||
}
|
||||
|
||||
export default Menu;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
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 {
|
||||
class MenuItem extends React.Component {
|
||||
static propTypes = {
|
||||
caption: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
|
|
@ -21,17 +19,17 @@ export default class MenuItem extends React.Component {
|
|||
selected: false
|
||||
};
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
if (this.props.onClick && !this.props.disabled) {
|
||||
this.props.onClick(event, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (this.props.ripple && !this.props.disabled) {
|
||||
this.refs.ripple.start(event);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let className = style.root;
|
||||
|
|
@ -54,3 +52,5 @@ export default class MenuItem extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MenuItem;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class ProgressBar extends React.Component {
|
||||
static propTypes = {
|
||||
buffer: React.PropTypes.number,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -87,3 +85,5 @@ export default class progressBar extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ProgressBar;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
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 {
|
||||
class RadioButton extends React.Component {
|
||||
static propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -24,24 +22,24 @@ export default class RadioButton extends React.Component {
|
|||
disabled: false
|
||||
};
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
events.pauseEvent(event);
|
||||
if (!this.props.disabled) this.handleChange(event);
|
||||
}
|
||||
};
|
||||
|
||||
handleChange (event) {
|
||||
handleChange = (event) => {
|
||||
if (!this.props.checked && this.props.onChange) {
|
||||
this.props.onChange(event, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (!this.props.disabled) this.refs.ripple.start(event);
|
||||
}
|
||||
};
|
||||
|
||||
handleInputClick (event) {
|
||||
handleInputClick = (event) => {
|
||||
events.pauseEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
|
||||
|
|
@ -74,3 +72,5 @@ export default class RadioButton extends React.Component {
|
|||
this.refs.input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
export default RadioButton;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import RadioButton from './radio_button';
|
||||
|
||||
@autobind
|
||||
export default class RadioGroup extends React.Component {
|
||||
class RadioGroup extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
|
|
@ -21,11 +19,11 @@ export default class RadioGroup extends React.Component {
|
|||
value: this.props.value
|
||||
};
|
||||
|
||||
handleChange (value, event) {
|
||||
handleChange = (value, event) => {
|
||||
this.setState({value: value}, () => {
|
||||
if (this.props.onChange) this.props.onChange(event, this);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderRadioButtons () {
|
||||
return React.Children.map(this.props.children, (radio, idx) => {
|
||||
|
|
@ -59,3 +57,5 @@ export default class RadioGroup extends React.Component {
|
|||
this.setState({value: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default RadioGroup;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class Ripple extends React.Component {
|
||||
static propTypes = {
|
||||
centered: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -27,19 +25,19 @@ export default class Ripple extends React.Component {
|
|||
width: null
|
||||
};
|
||||
|
||||
start ({ pageX, pageY }) {
|
||||
document.addEventListener('mouseup', this.end);
|
||||
start = ({ pageX, pageY }) => {
|
||||
document.addEventListener('mouseup', this.handleEnd);
|
||||
const {top, left, width} = this._getDescriptor(pageX, pageY);
|
||||
this.setState({active: false, restarting: true, width: 0}, () => {
|
||||
this.refs.ripple.offsetWidth; //eslint-disable-line no-unused-expressions
|
||||
this.setState({active: true, restarting: false, top: top, left: left, width: width});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
end () {
|
||||
document.removeEventListener('mouseup', this.end);
|
||||
handleEnd = () => {
|
||||
document.removeEventListener('mouseup', this.handleEnd);
|
||||
this.setState({active: false});
|
||||
}
|
||||
};
|
||||
|
||||
_getDescriptor (pageX, pageY) {
|
||||
let { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
|
||||
|
|
@ -65,3 +63,5 @@ export default class Ripple extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Ripple;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
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 {
|
||||
class Slider extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
editable: React.PropTypes.bool,
|
||||
|
|
@ -38,12 +36,12 @@ export default class Slider extends React.Component {
|
|||
};
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('resize', this.onResize);
|
||||
this.onResize();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
this.handleResize();
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('resize', this.onResize);
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
componentDidUpdate (prevProps, prevState) {
|
||||
|
|
@ -53,76 +51,76 @@ export default class Slider extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
onResize () {
|
||||
handleResize = () => {
|
||||
const {left, right} = ReactDOM.findDOMNode(this.refs.progressbar).getBoundingClientRect();
|
||||
this.setState({sliderStart: left, sliderLength: right - left});
|
||||
}
|
||||
};
|
||||
|
||||
onSliderFocus () {
|
||||
handleSliderFocus = () => {
|
||||
utils.events.addEventsToDocument(this.getKeyboardEvents());
|
||||
}
|
||||
};
|
||||
|
||||
onSliderBlur () {
|
||||
handleSliderBlur = () => {
|
||||
utils.events.removeEventsFromDocument(this.getKeyboardEvents());
|
||||
}
|
||||
};
|
||||
|
||||
onInputChange () {
|
||||
handleInputChange = () => {
|
||||
this.setState({value: this.trimValue(this.refs.input.getValue()) });
|
||||
}
|
||||
};
|
||||
|
||||
onKeyDown (event) {
|
||||
handleKeyDown = (event) => {
|
||||
if ([13, 27].indexOf(event.keyCode) !== -1) ReactDOM.findDOMNode(this).blur();
|
||||
if (event.keyCode === 38) this.addToValue(this.props.step);
|
||||
if (event.keyCode === 40) this.addToValue(-this.props.step);
|
||||
if (event.keyCode !== 9) utils.events.pauseEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
onMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
utils.events.addEventsToDocument(this.getMouseEventMap());
|
||||
this.start(utils.events.getMousePosition(event));
|
||||
utils.events.pauseEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
onTouchStart (event) {
|
||||
handleTouchStart = (event) => {
|
||||
this.start(utils.events.getTouchPosition(event));
|
||||
utils.events.addEventsToDocument(this.getTouchEventMap());
|
||||
utils.events.pauseEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
onMouseMove (event) {
|
||||
handleMouseMove = (event) => {
|
||||
utils.events.pauseEvent(event);
|
||||
this.move(utils.events.getMousePosition(event));
|
||||
}
|
||||
};
|
||||
|
||||
onTouchMove (event) {
|
||||
handleTouchMove = (event) => {
|
||||
this.move(utils.events.getTouchPosition(event));
|
||||
}
|
||||
};
|
||||
|
||||
onMouseUp () {
|
||||
handleMouseUp = () => {
|
||||
this.end(this.getMouseEventMap());
|
||||
}
|
||||
};
|
||||
|
||||
onTouchEnd () {
|
||||
handleTouchEnd = () => {
|
||||
this.end(this.getTouchEventMap());
|
||||
}
|
||||
};
|
||||
|
||||
getMouseEventMap () {
|
||||
return {
|
||||
mousemove: this.onMouseMove,
|
||||
mouseup: this.onMouseUp
|
||||
mousemove: this.handleMouseMove,
|
||||
mouseup: this.handleMouseUp
|
||||
};
|
||||
}
|
||||
|
||||
getTouchEventMap () {
|
||||
return {
|
||||
touchmove: this.onTouchMove,
|
||||
touchend: this.onTouchEnd
|
||||
touchmove: this.handleTouchMove,
|
||||
touchend: this.handleTouchEnd
|
||||
};
|
||||
}
|
||||
|
||||
getKeyboardEvents () {
|
||||
return {
|
||||
keydown: this.onKeyDown
|
||||
keydown: this.handleKeyDown
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -189,7 +187,7 @@ export default class Slider extends React.Component {
|
|||
<Input
|
||||
ref='input'
|
||||
className={style.input}
|
||||
onChange={this.onInputChange}
|
||||
onChange={this.handleInputChange}
|
||||
value={this.valueForInput(this.state.value)} />
|
||||
);
|
||||
}
|
||||
|
|
@ -208,21 +206,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.handleSliderFocus}
|
||||
onBlur={this.handleSliderBlur} >
|
||||
|
||||
<div
|
||||
ref='slider'
|
||||
className={style.container}
|
||||
onTouchStart={this.onTouchStart}
|
||||
onMouseDown={this.onMouseDown} >
|
||||
onTouchStart={this.handleTouchStart}
|
||||
onMouseDown={this.handleMouseDown} >
|
||||
|
||||
<div
|
||||
ref='knob'
|
||||
className={style.knob}
|
||||
style={knobStyles}
|
||||
onMouseDown={this.onMouseDown}
|
||||
onTouchStart={this.onTouchStart} >
|
||||
onMouseDown={this.handleMouseDown}
|
||||
onTouchStart={this.handleTouchStart} >
|
||||
<div className={style.innerknob} data-value={parseInt(this.state.value)}></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -251,3 +249,5 @@ export default class Slider extends React.Component {
|
|||
this.setState({value: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default Slider;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
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 {
|
||||
class Slider extends React.Component {
|
||||
static propTypes = {
|
||||
action: React.PropTypes.string,
|
||||
icon: React.PropTypes.string,
|
||||
|
|
@ -19,12 +17,12 @@ export default class Slider extends React.Component {
|
|||
active: false
|
||||
};
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
this.setState({active: false});
|
||||
if (this.props.onClick) {
|
||||
this.props.onClick(event, this);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
renderButton () {
|
||||
if (this.props.action) {
|
||||
|
|
@ -53,7 +51,6 @@ export default class Slider extends React.Component {
|
|||
);
|
||||
}
|
||||
|
||||
// -- Extends
|
||||
hide () {
|
||||
this.setState({active: false});
|
||||
}
|
||||
|
|
@ -67,3 +64,5 @@ export default class Slider extends React.Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Slider;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
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 {
|
||||
class Switch extends React.Component {
|
||||
static propTypes = {
|
||||
checked: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -27,24 +25,24 @@ export default class Switch extends React.Component {
|
|||
checked: this.props.checked
|
||||
};
|
||||
|
||||
handleChange (event) {
|
||||
handleChange = (event) => {
|
||||
this.setState({checked: !this.state.checked}, () => {
|
||||
if (this.props.onChange) this.props.onChange(event, this);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleClick (event) {
|
||||
handleClick = (event) => {
|
||||
events.pauseEvent(event);
|
||||
if (!this.props.disabled) this.handleChange(event);
|
||||
}
|
||||
};
|
||||
|
||||
handleInputClick (event) {
|
||||
handleInputClick = (event) => {
|
||||
events.pauseEvent(event);
|
||||
}
|
||||
};
|
||||
|
||||
handleMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
if (!this.props.disabled) this.refs.ripple.start(event);
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
let labelClassName = style[this.props.disabled ? 'disabled' : 'field'];
|
||||
|
|
@ -92,3 +90,5 @@ export default class Switch extends React.Component {
|
|||
this.setState({checked: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default Switch;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import style from './style';
|
||||
|
||||
@autobind
|
||||
export default class Tab extends React.Component {
|
||||
class Tab extends React.Component {
|
||||
static propTypes = {
|
||||
active: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
|
|
@ -50,3 +48,5 @@ export default class Tab extends React.Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Tab;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import style from './style';
|
||||
|
||||
@autobind
|
||||
export default class Tabs extends React.Component {
|
||||
class Tabs extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
index: React.PropTypes.number.isRequired,
|
||||
|
|
@ -45,13 +43,13 @@ export default class Tabs extends React.Component {
|
|||
};
|
||||
}
|
||||
|
||||
onClick (index) {
|
||||
handleClick = (index) => {
|
||||
this.setState({
|
||||
index: index,
|
||||
pointer: this._pointerPosition(index, this.refs.navigation)
|
||||
});
|
||||
if (this.props.onChange) this.props.onChange(this);
|
||||
}
|
||||
};
|
||||
|
||||
renderLabels (labels) {
|
||||
return labels.map((props) => {
|
||||
|
|
@ -74,7 +72,7 @@ export default class Tabs extends React.Component {
|
|||
className: className,
|
||||
label: tab.props.label,
|
||||
key: index,
|
||||
onClick: !tab.props.disabled ? this.onClick.bind(this, index) : null
|
||||
onClick: !tab.props.disabled ? this.handleClick.bind(this, index) : null
|
||||
});
|
||||
|
||||
return React.cloneElement(tab, {active: active, key: index, tabIndex: index });
|
||||
|
|
@ -101,3 +99,5 @@ export default class Tabs extends React.Component {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Tabs;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import style from './style';
|
||||
|
||||
@autobind
|
||||
export default class Face extends React.Component {
|
||||
class Face extends React.Component {
|
||||
static defaultProps = {
|
||||
active: null,
|
||||
numbers: [],
|
||||
|
|
@ -49,8 +47,10 @@ export default class Face extends React.Component {
|
|||
onMouseDown={this.props.onMouseDown}
|
||||
style={this.faceStyle()}
|
||||
>
|
||||
{ this.props.numbers.map(this.renderNumber)}
|
||||
{ this.props.numbers.map(this.renderNumber.bind(this))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Face;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
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 {
|
||||
class Hand extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
angle: React.PropTypes.number,
|
||||
|
|
@ -29,33 +27,33 @@ export default class Hand extends React.Component {
|
|||
|
||||
getMouseEventMap () {
|
||||
return {
|
||||
mousemove: this.onMouseMove,
|
||||
mouseup: this.onMouseUp
|
||||
mousemove: this.handleMouseMove,
|
||||
mouseup: this.handleMouseUp
|
||||
};
|
||||
}
|
||||
|
||||
getTouchEventMap () {
|
||||
return {
|
||||
touchmove: this.onTouchMove,
|
||||
touchend: this.onTouchEnd
|
||||
touchmove: this.handleTouchMove,
|
||||
touchend: this.handleTouchEnd
|
||||
};
|
||||
}
|
||||
|
||||
onMouseMove (event) {
|
||||
handleMouseMove = (event) => {
|
||||
this.move(utils.events.getMousePosition(event));
|
||||
}
|
||||
};
|
||||
|
||||
onTouchMove (event) {
|
||||
handleTouchMove = (event) => {
|
||||
this.move(utils.events.getTouchPosition(event));
|
||||
}
|
||||
};
|
||||
|
||||
onMouseUp () {
|
||||
handleMouseUp = () => {
|
||||
this.end(this.getMouseEventMap());
|
||||
}
|
||||
};
|
||||
|
||||
onTouchEnd () {
|
||||
handleTouchEnd = () => {
|
||||
this.end(this.getTouchEventMap());
|
||||
}
|
||||
};
|
||||
|
||||
mouseStart (event) {
|
||||
utils.events.addEventsToDocument(this.getMouseEventMap());
|
||||
|
|
@ -107,3 +105,5 @@ export default class Hand extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Hand;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import utils from '../../utils';
|
||||
import Face from './face';
|
||||
import Hand from './hand';
|
||||
|
|
@ -9,8 +8,7 @@ const innerNumbers = [12, ...utils.range(1, 12)];
|
|||
const innerSpacing = 1.7;
|
||||
const step = 360 / 12;
|
||||
|
||||
@autobind
|
||||
export default class Hours extends React.Component {
|
||||
class Hours extends React.Component {
|
||||
static propTypes = {
|
||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
onChange: React.PropTypes.func,
|
||||
|
|
@ -22,7 +20,7 @@ export default class Hours extends React.Component {
|
|||
inner: this.props.format === '24hr' && this.props.selected > 0 && this.props.selected <= 12
|
||||
};
|
||||
|
||||
onHandMove (degrees, radius) {
|
||||
handleHandMove = (degrees, radius) => {
|
||||
let currentInner = radius < this.props.radius - this.props.spacing * innerSpacing;
|
||||
if (this.props.format === '24hr' && this.state.inner !== currentInner) {
|
||||
this.setState({inner: currentInner}, () => {
|
||||
|
|
@ -31,15 +29,15 @@ export default class Hours extends React.Component {
|
|||
} else {
|
||||
this.props.onChange(this.valueFromDegrees(degrees));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
this.refs.hand.mouseStart(event);
|
||||
}
|
||||
};
|
||||
|
||||
onTouchStart (event) {
|
||||
handleTouchStart = (event) => {
|
||||
this.refs.hand.touchStart(event);
|
||||
}
|
||||
};
|
||||
|
||||
valueFromDegrees (degrees) {
|
||||
if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
|
||||
|
|
@ -53,8 +51,8 @@ export default class Hours extends React.Component {
|
|||
if (this.props.format === '24hr') {
|
||||
return (
|
||||
<Face
|
||||
onTouchStart={this.onTouchStart}
|
||||
onMouseDown={this.onMouseDown}
|
||||
onTouchStart={this.handleTouchStart}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
numbers={innerNumbers}
|
||||
spacing={this.props.spacing}
|
||||
radius={innerRadius}
|
||||
|
|
@ -71,8 +69,8 @@ export default class Hours extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<Face
|
||||
onTouchStart={this.onTouchStart}
|
||||
onMouseDown={this.onMouseDown}
|
||||
onTouchStart={this.handleTouchStart}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
numbers={is24hr ? outerNumbers : innerNumbers}
|
||||
spacing={spacing}
|
||||
radius={radius}
|
||||
|
|
@ -83,7 +81,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.handleHandMove}
|
||||
onMoved={onHandMoved}
|
||||
origin={center}
|
||||
step={step}
|
||||
|
|
@ -92,3 +90,5 @@ export default class Hours extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Hours;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 {
|
||||
class Clock extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
display: React.PropTypes.oneOf(['hours', 'minutes']),
|
||||
|
|
@ -29,29 +27,37 @@ export default class Clock extends React.Component {
|
|||
};
|
||||
|
||||
componentDidMount () {
|
||||
window.addEventListener('resize', this.calculateShape);
|
||||
this.calculateShape();
|
||||
window.addEventListener('resize', this.handleCalculateShape);
|
||||
this.handleCalculateShape();
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('resize', this.calculateShape);
|
||||
window.removeEventListener('resize', this.handleCalculateShape);
|
||||
}
|
||||
|
||||
onHourChange (hours) {
|
||||
handleHourChange = (hours) => {
|
||||
if (this.state.time.getHours() !== hours) {
|
||||
const newTime = time.setHours(this.state.time, this.adaptHourToFormat(hours));
|
||||
this.setState({time: newTime});
|
||||
if (this.props.onChange) this.props.onChange(newTime);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMinuteChange (minutes) {
|
||||
handleMinuteChange = (minutes) => {
|
||||
if (this.state.time.getMinutes() !== minutes) {
|
||||
const newTime = time.setMinutes(this.state.time, minutes);
|
||||
this.setState({time: newTime});
|
||||
if (this.props.onChange) this.props.onChange(newTime);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
handleCalculateShape = () => {
|
||||
let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
|
||||
this.setState({
|
||||
center: { x: left + width / 2, y: top + width / 2 },
|
||||
radius: width / 2
|
||||
});
|
||||
};
|
||||
|
||||
toggleTimeMode () {
|
||||
const newTime = time.toggleTimeMode(this.state.time);
|
||||
|
|
@ -71,20 +77,12 @@ export default class Clock extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
calculateShape () {
|
||||
let { top, left, width } = this.refs.wrapper.getBoundingClientRect();
|
||||
this.setState({
|
||||
center: { x: left + width / 2, y: top + width / 2 },
|
||||
radius: width / 2
|
||||
});
|
||||
}
|
||||
|
||||
renderHours () {
|
||||
return (
|
||||
<Hours
|
||||
center={this.state.center}
|
||||
format={this.props.format}
|
||||
onChange={this.onHourChange}
|
||||
onChange={this.handleHourChange}
|
||||
radius={this.state.radius}
|
||||
selected={this.state.time.getHours()}
|
||||
spacing={this.state.radius * 0.18}
|
||||
|
|
@ -96,7 +94,7 @@ export default class Clock extends React.Component {
|
|||
return (
|
||||
<Minutes
|
||||
center={this.state.center}
|
||||
onChange={this.onMinuteChange}
|
||||
onChange={this.handleMinuteChange}
|
||||
radius={this.state.radius}
|
||||
selected={this.state.time.getMinutes()}
|
||||
spacing={this.state.radius * 0.18}
|
||||
|
|
@ -115,3 +113,5 @@ export default class Clock extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Clock;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import utils from '../../utils';
|
||||
import style from './style';
|
||||
import Face from './face';
|
||||
|
|
@ -8,8 +7,7 @@ import Hand from './hand';
|
|||
const minutes = utils.range(0, 60, 5);
|
||||
const step = 360 / 60;
|
||||
|
||||
@autobind
|
||||
export default class Minutes extends React.Component {
|
||||
class Minutes extends React.Component {
|
||||
static propTypes = {
|
||||
selected: React.PropTypes.number,
|
||||
onChange: React.PropTypes.func
|
||||
|
|
@ -20,24 +18,24 @@ export default class Minutes extends React.Component {
|
|||
onChange: null
|
||||
};
|
||||
|
||||
onHandMove (degrees) {
|
||||
handleHandMove = (degrees) => {
|
||||
this.props.onChange(degrees / step);
|
||||
}
|
||||
};
|
||||
|
||||
onMouseDown (event) {
|
||||
handleMouseDown = (event) => {
|
||||
this.refs.hand.mouseStart(event);
|
||||
}
|
||||
};
|
||||
|
||||
onTouchStart (event) {
|
||||
handleTouchStart = (event) => {
|
||||
this.refs.hand.touchStart(event);
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Face
|
||||
onTouchStart={this.onTouchStart}
|
||||
onMouseDown={this.onMouseDown}
|
||||
onTouchStart={this.handleTouchStart}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
numbers={minutes}
|
||||
spacing={this.props.spacing}
|
||||
radius={this.props.radius}
|
||||
|
|
@ -48,7 +46,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.handleHandMove}
|
||||
origin={this.props.center}
|
||||
step={step}
|
||||
/>
|
||||
|
|
@ -56,3 +54,5 @@ export default class Minutes extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Minutes;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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 {
|
||||
class TimePickerDialog extends React.Component {
|
||||
static propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
initialTime: React.PropTypes.object,
|
||||
|
|
@ -24,14 +22,26 @@ 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.bind(this) },
|
||||
{ label: 'Ok', className: style.button, onClick: this.onTimeSelected.bind(this) }
|
||||
]
|
||||
};
|
||||
|
||||
onClockChange (newTime) {
|
||||
handleClockChange = (newTime) => {
|
||||
this.setState({time: newTime});
|
||||
}
|
||||
};
|
||||
|
||||
displayMinutes = () => {
|
||||
this.setState({display: 'minutes'});
|
||||
};
|
||||
|
||||
displayHours = () => {
|
||||
this.setState({display: 'hours'});
|
||||
};
|
||||
|
||||
toggleTimeMode = () => {
|
||||
this.refs.clock.toggleTimeMode();
|
||||
};
|
||||
|
||||
onTimeCancel () {
|
||||
this.refs.dialog.hide();
|
||||
|
|
@ -42,21 +52,9 @@ export default class TimePickerDialog extends React.Component {
|
|||
this.refs.dialog.hide();
|
||||
}
|
||||
|
||||
displayMinutes () {
|
||||
this.setState({display: 'minutes'});
|
||||
}
|
||||
|
||||
displayHours () {
|
||||
this.setState({display: 'hours'});
|
||||
}
|
||||
|
||||
toggleTimeMode () {
|
||||
this.refs.clock.toggleTimeMode();
|
||||
}
|
||||
|
||||
show () {
|
||||
this.refs.dialog.show();
|
||||
setTimeout(this.refs.clock.calculateShape, 1000);
|
||||
setTimeout(this.refs.clock.handleCalculateShape, 1000);
|
||||
}
|
||||
|
||||
formatHours () {
|
||||
|
|
@ -100,9 +98,11 @@ export default class TimePickerDialog extends React.Component {
|
|||
display={this.state.display}
|
||||
format={this.props.format}
|
||||
initialTime={this.props.initialTime}
|
||||
onChange={this.onClockChange}
|
||||
onChange={this.handleClockChange}
|
||||
/>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TimePickerDialog;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
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 {
|
||||
class TimePicker extends React.Component {
|
||||
static propTypes = {
|
||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
||||
value: React.PropTypes.object
|
||||
|
|
@ -21,15 +19,15 @@ export default class TimePicker extends React.Component {
|
|||
value: this.props.value
|
||||
};
|
||||
|
||||
onTimeSelected (newTime) {
|
||||
onTimeSelected = (newTime) => {
|
||||
this.refs.input.setValue(time.formatTime(newTime, this.props.format));
|
||||
this.setState({value: newTime});
|
||||
}
|
||||
};
|
||||
|
||||
openTimeDialog (event) {
|
||||
openTimeDialog = (event) => {
|
||||
events.pauseEvent(event);
|
||||
this.refs.dialog.show();
|
||||
}
|
||||
};
|
||||
|
||||
formatTime () {
|
||||
if (this.state.value) {
|
||||
|
|
@ -67,3 +65,5 @@ export default class TimePicker extends React.Component {
|
|||
this.setState({value: value});
|
||||
}
|
||||
}
|
||||
|
||||
export default TimePicker;
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"start": "npm run build & webpack-dev-server --hot",
|
||||
"build": "webpack",
|
||||
"watch": "webpack --watch",
|
||||
"lint": "eslint ./components/**/*.jsx",
|
||||
"deploy": "NODE_ENV=production webpack -p",
|
||||
"test": "karma start",
|
||||
"test:watch": "karma start --no-single-run"
|
||||
|
|
@ -41,7 +42,6 @@
|
|||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"autobind-decorator": "^1.3.2",
|
||||
"react": "^0.14",
|
||||
"react-addons-css-transition-group": "^0.14.0",
|
||||
"react-dom": "^0.14.0"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Autocomplete from '../../components/autocomplete';
|
||||
|
||||
@autobind
|
||||
export default class AutocompleteTest extends React.Component {
|
||||
class AutocompleteTest extends React.Component {
|
||||
state = {
|
||||
countries: ['Spain', 'England', 'USA', 'Thailand', 'Tongo', 'Slovenia'],
|
||||
countries_obj: {
|
||||
|
|
@ -14,10 +12,10 @@ export default class AutocompleteTest extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
onAutocompleteValues () {
|
||||
onAutocompleteValues = () => {
|
||||
console.log(this.refs.autocomplete_multiple.getValue());
|
||||
console.log(this.refs.autocomplete_simple.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
const countries_selected = ['USA', 'Tongo'];
|
||||
|
|
@ -46,3 +44,5 @@ export default class AutocompleteTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default AutocompleteTest;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Card from '../../components/card';
|
||||
|
||||
@autobind
|
||||
export default class CardTest extends React.Component {
|
||||
onClick () {
|
||||
class CardTest extends React.Component {
|
||||
onClick = () => {
|
||||
console.log('onClick', arguments);
|
||||
}
|
||||
};
|
||||
|
||||
onActionClick () {
|
||||
console.log('onClick', arguments);
|
||||
|
|
@ -15,8 +13,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.bind(this) },
|
||||
{ label: 'Close', className: 'flat', onClick: this.onActionClick.bind(this) }];
|
||||
|
||||
return (
|
||||
<section>
|
||||
|
|
@ -37,3 +35,5 @@ export default class CardTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CardTest;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
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) {
|
||||
class CheckboxTest extends React.Component {
|
||||
handleChange = (event, instance) => {
|
||||
console.log('Changed!', instance.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
handleFocus () {
|
||||
handleFocus = () => {
|
||||
console.log('Focused');
|
||||
}
|
||||
};
|
||||
|
||||
handleBlur () {
|
||||
handleBlur = () => {
|
||||
console.log('Blur');
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -47,3 +45,5 @@ export default class CheckboxTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CheckboxTest;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
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 {
|
||||
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.bind(this) },
|
||||
{ label: 'Agree', type: 'flat', className: 'primary', onClick: this.onClose.bind(this) }]
|
||||
};
|
||||
|
||||
onClose () {
|
||||
|
|
@ -25,7 +23,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.bind(this)} />
|
||||
<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>
|
||||
|
|
@ -33,3 +31,5 @@ export default class DialogTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DialogTest;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
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) {
|
||||
class DrawerTest extends React.Component {
|
||||
handleClick = (ref, method) => {
|
||||
this.refs[ref][method]();
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -22,14 +20,16 @@ export default class DrawerTest extends React.Component {
|
|||
</Drawer>
|
||||
|
||||
<Drawer ref='right' type='right'>
|
||||
<Button label='Close' onClick={this.onClick.bind(this, 'right', 'hide')} />
|
||||
<Button label='Close' onClick={this.handleClick.bind(this, 'right', 'hide')} />
|
||||
</Drawer>
|
||||
|
||||
<nav>
|
||||
<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')} />
|
||||
<Button accent label='Drawer left hideable' kind='raised' onClick={this.handleClick.bind(this, 'left', 'show')} />
|
||||
<Button primary label='Drawer right' kind='raised' onClick={this.handleClick.bind(this, 'right', 'show')} />
|
||||
</nav>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DrawerTest;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Dropdown from '../../components/dropdown';
|
||||
|
||||
@autobind
|
||||
export default class DropdownTest extends React.Component {
|
||||
class DropdownTest extends React.Component {
|
||||
state = {
|
||||
countries: [
|
||||
{ value: 'ES-es', label: 'Spain', img: 'http://' },
|
||||
|
|
@ -15,9 +13,9 @@ export default class DropdownTest extends React.Component {
|
|||
selected: 'TH-th'
|
||||
};
|
||||
|
||||
onChange (dropdown) {
|
||||
handleChange = (dropdown) => {
|
||||
console.log('[DROPDOWN]', dropdown.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
customDropdownItem (data) {
|
||||
const style = {
|
||||
|
|
@ -43,11 +41,13 @@ 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.handleChange}/>
|
||||
<Dropdown dataSource={this.state.countries} disabled={true} onChange={this.handleChange}/>
|
||||
<Dropdown dataSource={this.state.countries} value={this.state.selected} onChange={this.handleChange}/>
|
||||
<Dropdown dataSource={this.state.countries} value={this.state.selected} template={this.customDropdownItem} onChange={this.handleChange}/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default DropdownTest;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Form from '../../components/form';
|
||||
|
||||
@autobind
|
||||
export default class FormTest extends React.Component {
|
||||
class FormTest extends React.Component {
|
||||
state = {
|
||||
attributes: [
|
||||
{ ref: 'name', label: 'Your Name', required: true, storage: true},
|
||||
|
|
@ -22,9 +20,9 @@ export default class FormTest extends React.Component {
|
|||
]
|
||||
};
|
||||
|
||||
onEvent (type, event, form) {
|
||||
handleEvent = (type, event, form) => {
|
||||
console.log(`[FORM.${type}]`, form.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -35,11 +33,13 @@ export default class FormTest extends React.Component {
|
|||
<Form
|
||||
attributes={this.state.attributes}
|
||||
storage="example-form"
|
||||
onChange={this.onEvent.bind(this, 'change')}
|
||||
onError={this.onEvent.bind(this, 'error')}
|
||||
onValid={this.onEvent.bind(this, 'valid')}
|
||||
onSubmit={this.onEvent.bind(this, 'submit')} />
|
||||
onChange={this.handleEvent.bind(this, 'change')}
|
||||
onError={this.handleEvent.bind(this, 'error')}
|
||||
onValid={this.handleEvent.bind(this, 'valid')}
|
||||
onSubmit={this.handleEvent.bind(this, 'submit')} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default FormTest;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import { MenuItem, IconMenu } from '../../components/menu';
|
||||
|
||||
@autobind
|
||||
export default class IconMenuTest extends React.Component {
|
||||
handleShow () {
|
||||
class IconMenuTest extends React.Component {
|
||||
handleShow = () => {
|
||||
console.log('Showing menu...');
|
||||
}
|
||||
};
|
||||
|
||||
handleHide () {
|
||||
handleHide = () => {
|
||||
console.log('Hiding menu...');
|
||||
}
|
||||
};
|
||||
|
||||
handleSelect (value, instance) {
|
||||
handleSelect = (value, instance) => {
|
||||
console.log('Option selected', value, instance);
|
||||
}
|
||||
};
|
||||
|
||||
handleItem () {
|
||||
handleItem = () => {
|
||||
console.log('Refresh clicked');
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -44,3 +42,5 @@ export default class IconMenuTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default IconMenuTest;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
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) {
|
||||
class MenuTest extends React.Component {
|
||||
handleSelect = (e, instance) => {
|
||||
console.log('Menu selection changed!!, now its', instance.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
handleItemClick () {
|
||||
handleItemClick = () => {
|
||||
console.log('This item is so special that has a special handler');
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -31,3 +29,5 @@ export default class MenuTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MenuTest;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
import React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Navigation from '../../components/navigation';
|
||||
|
||||
@autobind
|
||||
export default class NavigationTest extends React.Component {
|
||||
class NavigationTest extends React.Component {
|
||||
state = {
|
||||
routes: [
|
||||
{ label: 'Github', route: 'http://www.github.com', icon: 'bookmark' },
|
||||
|
|
@ -22,3 +20,5 @@ export default class NavigationTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default NavigationTest;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
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,
|
||||
buffer: 10
|
||||
};
|
||||
const initialState = {
|
||||
progress: 0,
|
||||
buffer: 10
|
||||
};
|
||||
|
||||
class ProgressBarTest extends React.Component {
|
||||
state = initialState;
|
||||
|
||||
componentWillMount () {
|
||||
this.simulateProgress();
|
||||
|
|
@ -19,7 +19,7 @@ export default class ProgressBarTest extends React.Component {
|
|||
this.increaseProgress();
|
||||
if (this.state.progress > this.state.buffer) this.increaseBuffer();
|
||||
} else {
|
||||
this.replaceState(this.getInitialState());
|
||||
this.setState(initialState);
|
||||
}
|
||||
this.simulateProgress();
|
||||
}, (Math.random() * 1 + 1) * 1000);
|
||||
|
|
@ -51,3 +51,5 @@ export default class ProgressBarTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ProgressBarTest;
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
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) {
|
||||
class RadioGroupTest extends React.Component {
|
||||
handleChange = (event, instance) => {
|
||||
console.log('Changed!', { comic: instance.getValue()});
|
||||
}
|
||||
};
|
||||
|
||||
handleFocus () {
|
||||
handleFocus = () => {
|
||||
console.log('Focused V for a Vendetta');
|
||||
}
|
||||
};
|
||||
|
||||
handleBlur () {
|
||||
handleBlur = () => {
|
||||
console.log('Blurred Watchmen');
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -32,3 +30,5 @@ export default class RadioGroupTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RadioGroupTest;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
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) {
|
||||
class SnackbarTest extends React.Component {
|
||||
handleClick = (event, snackbar) => {
|
||||
console.log('handleClick', event, snackbar);
|
||||
}
|
||||
};
|
||||
|
||||
handleSnackbar () {
|
||||
handleSnackbar = () => {
|
||||
this.refs.snackbar.show();
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -31,3 +29,5 @@ export default class SnackbarTest extends React.Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SnackbarTest;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
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) {
|
||||
class SwitchTest extends React.Component {
|
||||
handleChange = (event, instance) => {
|
||||
console.log('[Switch] Changed', instance.getValue());
|
||||
}
|
||||
};
|
||||
|
||||
render () {
|
||||
return (
|
||||
|
|
@ -14,9 +12,11 @@ export default class SwitchTest extends React.Component {
|
|||
<h5>Switches</h5>
|
||||
<p style={{marginBottom: '10px'}}>This is more beautiful than the old fashion checkboxes...</p>
|
||||
<Switch label="Push notifications" />
|
||||
<Switch checked label="Mail notifications" onChange={this.onChange} />
|
||||
<Switch checked label="Mail notifications" onChange={this.handleChange} />
|
||||
<Switch disabled label="Nothing, thanks"/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SwitchTest;
|
||||
|
|
|
|||
Loading…
Reference in New Issue