vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add floating label for pickers. Fixes #137

old
Javi Velasco 2015-11-21 14:46:24 +01:00
parent 92a5369c16
commit d468c9f1b3
7 changed files with 43 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/date_picker/index.jsx
View File

@ -7,17 +7,13 @@ import time from '../utils/time';
class DatePicker extends React.Component {
static propTypes = {
label: React.PropTypes.string,
maxDate: React.PropTypes.object,
minDate: React.PropTypes.object,
onChange: React.PropTypes.func,
placeholder: React.PropTypes.string,
value: React.PropTypes.object
};
static defaultProps = {
placeholder: 'Choose a date'
};
state = {
active: false
};
@ -45,7 +41,7 @@ class DatePicker extends React.Component {
<Input
className={style.input}
onMouseDown={this.handleInputMouseDown}
placeholder={this.props.placeholder}
label={this.props.label}
readOnly={true}
type='text'
value={date}

5
components/date_picker/readme.md
View File

@ -25,8 +25,8 @@ class DatePickerTest extends React.Component {
render () {
return (
<section>
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
<DatePicker minDate={min_datetime} value={this.state.date2} onChange={this.handleChange.bind(this, 'date2')} />
<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />
<DatePicker label='Expiration date' minDate={min_datetime} onChange={this.handleChange.bind(this, 'date2')} value={this.state.date2} />
</section>
);
}
@ -37,6 +37,7 @@ class DatePickerTest extends React.Component {
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `label` | `String` | | The text string to use for the floating label element in the input component.|
| `maxDate` | `Date` | | Date object with the maximum selectable date. |
| `minDate` | `Date` | | Date object with the minimum selectable date. |
| `onChange` | `Function` | | Callback called when the picker value is changed.|

3
components/time_picker/index.jsx
View File

@ -9,6 +9,7 @@ class TimePicker extends React.Component {
static propTypes = {
className: React.PropTypes.string,
format: React.PropTypes.oneOf(['24hr', 'ampm']),
label: React.PropTypes.string,
onChange: React.PropTypes.func,
value: React.PropTypes.object
};
@ -43,8 +44,8 @@ class TimePicker extends React.Component {
<div data-react-toolbox='time-picker'>
<Input
className={style.input}
label={this.props.label}
onMouseDown={this.handleInputMouseDown}
placeholder='Pick up time'
readOnly={true}
type='text'
value={formattedTime}

3
components/time_picker/readme.md
View File

@ -11,7 +11,7 @@ selectedTime.setHours(17);
selectedTime.setMinutes(28);
const TimePickerTest = () => (
<TimePicker value={selectedTime} />
<TimePicker label='Finishing time' value={selectedTime} />
);
```
@ -21,5 +21,6 @@ const TimePickerTest = () => (
|:-----|:-----|:-----|:-----|
| `className` | `String` | `''` | Sets a class to give customized styles.|
| `format` | `String` | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.|
| `label` | `String` | | The text string to use for the floating label element in the input component.|
| `onChange` | `Function` | | Callback called when the picker value is changed.|
| `value` | `Date` | | Datetime object with currrently selected time |

15
docs/app/components/layout/main/modules/examples/datepicker_example_1.txt
View File

@ -18,12 +18,17 @@ class DatePickerTest extends React.Component {
render () {
return (
<section>
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
<DatePicker
maxDate={max_datetime}
<DatePicker
label='Birthdate'
onChange={this.handleChange.bind(this, 'date1')}
value={this.state.date1}
/>
<DatePicker
label='Expiration date'
minDate={min_datetime}
value={this.state.date2}
onChange={this.handleChange.bind(this, 'date2')}
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
/>
</section>
);

2
docs/app/components/layout/main/modules/examples/timepicker_example_1.txt
View File

@ -3,7 +3,7 @@ selectedTime.setHours(17);
selectedTime.setMinutes(28);
const TimePickerTest = () => (
<TimePicker value={selectedTime} />
<TimePicker label='Finishing time' value={selectedTime} />
);
return <TimePickerTest />

30
spec/components/pickers.jsx
View File

@ -27,16 +27,32 @@ class PickersTest extends React.Component {
<h5>Pickers</h5>
<p>Date pickers and time pickers with Material flavour.</p>
<DatePicker value={this.state.date1} onChange={this.handleChange.bind(this, 'date1')} />
<DatePicker
maxDate={max_datetime}
minDate={min_datetime}
value={this.state.date2}
onChange={this.handleChange.bind(this, 'date2')}
label='Birthdate'
onChange={this.handleChange.bind(this, 'date1')}
value={this.state.date1}
/>
<TimePicker value={this.state.time1} onChange={this.handleChange.bind(this, 'time1')} />
<TimePicker value={this.state.time2} format='ampm' onChange={this.handleChange.bind(this, 'time2')} />
<DatePicker
label='Expiration date'
maxDate={max_datetime}
minDate={min_datetime}
onChange={this.handleChange.bind(this, 'date2')}
value={this.state.date2}
/>
<TimePicker
label='Start time'
onChange={this.handleChange.bind(this, 'time1')}
value={this.state.time1}
/>
<TimePicker
format='ampm'
label='Finishing time'
onChange={this.handleChange.bind(this, 'time2')}
value={this.state.time2}
/>
</section>
);
}