Finish autoinjects
parent
6afb914126
commit
c356a2be5a
|
@ -22,3 +22,4 @@ export const SWITCH = 'RTSwitch';
|
||||||
export const TABLE = 'RTTable';
|
export const TABLE = 'RTTable';
|
||||||
export const TABS = 'RTTabs';
|
export const TABS = 'RTTabs';
|
||||||
export const TOOLTIP = 'RTTooltip';
|
export const TOOLTIP = 'RTTooltip';
|
||||||
|
export const TIMEPICKER = 'RTTimePicker';
|
||||||
|
|
|
@ -13,27 +13,18 @@ export Dropdown from './dropdown';
|
||||||
export FontIcon from './font_icon';
|
export FontIcon from './font_icon';
|
||||||
export Form from './form';
|
export Form from './form';
|
||||||
export Input from './input';
|
export Input from './input';
|
||||||
export { Layout, NavDrawer, Panel, Sidebar } from './layout';
|
export * from './layout';
|
||||||
export Link from './link';
|
export Link from './link';
|
||||||
export List from './list/List';
|
export * from './list';
|
||||||
export ListItem from './list/ListItem';
|
export * from './menu';
|
||||||
export ListDivider from './list/ListDivider';
|
|
||||||
export ListCheckbox from './list/ListCheckbox';
|
|
||||||
export ListSubHeader from './list/ListSubHeader';
|
|
||||||
export Menu from './menu/Menu';
|
|
||||||
export MenuItem from './menu/MenuItem';
|
|
||||||
export MenuDivider from './menu/MenuDivider';
|
|
||||||
export IconMenu from './menu/IconMenu';
|
|
||||||
export Navigation from './navigation';
|
export Navigation from './navigation';
|
||||||
export ProgressBar from './progress_bar';
|
export ProgressBar from './progress_bar';
|
||||||
export RadioGroup from './radio/RadioGroup';
|
export * from './radio';
|
||||||
export RadioButton from './radio/RadioButton';
|
|
||||||
export Ripple from './ripple';
|
export Ripple from './ripple';
|
||||||
export Slider from './slider';
|
export Slider from './slider';
|
||||||
export Snackbar from './snackbar';
|
export Snackbar from './snackbar';
|
||||||
export Switch from './switch';
|
export Switch from './switch';
|
||||||
export Table from './table';
|
export Table from './table';
|
||||||
export Tabs from './tabs/Tabs';
|
export * from './tabs';
|
||||||
export Tab from './tabs/Tab';
|
|
||||||
export Tooltip from './tooltip';
|
export Tooltip from './tooltip';
|
||||||
export TimePicker from './time_picker';
|
export TimePicker from './time_picker';
|
||||||
|
|
|
@ -10,5 +10,6 @@ const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2
|
||||||
const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
|
const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio));
|
||||||
const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton));
|
const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton));
|
||||||
|
|
||||||
|
export default ThemedRadioButton;
|
||||||
export { ThemedRadioButton as RadioButton };
|
export { ThemedRadioButton as RadioButton };
|
||||||
export { ThemedRadioGroup as RadioGroup };
|
export { ThemedRadioGroup as RadioGroup };
|
||||||
|
|
|
@ -1,23 +1,23 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import CssTransitionGroup from 'react-addons-css-transition-group';
|
import CssTransitionGroup from 'react-addons-css-transition-group';
|
||||||
import { ZoomIn, ZoomOut } from '../animations';
|
import { ZoomIn, ZoomOut } from '../animations';
|
||||||
import time from '../utils/time';
|
import time from '../utils/time.js';
|
||||||
import Hours from './ClockHours';
|
import Hours from './ClockHours.js';
|
||||||
import Minutes from './ClockMinutes';
|
import Minutes from './ClockMinutes.js';
|
||||||
|
|
||||||
class Clock extends React.Component {
|
class Clock extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
className: React.PropTypes.string,
|
className: PropTypes.string,
|
||||||
display: React.PropTypes.oneOf(['hours', 'minutes']),
|
display: PropTypes.oneOf(['hours', 'minutes']),
|
||||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
format: PropTypes.oneOf(['24hr', 'ampm']),
|
||||||
onChange: React.PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
onHandMoved: React.PropTypes.func,
|
onHandMoved: PropTypes.func,
|
||||||
theme: React.PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
clock: React.PropTypes.string.isRequired,
|
clock: PropTypes.string.isRequired,
|
||||||
clockWrapper: React.PropTypes.string.isRequired,
|
clockWrapper: PropTypes.string.isRequired,
|
||||||
placeholder: React.PropTypes.string.isRequired
|
placeholder: PropTypes.string.isRequired
|
||||||
}),
|
}),
|
||||||
time: React.PropTypes.object
|
time: PropTypes.object
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
class Face extends React.Component {
|
class Face extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
active: React.PropTypes.number,
|
active: PropTypes.number,
|
||||||
numbers: React.PropTypes.array,
|
numbers: PropTypes.array,
|
||||||
radius: React.PropTypes.number,
|
radius: PropTypes.number,
|
||||||
spacing: React.PropTypes.number,
|
spacing: PropTypes.number,
|
||||||
theme: React.PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
active: React.PropTypes.string.isRequired,
|
active: PropTypes.string.isRequired,
|
||||||
face: React.PropTypes.string.isRequired,
|
face: PropTypes.string.isRequired,
|
||||||
number: React.PropTypes.string.isRequired
|
number: PropTypes.string.isRequired
|
||||||
}),
|
}),
|
||||||
twoDigits: React.PropTypes.bool
|
twoDigits: PropTypes.bool
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import events from '../utils/events';
|
import events from '../utils/events.js';
|
||||||
import prefixer from '../utils/prefixer';
|
import prefixer from '../utils/prefixer.js';
|
||||||
import utils from '../utils/utils';
|
import utils from '../utils/utils.js';
|
||||||
|
|
||||||
class Hand extends React.Component {
|
class Hand extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
angle: React.PropTypes.number,
|
angle: PropTypes.number,
|
||||||
className: React.PropTypes.string,
|
className: PropTypes.string,
|
||||||
length: React.PropTypes.number,
|
length: PropTypes.number,
|
||||||
onMove: React.PropTypes.func,
|
onMove: PropTypes.func,
|
||||||
onMoved: React.PropTypes.func,
|
onMoved: PropTypes.func,
|
||||||
origin: React.PropTypes.object,
|
origin: PropTypes.object,
|
||||||
step: React.PropTypes.number,
|
step: PropTypes.number,
|
||||||
theme: React.PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
hand: React.PropTypes.string.isRequired,
|
hand: PropTypes.string.isRequired,
|
||||||
knob: React.PropTypes.string.isRequired
|
knob: PropTypes.string.isRequired
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,23 +1,23 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import utils from '../utils/utils';
|
import utils from '../utils/utils.js';
|
||||||
import Face from './ClockFace';
|
import Hand from './ClockHand.js';
|
||||||
import Hand from './ClockHand';
|
import Face from './ClockFace.js';
|
||||||
|
|
||||||
const outerNumbers = [0, ...utils.range(13, 24)];
|
const outerNumbers = [0, ...utils.range(13, 24)];
|
||||||
const innerNumbers = [12, ...utils.range(1, 12)];
|
const innerNumbers = [12, ...utils.range(1, 12)];
|
||||||
const innerSpacing = 1.7;
|
const innerSpacing = 1.7;
|
||||||
const step = 360 / 12;
|
const step = 360 / 12;
|
||||||
|
|
||||||
class Hours extends React.Component {
|
class Hours extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
center: React.PropTypes.object,
|
center: PropTypes.object,
|
||||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
format: PropTypes.oneOf(['24hr', 'ampm']),
|
||||||
onChange: React.PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
onHandMoved: React.PropTypes.func,
|
onHandMoved: PropTypes.func,
|
||||||
radius: React.PropTypes.number,
|
radius: PropTypes.number,
|
||||||
selected: React.PropTypes.number,
|
selected: PropTypes.number,
|
||||||
spacing: React.PropTypes.number,
|
spacing: PropTypes.number,
|
||||||
theme: React.PropTypes.object
|
theme: PropTypes.object
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import utils from '../utils/utils';
|
import utils from '../utils/utils.js';
|
||||||
import Face from './ClockFace';
|
import Hand from './ClockHand.js';
|
||||||
import Hand from './ClockHand';
|
import Face from './ClockFace.js';
|
||||||
|
|
||||||
const minutes = utils.range(0, 60, 5);
|
const minutes = utils.range(0, 60, 5);
|
||||||
const step = 360 / 60;
|
const step = 360 / 60;
|
||||||
|
|
||||||
class Minutes extends React.Component {
|
class Minutes extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
center: React.PropTypes.object,
|
center: PropTypes.object,
|
||||||
onChange: React.PropTypes.func,
|
onChange: PropTypes.func,
|
||||||
radius: React.PropTypes.number,
|
radius: PropTypes.number,
|
||||||
selected: React.PropTypes.number,
|
selected: PropTypes.number,
|
||||||
spacing: React.PropTypes.number,
|
spacing: PropTypes.number,
|
||||||
theme: React.PropTypes.shape({
|
theme: PropTypes.shape({
|
||||||
small: React.PropTypes.string.isRequired
|
small: PropTypes.string.isRequired
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,74 +1,84 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import { themr } from 'react-css-themr';
|
import { themr } from 'react-css-themr';
|
||||||
import events from '../utils/events';
|
import { TIME_PICKER } from '../identifiers.js';
|
||||||
import time from '../utils/time';
|
import events from '../utils/events.js';
|
||||||
import Input from '../input';
|
import time from '../utils/time.js';
|
||||||
import TimePickerDialog from './TimePickerDialog';
|
import InjectDialog from '../dialog/Dialog.js';
|
||||||
|
import InjectInput from '../input/Input.js';
|
||||||
|
import timePickerDialogFactory from './TimePickerDialog.js';
|
||||||
|
|
||||||
class TimePicker extends React.Component {
|
const factory = (TimePickerDialog, Input) => {
|
||||||
static propTypes = {
|
class TimePicker extends Component {
|
||||||
className: React.PropTypes.string,
|
static propTypes = {
|
||||||
error: React.PropTypes.string,
|
className: PropTypes.string,
|
||||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
error: PropTypes.string,
|
||||||
inputClassName: React.PropTypes.string,
|
format: PropTypes.oneOf(['24hr', 'ampm']),
|
||||||
label: React.PropTypes.string,
|
inputClassName: PropTypes.string,
|
||||||
onChange: React.PropTypes.func,
|
label: PropTypes.string,
|
||||||
theme: React.PropTypes.shape({
|
onChange: PropTypes.func,
|
||||||
input: React.PropTypes.string.isRequired
|
theme: PropTypes.shape({
|
||||||
}),
|
input: PropTypes.string.isRequired
|
||||||
value: React.PropTypes.object
|
}),
|
||||||
};
|
value: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
className: '',
|
className: '',
|
||||||
format: '24hr'
|
format: '24hr'
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
active: false
|
active: false
|
||||||
};
|
};
|
||||||
|
|
||||||
handleDismiss = () => {
|
handleDismiss = () => {
|
||||||
this.setState({active: false});
|
this.setState({active: false});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleInputMouseDown = (event) => {
|
handleInputMouseDown = (event) => {
|
||||||
events.pauseEvent(event);
|
events.pauseEvent(event);
|
||||||
this.setState({active: true});
|
this.setState({active: true});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSelect = (value, event) => {
|
handleSelect = (value, event) => {
|
||||||
if (this.props.onChange) this.props.onChange(value, event);
|
if (this.props.onChange) this.props.onChange(value, event);
|
||||||
this.setState({active: false});
|
this.setState({active: false});
|
||||||
};
|
};
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { value, format, inputClassName, theme } = this.props;
|
const { value, format, inputClassName, theme } = this.props;
|
||||||
const formattedTime = value ? time.formatTime(value, format) : '';
|
const formattedTime = value ? time.formatTime(value, format) : '';
|
||||||
return (
|
return (
|
||||||
<div data-react-toolbox='time-picker'>
|
<div data-react-toolbox='time-picker'>
|
||||||
<Input
|
<Input
|
||||||
className={classnames(theme.input, {[inputClassName]: inputClassName })}
|
className={classnames(theme.input, {[inputClassName]: inputClassName })}
|
||||||
error={this.props.error}
|
error={this.props.error}
|
||||||
label={this.props.label}
|
label={this.props.label}
|
||||||
onMouseDown={this.handleInputMouseDown}
|
onMouseDown={this.handleInputMouseDown}
|
||||||
readOnly
|
readOnly
|
||||||
type='text'
|
type='text'
|
||||||
value={formattedTime}
|
value={formattedTime}
|
||||||
/>
|
/>
|
||||||
<TimePickerDialog
|
<TimePickerDialog
|
||||||
active={this.state.active}
|
active={this.state.active}
|
||||||
className={this.props.className}
|
className={this.props.className}
|
||||||
format={format}
|
format={format}
|
||||||
onDismiss={this.handleDismiss}
|
onDismiss={this.handleDismiss}
|
||||||
onSelect={this.handleSelect}
|
onSelect={this.handleSelect}
|
||||||
theme={this.props.theme}
|
theme={this.props.theme}
|
||||||
value={this.props.value}
|
value={this.props.value}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
export default themr('ToolboxTimePicker')(TimePicker);
|
return TimePicker;
|
||||||
|
};
|
||||||
|
|
||||||
|
const TimePickerDialog = timePickerDialogFactory(InjectDialog);
|
||||||
|
const TimePicker = factory(TimePickerDialog, InjectInput);
|
||||||
|
export default themr(TIME_PICKER)(TimePicker);
|
||||||
|
export { factory as timePickerFactory };
|
||||||
|
export { TimePicker };
|
||||||
|
|
|
@ -1,125 +1,128 @@
|
||||||
import React from 'react';
|
import React, { Component, PropTypes } from 'react';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import time from '../utils/time';
|
import time from '../utils/time.js';
|
||||||
import Clock from './Clock';
|
import Clock from './Clock.js';
|
||||||
import Dialog from '../dialog';
|
|
||||||
|
|
||||||
class TimePickerDialog extends React.Component {
|
const factory = (Dialog) => {
|
||||||
static propTypes = {
|
class TimePickerDialog extends Component {
|
||||||
active: React.PropTypes.bool,
|
static propTypes = {
|
||||||
className: React.PropTypes.string,
|
active: PropTypes.bool,
|
||||||
format: React.PropTypes.oneOf(['24hr', 'ampm']),
|
className: PropTypes.string,
|
||||||
onDismiss: React.PropTypes.func,
|
format: PropTypes.oneOf(['24hr', 'ampm']),
|
||||||
onSelect: React.PropTypes.func,
|
onDismiss: PropTypes.func,
|
||||||
theme: React.PropTypes.shape({
|
onSelect: PropTypes.func,
|
||||||
am: React.PropTypes.string.isRequired,
|
theme: PropTypes.shape({
|
||||||
amFormat: React.PropTypes.string.isRequired,
|
am: PropTypes.string.isRequired,
|
||||||
ampm: React.PropTypes.string.isRequired,
|
amFormat: PropTypes.string.isRequired,
|
||||||
button: React.PropTypes.string.isRequired,
|
ampm: PropTypes.string.isRequired,
|
||||||
dialog: React.PropTypes.string.isRequired,
|
button: PropTypes.string.isRequired,
|
||||||
header: React.PropTypes.string.isRequired,
|
dialog: PropTypes.string.isRequired,
|
||||||
hours: React.PropTypes.string.isRequired,
|
header: PropTypes.string.isRequired,
|
||||||
hoursDisplay: React.PropTypes.string.isRequired,
|
hours: PropTypes.string.isRequired,
|
||||||
minutes: React.PropTypes.string.isRequired,
|
hoursDisplay: PropTypes.string.isRequired,
|
||||||
minutesDisplay: React.PropTypes.string.isRequired,
|
minutes: PropTypes.string.isRequired,
|
||||||
pm: React.PropTypes.string.isRequired,
|
minutesDisplay: PropTypes.string.isRequired,
|
||||||
pmFormat: React.PropTypes.string.isRequired,
|
pm: PropTypes.string.isRequired,
|
||||||
separator: React.PropTypes.string.isRequired
|
pmFormat: PropTypes.string.isRequired,
|
||||||
}),
|
separator: PropTypes.string.isRequired
|
||||||
value: React.PropTypes.object
|
}),
|
||||||
};
|
value: PropTypes.object
|
||||||
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
active: false,
|
active: false,
|
||||||
format: '24hr',
|
format: '24hr',
|
||||||
value: new Date()
|
value: new Date()
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
display: 'hours',
|
display: 'hours',
|
||||||
displayTime: this.props.value
|
displayTime: this.props.value
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidUpdate (prevProps) {
|
componentDidUpdate (prevProps) {
|
||||||
if (!prevProps.active && this.props.active) {
|
if (!prevProps.active && this.props.active) {
|
||||||
setTimeout(this.refs.clock.handleCalculateShape, 1000);
|
setTimeout(this.refs.clock.handleCalculateShape, 1000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
handleClockChange = (value) => {
|
handleClockChange = (value) => {
|
||||||
this.setState({displayTime: value});
|
this.setState({displayTime: value});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleSelect = (event) => {
|
handleSelect = (event) => {
|
||||||
this.props.onSelect(this.state.displayTime, event);
|
this.props.onSelect(this.state.displayTime, event);
|
||||||
};
|
};
|
||||||
|
|
||||||
toggleTimeMode = () => {
|
toggleTimeMode = () => {
|
||||||
this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
|
this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)});
|
||||||
};
|
};
|
||||||
|
|
||||||
handleHandMoved = () => {
|
handleHandMoved = () => {
|
||||||
if (this.state.display === 'hours') this.setState({display: 'minutes'});
|
if (this.state.display === 'hours') this.setState({display: 'minutes'});
|
||||||
};
|
};
|
||||||
|
|
||||||
switchDisplay = (display) => {
|
switchDisplay = (display) => {
|
||||||
this.setState({display});
|
this.setState({display});
|
||||||
};
|
};
|
||||||
|
|
||||||
actions = [
|
actions = [
|
||||||
{ label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
|
{ label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss },
|
||||||
{ label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
|
{ label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect }
|
||||||
];
|
];
|
||||||
|
|
||||||
formatHours () {
|
formatHours () {
|
||||||
if (this.props.format === 'ampm') {
|
if (this.props.format === 'ampm') {
|
||||||
return this.state.displayTime.getHours() % 12 || 12;
|
return this.state.displayTime.getHours() % 12 || 12;
|
||||||
} else {
|
} else {
|
||||||
return this.state.displayTime.getHours();
|
return this.state.displayTime.getHours();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
renderAMPMLabels () {
|
renderAMPMLabels () {
|
||||||
const { theme } = this.props;
|
const { theme } = this.props;
|
||||||
if (this.props.format === 'ampm') {
|
if (this.props.format === 'ampm') {
|
||||||
|
return (
|
||||||
|
<div className={theme.ampm}>
|
||||||
|
<span className={theme.am} onClick={this.toggleTimeMode}>AM</span>
|
||||||
|
<span className={theme.pm} onClick={this.toggleTimeMode}>PM</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
const { theme } = this.props;
|
||||||
|
const display = `${this.state.display}Display`;
|
||||||
|
const format = `${time.getTimeMode(this.state.displayTime)}Format`;
|
||||||
|
const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
|
||||||
return (
|
return (
|
||||||
<div className={theme.ampm}>
|
<Dialog active={this.props.active} className={className} actions={this.actions}>
|
||||||
<span className={theme.am} onClick={this.toggleTimeMode}>AM</span>
|
<header className={theme.header}>
|
||||||
<span className={theme.pm} onClick={this.toggleTimeMode}>PM</span>
|
<span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
|
||||||
</div>
|
{('0' + this.formatHours()).slice(-2)}
|
||||||
|
</span>
|
||||||
|
<span className={theme.separator}>:</span>
|
||||||
|
<span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
|
||||||
|
{('0' + this.state.displayTime.getMinutes()).slice(-2)}
|
||||||
|
</span>
|
||||||
|
{this.renderAMPMLabels()}
|
||||||
|
</header>
|
||||||
|
<Clock
|
||||||
|
ref='clock'
|
||||||
|
display={this.state.display}
|
||||||
|
format={this.props.format}
|
||||||
|
onChange={this.handleClockChange}
|
||||||
|
onHandMoved={this.handleHandMoved}
|
||||||
|
theme={this.props.theme}
|
||||||
|
time={this.state.displayTime}
|
||||||
|
/>
|
||||||
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
return TimePickerDialog;
|
||||||
const { theme } = this.props;
|
};
|
||||||
const display = `${this.state.display}Display`;
|
|
||||||
const format = `${time.getTimeMode(this.state.displayTime)}Format`;
|
|
||||||
const className = classnames([theme.dialog, theme[display], theme[format]], this.props.className);
|
|
||||||
return (
|
|
||||||
<Dialog active={this.props.active} className={className} actions={this.actions}>
|
|
||||||
<header className={theme.header}>
|
|
||||||
<span className={theme.hours} onClick={this.switchDisplay.bind(this, 'hours')}>
|
|
||||||
{('0' + this.formatHours()).slice(-2)}
|
|
||||||
</span>
|
|
||||||
<span className={theme.separator}>:</span>
|
|
||||||
<span className={theme.minutes} onClick={this.switchDisplay.bind(this, 'minutes')}>
|
|
||||||
{('0' + this.state.displayTime.getMinutes()).slice(-2)}
|
|
||||||
</span>
|
|
||||||
{this.renderAMPMLabels()}
|
|
||||||
</header>
|
|
||||||
<Clock
|
|
||||||
ref='clock'
|
|
||||||
display={this.state.display}
|
|
||||||
format={this.props.format}
|
|
||||||
onChange={this.handleClockChange}
|
|
||||||
onHandMoved={this.handleHandMoved}
|
|
||||||
theme={this.props.theme}
|
|
||||||
time={this.state.displayTime}
|
|
||||||
/>
|
|
||||||
</Dialog>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default TimePickerDialog;
|
export default factory;
|
||||||
|
|
|
@ -1 +1,12 @@
|
||||||
export default from './TimePicker';
|
import { themr } from 'react-css-themr';
|
||||||
|
import { TIME_PICKER } from '../identifiers.js';
|
||||||
|
import { timePickerFactory } from './TimePicker.js';
|
||||||
|
import timePickerDialogFactory from './TimePickerDialog.js';
|
||||||
|
import Dialog from '../dialog';
|
||||||
|
import Input from '../input';
|
||||||
|
import theme from './theme.scss';
|
||||||
|
|
||||||
|
const TimePickerDialog = timePickerDialogFactory(Dialog);
|
||||||
|
const ThemedTimePicker = themr(TIME_PICKER, theme)(timePickerFactory(TimePickerDialog, Input));
|
||||||
|
export default ThemedTimePicker;
|
||||||
|
export { ThemedTimePicker as TimePicker };
|
||||||
|
|
|
@ -5,7 +5,6 @@ A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pic
|
||||||
<!-- example -->
|
<!-- example -->
|
||||||
```jsx
|
```jsx
|
||||||
import TimePicker from 'react-toolbox/lib/time_picker';
|
import TimePicker from 'react-toolbox/lib/time_picker';
|
||||||
import theme from 'react-toolbox/lib/time_picker/theme'
|
|
||||||
|
|
||||||
let time = new Date();
|
let time = new Date();
|
||||||
time.setHours(17);
|
time.setHours(17);
|
||||||
|
@ -24,13 +23,14 @@ class TimePickerTest extends React.Component {
|
||||||
label='Finishing time'
|
label='Finishing time'
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
value={this.state.time}
|
value={this.state.time}
|
||||||
theme={theme}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
If you want to provide a theme via context, the component key is `RTTimePicker`.
|
||||||
|
|
||||||
## Properties
|
## Properties
|
||||||
|
|
||||||
| Name | Type | Default | Description|
|
| Name | Type | Default | Description|
|
||||||
|
@ -43,9 +43,7 @@ class TimePickerTest extends React.Component {
|
||||||
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
| `onChange` | `Function` | | Callback called when the picker value is changed.|
|
||||||
| `value` | `Date` | | Datetime object with currrently selected time. |
|
| `value` | `Date` | | Datetime object with currrently selected time. |
|
||||||
|
|
||||||
## Theming
|
## Theme
|
||||||
|
|
||||||
You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxTimePicker`, it should implement the following interface:
|
|
||||||
|
|
||||||
| Name | Description|
|
| Name | Description|
|
||||||
|:---------|:-----------|
|
|:---------|:-----------|
|
||||||
|
|
75
spec/root.js
75
spec/root.js
|
@ -1,7 +1,6 @@
|
||||||
/* global VERSION */
|
/* global VERSION */
|
||||||
|
import '../components/commons.scss';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ThemeProvider } from 'react-css-themr';
|
|
||||||
import theme from './theme';
|
|
||||||
import AppBar from '../components/app_bar';
|
import AppBar from '../components/app_bar';
|
||||||
import Autocomplete from './components/autocomplete';
|
import Autocomplete from './components/autocomplete';
|
||||||
import Avatar from './components/avatar';
|
import Avatar from './components/avatar';
|
||||||
|
@ -30,43 +29,41 @@ import Tooltip from './components/tooltip';
|
||||||
import style from './style';
|
import style from './style';
|
||||||
|
|
||||||
const Root = () => (
|
const Root = () => (
|
||||||
<ThemeProvider theme={theme}>
|
<div className={style.app}>
|
||||||
<div className={style.app}>
|
<AppBar className={style.appbar} fixed flat>
|
||||||
<AppBar className={style.appbar} fixed flat>
|
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
|
||||||
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
|
<ButtonToolbox
|
||||||
<ButtonToolbox
|
accent
|
||||||
accent
|
className={style.github}
|
||||||
className={style.github}
|
icon='web'
|
||||||
icon='web'
|
floating
|
||||||
floating
|
onClick={() => {window.href = 'http://react-toolbox';}}
|
||||||
onClick={() => {window.href = 'http://react-toolbox';}}
|
/>
|
||||||
/>
|
</AppBar>
|
||||||
</AppBar>
|
<Autocomplete />
|
||||||
<Autocomplete />
|
<Avatar />
|
||||||
<Avatar />
|
<Button />
|
||||||
<Button />
|
<Card />
|
||||||
<Card />
|
<Checkbox />
|
||||||
<Checkbox />
|
<Chip />
|
||||||
<Chip />
|
<Dialog />
|
||||||
<Dialog />
|
<Drawer />
|
||||||
<Drawer />
|
<Dropdown />
|
||||||
<Dropdown />
|
<IconMenu />
|
||||||
<IconMenu />
|
<Input />
|
||||||
<Input />
|
<Layout />
|
||||||
<Layout />
|
<List />
|
||||||
<List />
|
<Menu />
|
||||||
<Menu />
|
<Pickers />
|
||||||
<Pickers />
|
<Progress />
|
||||||
<Progress />
|
<Radio />
|
||||||
<Radio />
|
<Slider />
|
||||||
<Slider />
|
<Snackbar />
|
||||||
<Snackbar />
|
<Switch />
|
||||||
<Switch />
|
<Table />
|
||||||
<Table />
|
<Tabs />
|
||||||
<Tabs />
|
<Tooltip />
|
||||||
<Tooltip />
|
</div>
|
||||||
</div>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export default Root;
|
export default Root;
|
||||||
|
|
|
@ -1,7 +0,0 @@
|
||||||
import '../components/commons.scss';
|
|
||||||
|
|
||||||
import ToolboxTimePicker from '../components/time_picker/theme.scss';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
ToolboxTimePicker
|
|
||||||
};
|
|
Loading…
Reference in New Issue