Refactor timepicker and utils organization
parent
16ac6b2ce8
commit
459aaef971
|
@ -1,5 +1,5 @@
|
|||
css = require './style'
|
||||
dateTime = require '../utils/date-time'
|
||||
time = require '../utils/time'
|
||||
|
||||
module.exports = React.createClass
|
||||
displayName: 'Day',
|
||||
|
@ -11,7 +11,7 @@ module.exports = React.createClass
|
|||
viewDate : React.PropTypes.object
|
||||
|
||||
_dayStyle: ->
|
||||
marginLeft: "#{dateTime.getFirstWeekDay(@props.viewDate) * 100/7}%"
|
||||
marginLeft: "#{time.getFirstWeekDay(@props.viewDate) * 100/7}%"
|
||||
|
||||
_isSelected: () ->
|
||||
isSameYear = @props.viewDate.getFullYear() == @props.selectedDate.getFullYear()
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
CTG = React.addons.CSSTransitionGroup
|
||||
css = require './style'
|
||||
dateTime = require '../utils/date-time'
|
||||
time = require '../utils/time'
|
||||
FontIcon = require '../font_icon'
|
||||
Month = require './month'
|
||||
|
||||
|
@ -31,10 +31,10 @@ module.exports = React.createClass
|
|||
# -- Events
|
||||
onDayClick: (event) ->
|
||||
@setState
|
||||
selectedDate: dateTime.setDay(@state.viewDate, parseInt(event.target.textContent))
|
||||
selectedDate: time.setDay(@state.viewDate, parseInt(event.target.textContent))
|
||||
|
||||
onYearClick: (event) ->
|
||||
newDate = dateTime.setYear(@state.selectedDate, parseInt(event.target.textContent))
|
||||
newDate = time.setYear(@state.selectedDate, parseInt(event.target.textContent))
|
||||
@setState
|
||||
selectedDate: newDate
|
||||
viewDate: newDate
|
||||
|
@ -53,12 +53,12 @@ module.exports = React.createClass
|
|||
incrementViewMonth: ->
|
||||
@setState
|
||||
direction: 'right'
|
||||
viewDate: dateTime.addMonths(@state.viewDate, 1)
|
||||
viewDate: time.addMonths(@state.viewDate, 1)
|
||||
|
||||
decrementViewMonth: ->
|
||||
@setState
|
||||
direction: 'left'
|
||||
viewDate: dateTime.addMonths(@state.viewDate, -1)
|
||||
viewDate: time.addMonths(@state.viewDate, -1)
|
||||
|
||||
# -- Render
|
||||
renderYear: (year) ->
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
css = require './style'
|
||||
Day = require './day'
|
||||
dateTime = require '../utils/date-time'
|
||||
time = require '../utils/time'
|
||||
|
||||
module.exports = React.createClass
|
||||
displayName: 'Month',
|
||||
|
@ -13,13 +13,13 @@ module.exports = React.createClass
|
|||
render: ->
|
||||
<div>
|
||||
<span className={css.title}>
|
||||
{ dateTime.getFullMonth(@props.viewDate)} {@props.viewDate.getFullYear() }
|
||||
{ time.getFullMonth(@props.viewDate)} {@props.viewDate.getFullYear() }
|
||||
</span>
|
||||
<div className={css.week}>
|
||||
{ <span key={"dw#{i}"}>{ dateTime.getFullDayOfWeek(i).charAt(0) }</span> for i in [0..6] }
|
||||
{ <span key={"dw#{i}"}>{ time.getFullDayOfWeek(i).charAt(0) }</span> for i in [0..6] }
|
||||
</div>
|
||||
<div className={css.days}>
|
||||
{ for i in [1..dateTime.getDaysInMonth(@props.viewDate)]
|
||||
{ for i in [1..time.getDaysInMonth(@props.viewDate)]
|
||||
<Day key={"d#{i}"}
|
||||
day={i}
|
||||
onClick={@props.onDayClick}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
const React = window.React;
|
||||
|
||||
const css = require('./style');
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
@ -9,7 +8,8 @@ module.exports = React.createClass({
|
|||
return {
|
||||
active: null,
|
||||
numbers: [],
|
||||
radius: 0
|
||||
radius: 0,
|
||||
twoDigits: false
|
||||
};
|
||||
},
|
||||
|
||||
|
@ -38,10 +38,10 @@ module.exports = React.createClass({
|
|||
{
|
||||
this.props.numbers.map((i, k) => {
|
||||
return (
|
||||
<span className={css.number + (parseInt(i) === this.props.active ? ' active' : '')}
|
||||
<span className={css.number + (i === this.props.active ? ' active' : '')}
|
||||
style={this._numberStyle(this.props.radius - this.props.spacing, k + 1)}
|
||||
key={i}>
|
||||
{i}
|
||||
{ this.props.twoDigits ? ('0' + i).slice(-2) : i }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
const React = window.React;
|
||||
|
||||
const css = require('./style');
|
||||
const prefixer = require('../utils/prefixer');
|
||||
const helper = require('../utils/helper');
|
||||
const utils = require('../utils');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'Hand',
|
||||
|
@ -57,11 +55,11 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
onMouseMove (event) {
|
||||
this._move(helper.getMousePosition(event));
|
||||
this._move(utils.events.getMousePosition(event));
|
||||
},
|
||||
|
||||
onTouchMove (event) {
|
||||
this._move(helper.getTouchPosition(event));
|
||||
this._move(utils.events.getTouchPosition(event));
|
||||
},
|
||||
|
||||
onMouseUp () {
|
||||
|
@ -73,14 +71,14 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
mouseStart (event) {
|
||||
helper.addEventsToDocument(this._getMouseEventMap());
|
||||
this._move(helper.getMousePosition(event));
|
||||
utils.events.addEventsToDocument(this._getMouseEventMap());
|
||||
this._move(utils.events.getMousePosition(event));
|
||||
},
|
||||
|
||||
touchStart (event) {
|
||||
helper.addEventsToDocument(this._getTouchEventMap());
|
||||
this._move(helper.getTouchPosition(event));
|
||||
helper.pauseEvent(event);
|
||||
utils.events.addEventsToDocument(this._getTouchEventMap());
|
||||
this._move(utils.events.getTouchPosition(event));
|
||||
utils.events.pauseEvent(event);
|
||||
},
|
||||
|
||||
_getPositionRadius (position) {
|
||||
|
@ -94,23 +92,23 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
_positionToAngle (position) {
|
||||
return helper.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
|
||||
return utils.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
|
||||
},
|
||||
|
||||
_end (events) {
|
||||
if (this.props.onHandMoved) this.props.onHandMoved();
|
||||
helper.removeEventsFromDocument(events);
|
||||
utils.events.removeEventsFromDocument(events);
|
||||
},
|
||||
|
||||
_move (position) {
|
||||
let degrees = this._trimAngleToValue(this._positionToAngle(position));
|
||||
degrees = degrees === 360 ? 0 : degrees;
|
||||
if (this.state.angle !== degrees) this.setState({angle: degrees});
|
||||
if (this.props.onHandMouseMove) this.props.onHandMouseMove(this._getPositionRadius(position));
|
||||
if (this.props.onHandMove) this.props.onHandMove(this._getPositionRadius(position));
|
||||
},
|
||||
|
||||
render () {
|
||||
let style = prefixer({
|
||||
let style = utils.prefixer({
|
||||
height: this.props.length - this.state.knobWidth / 2,
|
||||
transform: `rotate(${this.state.angle}deg)`
|
||||
});
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
const React = window.React;
|
||||
const utils = require('../utils');
|
||||
|
||||
const Face = require('./face');
|
||||
const Hand = require('./hand');
|
||||
|
||||
const { range } = require('../utils/helper');
|
||||
|
||||
const innerNumbers = [12, ...range(1, 12)];
|
||||
const outerNumbers = ['00', ...range(13, 24)];
|
||||
const outerNumbers = [0, ...utils.range(13, 24)];
|
||||
const innerNumbers = [12, ...utils.range(1, 12)];
|
||||
const step = 360 / 12;
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
@ -25,7 +24,7 @@ module.exports = React.createClass({
|
|||
};
|
||||
},
|
||||
|
||||
_onHandMouseMove (radius) {
|
||||
_onHandMove (radius) {
|
||||
let currentInner = radius < this.props.radius - this.props.spacing * 2;
|
||||
if (this.props.format === '24hr' && this.state.inner !== currentInner) {
|
||||
this.setState({inner: currentInner});
|
||||
|
@ -46,13 +45,14 @@ module.exports = React.createClass({
|
|||
|
||||
_valueFromDegrees (degrees) {
|
||||
if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
|
||||
return parseInt(innerNumbers[degrees / step]);
|
||||
return innerNumbers[degrees / step];
|
||||
} else {
|
||||
return parseInt(outerNumbers[degrees / step]);
|
||||
return outerNumbers[degrees / step];
|
||||
}
|
||||
},
|
||||
|
||||
renderInnerFace (innerRadius) {
|
||||
if (this.props.format === '24hr') {
|
||||
return (
|
||||
<Face
|
||||
onTouchStart={this._onTouchStart}
|
||||
|
@ -62,31 +62,31 @@ module.exports = React.createClass({
|
|||
radius={innerRadius}
|
||||
active={this.props.selected} />
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
let innerRadius = this.props.radius - this.props.spacing * 2;
|
||||
let handRadius = this.state.inner ? innerRadius : this.props.radius;
|
||||
let handLength = handRadius - this.props.spacing;
|
||||
let ampmActive = this.props.format === '24hr' ? this.props.selected : (this.props.selected % 12 || 12);
|
||||
const { format, selected, radius, spacing, center, onHandMoved } = this.props;
|
||||
const is24hr = format === '24hr';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Face
|
||||
onTouchStart={this._onTouchStart}
|
||||
onMouseDown={this._onMouseDown}
|
||||
numbers={this.props.format === '24hr' ? outerNumbers : innerNumbers}
|
||||
spacing={this.props.spacing}
|
||||
radius={this.props.radius}
|
||||
active={ampmActive} />
|
||||
{ this.props.format === '24hr' ? this.renderInnerFace(innerRadius) : '' }
|
||||
numbers={is24hr ? outerNumbers : innerNumbers}
|
||||
spacing={spacing}
|
||||
radius={radius}
|
||||
twoDigits={is24hr}
|
||||
active={is24hr ? selected : (selected % 12 || 12)} />
|
||||
{ this.renderInnerFace(radius - spacing * 2) }
|
||||
<Hand ref='hand'
|
||||
initialAngle={this.props.selected * step}
|
||||
length={handLength}
|
||||
onHandMouseMove={this._onHandMouseMove}
|
||||
onHandMoved={this.props.onHandMoved}
|
||||
initialAngle={selected * step}
|
||||
length={(this.state.inner ? radius - spacing * 2 : radius) - spacing}
|
||||
onHandMove={this._onHandMove}
|
||||
onHandMoved={onHandMoved}
|
||||
onHandChange={this._onHandChange}
|
||||
origin={this.props.center}
|
||||
origin={center}
|
||||
step={step} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
const React = window.React;
|
||||
|
||||
const css = require('./style');
|
||||
const time = require('../utils/time');
|
||||
|
||||
const Hours = require('./hours');
|
||||
const Minutes = require('./minutes');
|
||||
const utils = require('../utils/date-time');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'Clock',
|
||||
|
@ -19,7 +19,7 @@ module.exports = React.createClass({
|
|||
getDefaultProps () {
|
||||
return {
|
||||
className: '',
|
||||
display: 'hours',
|
||||
display: 'minutes',
|
||||
format: '24hr',
|
||||
initialTime: new Date()
|
||||
};
|
||||
|
@ -50,19 +50,19 @@ module.exports = React.createClass({
|
|||
|
||||
onHourChange (hours) {
|
||||
if (this.state.time.getHours() !== hours) {
|
||||
this.setState({time: utils.setHours(this.state.time, this._adaptHourToFormat(hours))});
|
||||
this.setState({time: time.setHours(this.state.time, this._adaptHourToFormat(hours))});
|
||||
}
|
||||
},
|
||||
|
||||
onMinuteChange (minutes) {
|
||||
if (this.state.time.getMinutes() !== minutes) {
|
||||
this.setState({time: utils.setMinutes(this.state.time, minutes)});
|
||||
this.setState({time: time.setMinutes(this.state.time, minutes)});
|
||||
}
|
||||
},
|
||||
|
||||
_adaptHourToFormat (hour) {
|
||||
if (this.props.format === 'ampm') {
|
||||
if (utils.getTimeMode(this.state.time) === 'pm') {
|
||||
if (time.getTimeMode(this.state.time) === 'pm') {
|
||||
return hour < 12 ? hour + 12 : hour;
|
||||
} else {
|
||||
return hour === 12 ? 0 : hour;
|
||||
|
@ -81,7 +81,7 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
toggleTimeMode () {
|
||||
this.setState({time: utils.toggleTimeMode(this.state.time)});
|
||||
this.setState({time: time.toggleTimeMode(this.state.time)});
|
||||
},
|
||||
|
||||
renderHours () {
|
||||
|
|
|
@ -1,12 +1,10 @@
|
|||
const React = window.React;
|
||||
const utils = require('../utils');
|
||||
|
||||
const Face = require('./face');
|
||||
const Hand = require('./hand');
|
||||
|
||||
const { range } = require('../utils/helper');
|
||||
const { twoDigits } = require('./../utils/date-time');
|
||||
|
||||
const minutes = range(0, 60, 5).map(i => { return twoDigits(i); });
|
||||
const minutes = utils.range(0, 60, 5);
|
||||
const step = 360 / 60;
|
||||
|
||||
module.exports = React.createClass({
|
||||
|
@ -19,7 +17,7 @@ module.exports = React.createClass({
|
|||
|
||||
getDefaultProps () {
|
||||
return {
|
||||
select: 0,
|
||||
selected: 0,
|
||||
onChange: null
|
||||
};
|
||||
},
|
||||
|
@ -45,9 +43,10 @@ module.exports = React.createClass({
|
|||
numbers={minutes}
|
||||
spacing={this.props.spacing}
|
||||
radius={this.props.radius}
|
||||
twoDigits={true}
|
||||
active={this.props.selected} />
|
||||
<Hand ref='hand'
|
||||
className={minutes.indexOf(twoDigits(this.props.selected)) === -1 ? 'smallKnob' : ''}
|
||||
className={minutes.indexOf(this.props.selected) === -1 ? 'smallKnob' : ''}
|
||||
initialAngle={this.props.selected * step}
|
||||
length={this.props.radius - this.props.spacing}
|
||||
onHandChange={this._onHandChange}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
css = require './style'
|
||||
Calendar = require '../calendar'
|
||||
Dialog = require '../dialog'
|
||||
utils = require '../utils/date-time'
|
||||
time = require '../utils/time'
|
||||
|
||||
module.exports = React.createClass
|
||||
displayName: 'CalendarDialog'
|
||||
|
@ -25,7 +25,7 @@ module.exports = React.createClass
|
|||
# -- Events
|
||||
onCalendarChange: (calendar) ->
|
||||
@setState
|
||||
date: utils.clone(calendar.getValue())
|
||||
date: time.clone(calendar.getValue())
|
||||
display: 'months'
|
||||
|
||||
onDateCancel: (ref, method) ->
|
||||
|
@ -50,9 +50,9 @@ module.exports = React.createClass
|
|||
className = "display-#{@state.display}"
|
||||
<Dialog ref="dialog" type={css.dialog} className={className} actions={@state.actions}>
|
||||
<header className={css.header}>
|
||||
<span className={css.headerWeekday}>{utils.getFullDayOfWeek(@state.date.getDay())}</span>
|
||||
<span className={css.headerWeekday}>{time.getFullDayOfWeek(@state.date.getDay())}</span>
|
||||
<div onClick={@displayMonths}>
|
||||
<span className={css.headerMonth}>{utils.getShortMonth(@state.date)}</span>
|
||||
<span className={css.headerMonth}>{time.getShortMonth(@state.date)}</span>
|
||||
<span className={css.headerDay}>{@state.date.getDate()}</span>
|
||||
</div>
|
||||
<span className={css.headerYear} onClick={@displayYears}>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
css = require './style'
|
||||
CalendarDialog = require './dialog'
|
||||
Input = require '../input'
|
||||
utils = require '../utils/date-time'
|
||||
time = require '../utils/time'
|
||||
|
||||
module.exports = React.createClass
|
||||
displayName : 'DatePicker'
|
||||
|
@ -27,7 +27,7 @@ module.exports = React.createClass
|
|||
# -- Private methods
|
||||
formatDate: (date) ->
|
||||
day = date.getDate()
|
||||
month = utils.getFullMonth(date)
|
||||
month = time.getFullMonth(date)
|
||||
year = date.getFullYear()
|
||||
"#{day} #{month} #{year}"
|
||||
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
const React = window.React;
|
||||
|
||||
const css = require('./style');
|
||||
const time = require('../utils/time');
|
||||
|
||||
const Clock = require('../clock');
|
||||
const Dialog = require('../dialog');
|
||||
const utils = require('../utils/date-time');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'TimePickerDialog',
|
||||
|
@ -83,17 +83,17 @@ module.exports = React.createClass({
|
|||
|
||||
render () {
|
||||
let className = ` display-${this.state.display}`;
|
||||
className += ` format-${utils.getTimeMode(this.state.time)}`;
|
||||
className += ` format-${time.getTimeMode(this.state.time)}`;
|
||||
|
||||
return (
|
||||
<Dialog ref="dialog" className={className} type={css.dialog} actions={this.state.actions}>
|
||||
<header className={css.header}>
|
||||
<span className={css.hours} onClick={this.displayHours}>
|
||||
{ utils.twoDigits(this._formatHours()) }
|
||||
{ ('0' + this._formatHours()).slice(-2) }
|
||||
</span>
|
||||
<span className={css.separator}>:</span>
|
||||
<span className={css.minutes} onClick={this.displayMinutes}>
|
||||
{ utils.twoDigits(this.state.time.getMinutes()) }
|
||||
{ ('0' + this.state.time.getMinutes()).slice(-2) }
|
||||
</span>
|
||||
{ this.renderAMPMLabels() }
|
||||
</header>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
const React = window.React;
|
||||
const time = require('../utils/time');
|
||||
|
||||
const Input = require('../input');
|
||||
const TimeDialog = require('./dialog');
|
||||
const utils = require('../utils/date-time');
|
||||
|
||||
module.exports = React.createClass({
|
||||
displayName: 'TimePicker',
|
||||
|
@ -25,7 +25,7 @@ module.exports = React.createClass({
|
|||
},
|
||||
|
||||
onTimeSelected (time) {
|
||||
this.refs.input.setValue(utils.formatTime(time, this.props.format));
|
||||
this.refs.input.setValue(time.formatTime(time, this.props.format));
|
||||
this.setState({value: time});
|
||||
},
|
||||
|
||||
|
@ -35,7 +35,7 @@ module.exports = React.createClass({
|
|||
|
||||
formatTime () {
|
||||
if (this.state.value) {
|
||||
return utils.formatTime(this.state.value, this.props.format);
|
||||
return time.formatTime(this.state.value, this.props.format);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -1,17 +1,5 @@
|
|||
module.exports = {
|
||||
|
||||
range (start = 0, stop = null, step = 1) {
|
||||
let [_start, _stop] = (stop !== null) ? [start, stop] : [0, start];
|
||||
let length = Math.max(Math.ceil((_stop - _start) / step), 0);
|
||||
let range = Array(length);
|
||||
|
||||
for (let idx = 0; idx < length; idx++, _start += step) {
|
||||
range[idx] = _start;
|
||||
}
|
||||
|
||||
return range;
|
||||
},
|
||||
|
||||
getMousePosition (event) {
|
||||
return {
|
||||
x: event.pageX,
|
||||
|
@ -43,15 +31,6 @@ module.exports = {
|
|||
for (let key in eventMap) {
|
||||
document.removeEventListener(key, eventMap[key], false);
|
||||
}
|
||||
},
|
||||
|
||||
angleFromPositions (cx, cy, ex, ey) {
|
||||
let theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
|
||||
return theta * 180 / Math.PI;
|
||||
},
|
||||
|
||||
angle360FromPositions (cx, cy, ex, ey) {
|
||||
let angle = this.angleFromPositions(cx, cy, ex, ey);
|
||||
return angle < 0 ? 360 + angle : angle;
|
||||
}
|
||||
|
||||
};
|
|
@ -1,5 +1,28 @@
|
|||
module.exports = {
|
||||
dateTime: require('./date-time'),
|
||||
helper: require('./helper'),
|
||||
prefixer: require('./prefixer')
|
||||
|
||||
angleFromPositions (cx, cy, ex, ey) {
|
||||
let theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
|
||||
return theta * 180 / Math.PI;
|
||||
},
|
||||
|
||||
angle360FromPositions (cx, cy, ex, ey) {
|
||||
let angle = this.angleFromPositions(cx, cy, ex, ey);
|
||||
return angle < 0 ? 360 + angle : angle;
|
||||
},
|
||||
|
||||
range (start = 0, stop = null, step = 1) {
|
||||
let [_start, _stop] = (stop !== null) ? [start, stop] : [0, start];
|
||||
let length = Math.max(Math.ceil((_stop - _start) / step), 0);
|
||||
let range = Array(length);
|
||||
|
||||
for (let idx = 0; idx < length; idx++, _start += step) {
|
||||
range[idx] = _start;
|
||||
}
|
||||
|
||||
return range;
|
||||
},
|
||||
|
||||
events: require('./events'),
|
||||
prefixer: require('./prefixer'),
|
||||
testing: require('./testing')
|
||||
};
|
||||
|
|
|
@ -172,10 +172,6 @@ module.exports = {
|
|||
if (hours.length < 2) hours = '0' + hours;
|
||||
if (mins.length < 2) mins = '0' + mins;
|
||||
return hours + ':' + mins;
|
||||
},
|
||||
|
||||
twoDigits (number) {
|
||||
return ('0' + number).slice(-2);
|
||||
}
|
||||
|
||||
};
|
|
@ -15,7 +15,7 @@ Slider = require './components/slider'
|
|||
Switch = require './components/switch'
|
||||
Calendar = require './components/calendar'
|
||||
Pickers = require './components/pickers'
|
||||
Clock = require './components/clock'
|
||||
Clock = require '../components/clock'
|
||||
Tabs = require './components/tabs'
|
||||
|
||||
Test = React.createClass
|
||||
|
@ -26,19 +26,9 @@ Test = React.createClass
|
|||
<app data-toolbox={true}>
|
||||
<h1>React-Toolbox <small>New way for create</small></h1>
|
||||
|
||||
<Aside />
|
||||
<Autocomplete />
|
||||
<Button />
|
||||
<Card />
|
||||
<Dialog />
|
||||
<Dropdown />
|
||||
<FontIcon />
|
||||
<Form />
|
||||
<Progress />
|
||||
<Slider />
|
||||
<Switch />
|
||||
<Tabs />
|
||||
<Pickers />
|
||||
<div style={width: '320px'}>
|
||||
<Pickers display="minutes"/>
|
||||
</div>
|
||||
</app>
|
||||
|
||||
React.render <Test/>, document.body
|
||||
|
|
Loading…
Reference in New Issue