diff --git a/API.md b/API.md index 15844bb46..c9c6829c6 100644 --- a/API.md +++ b/API.md @@ -312,6 +312,11 @@ import {DateField} from 'uniforms-unstyled'; // Choose your theme package. // bootstrap3 // bootstrap4 wrapClassName="a b c" + + // Display time picker in ampm (12hr) format or 24hr format. + // Available in: + // material-ui + timeFormat="ampm" /> ``` diff --git a/README.md b/README.md index d86fc810f..412deb01c 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,7 @@ $ meteor npm install graphql # Components (pick one) $ meteor npm install --save react react-dom uniforms uniforms-bootstrap3 $ meteor npm install --save react react-dom uniforms uniforms-bootstrap4 +$ meteor npm install --save react react-dom uniforms uniforms-material $ meteor npm install --save react react-dom uniforms uniforms-semantic $ meteor npm install --save react react-dom uniforms uniforms-unstyled ``` @@ -109,6 +110,7 @@ $ meteor npm install --save react react-dom uniforms uniforms-unstyled # Components (pick one) $ npm install --save react react-dom uniforms uniforms-bootstrap3 $ npm install --save react react-dom uniforms uniforms-bootstrap4 +$ npm install --save react react-dom uniforms uniforms-material $ npm install --save react react-dom uniforms uniforms-semantic $ npm install --save react react-dom uniforms uniforms-unstyled ``` diff --git a/packages/uniforms-material/src/components/fields/DateField.js b/packages/uniforms-material/src/components/fields/DateField.js index 0dc73e1c9..6a0a22590 100644 --- a/packages/uniforms-material/src/components/fields/DateField.js +++ b/packages/uniforms-material/src/components/fields/DateField.js @@ -5,6 +5,8 @@ import TimePicker from 'material-ui/TimePicker'; import {connectField} from 'uniforms'; import {ListItem} from 'material-ui/List'; +const dateFormat = value => value && value.toISOString().slice(0, -8); + class Date_ extends Component { render () { const { @@ -12,8 +14,10 @@ class Date_ extends Component { id, max, min, - onChange, value, + style, + onChange, + timeFormat, ...props } } = this; @@ -21,39 +25,49 @@ class Date_ extends Component { return ( - this.refs.datepicker.openDialog()} - value={value} - type="datetime" - {...props} - /> - { - if (value) { - date.setHours(value.getHours()); - date.setMinutes(value.getMinutes()); - } - onChange(date); - // TODO: Risky race? - this.refs.timepicker.openDialog(); - }} - ref="datepicker" - id={`${id}-date`} - textFieldStyle={{display: 'none'}} - /> - onChange(date)} - ref="timepicker" - id={`${id}-time`} - textFieldStyle={{display: 'none'}} - /> - } + primaryText={( +
+ {}} + onFocus={() => this.refs.datepicker.openDialog()} + value={dateFormat(value)} + type="datetime-local" + style={{marginTop: -14, ...style}} + {...props} + /> + { + if (value) { + date.setHours(value.getHours()); + date.setMinutes(value.getMinutes()); + } + onChange(date); + this.refs.timepicker.openDialog(); + }} + ref="datepicker" + id={`${id}-date`} + textFieldStyle={{display: 'none'}} + /> + { + if (value) { + date.setFullYear(value.getFullYear()); + date.setMonth(value.getMonth()); + date.setDate(value.getDate()); + } + onChange(date); + }} + ref="timepicker" + id={`${id}-time`} + textFieldStyle={{display: 'none'}} + /> +
+ )} /> ); } diff --git a/packages/uniforms-material/src/components/fields/ErrorField.js b/packages/uniforms-material/src/components/fields/ErrorField.js index 665e6d33a..9c643e809 100644 --- a/packages/uniforms-material/src/components/fields/ErrorField.js +++ b/packages/uniforms-material/src/components/fields/ErrorField.js @@ -1,6 +1,8 @@ import React from 'react'; import {connectField} from 'uniforms'; import {filterDOMProps} from 'uniforms'; +import {ListItem} from 'material-ui/List'; +import ErrorOutline from 'material-ui/svg-icons/alert/error-outline'; import {nothing} from 'uniforms'; const Error = ({ @@ -9,9 +11,12 @@ const Error = ({ ...props }) => !errorMessage ? nothing : ( -
- {children || errorMessage} -
+ } + primaryText={children || errorMessage} + {...filterDOMProps(props)} + /> ) ; diff --git a/packages/uniforms-material/src/components/fields/ErrorsField.js b/packages/uniforms-material/src/components/fields/ErrorsField.js index c33ab5c76..bbca58b5e 100644 --- a/packages/uniforms-material/src/components/fields/ErrorsField.js +++ b/packages/uniforms-material/src/components/fields/ErrorsField.js @@ -11,7 +11,6 @@ const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) => {!! children && ( )} - {/* TODO: Make leftIcon optional */} {schema.getErrorMessages(error).map((message, index) => } /> )} diff --git a/packages/uniforms-material/src/components/fields/ListAddField.js b/packages/uniforms-material/src/components/fields/ListAddField.js index e8b431f4c..c2da9eb6c 100644 --- a/packages/uniforms-material/src/components/fields/ListAddField.js +++ b/packages/uniforms-material/src/components/fields/ListAddField.js @@ -12,11 +12,10 @@ const ListAdd = ({ }) => { const limitNotReached = !disabled && !(parent.maxCount <= value.length); - // TODO: Add support for tooltip return ( limitNotReached && parent.onChange(parent.value.concat([value]))} + {...filterDOMProps(props)} > diff --git a/packages/uniforms-material/src/components/fields/ListDelField.js b/packages/uniforms-material/src/components/fields/ListDelField.js index e1b95f12a..6c5a869f0 100644 --- a/packages/uniforms-material/src/components/fields/ListDelField.js +++ b/packages/uniforms-material/src/components/fields/ListDelField.js @@ -13,14 +13,13 @@ const ListDel = ({ const fieldIndex = +name.slice(1 + name.lastIndexOf('.')); const limitNotReached = !disabled && !(parent.minCount >= parent.value.length); - // TODO: Add support for tooltip return ( limitNotReached && parent.onChange([] .concat(parent.value.slice(0, fieldIndex)) .concat(parent.value.slice(1 + fieldIndex)) )} + {...filterDOMProps(props)} > diff --git a/packages/uniforms-material/src/components/fields/ListItemField.js b/packages/uniforms-material/src/components/fields/ListItemField.js index 13ca766d2..fe2764f15 100644 --- a/packages/uniforms-material/src/components/fields/ListItemField.js +++ b/packages/uniforms-material/src/components/fields/ListItemField.js @@ -7,18 +7,19 @@ import {ListItem as ListItemMaterial} from 'material-ui/List'; import AutoField from './AutoField'; import ListDelField from './ListDelField'; -const ListItem = props => +const ListItem = ({style, ...props}) => React.cloneElement(child, { name: joinName(props.name, child.props.name), - label: null + label: null, + style: {marginTop: -14, ...style} }) ) ) : ( - + )} rightIconButton={} /> diff --git a/packages/uniforms-material/src/components/fields/RadioField.js b/packages/uniforms-material/src/components/fields/RadioField.js index dbea1014e..2a1c93f5b 100644 --- a/packages/uniforms-material/src/components/fields/RadioField.js +++ b/packages/uniforms-material/src/components/fields/RadioField.js @@ -5,6 +5,9 @@ import {filterDOMProps} from 'uniforms'; import {ListItem} from 'material-ui/List'; import {List} from 'material-ui/List'; +/* + * TODO: Investigate why the checkboxes needed to be unpacked + */ const Radio = ({ allowedValues, disabled, @@ -14,6 +17,7 @@ const Radio = ({ onChange, transform, value, + checkboxes, // eslint-disable-line no-unused-vars ...props }) => diff --git a/packages/uniforms-material/src/components/fields/SelectField.js b/packages/uniforms-material/src/components/fields/SelectField.js index 0cc4c5966..c2df2bdd9 100644 --- a/packages/uniforms-material/src/components/fields/SelectField.js +++ b/packages/uniforms-material/src/components/fields/SelectField.js @@ -3,7 +3,6 @@ import MenuItem from 'material-ui/MenuItem'; import RadioButton from 'material-ui/RadioButton'; import React from 'react'; import SelectField from 'material-ui/SelectField'; -import Subheader from 'material-ui/Subheader'; import {connectField} from 'uniforms'; import {filterDOMProps} from 'uniforms'; import {ListItem} from 'material-ui/List'; @@ -32,9 +31,10 @@ const renderCheckboxes = ({ }) => {!!label && ( - - {label} - + )} {allowedValues.map(item => @@ -72,32 +72,36 @@ const renderSelect = ({ name, onChange, placeholder, + style, transform, value, ...props }) => onChange(value)} - ref={inputRef} - value={value} - {...filterDOMProps(props)} - > - {allowedValues.map(value => - - )} - } + primaryText={( + onChange(value)} + ref={inputRef} + style={{marginTop: -14, ...style}} + value={value} + {...filterDOMProps(props)} + > + {allowedValues.map(value => + + )} + + )} /> ;