Widget fixes #162
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import DateTime from 'react-datetime'; | ||
|
|
||
| export default class DateControl extends React.Component { | ||
| handleChange = (datetime) => { | ||
| this.props.onChange(datetime); | ||
| }; | ||
|
|
||
| render() { | ||
| return (<DateTime | ||
| timeFormat={false} | ||
| value={this.props.value || new Date()} | ||
| onChange={this.handleChange} | ||
| />); | ||
| } | ||
| } | ||
|
|
||
| DateControl.propTypes = { | ||
| onChange: PropTypes.func.isRequired, | ||
| value: PropTypes.object, | ||
|
There was a problem hiding this comment. Our linter treats The DateControl (and preview) should be able to handle either a string, a Date or a moment.js object, since this will vary depending on the formatter (JSON and CSV for example, doesn't have any date concept and will deserialize date fields to a string). There was a problem hiding this comment. There is a propType for that Also, I'd suggest we don't couple with moment.js so tightly. So, I'd say: PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.instanceOf(Date)
])There was a problem hiding this comment. Also, in case it is an object with the known shape, there is https://facebook.github.io/react/docs/react-api.html#react.proptypes.shape There was a problem hiding this comment. The reason we currently have a tighter coupling with moment is because in general it's so important to have timezone, date formating functions, etc, throughout the CMS that the standard Date model is not enough, and that the YAML formatter uses it as part of the serialization/deserializtion process right now as the only way to know how a date should be formattet in the YAML (for Jekyll for example, it makes a huge different if a date is persisted like The Ember prototype uses moment.js for deserialized dates since moment can carry around the format in the object - but I think we've actually broken that functionality in the React version right now... |
||
| }; | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React, { PropTypes } from 'react'; | ||
|
|
||
| export default function DatePreview({ value }) { | ||
| return <span>{value ? value.toString() : null}</span>; | ||
| } | ||
|
|
||
| DatePreview.propTypes = { | ||
| value: PropTypes.node, | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import React, { PropTypes } from 'react'; | ||
| import ImmutablePropTypes from 'react-immutable-proptypes'; | ||
|
|
||
| export default class SelectControl extends React.Component { | ||
| handleChange = (e) => { | ||
| this.props.onChange(e.target.value); | ||
| }; | ||
|
|
||
| render() { | ||
| const { field, value } = this.props; | ||
| const fieldOptions = field.get('options'); | ||
|
|
||
| if (!fieldOptions) { | ||
| return <div>Error rendering select control for {field.get('name')}: No options</div>; | ||
| } | ||
|
|
||
| const options = fieldOptions.map((option) => { | ||
| if (typeof option === 'string') { | ||
| return { label: option, value: option }; | ||
| } | ||
| return option; | ||
| }); | ||
|
|
||
| return (<select value={value || ''} onChange={this.handleChange}> | ||
| {options.map((option, idx) => <option key={idx} value={option.value}> | ||
| {option.label} | ||
| </option>)} | ||
| </select>); | ||
| } | ||
| } | ||
|
|
||
| SelectControl.propTypes = { | ||
| onChange: PropTypes.func.isRequired, | ||
| value: PropTypes.node, | ||
| field: ImmutablePropTypes.contains({ | ||
| options: ImmutablePropTypes.listOf(PropTypes.oneOf([ | ||
| PropTypes.string, | ||
| ImmutablePropTypes.contains({ | ||
| label: PropTypes.string.isRequired, | ||
| value: PropTypes.string.isRequired, | ||
| }), | ||
| ])).isRequired, | ||
| }), | ||
| }; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React, { PropTypes } from 'react'; | ||
|
|
||
| export default function SelectPreview({ value }) { | ||
| return <span>{value ? value.toString() : null}</span>; | ||
| } | ||
|
|
||
| SelectPreview.propTypes = { | ||
| value: PropTypes.string, | ||
| }; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PropTypes.object is not allowed in our linting rules, but i'm not sure there's any better choice for the DateControl or the DateTimeControl.
The problem here is that depending on the
formatterthe value for a date control can either be a string, a Date or a moment.js object and the control (and preview) component should do the right thing with either of those.