From c356a2be5a39f8a7a0df83eb3a5feb54e8ebccea Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Tue, 31 May 2016 10:23:05 +0200 Subject: [PATCH] Finish autoinjects --- components/identifiers.js | 1 + components/index.js | 19 +- components/radio/index.js | 1 + components/time_picker/Clock.js | 30 +-- components/time_picker/ClockFace.js | 22 +-- components/time_picker/ClockHand.js | 30 +-- components/time_picker/ClockHours.js | 26 +-- components/time_picker/ClockMinutes.js | 24 +-- components/time_picker/TimePicker.js | 136 +++++++------ components/time_picker/TimePickerDialog.js | 211 +++++++++++---------- components/time_picker/index.js | 13 +- components/time_picker/readme.md | 8 +- spec/root.js | 75 ++++---- spec/theme.js | 7 - 14 files changed, 304 insertions(+), 299 deletions(-) delete mode 100644 spec/theme.js diff --git a/components/identifiers.js b/components/identifiers.js index bcb2046d..bf567bf1 100644 --- a/components/identifiers.js +++ b/components/identifiers.js @@ -22,3 +22,4 @@ export const SWITCH = 'RTSwitch'; export const TABLE = 'RTTable'; export const TABS = 'RTTabs'; export const TOOLTIP = 'RTTooltip'; +export const TIMEPICKER = 'RTTimePicker'; diff --git a/components/index.js b/components/index.js index fe4c29a3..4d83a958 100644 --- a/components/index.js +++ b/components/index.js @@ -13,27 +13,18 @@ export Dropdown from './dropdown'; export FontIcon from './font_icon'; export Form from './form'; export Input from './input'; -export { Layout, NavDrawer, Panel, Sidebar } from './layout'; +export * from './layout'; export Link from './link'; -export List from './list/List'; -export ListItem from './list/ListItem'; -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 * from './list'; +export * from './menu'; export Navigation from './navigation'; export ProgressBar from './progress_bar'; -export RadioGroup from './radio/RadioGroup'; -export RadioButton from './radio/RadioButton'; +export * from './radio'; export Ripple from './ripple'; export Slider from './slider'; export Snackbar from './snackbar'; export Switch from './switch'; export Table from './table'; -export Tabs from './tabs/Tabs'; -export Tab from './tabs/Tab'; +export * from './tabs'; export Tooltip from './tooltip'; export TimePicker from './time_picker'; diff --git a/components/radio/index.js b/components/radio/index.js index b4d8aad1..62167cce 100644 --- a/components/radio/index.js +++ b/components/radio/index.js @@ -10,5 +10,6 @@ const ThemedRadio = radioFactory(themedRippleFactory({ centered: true, spread: 2 const ThemedRadioButton = themr(RADIO, theme)(radioButtonFactory(ThemedRadio)); const ThemedRadioGroup = themr(RADIO, theme)(radioGroupFactory(ThemedRadioButton)); +export default ThemedRadioButton; export { ThemedRadioButton as RadioButton }; export { ThemedRadioGroup as RadioGroup }; diff --git a/components/time_picker/Clock.js b/components/time_picker/Clock.js index ecc0fad1..13655af3 100644 --- a/components/time_picker/Clock.js +++ b/components/time_picker/Clock.js @@ -1,23 +1,23 @@ -import React from 'react'; +import React, { Component, PropTypes } from 'react'; import CssTransitionGroup from 'react-addons-css-transition-group'; import { ZoomIn, ZoomOut } from '../animations'; -import time from '../utils/time'; -import Hours from './ClockHours'; -import Minutes from './ClockMinutes'; +import time from '../utils/time.js'; +import Hours from './ClockHours.js'; +import Minutes from './ClockMinutes.js'; -class Clock extends React.Component { +class Clock extends Component { static propTypes = { - className: React.PropTypes.string, - display: React.PropTypes.oneOf(['hours', 'minutes']), - format: React.PropTypes.oneOf(['24hr', 'ampm']), - onChange: React.PropTypes.func, - onHandMoved: React.PropTypes.func, - theme: React.PropTypes.shape({ - clock: React.PropTypes.string.isRequired, - clockWrapper: React.PropTypes.string.isRequired, - placeholder: React.PropTypes.string.isRequired + className: PropTypes.string, + display: PropTypes.oneOf(['hours', 'minutes']), + format: PropTypes.oneOf(['24hr', 'ampm']), + onChange: PropTypes.func, + onHandMoved: PropTypes.func, + theme: PropTypes.shape({ + clock: PropTypes.string.isRequired, + clockWrapper: PropTypes.string.isRequired, + placeholder: PropTypes.string.isRequired }), - time: React.PropTypes.object + time: PropTypes.object }; static defaultProps = { diff --git a/components/time_picker/ClockFace.js b/components/time_picker/ClockFace.js index 58dffdc8..4061209b 100644 --- a/components/time_picker/ClockFace.js +++ b/components/time_picker/ClockFace.js @@ -1,18 +1,18 @@ -import React from 'react'; +import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; -class Face extends React.Component { +class Face extends Component { static propTypes = { - active: React.PropTypes.number, - numbers: React.PropTypes.array, - radius: React.PropTypes.number, - spacing: React.PropTypes.number, - theme: React.PropTypes.shape({ - active: React.PropTypes.string.isRequired, - face: React.PropTypes.string.isRequired, - number: React.PropTypes.string.isRequired + active: PropTypes.number, + numbers: PropTypes.array, + radius: PropTypes.number, + spacing: PropTypes.number, + theme: PropTypes.shape({ + active: PropTypes.string.isRequired, + face: PropTypes.string.isRequired, + number: PropTypes.string.isRequired }), - twoDigits: React.PropTypes.bool + twoDigits: PropTypes.bool }; static defaultProps = { diff --git a/components/time_picker/ClockHand.js b/components/time_picker/ClockHand.js index 8dbd0dd3..d50aa7e1 100644 --- a/components/time_picker/ClockHand.js +++ b/components/time_picker/ClockHand.js @@ -1,20 +1,20 @@ -import React from 'react'; -import events from '../utils/events'; -import prefixer from '../utils/prefixer'; -import utils from '../utils/utils'; +import React, { Component, PropTypes } from 'react'; +import events from '../utils/events.js'; +import prefixer from '../utils/prefixer.js'; +import utils from '../utils/utils.js'; -class Hand extends React.Component { +class Hand extends Component { static propTypes = { - angle: React.PropTypes.number, - className: React.PropTypes.string, - length: React.PropTypes.number, - onMove: React.PropTypes.func, - onMoved: React.PropTypes.func, - origin: React.PropTypes.object, - step: React.PropTypes.number, - theme: React.PropTypes.shape({ - hand: React.PropTypes.string.isRequired, - knob: React.PropTypes.string.isRequired + angle: PropTypes.number, + className: PropTypes.string, + length: PropTypes.number, + onMove: PropTypes.func, + onMoved: PropTypes.func, + origin: PropTypes.object, + step: PropTypes.number, + theme: PropTypes.shape({ + hand: PropTypes.string.isRequired, + knob: PropTypes.string.isRequired }) }; diff --git a/components/time_picker/ClockHours.js b/components/time_picker/ClockHours.js index 50a6a214..5e37cd2e 100644 --- a/components/time_picker/ClockHours.js +++ b/components/time_picker/ClockHours.js @@ -1,23 +1,23 @@ -import React from 'react'; -import utils from '../utils/utils'; -import Face from './ClockFace'; -import Hand from './ClockHand'; +import React, { Component, PropTypes } from 'react'; +import utils from '../utils/utils.js'; +import Hand from './ClockHand.js'; +import Face from './ClockFace.js'; const outerNumbers = [0, ...utils.range(13, 24)]; const innerNumbers = [12, ...utils.range(1, 12)]; const innerSpacing = 1.7; const step = 360 / 12; -class Hours extends React.Component { +class Hours extends Component { static propTypes = { - center: React.PropTypes.object, - format: React.PropTypes.oneOf(['24hr', 'ampm']), - onChange: React.PropTypes.func, - onHandMoved: React.PropTypes.func, - radius: React.PropTypes.number, - selected: React.PropTypes.number, - spacing: React.PropTypes.number, - theme: React.PropTypes.object + center: PropTypes.object, + format: PropTypes.oneOf(['24hr', 'ampm']), + onChange: PropTypes.func, + onHandMoved: PropTypes.func, + radius: PropTypes.number, + selected: PropTypes.number, + spacing: PropTypes.number, + theme: PropTypes.object }; state = { diff --git a/components/time_picker/ClockMinutes.js b/components/time_picker/ClockMinutes.js index 127fa882..2f3bb408 100644 --- a/components/time_picker/ClockMinutes.js +++ b/components/time_picker/ClockMinutes.js @@ -1,20 +1,20 @@ -import React from 'react'; -import utils from '../utils/utils'; -import Face from './ClockFace'; -import Hand from './ClockHand'; +import React, { Component, PropTypes } from 'react'; +import utils from '../utils/utils.js'; +import Hand from './ClockHand.js'; +import Face from './ClockFace.js'; const minutes = utils.range(0, 60, 5); const step = 360 / 60; -class Minutes extends React.Component { +class Minutes extends Component { static propTypes = { - center: React.PropTypes.object, - onChange: React.PropTypes.func, - radius: React.PropTypes.number, - selected: React.PropTypes.number, - spacing: React.PropTypes.number, - theme: React.PropTypes.shape({ - small: React.PropTypes.string.isRequired + center: PropTypes.object, + onChange: PropTypes.func, + radius: PropTypes.number, + selected: PropTypes.number, + spacing: PropTypes.number, + theme: PropTypes.shape({ + small: PropTypes.string.isRequired }) }; diff --git a/components/time_picker/TimePicker.js b/components/time_picker/TimePicker.js index 7ef8a6c3..9210870a 100644 --- a/components/time_picker/TimePicker.js +++ b/components/time_picker/TimePicker.js @@ -1,74 +1,84 @@ -import React from 'react'; +import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; import { themr } from 'react-css-themr'; -import events from '../utils/events'; -import time from '../utils/time'; -import Input from '../input'; -import TimePickerDialog from './TimePickerDialog'; +import { TIME_PICKER } from '../identifiers.js'; +import events from '../utils/events.js'; +import time from '../utils/time.js'; +import InjectDialog from '../dialog/Dialog.js'; +import InjectInput from '../input/Input.js'; +import timePickerDialogFactory from './TimePickerDialog.js'; -class TimePicker extends React.Component { - static propTypes = { - className: React.PropTypes.string, - error: React.PropTypes.string, - format: React.PropTypes.oneOf(['24hr', 'ampm']), - inputClassName: React.PropTypes.string, - label: React.PropTypes.string, - onChange: React.PropTypes.func, - theme: React.PropTypes.shape({ - input: React.PropTypes.string.isRequired - }), - value: React.PropTypes.object - }; +const factory = (TimePickerDialog, Input) => { + class TimePicker extends Component { + static propTypes = { + className: PropTypes.string, + error: PropTypes.string, + format: PropTypes.oneOf(['24hr', 'ampm']), + inputClassName: PropTypes.string, + label: PropTypes.string, + onChange: PropTypes.func, + theme: PropTypes.shape({ + input: PropTypes.string.isRequired + }), + value: PropTypes.object + }; - static defaultProps = { - className: '', - format: '24hr' - }; + static defaultProps = { + className: '', + format: '24hr' + }; - state = { - active: false - }; + state = { + active: false + }; - handleDismiss = () => { - this.setState({active: false}); - }; + handleDismiss = () => { + this.setState({active: false}); + }; - handleInputMouseDown = (event) => { - events.pauseEvent(event); - this.setState({active: true}); - }; + handleInputMouseDown = (event) => { + events.pauseEvent(event); + this.setState({active: true}); + }; - handleSelect = (value, event) => { - if (this.props.onChange) this.props.onChange(value, event); - this.setState({active: false}); - }; + handleSelect = (value, event) => { + if (this.props.onChange) this.props.onChange(value, event); + this.setState({active: false}); + }; - render () { - const { value, format, inputClassName, theme } = this.props; - const formattedTime = value ? time.formatTime(value, format) : ''; - return ( -
- - -
- ); + render () { + const { value, format, inputClassName, theme } = this.props; + const formattedTime = value ? time.formatTime(value, format) : ''; + return ( +
+ + +
+ ); + } } -} -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 }; diff --git a/components/time_picker/TimePickerDialog.js b/components/time_picker/TimePickerDialog.js index 1f20dfe1..15982ec3 100644 --- a/components/time_picker/TimePickerDialog.js +++ b/components/time_picker/TimePickerDialog.js @@ -1,125 +1,128 @@ -import React from 'react'; +import React, { Component, PropTypes } from 'react'; import classnames from 'classnames'; -import time from '../utils/time'; -import Clock from './Clock'; -import Dialog from '../dialog'; +import time from '../utils/time.js'; +import Clock from './Clock.js'; -class TimePickerDialog extends React.Component { - static propTypes = { - active: React.PropTypes.bool, - className: React.PropTypes.string, - format: React.PropTypes.oneOf(['24hr', 'ampm']), - onDismiss: React.PropTypes.func, - onSelect: React.PropTypes.func, - theme: React.PropTypes.shape({ - am: React.PropTypes.string.isRequired, - amFormat: React.PropTypes.string.isRequired, - ampm: React.PropTypes.string.isRequired, - button: React.PropTypes.string.isRequired, - dialog: React.PropTypes.string.isRequired, - header: React.PropTypes.string.isRequired, - hours: React.PropTypes.string.isRequired, - hoursDisplay: React.PropTypes.string.isRequired, - minutes: React.PropTypes.string.isRequired, - minutesDisplay: React.PropTypes.string.isRequired, - pm: React.PropTypes.string.isRequired, - pmFormat: React.PropTypes.string.isRequired, - separator: React.PropTypes.string.isRequired - }), - value: React.PropTypes.object - }; +const factory = (Dialog) => { + class TimePickerDialog extends Component { + static propTypes = { + active: PropTypes.bool, + className: PropTypes.string, + format: PropTypes.oneOf(['24hr', 'ampm']), + onDismiss: PropTypes.func, + onSelect: PropTypes.func, + theme: PropTypes.shape({ + am: PropTypes.string.isRequired, + amFormat: PropTypes.string.isRequired, + ampm: PropTypes.string.isRequired, + button: PropTypes.string.isRequired, + dialog: PropTypes.string.isRequired, + header: PropTypes.string.isRequired, + hours: PropTypes.string.isRequired, + hoursDisplay: PropTypes.string.isRequired, + minutes: PropTypes.string.isRequired, + minutesDisplay: PropTypes.string.isRequired, + pm: PropTypes.string.isRequired, + pmFormat: PropTypes.string.isRequired, + separator: PropTypes.string.isRequired + }), + value: PropTypes.object + }; - static defaultProps = { - active: false, - format: '24hr', - value: new Date() - }; + static defaultProps = { + active: false, + format: '24hr', + value: new Date() + }; - state = { - display: 'hours', - displayTime: this.props.value - }; + state = { + display: 'hours', + displayTime: this.props.value + }; - componentDidUpdate (prevProps) { - if (!prevProps.active && this.props.active) { - setTimeout(this.refs.clock.handleCalculateShape, 1000); + componentDidUpdate (prevProps) { + if (!prevProps.active && this.props.active) { + setTimeout(this.refs.clock.handleCalculateShape, 1000); + } } - } - handleClockChange = (value) => { - this.setState({displayTime: value}); - }; + handleClockChange = (value) => { + this.setState({displayTime: value}); + }; - handleSelect = (event) => { - this.props.onSelect(this.state.displayTime, event); - }; + handleSelect = (event) => { + this.props.onSelect(this.state.displayTime, event); + }; - toggleTimeMode = () => { - this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)}); - }; + toggleTimeMode = () => { + this.setState({displayTime: time.toggleTimeMode(this.state.displayTime)}); + }; - handleHandMoved = () => { - if (this.state.display === 'hours') this.setState({display: 'minutes'}); - }; + handleHandMoved = () => { + if (this.state.display === 'hours') this.setState({display: 'minutes'}); + }; - switchDisplay = (display) => { - this.setState({display}); - }; + switchDisplay = (display) => { + this.setState({display}); + }; - actions = [ - { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss }, - { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect } - ]; + actions = [ + { label: 'Cancel', className: this.props.theme.button, onClick: this.props.onDismiss }, + { label: 'Ok', className: this.props.theme.button, onClick: this.handleSelect } + ]; - formatHours () { - if (this.props.format === 'ampm') { - return this.state.displayTime.getHours() % 12 || 12; - } else { - return this.state.displayTime.getHours(); + formatHours () { + if (this.props.format === 'ampm') { + return this.state.displayTime.getHours() % 12 || 12; + } else { + return this.state.displayTime.getHours(); + } } - } - renderAMPMLabels () { - const { theme } = this.props; - if (this.props.format === 'ampm') { + renderAMPMLabels () { + const { theme } = this.props; + if (this.props.format === 'ampm') { + return ( +
+ AM + PM +
+ ); + } + } + + 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 ( -
- AM - PM -
+ +
+ + {('0' + this.formatHours()).slice(-2)} + + : + + {('0' + this.state.displayTime.getMinutes()).slice(-2)} + + {this.renderAMPMLabels()} +
+ + ); } } - 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 ( - -
- - {('0' + this.formatHours()).slice(-2)} - - : - - {('0' + this.state.displayTime.getMinutes()).slice(-2)} - - {this.renderAMPMLabels()} -
- - - ); - } -} + return TimePickerDialog; +}; -export default TimePickerDialog; +export default factory; diff --git a/components/time_picker/index.js b/components/time_picker/index.js index 57f9fc91..c9ec8b8f 100644 --- a/components/time_picker/index.js +++ b/components/time_picker/index.js @@ -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 }; diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md index 59987a23..84c3bc12 100644 --- a/components/time_picker/readme.md +++ b/components/time_picker/readme.md @@ -5,7 +5,6 @@ A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pic ```jsx import TimePicker from 'react-toolbox/lib/time_picker'; -import theme from 'react-toolbox/lib/time_picker/theme' let time = new Date(); time.setHours(17); @@ -24,13 +23,14 @@ class TimePickerTest extends React.Component { label='Finishing time' onChange={this.handleChange} value={this.state.time} - theme={theme} /> ); } } ``` +If you want to provide a theme via context, the component key is `RTTimePicker`. + ## Properties | Name | Type | Default | Description| @@ -43,9 +43,7 @@ class TimePickerTest extends React.Component { | `onChange` | `Function` | | Callback called when the picker value is changed.| | `value` | `Date` | | Datetime object with currrently selected time. | -## Theming - -You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxTimePicker`, it should implement the following interface: +## Theme | Name | Description| |:---------|:-----------| diff --git a/spec/root.js b/spec/root.js index b2925470..a4121d85 100644 --- a/spec/root.js +++ b/spec/root.js @@ -1,7 +1,6 @@ /* global VERSION */ +import '../components/commons.scss'; import React from 'react'; -import { ThemeProvider } from 'react-css-themr'; -import theme from './theme'; import AppBar from '../components/app_bar'; import Autocomplete from './components/autocomplete'; import Avatar from './components/avatar'; @@ -30,43 +29,41 @@ import Tooltip from './components/tooltip'; import style from './style'; const Root = () => ( - -
- -

React Toolbox Spec {VERSION}

- {window.href = 'http://react-toolbox';}} - /> - - - -