Finish autoinjects

old
Javi Velasco 2016-05-31 10:23:05 +02:00
parent 6afb914126
commit c356a2be5a
14 changed files with 304 additions and 299 deletions

View File

@ -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';

View File

@ -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';

View File

@ -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 };

View File

@ -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 = {

View File

@ -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 = {

View File

@ -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
}) })
}; };

View File

@ -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 = {

View File

@ -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
}) })
}; };

View File

@ -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 };

View File

@ -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;

View File

@ -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 };

View File

@ -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|
|:---------|:-----------| |:---------|:-----------|

View File

@ -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;

View File

@ -1,7 +0,0 @@
import '../components/commons.scss';
import ToolboxTimePicker from '../components/time_picker/theme.scss';
export default {
ToolboxTimePicker
};