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

Remove some bind usage in render functions and undo passing down Dropdown theme to Input

old
Javi Velasco 2016-08-06 22:44:05 +02:00
parent 57bb663e94
commit a825208e83
22 changed files with 168 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
components/autocomplete/Autocomplete.js
View File

@ -138,8 +138,8 @@ const factory = (Chip, Input) => {
}
};
handleSuggestionHover = (key) => {
this.setState({active: key});
handleSuggestionHover = (event) => {
this.setState({active: event.target.id});
};
calculateDirection () {
@ -220,11 +220,11 @@ const factory = (Chip, Input) => {
return valueMap;
}
select (key, event) {
select = (event) => {
events.pauseEvent(event);
const values = this.values(this.props.value);
this.handleChange([key, ...values.keys()], event);
}
this.handleChange([event.target.id, ...values.keys()], event);
};
unselect (key, event) {
if (!this.props.disabled) {
@ -259,10 +259,11 @@ const factory = (Chip, Input) => {
const className = classnames(theme.suggestion, {[theme.active]: this.state.active === key});
return (
<li
id={key}
key={key}
className={className}
onMouseDown={this.select.bind(this, key)}
onMouseOver={this.handleSuggestionHover.bind(this, key)}
onMouseDown={this.select}
onMouseOver={this.handleSuggestionHover}
>
{value}
</li>

41
components/date_picker/Calendar.js
View File

@ -5,6 +5,8 @@ import time from '../utils/time.js';
import utils from '../utils/utils.js';
import CalendarMonth from './CalendarMonth.js';
const DIRECTION_STEPS = { left: -1, right: 1 };
const factory = (IconButton) => {
class Calendar extends Component {
static propTypes = {
@ -48,37 +50,34 @@ const factory = (IconButton) => {
this.props.onChange(time.setDay(this.state.viewDate, day), true);
};
handleYearClick = (year) => {
handleYearClick = (event) => {
const year = parseInt(event.target.id);
const viewDate = time.setYear(this.props.selectedDate, year);
this.setState({viewDate});
this.props.onChange(viewDate, false);
};
changeViewMonth = (direction, step) => {
changeViewMonth = (event) => {
const direction = event.target.id;
this.setState({
direction,
viewDate: time.addMonths(this.state.viewDate, step)
viewDate: time.addMonths(this.state.viewDate, DIRECTION_STEPS[direction])
});
};
renderYear (year) {
const props = {
className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
key: year,
onClick: this.handleYearClick.bind(this, year)
};
if (year === this.state.viewDate.getFullYear()) {
props.ref = 'activeYear';
}
return <li {...props}>{year}</li>;
}
renderYears () {
return (
<ul data-react-toolbox='years' ref="years" className={this.props.theme.years}>
{utils.range(1900, 2100).map((i) => { return this.renderYear(i); })}
{utils.range(1900, 2100).map(year => (
<li
children={year}
className={year === this.state.viewDate.getFullYear() ? this.props.theme.active : ''}
id={year}
key={year}
onClick={this.handleYearClick}
ref={year === this.state.viewDate.getFullYear() ? 'activeYear' : undefined}
/>
))}
</ul>
);
}
@ -88,8 +87,8 @@ const factory = (IconButton) => {
const animation = this.state.direction === 'left' ? SlideLeft : SlideRight;
return (
<div data-react-toolbox='calendar'>
<IconButton className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth.bind(this, 'left', -1)} />
<IconButton className={theme.next} icon='chevron_right' onClick={this.changeViewMonth.bind(this, 'right', 1)} />
<IconButton id='left' className={theme.prev} icon='chevron_left' onClick={this.changeViewMonth} />
<IconButton id='right' className={theme.next} icon='chevron_right' onClick={this.changeViewMonth} />
<CssTransitionGroup transitionName={animation} transitionEnterTimeout={350} transitionLeaveTimeout={350}>
<CalendarMonth
key={this.state.viewDate.getMonth()}
@ -99,7 +98,7 @@ const factory = (IconButton) => {
selectedDate={this.props.selectedDate}
theme={this.props.theme}
viewDate={this.state.viewDate}
/>
/>
</CssTransitionGroup>
</div>
);

8
components/date_picker/CalendarDay.js
View File

@ -31,6 +31,12 @@ class Day extends Component {
return sameYear && sameMonth && sameDay;
}
handleClick = () => {
if (!this.props.disabled && this.props.onClick) {
this.props.onClick(this.props.day);
}
};
render () {
const className = classnames(this.props.theme.day, {
[this.props.theme.active]: this.isSelected(),
@ -39,7 +45,7 @@ class Day extends Component {
return (
<div data-react-toolbox='day' className={className} style={this.dayStyle()}>
<span onClick={this.props.onClick}>
<span onClick={this.handleClick}>
{this.props.day}
</span>
</div>

2
components/date_picker/CalendarMonth.js
View File

@ -38,7 +38,7 @@ class Month extends Component {
key={i}
day={i}
disabled={disabled}
onClick={!disabled ? this.handleDayClick.bind(this, i) : null}
onClick={this.handleDayClick}
selectedDate={this.props.selectedDate}
theme={this.props.theme}
viewDate={this.props.viewDate}

8
components/date_picker/DatePickerDialog.js
View File

@ -63,8 +63,8 @@ const factory = (Dialog, Calendar) => {
if (this.props.onSelect) this.props.onSelect(this.state.date, event);
};
handleSwitchDisplay = (display) => {
this.setState({ display });
handleSwitchDisplay = (event) => {
this.setState({ display: event.target.id });
};
updateStateDate = (date) => {
@ -96,10 +96,10 @@ const factory = (Dialog, Calendar) => {
type="custom"
>
<header className={headerClassName}>
<span className={theme.year} onClick={this.handleSwitchDisplay.bind(this, 'years')}>
<span id='years' className={theme.year} onClick={this.handleSwitchDisplay}>
{this.state.date.getFullYear()}
</span>
<h3 className={theme.date} onClick={this.handleSwitchDisplay.bind(this, 'months')}>
<h3 id='months' className={theme.date} onClick={this.handleSwitchDisplay}>
{time.getShortDayOfWeek(this.state.date.getDay())}, {time.getShortMonth(this.state.date)} {this.state.date.getDate()}
</h3>
</header>

7
components/dropdown/Dropdown.js
View File

@ -130,7 +130,7 @@ const factory = (Input) => {
);
}
renderValue (item, idx) {
renderValue = (item, idx) => {
const { theme } = this.props;
const className = item.value === this.props.value ? theme.selected : null;
return (
@ -138,7 +138,7 @@ const factory = (Input) => {
{this.props.template ? this.props.template(item) : item.label}
</li>
);
}
};
render () {
const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
@ -156,13 +156,12 @@ const factory = (Input) => {
className={theme.value}
onMouseDown={this.handleMouseDown}
readOnly
theme={theme}
type={template && selected ? 'hidden' : null}
value={selected && selected.label ? selected.label : ''}
/>
{template && selected ? this.renderTemplateValue(selected) : null}
<ul className={theme.values} ref='values'>
{source.map(this.renderValue.bind(this))}
{source.map(this.renderValue)}
</ul>
</div>
);

3
components/dropdown/theme.scss
View File

@ -37,7 +37,7 @@
}
.value {
> .inputElement {
> .input {
cursor: pointer;
}
&:after {
@ -56,6 +56,7 @@
transition: transform $animation-duration $animation-curve-default;
}
}
.field {
position: relative;
padding: $input-padding 0;

7
components/tabs/Tab.js
View File

@ -41,7 +41,10 @@ class Tab extends Component {
};
render () {
const { active, activeClassName, hidden, disabled, className, theme } = this.props;
const {
onActive, // eslint-disable-line
active, activeClassName, className, disabled, hidden, theme, ...other
} = this.props;
const _className = classnames(theme.label, {
[theme.active]: active,
[theme.hidden]: hidden,
@ -50,7 +53,7 @@ class Tab extends Component {
}, className);
return (
<label data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
<label {...other} data-react-toolbox='tab' className={_className} onClick={this.handleClick}>
{this.props.label}
</label>
);

6
components/tabs/Tabs.js
View File

@ -40,7 +40,8 @@ const factory = (Tab, TabContent) => {
clearTimeout(this.pointerTimeout);
}
handleHeaderClick = (idx) => {
handleHeaderClick = (event) => {
const idx = parseInt(event.target.id);
if (this.props.onChange) this.props.onChange(idx);
};
@ -80,9 +81,10 @@ const factory = (Tab, TabContent) => {
renderHeaders (headers) {
return headers.map((item, idx) => {
return React.cloneElement(item, {
id: idx,
key: idx,
active: this.props.index === idx,
onClick: this.handleHeaderClick.bind(this, idx, item)
onClick: this.handleHeaderClick
});
});
}

4
components/time_picker/ClockFace.js
View File

@ -37,7 +37,7 @@ class Face extends Component {
};
}
renderNumber (number, idx) {
renderNumber = (number, idx) => {
const { active, radius, spacing, theme, twoDigits } = this.props;
return (
<span
@ -60,7 +60,7 @@ class Face extends Component {
onMouseDown={onMouseDown}
style={this.faceStyle()}
>
{numbers.map(this.renderNumber.bind(this))}
{numbers.map(this.renderNumber)}
</div>
);
}

8
components/time_picker/TimePickerDialog.js
View File

@ -65,8 +65,8 @@ const factory = (Dialog) => {
if (this.state.display === 'hours') this.setState({display: 'minutes'});
};
switchDisplay = (display) => {
this.setState({display});
switchDisplay = (event) => {
this.setState({display: event.target.id});
};
actions = [
@ -108,11 +108,11 @@ const factory = (Dialog) => {
onOverlayClick={this.props.onOverlayClick}
>
<header className={theme.header}>
<span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
<span id='hours' className={theme.hours} onClick={this.switchDisplay}>
{('0' + this.formatHours()).slice(-2)}
</span>
<span className={theme.separator}>:</span>
<span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
<span id='minutes' className={theme.minutes} onClick={this.switchDisplay}>
{('0' + this.state.displayTime.getMinutes()).slice(-2)}
</span>
{this.renderAMPMLabels()}

20
lib/autocomplete/Autocomplete.js
View File

@ -121,8 +121,12 @@ var factory = function factory(Chip, Input) {
if (index >= suggestionsKeys.length) index = 0;
_this.setState({ active: suggestionsKeys[index] });
}
}, _this.handleSuggestionHover = function (key) {
_this.setState({ active: key });
}, _this.handleSuggestionHover = function (event) {
_this.setState({ active: event.target.id });
}, _this.select = function (event) {
_events2.default.pauseEvent(event);
var values = _this.values(_this.props.value);
_this.handleChange([event.target.id].concat(_toConsumableArray(values.keys())), event);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
@ -309,13 +313,6 @@ var factory = function factory(Chip, Input) {
return valueMap;
}
}, {
key: 'select',
value: function select(key, event) {
_events2.default.pauseEvent(event);
var values = this.values(this.props.value);
this.handleChange([key].concat(_toConsumableArray(values.keys())), event);
}
}, {
key: 'unselect',
value: function unselect(key, event) {
@ -373,10 +370,11 @@ var factory = function factory(Chip, Input) {
return _react2.default.createElement(
'li',
{
id: key,
key: key,
className: className,
onMouseDown: _this3.select.bind(_this3, key),
onMouseOver: _this3.handleSuggestionHover.bind(_this3, key)
onMouseDown: _this3.select,
onMouseOver: _this3.handleSuggestionHover
},
value
);

44
lib/date_picker/Calendar.js
View File

@ -36,6 +36,8 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var DIRECTION_STEPS = { left: -1, right: 1 };
var factory = function factory(IconButton) {
var Calendar = function (_Component) {
_inherits(Calendar, _Component);
@ -55,14 +57,16 @@ var factory = function factory(IconButton) {
viewDate: _this.props.selectedDate
}, _this.handleDayClick = function (day) {
_this.props.onChange(_time2.default.setDay(_this.state.viewDate, day), true);
}, _this.handleYearClick = function (year) {
}, _this.handleYearClick = function (event) {
var year = parseInt(event.target.id);
var viewDate = _time2.default.setYear(_this.props.selectedDate, year);
_this.setState({ viewDate: viewDate });
_this.props.onChange(viewDate, false);
}, _this.changeViewMonth = function (direction, step) {
}, _this.changeViewMonth = function (event) {
var direction = event.target.id;
_this.setState({
direction: direction,
viewDate: _time2.default.addMonths(_this.state.viewDate, step)
viewDate: _time2.default.addMonths(_this.state.viewDate, DIRECTION_STEPS[direction])
});
}, _temp), _possibleConstructorReturn(_this, _ret);
}
@ -79,25 +83,6 @@ var factory = function factory(IconButton) {
value: function scrollToActive() {
this.refs.years.scrollTop = this.refs.activeYear.offsetTop - this.refs.years.offsetHeight / 2 + this.refs.activeYear.offsetHeight / 2;
}
}, {
key: 'renderYear',
value: function renderYear(year) {
var props = {
className: year === this.state.viewDate.getFullYear() ? this.props.theme.active : '',
key: year,
onClick: this.handleYearClick.bind(this, year)
};
if (year === this.state.viewDate.getFullYear()) {
props.ref = 'activeYear';
}
return _react2.default.createElement(
'li',
props,
year
);
}
}, {
key: 'renderYears',
value: function renderYears() {
@ -106,8 +91,15 @@ var factory = function factory(IconButton) {
return _react2.default.createElement(
'ul',
{ 'data-react-toolbox': 'years', ref: 'years', className: this.props.theme.years },
_utils2.default.range(1900, 2100).map(function (i) {
return _this2.renderYear(i);
_utils2.default.range(1900, 2100).map(function (year) {
return _react2.default.createElement('li', {
children: year,
className: year === _this2.state.viewDate.getFullYear() ? _this2.props.theme.active : '',
id: year,
key: year,
onClick: _this2.handleYearClick,
ref: year === _this2.state.viewDate.getFullYear() ? 'activeYear' : undefined
});
})
);
}
@ -120,8 +112,8 @@ var factory = function factory(IconButton) {
return _react2.default.createElement(
'div',
{ 'data-react-toolbox': 'calendar' },
_react2.default.createElement(IconButton, { className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth.bind(this, 'left', -1) }),
_react2.default.createElement(IconButton, { className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth.bind(this, 'right', 1) }),
_react2.default.createElement(IconButton, { id: 'left', className: theme.prev, icon: 'chevron_left', onClick: this.changeViewMonth }),
_react2.default.createElement(IconButton, { id: 'right', className: theme.next, icon: 'chevron_right', onClick: this.changeViewMonth }),
_react2.default.createElement(
_reactAddonsCssTransitionGroup2.default,
{ transitionName: animation, transitionEnterTimeout: 350, transitionLeaveTimeout: 350 },

16
lib/date_picker/CalendarDay.js
View File

@ -32,9 +32,21 @@ var Day = function (_Component) {
_inherits(Day, _Component);
function Day() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, Day);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Day).apply(this, arguments));
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Day)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.handleClick = function () {
if (!_this.props.disabled && _this.props.onClick) {
_this.props.onClick(_this.props.day);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Day, [{
@ -66,7 +78,7 @@ var Day = function (_Component) {
{ 'data-react-toolbox': 'day', className: className, style: this.dayStyle() },
_react2.default.createElement(
'span',
{ onClick: this.props.onClick },
{ onClick: this.handleClick },
this.props.day
)
);

2
lib/date_picker/CalendarMonth.js
View File

@ -73,7 +73,7 @@ var Month = function (_Component) {
key: i,
day: i,
disabled: disabled,
onClick: !disabled ? _this2.handleDayClick.bind(_this2, i) : null,
onClick: _this2.handleDayClick,
selectedDate: _this2.props.selectedDate,
theme: _this2.props.theme,
viewDate: _this2.props.viewDate

8
lib/date_picker/DatePickerDialog.js
View File

@ -55,8 +55,8 @@ var factory = function factory(Dialog, Calendar) {
}
}, _this.handleSelect = function (event) {
if (_this.props.onSelect) _this.props.onSelect(_this.state.date, event);
}, _this.handleSwitchDisplay = function (display) {
_this.setState({ display: display });
}, _this.handleSwitchDisplay = function (event) {
_this.setState({ display: event.target.id });
}, _this.updateStateDate = function (date) {
if (Object.prototype.toString.call(date) === '[object Date]') {
_this.setState({
@ -100,12 +100,12 @@ var factory = function factory(Dialog, Calendar) {
{ className: headerClassName },
_react2.default.createElement(
'span',
{ className: theme.year, onClick: this.handleSwitchDisplay.bind(this, 'years') },
{ id: 'years', className: theme.year, onClick: this.handleSwitchDisplay },
this.state.date.getFullYear()
),
_react2.default.createElement(
'h3',
{ className: theme.date, onClick: this.handleSwitchDisplay.bind(this, 'months') },
{ id: 'months', className: theme.date, onClick: this.handleSwitchDisplay },
_time2.default.getShortDayOfWeek(this.state.date.getDay()),
', ',
_time2.default.getShortMonth(this.state.date),

24
lib/dropdown/Dropdown.js
View File

@ -116,6 +116,15 @@ var factory = function factory(Input) {
if (!_this.props.allowBlank) {
return _this.props.source[0];
}
}, _this.renderValue = function (item, idx) {
var theme = _this.props.theme;
var className = item.value === _this.props.value ? theme.selected : null;
return _react2.default.createElement(
'li',
{ key: idx, className: className, onMouseDown: _this.handleSelect.bind(_this, item.value) },
_this.props.template ? _this.props.template(item) : item.label
);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
@ -169,18 +178,6 @@ var factory = function factory(Input) {
) : null
);
}
}, {
key: 'renderValue',
value: function renderValue(item, idx) {
var theme = this.props.theme;
var className = item.value === this.props.value ? theme.selected : null;
return _react2.default.createElement(
'li',
{ key: idx, className: className, onMouseDown: this.handleSelect.bind(this, item.value) },
this.props.template ? this.props.template(item) : item.label
);
}
}, {
key: 'render',
value: function render() {
@ -206,7 +203,6 @@ var factory = function factory(Input) {
className: theme.value,
onMouseDown: this.handleMouseDown,
readOnly: true,
theme: theme,
type: template && selected ? 'hidden' : null,
value: selected && selected.label ? selected.label : ''
})),
@ -214,7 +210,7 @@ var factory = function factory(Input) {
_react2.default.createElement(
'ul',
{ className: theme.values, ref: 'values' },
source.map(this.renderValue.bind(this))
source.map(this.renderValue)
)
);
}

3
lib/dropdown/theme.scss
View File

@ -37,7 +37,7 @@
}
.value {
> .inputElement {
> .input {
cursor: pointer;
}
&:after {
@ -56,6 +56,7 @@
transition: transform $animation-duration $animation-curve-default;
}
}
.field {
position: relative;
padding: $input-padding 0;

13
lib/tabs/Tab.js
View File

@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
});
exports.Tab = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
@ -23,6 +25,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@ -63,18 +67,21 @@ var Tab = function (_Component) {
var _classnames;
var _props = this.props;
var onActive = _props.onActive;
var active = _props.active;
var activeClassName = _props.activeClassName;
var hidden = _props.hidden;
var disabled = _props.disabled;
var className = _props.className;
var disabled = _props.disabled;
var hidden = _props.hidden;
var theme = _props.theme;
var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'theme']);
var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);
return _react2.default.createElement(
'label',
{ 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick },
_extends({}, other, { 'data-react-toolbox': 'tab', className: _className, onClick: this.handleClick }),
this.props.label
);
}

6
lib/tabs/Tabs.js
View File

@ -52,7 +52,8 @@ var factory = function factory(Tab, TabContent) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Tabs)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.state = {
pointer: {}
}, _this.handleHeaderClick = function (idx) {
}, _this.handleHeaderClick = function (event) {
var idx = parseInt(event.target.id);
if (_this.props.onChange) _this.props.onChange(idx);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
@ -118,9 +119,10 @@ var factory = function factory(Tab, TabContent) {
return headers.map(function (item, idx) {
return _react2.default.cloneElement(item, {
id: idx,
key: idx,
active: _this4.props.index === idx,
onClick: _this4.handleHeaderClick.bind(_this4, idx, item)
onClick: _this4.handleHeaderClick
});
});
}

59
lib/time_picker/ClockFace.js
View File

@ -28,9 +28,34 @@ var Face = function (_Component) {
_inherits(Face, _Component);
function Face() {
var _Object$getPrototypeO;
var _temp, _this, _ret;
_classCallCheck(this, Face);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Face).apply(this, arguments));
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Face)).call.apply(_Object$getPrototypeO, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
var _this$props = _this.props;
var active = _this$props.active;
var radius = _this$props.radius;
var spacing = _this$props.spacing;
var theme = _this$props.theme;
var twoDigits = _this$props.twoDigits;
return _react2.default.createElement(
'span',
{
className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
style: _this.numberStyle(radius - spacing, idx + 1),
key: number
},
twoDigits ? ('0' + number).slice(-2) : number
);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Face, [{
@ -50,34 +75,14 @@ var Face = function (_Component) {
width: this.props.radius * 2
};
}
}, {
key: 'renderNumber',
value: function renderNumber(number, idx) {
var _props = this.props;
var active = _props.active;
var radius = _props.radius;
var spacing = _props.spacing;
var theme = _props.theme;
var twoDigits = _props.twoDigits;
return _react2.default.createElement(
'span',
{
className: (0, _classnames3.default)(theme.number, _defineProperty({}, theme.active, number === active)),
style: this.numberStyle(radius - spacing, idx + 1),
key: number
},
twoDigits ? ('0' + number).slice(-2) : number
);
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var numbers = _props2.numbers;
var onTouchStart = _props2.onTouchStart;
var onMouseDown = _props2.onMouseDown;
var theme = _props2.theme;
var _props = this.props;
var numbers = _props.numbers;
var onTouchStart = _props.onTouchStart;
var onMouseDown = _props.onMouseDown;
var theme = _props.theme;
return _react2.default.createElement(
'div',
@ -88,7 +93,7 @@ var Face = function (_Component) {
onMouseDown: onMouseDown,
style: this.faceStyle()
},
numbers.map(this.renderNumber.bind(this))
numbers.map(this.renderNumber)
);
}
}]);

8
lib/time_picker/TimePickerDialog.js
View File

@ -56,8 +56,8 @@ var factory = function factory(Dialog) {
_this.setState({ displayTime: _time2.default.toggleTimeMode(_this.state.displayTime) });
}, _this.handleHandMoved = function () {
if (_this.state.display === 'hours') _this.setState({ display: 'minutes' });
}, _this.switchDisplay = function (display) {
_this.setState({ display: display });
}, _this.switchDisplay = function (event) {
_this.setState({ display: event.target.id });
}, _this.actions = [{ label: 'Cancel', className: _this.props.theme.button, onClick: _this.props.onDismiss }, { label: 'Ok', className: _this.props.theme.button, name: _this.props.name, onClick: _this.handleSelect }], _temp), _possibleConstructorReturn(_this, _ret);
}
@ -121,7 +121,7 @@ var factory = function factory(Dialog) {
{ className: theme.header },
_react2.default.createElement(
'span',
{ className: theme.hours, onClick: this.switchDisplay.bind(this, 'hours') },
{ id: 'hours', className: theme.hours, onClick: this.switchDisplay },
('0' + this.formatHours()).slice(-2)
),
_react2.default.createElement(
@ -131,7 +131,7 @@ var factory = function factory(Dialog) {
),
_react2.default.createElement(
'span',
{ className: theme.minutes, onClick: this.switchDisplay.bind(this, 'minutes') },
{ id: 'minutes', className: theme.minutes, onClick: this.switchDisplay },
('0' + this.state.displayTime.getMinutes()).slice(-2)
),
this.renderAMPMLabels()