Remove some bind usage in render functions and undo passing down Dropdown theme to Input
parent
57bb663e94
commit
a825208e83
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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
|
||||
);
|
||||
|
|
|
@ -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 },
|
||||
|
|
|
@ -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
|
||||
)
|
||||
);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
);
|
||||
}
|
||||
}]);
|
||||
|
|
|
@ -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()
|
||||
|
|
Loading…
Reference in New Issue