From a8da80a5c61405b8ef926916117a68c9f4196cb1 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 14:57:13 +0200 Subject: [PATCH 01/14] BoolField --- packages/uniforms-material/src/BoolField.js | 63 ++++++++------------- 1 file changed, 25 insertions(+), 38 deletions(-) diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index 0bb8f05e5..313eaaa62 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -1,44 +1,31 @@ -import Checkbox from 'material-ui/Checkbox'; -import React from 'react'; -import Toggle from 'material-ui/Toggle'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; +import Checkbox from 'material-ui/Checkbox'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import Switch from 'material-ui/Switch'; +import {FormControl, FormControlLabel, FormHelperText} from 'material-ui/Form'; -const Bool = ({ - appearance, - disabled, - id, - inputRef, - label, - name, - onChange, - value, - ...props -}) => - appearance === 'toggle' ? ( - ( + + disabled || onChange(value)} + {...filterDOMProps(props)} + /> + ) : ( + disabled || onChange(value)} + {...filterDOMProps(props)} + /> + )} label={label} - name={name} - onToggle={(event, value) => disabled || onChange(value)} - ref={inputRef} - toggled={!!value} - {...filterDOMProps(props)} /> - ) : ( - disabled || onChange(value)} - ref={inputRef} - {...filterDOMProps(props)} - /> - ) -; + {error && {error}} + +); Bool.defaultProps = {appearance: 'checkbox'}; From c7fcb7684c80a03b8929a0bd4ea91114a5a64a31 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 14:57:22 +0200 Subject: [PATCH 02/14] RadioField --- packages/uniforms-material/src/RadioField.js | 56 +++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index e74999347..1949d912d 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -1,44 +1,50 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import React from 'react'; -import Subheader from 'material-ui/Subheader'; -import {RadioButton, RadioButtonGroup} from 'material-ui/RadioButton'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import PropTypes from 'prop-types'; +import Radio, {RadioGroup} from 'material-ui/Radio'; +import React from 'react'; +import {FormLabel, FormControl, FormControlLabel, FormHelperText} from 'material-ui/Form'; -const Radio = ({ +const Radio_ = ({ allowedValues, disabled, - id, + error, + filter, + hideFiltered, label, - labelPosition, name, onChange, + required, transform, value, ...props -}) => -
- {!!label && } - - ( + + {label} + onChange(value)} + value={value} {...filterDOMProps(props)} > - {allowedValues.map(item => - + } + disabled={disabled || !filter(item)} key={item} label={transform ? transform(item) : item} - labelPosition={labelPosition} value={item} /> )} - -
-; + + {error && {error}} + +); + +Radio_.propTypes = { + filter: PropTypes.func, + hideFiltered: PropTypes.bool +}; -export default connectField(Radio); +export default connectField(Radio_); From d4e8d40679a02ff65448e6d167dae5a57198b805 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 14:57:34 +0200 Subject: [PATCH 03/14] DateField --- packages/uniforms-material/src/DateField.js | 125 ++------------------ 1 file changed, 7 insertions(+), 118 deletions(-) diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index 5f47e1b12..077c0143f 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -1,121 +1,10 @@ -import DatePicker from 'material-ui/DatePicker'; -import React from 'react'; -import TextField from 'material-ui/TextField'; -import TimePicker from 'material-ui/TimePicker'; -import connectField from 'uniforms/connectField'; +import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; -import {Component} from 'react'; +import React from 'react'; +import TextField from 'material-ui/TextField'; -class Date_ extends Component { - static displayName = 'Date'; +export const Date_ = props => ( + +); - static defaultProps = {fullWidth: true}; - - constructor () { - super(...arguments); - - this._intermediate = null; - - this.onChangeDate = this.onChangeDate.bind(this); - this.onChangeTime = this.onChangeTime.bind(this); - this.onFocus = this.onFocus.bind(this); - } - - onChangeDate (event, date) { - this._intermediate = date; - this.refs.timepicker.openDialog(); - } - - onChangeTime (event, date) { - this._intermediate.setHours(date.getHours()); - this._intermediate.setMinutes(date.getMinutes()); - this._intermediate.setSeconds(date.getSeconds()); - this._intermediate.setMilliseconds(date.getMilliseconds()); - - this.props.onChange(this._intermediate); - - this._intermediate = null; - } - - onFocus () { - setTimeout(() => this.refs.datepicker.openDialog(), 100); - } - - render () { - const { - DateTimeFormat, - autoOk, - cancelLabel, - disableYearSelection, - disabled, - error, - errorMessage, - firstDayOfWeek, - formatDate, - id, - inputRef, - label, - locale, - max, - min, - name, - okLabel, - pedantic, - placeholder, - showInlineError, - timeFormat, - value, - ...props - } = this.props; - - return ( -
- - - - - -
- ); - } -} - -export default connectField(Date_, {ensureValue: false, includeInChain: false}); +export default connectField(Date_); From b2f9c02da06ca3bb823cb4d6e1d1725f20c1a21a Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 17:10:13 +0200 Subject: [PATCH 04/14] SelectField --- packages/uniforms-material/src/SelectField.js | 146 +++++++++--------- 1 file changed, 69 insertions(+), 77 deletions(-) diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index 577d2d85a..37358b0c8 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -1,12 +1,12 @@ -import Checkbox from 'material-ui/Checkbox'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -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 {List} from 'material-ui/List'; +import Checkbox from 'material-ui/Checkbox'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import Input, {InputLabel} from 'material-ui/Input'; +import PropTypes from 'prop-types'; +import React from 'react'; +import Select from 'material-ui/Select'; +import {FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel} from 'material-ui/Form'; +import {MenuItem} from 'material-ui/Menu'; const xor = (item, array) => { const index = array.indexOf(item); @@ -20,93 +20,85 @@ const xor = (item, array) => { const renderCheckboxes = ({ allowedValues, disabled, - fieldType, + error, + errorMessage, + filter, + hideFiltered, id, label, - labelPosition, name, onChange, + required, + showInlineError, transform, value, ...props -}) => - - {!!label && } - - {allowedValues.map(item => fieldType === Array ? ( - onChange(xor(item, value))} - /> - ) : ( - onChange(item)} - /> - ))} - -; +}) => ( + + {label && {label}} + + {(hideFiltered && filter ? allowedValues.filter(filter) : allowedValues).map(item => + onChange(xor(item, value))} + value={item} + {...filterDOMProps(props)} + />} + disabled={disabled || !filter(item)} + key={item} + label={transform ? transform(item) : item} + value={item} + /> + )} + + {error && showInlineError && {errorMessage}} + +); const renderSelect = ({ allowedValues, disabled, + displayEmpty, error, errorMessage, - fieldType, - fullWidth = true, + filter, id, - inputRef, label, - name, + MenuProps, + multiple, onChange, - placeholder, + renderValue, + required, showInlineError, transform, value, ...props -}) => - onChange(value)} - ref={inputRef} - value={value} - {...filterDOMProps(props)} - > - {allowedValues.map(allowedValue => - - )} - -; +}) => ( + + {label && {label}} + + {error && showInlineError && {errorMessage}} + +); + +const Select_ = ({checkboxes, ...props}) => checkboxes ? renderCheckboxes(props) : renderSelect(props); -const Select = ({checkboxes, ...props}) => - checkboxes - ? renderCheckboxes(props) - : renderSelect (props) -; +Select_.propTypes = { + filter: PropTypes.func, + hideFiltered: PropTypes.bool +}; -export default connectField(Select, {ensureValue: false}); +export default connectField(Select_); From b9197d52284b4d0e4916d1bafa335ea8817c2bd4 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 17:11:01 +0200 Subject: [PATCH 05/14] TextField, LongTextField, NumField and tweaks for other fields --- packages/uniforms-material/src/BoolField.js | 22 ++++++-- packages/uniforms-material/src/DateField.js | 16 +++--- .../uniforms-material/src/LongTextField.js | 45 ++++------------ packages/uniforms-material/src/NumField.js | 53 +++++-------------- packages/uniforms-material/src/RadioField.js | 8 +-- packages/uniforms-material/src/SubmitField.js | 14 ++--- packages/uniforms-material/src/TextField.js | 49 ++++------------- 7 files changed, 76 insertions(+), 131 deletions(-) diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index 313eaaa62..b68029c67 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -1,12 +1,24 @@ import Checkbox from 'material-ui/Checkbox'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; +import PropTypes from 'prop-types'; import React from 'react'; import Switch from 'material-ui/Switch'; import {FormControl, FormControlLabel, FormHelperText} from 'material-ui/Form'; -const Bool = ({appearance, error, disabled, label, onChange, required, value, ...props}) => ( - +const Bool = ({ + appearance, + disabled, + error, + errorMessage, + label, + onChange, + required, + showInlineError, + value, + ...props +}) => ( + - {error && {error}} + {error && showInlineError && {errorMessage}} ); Bool.defaultProps = {appearance: 'checkbox'}; +Bool.propTypes = { + appearance: PropTypes.oneOf(['toggle', 'checkbox']) +}; + export default connectField(Bool); diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index 077c0143f..503b59b66 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -1,10 +1,14 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import React from 'react'; -import TextField from 'material-ui/TextField'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {FormControl, FormHelperText} from 'material-ui/Form'; -export const Date_ = props => ( - +export const Date_ = ({onChange, ...props}) => ( + + onChange(event.target.value)} {...filterDOMProps(props)} /> + {props.error && props.showInlineError && {props.errorMessage}} + ); export default connectField(Date_); diff --git a/packages/uniforms-material/src/LongTextField.js b/packages/uniforms-material/src/LongTextField.js index 48d7e2ccb..5a88e9a4b 100644 --- a/packages/uniforms-material/src/LongTextField.js +++ b/packages/uniforms-material/src/LongTextField.js @@ -1,37 +1,14 @@ -import React from 'react'; -import TextField from 'material-ui/TextField'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {FormControl, FormHelperText} from 'material-ui/Form'; -const LongText = ({ - disabled, - id, - error, - errorMessage, - inputRef, - label, - name, - onChange, - placeholder, - showInlineError, - value, - ...props -}) => - onChange(value)} - ref={inputRef} - value={value} - {...filterDOMProps(props)} - /> -; - -LongText.defaultProps = {fullWidth: true}; +const LongText = ({onChange, ...props}) => ( + + onChange(event.target.value)} {...filterDOMProps(props)} /> + {props.error && props.showInlineError && {props.errorMessage}} + +); export default connectField(LongText); diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index 48a8d9f64..4ee32a66e 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -1,45 +1,18 @@ -import React from 'react'; -import TextField from 'material-ui/TextField'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import {Component} from 'react'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {Component} from 'react'; +import {FormControl, FormHelperText} from 'material-ui/Form'; const noneIfNaN = x => isNaN(x) ? undefined : x; -const Num_ = ({ - decimal, - disabled, - error, - errorMessage, - id, - inputRef, - label, - max, - min, - name, - onChange, - placeholder, - showInlineError, - value, - ...props -}) => - -; +const Num_ = ({onChange, ...props}) => ( + + onChange(event.target.value)} {...filterDOMProps(props)} /> + {props.error && props.showInlineError && {props.errorMessage}} + +); // NOTE: React < 16 workaround. Make it optional? class Num extends Component { @@ -71,6 +44,4 @@ class Num extends Component { } } -Num.defaultProps = {fullWidth: true}; - export default connectField(Num); diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index 1949d912d..f0d7dd46a 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -9,18 +9,20 @@ const Radio_ = ({ allowedValues, disabled, error, + errorMessage, filter, hideFiltered, label, name, onChange, required, + showInlineError, transform, value, ...props }) => ( - - {label} + + {label && {label}} )} - {error && {error}} + {error && showInlineError && {errorMessage}} ); diff --git a/packages/uniforms-material/src/SubmitField.js b/packages/uniforms-material/src/SubmitField.js index 795aef07d..b74fd9bcb 100644 --- a/packages/uniforms-material/src/SubmitField.js +++ b/packages/uniforms-material/src/SubmitField.js @@ -1,17 +1,19 @@ import BaseField from 'uniforms/BaseField'; -import RaisedButton from 'material-ui/RaisedButton'; -import React from 'react'; +import Button from 'material-ui/Button'; import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; const SubmitField = ({disabled, inputRef, label, value, ...props}, {uniforms: {error, state}}) => - + > + {label} + ; SubmitField.contextTypes = BaseField.contextTypes; diff --git a/packages/uniforms-material/src/TextField.js b/packages/uniforms-material/src/TextField.js index c9e42521d..4efd5f7ce 100644 --- a/packages/uniforms-material/src/TextField.js +++ b/packages/uniforms-material/src/TextField.js @@ -1,41 +1,14 @@ -import React from 'react'; -import TextField from 'material-ui/TextField'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {FormControl, FormHelperText} from 'material-ui/Form'; -const Text = ({ - disabled, - error, - errorMessage, - id, - inputRef, - label, - name, - onChange, - placeholder, - showInlineError, - type, - value, - ...props -}) => - onChange(value)} - ref={inputRef} - type={type} - value={value} - {...filterDOMProps(props)} - /> -; - -Text.defaultProps = { - fullWidth: true, - type: 'text' -}; +const Text = ({onChange, ...props}) => ( + + onChange(event.target.value)} {...filterDOMProps(props)} /> + {props.error && props.showInlineError && {props.errorMessage}} + +); export default connectField(Text); From 46b9866582b9e26bbd3090d830eba03acb2f0674 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 19:16:39 +0200 Subject: [PATCH 06/14] ListField and related fields, other tweaks --- packages/uniforms-material/src/DateField.js | 22 +++++++-- packages/uniforms-material/src/ErrorField.js | 20 ++++---- packages/uniforms-material/src/ErrorsField.js | 14 +++--- .../uniforms-material/src/ListAddField.js | 20 ++++---- .../uniforms-material/src/ListDelField.js | 20 ++++---- packages/uniforms-material/src/ListField.js | 15 +++--- .../uniforms-material/src/ListItemField.js | 46 +++++++++---------- .../uniforms-material/src/LongTextField.js | 14 ++++-- packages/uniforms-material/src/NestField.js | 24 +++++----- packages/uniforms-material/src/NumField.js | 14 ++++-- packages/uniforms-material/src/RadioField.js | 7 +-- packages/uniforms-material/src/SelectField.js | 4 +- packages/uniforms-material/src/TextField.js | 13 ++++-- 13 files changed, 128 insertions(+), 105 deletions(-) diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index 503b59b66..8985060dd 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -4,9 +4,25 @@ import React from 'react'; import TextField from 'material-ui/TextField'; import {FormControl, FormHelperText} from 'material-ui/Form'; -export const Date_ = ({onChange, ...props}) => ( - - onChange(event.target.value)} {...filterDOMProps(props)} /> +const dateFormat = value => value && value.toISOString().slice(0, -8); +const dateParse = (timestamp, onChange) => { + const date = new Date(timestamp); + if (date.getFullYear() < 10000) { + onChange(date); + } +}; + +export const Date_ = ({disabled, label, onChange, placeholder, value, ...props}) => ( + + dateParse(event.target.valueAsNumber, onChange)} + placeholder={placeholder} + type="datetime-local" + value={dateFormat(value)} + {...filterDOMProps(props)} + /> {props.error && props.showInlineError && {props.errorMessage}} ); diff --git a/packages/uniforms-material/src/ErrorField.js b/packages/uniforms-material/src/ErrorField.js index 1e373ffe9..bcf395b2a 100644 --- a/packages/uniforms-material/src/ErrorField.js +++ b/packages/uniforms-material/src/ErrorField.js @@ -1,18 +1,14 @@ -import ErrorOutline from 'material-ui/svg-icons/alert/error-outline'; -import React from 'react'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import nothing from 'uniforms/nothing'; -import {ListItem} from 'material-ui/List'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import nothing from 'uniforms/nothing'; +import React from 'react'; +import {FormControl, FormHelperText} from 'material-ui/Form'; const Error = ({children, error, errorMessage, ...props}) => !error ? nothing : ( - } - primaryText={children || errorMessage} - {...filterDOMProps(props)} - /> + + {children || errorMessage} + ) ; diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index a4c43122a..7fab286d1 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -1,21 +1,19 @@ import BaseField from 'uniforms/BaseField'; -import ErrorOutline from 'material-ui/svg-icons/alert/error-outline'; import React from 'react'; import filterDOMProps from 'uniforms/filterDOMProps'; import nothing from 'uniforms/nothing'; -import {ListItem} from 'material-ui/List'; -import {List} from 'material-ui/List'; +import {FormControl, FormHelperText} from 'material-ui/Form'; const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) => (!error && !children) ? nothing : ( - + {!!children && ( - + {children} )} - {schema.getErrorMessages(error).map((message, index) => - } /> + {schema.getErrorMessages(error).map(message => + {message} )} - + ) ; diff --git a/packages/uniforms-material/src/ListAddField.js b/packages/uniforms-material/src/ListAddField.js index a0bf78c12..7b85a02ac 100644 --- a/packages/uniforms-material/src/ListAddField.js +++ b/packages/uniforms-material/src/ListAddField.js @@ -1,13 +1,10 @@ -import Add from 'material-ui/svg-icons/content/add'; -import RaisedButton from 'material-ui/RaisedButton'; -import React from 'react'; +import Button from 'material-ui/Button'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; const ListAdd = ({ disabled, - icon: Icon, - iconVisible, parent, value, ...props @@ -15,19 +12,18 @@ const ListAdd = ({ const limitNotReached = !disabled && !(parent.maxCount <= parent.value.length); return ( - : undefined} - onTouchTap={() => limitNotReached && parent.onChange(parent.value.concat([value]))} + onClick={() => limitNotReached && parent.onChange(parent.value.concat([value]))} {...filterDOMProps(props)} - /> + > + {Button} + ); }; ListAdd.defaultProps = { - children: 'Add', - icon: Add, - iconVisible: false + label: 'Add' }; export default connectField(ListAdd, {includeParent: true, initialValue: false}); diff --git a/packages/uniforms-material/src/ListDelField.js b/packages/uniforms-material/src/ListDelField.js index 0c30aad87..3163864d4 100644 --- a/packages/uniforms-material/src/ListDelField.js +++ b/packages/uniforms-material/src/ListDelField.js @@ -1,13 +1,10 @@ -import RaisedButton from 'material-ui/RaisedButton'; -import React from 'react'; -import Remove from 'material-ui/svg-icons/content/remove'; +import Button from 'material-ui/Button'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; const ListDel = ({ disabled, - icon: Icon, - iconVisible, name, parent, ...props @@ -16,22 +13,21 @@ const ListDel = ({ const limitNotReached = !disabled && !(parent.minCount >= parent.value.length); return ( - : undefined} - onTouchTap={() => limitNotReached && parent.onChange([] + onClick={() => limitNotReached && parent.onChange([] .concat(parent.value.slice(0, fieldIndex)) .concat(parent.value.slice(1 + fieldIndex)) )} {...filterDOMProps(props)} - /> + > + {Button} + ); }; ListDel.defaultProps = { - children: 'Remove', - icon: Remove, - iconVisible: false + label: 'Remove' }; export default connectField(ListDel, {includeParent: true, initialValue: false}); diff --git a/packages/uniforms-material/src/ListField.js b/packages/uniforms-material/src/ListField.js index 48f214e84..4d72fab37 100644 --- a/packages/uniforms-material/src/ListField.js +++ b/packages/uniforms-material/src/ListField.js @@ -1,15 +1,14 @@ -import React from 'react'; -import Subheader from 'material-ui/Subheader'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; import joinName from 'uniforms/joinName'; +import List, {ListSubheader} from 'material-ui/List'; +import React from 'react'; import {Children} from 'react'; -import {List as ListMaterial} from 'material-ui/List'; import ListAddField from './ListAddField'; import ListItemField from './ListItemField'; -const List = ({ +const List_ = ({ actionsStyle, children, initialCount, @@ -19,9 +18,7 @@ const List = ({ value, ...props }) => - - {!!label && } - + {label} : undefined} {...filterDOMProps(props)}> {children ? ( value.map((item, index) => Children.map(children, child => @@ -40,7 +37,7 @@ const List = ({
- + ; -export default connectField(List, {includeInChain: false}); +export default connectField(List_, {includeInChain: false}); diff --git a/packages/uniforms-material/src/ListItemField.js b/packages/uniforms-material/src/ListItemField.js index 543df1f80..ea9e3790c 100644 --- a/packages/uniforms-material/src/ListItemField.js +++ b/packages/uniforms-material/src/ListItemField.js @@ -1,32 +1,30 @@ -import connectField from 'uniforms/connectField'; -import joinName from 'uniforms/joinName'; -import React from 'react'; -import {Card, CardActions, CardText} from 'material-ui/Card'; -import {Children} from 'react'; +import connectField from 'uniforms/connectField'; +import joinName from 'uniforms/joinName'; +import React from 'react'; +import {Children} from 'react'; +import {ListItem, ListItemSecondaryAction} from 'material-ui/List'; import AutoField from './AutoField'; import ListDelField from './ListDelField'; -const ListItem = props => - - - {props.children ? ( - Children.map(props.children, child => - React.cloneElement(child, { - name: joinName(props.name, child.props.name), - label: null - }) - ) - ) : ( - - )} - - +const ListItem_ = props => ( + + {props.children ? ( + Children.map(props.children, child => + React.cloneElement(child, { + name: joinName(props.name, child.props.name), + label: null + }) + ) + ) : ( + + )} + - - -; + + +); -export default connectField(ListItem, {includeInChain: false, includeParent: true}); +export default connectField(ListItem_, {includeInChain: false, includeParent: true}); diff --git a/packages/uniforms-material/src/LongTextField.js b/packages/uniforms-material/src/LongTextField.js index 5a88e9a4b..de823f1d1 100644 --- a/packages/uniforms-material/src/LongTextField.js +++ b/packages/uniforms-material/src/LongTextField.js @@ -4,9 +4,17 @@ import React from 'react'; import TextField from 'material-ui/TextField'; import {FormControl, FormHelperText} from 'material-ui/Form'; -const LongText = ({onChange, ...props}) => ( - - onChange(event.target.value)} {...filterDOMProps(props)} /> +const LongText = ({disabled, label, onChange, placeholder, value, ...props}) => ( + + onChange(event.target.value)} + placeholder={placeholder} + value={value} + {...filterDOMProps(props)} + /> {props.error && props.showInlineError && {props.errorMessage}} ); diff --git a/packages/uniforms-material/src/NestField.js b/packages/uniforms-material/src/NestField.js index 40d70a841..ad31ef942 100644 --- a/packages/uniforms-material/src/NestField.js +++ b/packages/uniforms-material/src/NestField.js @@ -1,24 +1,25 @@ -import React from 'react'; -import Subheader from 'material-ui/Subheader'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import injectName from 'uniforms/injectName'; -import joinName from 'uniforms/joinName'; +import React from 'react'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import injectName from 'uniforms/injectName'; +import joinName from 'uniforms/joinName'; +import {FormLabel, FormControl, FormHelperText} from 'material-ui/Form'; import AutoField from './AutoField'; const Nest = ({ children, + error, + errorMessage, fields, itemProps, label, name, - style, + showInlineError, ...props }) => -
- {!!label && } - + + {label && {label}} {children ? ( injectName(name, children) ) : ( @@ -26,7 +27,8 @@ const Nest = ({ ) )} -
+ {error && showInlineError && {errorMessage}} + ; export default connectField(Nest, {includeInChain: false}); diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index 4ee32a66e..cd44a7511 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -7,9 +7,17 @@ import {FormControl, FormHelperText} from 'material-ui/Form'; const noneIfNaN = x => isNaN(x) ? undefined : x; -const Num_ = ({onChange, ...props}) => ( - - onChange(event.target.value)} {...filterDOMProps(props)} /> +const Num_ = ({disabled, label, onChange, placeholder, value, ...props}) => ( + + onChange(event.target.value)} + placeholder={placeholder} + type="number" + value={value} + {...filterDOMProps(props)} + /> {props.error && props.showInlineError && {props.errorMessage}} ); diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index f0d7dd46a..76866fe8d 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -7,6 +7,7 @@ import {FormLabel, FormControl, FormControlLabel, FormHelperText} from 'material const Radio_ = ({ allowedValues, + checkboxes, // eslint-disable-line no-unused-vars disabled, error, errorMessage, @@ -27,16 +28,16 @@ const Radio_ = ({ aria-label={name} name={name} onChange={(event, value) => onChange(value)} - value={value} + value={'' + value} {...filterDOMProps(props)} > {(hideFiltered && filter ? allowedValues.filter(filter) : allowedValues).map(item => } - disabled={disabled || !filter(item)} + disabled={disabled || (filter && !filter(item))} key={item} label={transform ? transform(item) : item} - value={item} + value={'' + item} /> )} diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index 37358b0c8..ba6549316 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -45,10 +45,10 @@ const renderCheckboxes = ({ value={item} {...filterDOMProps(props)} />} - disabled={disabled || !filter(item)} + disabled={disabled || (filter && !filter(item))} key={item} label={transform ? transform(item) : item} - value={item} + value={'' + item} /> )} diff --git a/packages/uniforms-material/src/TextField.js b/packages/uniforms-material/src/TextField.js index 4efd5f7ce..e627d900d 100644 --- a/packages/uniforms-material/src/TextField.js +++ b/packages/uniforms-material/src/TextField.js @@ -4,9 +4,16 @@ import React from 'react'; import TextField from 'material-ui/TextField'; import {FormControl, FormHelperText} from 'material-ui/Form'; -const Text = ({onChange, ...props}) => ( - - onChange(event.target.value)} {...filterDOMProps(props)} /> +const Text = ({disabled, label, onChange, placeholder, value, ...props}) => ( + + onChange(event.target.value)} + placeholder={placeholder} + value={value} + {...filterDOMProps(props)} + /> {props.error && props.showInlineError && {props.errorMessage}} ); From 6fdced705f7d44bc01d1e32e6194e4c54a5702d2 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 19:23:35 +0200 Subject: [PATCH 07/14] Tweak for packge.json --- packages/uniforms-material/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/uniforms-material/package.json b/packages/uniforms-material/package.json index 625c5930a..2dd3ea6fc 100644 --- a/packages/uniforms-material/package.json +++ b/packages/uniforms-material/package.json @@ -22,8 +22,8 @@ "src/" ], "peerDependencies": { - "material-ui": ">=0.16.7 < 1.0.0", - "react": "^16.0.0 || ^15.0.0 || ^0.14.0", + "material-ui": "^1.0.0-beta.16", + "react": "^15.3.0 || ^16.0.0", "uniforms": "^1.22.0-rc.1" }, "dependencies": { From a4f56e4dbd7f8412245438294e44c2b6f5266629 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 19:36:02 +0200 Subject: [PATCH 08/14] Imports formatting --- packages/uniforms-material/src/ErrorField.js | 8 ++++---- packages/uniforms-material/src/ErrorsField.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/uniforms-material/src/ErrorField.js b/packages/uniforms-material/src/ErrorField.js index bcf395b2a..bc47fcba8 100644 --- a/packages/uniforms-material/src/ErrorField.js +++ b/packages/uniforms-material/src/ErrorField.js @@ -1,7 +1,7 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import nothing from 'uniforms/nothing'; -import React from 'react'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import nothing from 'uniforms/nothing'; +import React from 'react'; import {FormControl, FormHelperText} from 'material-ui/Form'; const Error = ({children, error, errorMessage, ...props}) => diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index 7fab286d1..081be1bd3 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -1,7 +1,7 @@ -import BaseField from 'uniforms/BaseField'; -import React from 'react'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import nothing from 'uniforms/nothing'; +import BaseField from 'uniforms/BaseField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import nothing from 'uniforms/nothing'; +import React from 'react'; import {FormControl, FormHelperText} from 'material-ui/Form'; const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) => From 34784f25cea46aa15d0114876d8f4ca6a9a40679 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 15 Oct 2017 20:02:04 +0200 Subject: [PATCH 09/14] List related fields tweaks --- .../uniforms-material/src/ListAddField.js | 5 +-- .../uniforms-material/src/ListDelField.js | 5 +-- packages/uniforms-material/src/ListField.js | 27 ++++++++------- .../uniforms-material/src/ListItemField.js | 33 +++++++++++-------- 4 files changed, 41 insertions(+), 29 deletions(-) diff --git a/packages/uniforms-material/src/ListAddField.js b/packages/uniforms-material/src/ListAddField.js index 7b85a02ac..ebde5d1fd 100644 --- a/packages/uniforms-material/src/ListAddField.js +++ b/packages/uniforms-material/src/ListAddField.js @@ -5,6 +5,7 @@ import React from 'react'; const ListAdd = ({ disabled, + labelText, parent, value, ...props @@ -17,13 +18,13 @@ const ListAdd = ({ onClick={() => limitNotReached && parent.onChange(parent.value.concat([value]))} {...filterDOMProps(props)} > - {Button} + {labelText} ); }; ListAdd.defaultProps = { - label: 'Add' + labelText: 'Add' }; export default connectField(ListAdd, {includeParent: true, initialValue: false}); diff --git a/packages/uniforms-material/src/ListDelField.js b/packages/uniforms-material/src/ListDelField.js index 3163864d4..c6bfa6fdd 100644 --- a/packages/uniforms-material/src/ListDelField.js +++ b/packages/uniforms-material/src/ListDelField.js @@ -5,6 +5,7 @@ import React from 'react'; const ListDel = ({ disabled, + labelText, name, parent, ...props @@ -21,13 +22,13 @@ const ListDel = ({ )} {...filterDOMProps(props)} > - {Button} + {labelText} ); }; ListDel.defaultProps = { - label: 'Remove' + labelText: 'Remove' }; export default connectField(ListDel, {includeParent: true, initialValue: false}); diff --git a/packages/uniforms-material/src/ListField.js b/packages/uniforms-material/src/ListField.js index 4d72fab37..8871d2bca 100644 --- a/packages/uniforms-material/src/ListField.js +++ b/packages/uniforms-material/src/ListField.js @@ -1,15 +1,15 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import joinName from 'uniforms/joinName'; -import List, {ListSubheader} from 'material-ui/List'; -import React from 'react'; -import {Children} from 'react'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import joinName from 'uniforms/joinName'; +import List, {ListItem, ListSubheader} from 'material-ui/List'; +import React from 'react'; +import {Children} from 'react'; +import {CardActions} from 'material-ui/Card'; import ListAddField from './ListAddField'; import ListItemField from './ListItemField'; const List_ = ({ - actionsStyle, children, initialCount, itemProps, @@ -18,7 +18,10 @@ const List_ = ({ value, ...props }) => - {label} : undefined} {...filterDOMProps(props)}> + {label} : undefined} + {...filterDOMProps(props)} + > {children ? ( value.map((item, index) => Children.map(children, child => @@ -34,9 +37,11 @@ const List_ = ({ ) )} -
- -
+ + + + + ; diff --git a/packages/uniforms-material/src/ListItemField.js b/packages/uniforms-material/src/ListItemField.js index ea9e3790c..cc96c9a81 100644 --- a/packages/uniforms-material/src/ListItemField.js +++ b/packages/uniforms-material/src/ListItemField.js @@ -2,26 +2,31 @@ import connectField from 'uniforms/connectField'; import joinName from 'uniforms/joinName'; import React from 'react'; import {Children} from 'react'; -import {ListItem, ListItemSecondaryAction} from 'material-ui/List'; +import {ListItem} from 'material-ui/List'; +import Card, {CardActions, CardContent} from 'material-ui/Card'; import AutoField from './AutoField'; import ListDelField from './ListDelField'; const ListItem_ = props => ( - {props.children ? ( - Children.map(props.children, child => - React.cloneElement(child, { - name: joinName(props.name, child.props.name), - label: null - }) - ) - ) : ( - - )} - - - + + + {props.children ? ( + Children.map(props.children, child => + React.cloneElement(child, { + name: joinName(props.name, child.props.name), + label: null + }) + ) + ) : ( + + )} + + + + + ); From 12e784bcf6eb35485151750e1e2e4d944079fe41 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Tue, 17 Oct 2017 13:37:25 +0200 Subject: [PATCH 10/14] Tweak for imports, stick to the convention of the rest app --- packages/uniforms-material/src/BoolField.js | 16 +++++++------ packages/uniforms-material/src/DateField.js | 11 +++++---- packages/uniforms-material/src/ErrorField.js | 11 +++++---- packages/uniforms-material/src/ErrorsField.js | 11 +++++---- packages/uniforms-material/src/HiddenField.js | 2 +- packages/uniforms-material/src/ListField.js | 16 +++++++------ .../uniforms-material/src/ListItemField.js | 14 ++++++----- .../uniforms-material/src/LongTextField.js | 11 +++++---- packages/uniforms-material/src/NestField.js | 14 ++++++----- packages/uniforms-material/src/NumField.js | 13 ++++++----- packages/uniforms-material/src/RadioField.js | 16 ++++++++----- packages/uniforms-material/src/SelectField.js | 23 +++++++++++-------- packages/uniforms-material/src/TextField.js | 11 +++++---- 13 files changed, 96 insertions(+), 73 deletions(-) diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index b68029c67..84a025d04 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -1,10 +1,12 @@ -import Checkbox from 'material-ui/Checkbox'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Switch from 'material-ui/Switch'; -import {FormControl, FormControlLabel, FormHelperText} from 'material-ui/Form'; +import Checkbox from 'material-ui/Checkbox'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import PropTypes from 'prop-types'; +import React from 'react'; +import Switch from 'material-ui/Switch'; +import {FormControlLabel} from 'material-ui/Form'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const Bool = ({ appearance, diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index 8985060dd..ac63103a2 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -1,8 +1,9 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import React from 'react'; -import TextField from 'material-ui/TextField'; -import {FormControl, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const dateFormat = value => value && value.toISOString().slice(0, -8); const dateParse = (timestamp, onChange) => { diff --git a/packages/uniforms-material/src/ErrorField.js b/packages/uniforms-material/src/ErrorField.js index bc47fcba8..66d00893b 100644 --- a/packages/uniforms-material/src/ErrorField.js +++ b/packages/uniforms-material/src/ErrorField.js @@ -1,8 +1,9 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import nothing from 'uniforms/nothing'; -import React from 'react'; -import {FormControl, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import nothing from 'uniforms/nothing'; +import React from 'react'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const Error = ({children, error, errorMessage, ...props}) => !error ? nothing : ( diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index 081be1bd3..ca754e341 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -1,8 +1,9 @@ -import BaseField from 'uniforms/BaseField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import nothing from 'uniforms/nothing'; -import React from 'react'; -import {FormControl, FormHelperText} from 'material-ui/Form'; +import BaseField from 'uniforms/BaseField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import nothing from 'uniforms/nothing'; +import React from 'react'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) => (!error && !children) ? nothing : ( diff --git a/packages/uniforms-material/src/HiddenField.js b/packages/uniforms-material/src/HiddenField.js index a90706365..f7245e4d6 100644 --- a/packages/uniforms-material/src/HiddenField.js +++ b/packages/uniforms-material/src/HiddenField.js @@ -1,7 +1,7 @@ import BaseField from 'uniforms/BaseField'; -import React from 'react'; import filterDOMProps from 'uniforms/filterDOMProps'; import nothing from 'uniforms/nothing'; +import React from 'react'; export default class HiddenField extends BaseField { static displayName = 'HiddenField'; diff --git a/packages/uniforms-material/src/ListField.js b/packages/uniforms-material/src/ListField.js index 8871d2bca..7b4743abc 100644 --- a/packages/uniforms-material/src/ListField.js +++ b/packages/uniforms-material/src/ListField.js @@ -1,10 +1,12 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import joinName from 'uniforms/joinName'; -import List, {ListItem, ListSubheader} from 'material-ui/List'; -import React from 'react'; -import {Children} from 'react'; -import {CardActions} from 'material-ui/Card'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import joinName from 'uniforms/joinName'; +import List from 'material-ui/List'; +import React from 'react'; +import {CardActions} from 'material-ui/Card'; +import {Children} from 'react'; +import {ListItem} from 'material-ui/List'; +import {ListSubheader} from 'material-ui/List'; import ListAddField from './ListAddField'; import ListItemField from './ListItemField'; diff --git a/packages/uniforms-material/src/ListItemField.js b/packages/uniforms-material/src/ListItemField.js index cc96c9a81..68a293566 100644 --- a/packages/uniforms-material/src/ListItemField.js +++ b/packages/uniforms-material/src/ListItemField.js @@ -1,9 +1,11 @@ -import connectField from 'uniforms/connectField'; -import joinName from 'uniforms/joinName'; -import React from 'react'; -import {Children} from 'react'; -import {ListItem} from 'material-ui/List'; -import Card, {CardActions, CardContent} from 'material-ui/Card'; +import Card from 'material-ui/Card'; +import connectField from 'uniforms/connectField'; +import joinName from 'uniforms/joinName'; +import React from 'react'; +import {CardActions} from 'material-ui/Card'; +import {CardContent} from 'material-ui/Card'; +import {Children} from 'react'; +import {ListItem} from 'material-ui/List'; import AutoField from './AutoField'; import ListDelField from './ListDelField'; diff --git a/packages/uniforms-material/src/LongTextField.js b/packages/uniforms-material/src/LongTextField.js index de823f1d1..2446a715d 100644 --- a/packages/uniforms-material/src/LongTextField.js +++ b/packages/uniforms-material/src/LongTextField.js @@ -1,8 +1,9 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import React from 'react'; -import TextField from 'material-ui/TextField'; -import {FormControl, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const LongText = ({disabled, label, onChange, placeholder, value, ...props}) => ( diff --git a/packages/uniforms-material/src/NestField.js b/packages/uniforms-material/src/NestField.js index ad31ef942..6454820fd 100644 --- a/packages/uniforms-material/src/NestField.js +++ b/packages/uniforms-material/src/NestField.js @@ -1,9 +1,11 @@ -import React from 'react'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import injectName from 'uniforms/injectName'; -import joinName from 'uniforms/joinName'; -import {FormLabel, FormControl, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import injectName from 'uniforms/injectName'; +import joinName from 'uniforms/joinName'; +import React from 'react'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; +import {FormLabel} from 'material-ui/Form'; import AutoField from './AutoField'; diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index cd44a7511..193ae507e 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -1,9 +1,10 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import React from 'react'; -import TextField from 'material-ui/TextField'; -import {Component} from 'react'; -import {FormControl, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {Component} from 'react'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const noneIfNaN = x => isNaN(x) ? undefined : x; diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index 76866fe8d..b8f1194b5 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -1,9 +1,13 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import PropTypes from 'prop-types'; -import Radio, {RadioGroup} from 'material-ui/Radio'; -import React from 'react'; -import {FormLabel, FormControl, FormControlLabel, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import PropTypes from 'prop-types'; +import Radio from 'material-ui/Radio'; +import React from 'react'; +import {FormControlLabel} from 'material-ui/Form'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; +import {FormLabel} from 'material-ui/Form'; +import {RadioGroup} from 'material-ui/Radio'; const Radio_ = ({ allowedValues, diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index ba6549316..2df0b28c2 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -1,12 +1,17 @@ -import Checkbox from 'material-ui/Checkbox'; -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import Input, {InputLabel} from 'material-ui/Input'; -import PropTypes from 'prop-types'; -import React from 'react'; -import Select from 'material-ui/Select'; -import {FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel} from 'material-ui/Form'; -import {MenuItem} from 'material-ui/Menu'; +import Checkbox from 'material-ui/Checkbox'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import Input from 'material-ui/Input'; +import PropTypes from 'prop-types'; +import React from 'react'; +import Select from 'material-ui/Select'; +import {FormControlLabel} from 'material-ui/Form'; +import {FormControl} from 'material-ui/Form'; +import {FormGroup} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; +import {FormLabel} from 'material-ui/Form'; +import {InputLabel} from 'material-ui/Input'; +import {MenuItem} from 'material-ui/Menu'; const xor = (item, array) => { const index = array.indexOf(item); diff --git a/packages/uniforms-material/src/TextField.js b/packages/uniforms-material/src/TextField.js index e627d900d..8c31f46a8 100644 --- a/packages/uniforms-material/src/TextField.js +++ b/packages/uniforms-material/src/TextField.js @@ -1,8 +1,9 @@ -import connectField from 'uniforms/connectField'; -import filterDOMProps from 'uniforms/filterDOMProps'; -import React from 'react'; -import TextField from 'material-ui/TextField'; -import {FormControl, FormHelperText} from 'material-ui/Form'; +import connectField from 'uniforms/connectField'; +import filterDOMProps from 'uniforms/filterDOMProps'; +import React from 'react'; +import TextField from 'material-ui/TextField'; +import {FormControl} from 'material-ui/Form'; +import {FormHelperText} from 'material-ui/Form'; const Text = ({disabled, label, onChange, placeholder, value, ...props}) => ( From 93a677e91c891afdb5c3a021929e2b7c98e908df Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Thu, 19 Oct 2017 01:32:13 +0200 Subject: [PATCH 11/14] Initial layout solution --- packages/uniforms-material/src/AutoField.js | 4 +- packages/uniforms-material/src/BoolField.js | 61 +++++--- packages/uniforms-material/src/DateField.js | 43 +++--- packages/uniforms-material/src/ErrorsField.js | 8 +- .../uniforms-material/src/LongTextField.js | 43 +++--- packages/uniforms-material/src/NumField.js | 44 +++--- packages/uniforms-material/src/RadioField.js | 56 ++++---- packages/uniforms-material/src/SelectField.js | 130 +++++++++--------- packages/uniforms-material/src/SubmitField.js | 1 + packages/uniforms-material/src/TextField.js | 41 ++++-- packages/uniforms-material/src/wrapField.js | 10 ++ 11 files changed, 258 insertions(+), 183 deletions(-) create mode 100644 packages/uniforms-material/src/wrapField.js diff --git a/packages/uniforms-material/src/AutoField.js b/packages/uniforms-material/src/AutoField.js index f196b49f2..1e9cc6f46 100644 --- a/packages/uniforms-material/src/AutoField.js +++ b/packages/uniforms-material/src/AutoField.js @@ -2,14 +2,14 @@ import BaseField from 'uniforms/BaseField'; import invariant from 'fbjs/lib/invariant'; import {createElement} from 'react'; -import NumField from './NumField'; import BoolField from './BoolField'; import DateField from './DateField'; import ListField from './ListField'; import NestField from './NestField'; -import TextField from './TextField'; +import NumField from './NumField'; import RadioField from './RadioField'; import SelectField from './SelectField'; +import TextField from './TextField'; export default class AutoField extends BaseField { static displayName = 'AutoField'; diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index 84a025d04..c6c4530b9 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -8,40 +8,57 @@ import {FormControlLabel} from 'material-ui/Form'; import {FormControl} from 'material-ui/Form'; import {FormHelperText} from 'material-ui/Form'; -const Bool = ({ - appearance, - disabled, - error, - errorMessage, - label, - onChange, - required, - showInlineError, - value, - ...props -}) => ( - +import wrapField from './wrapField'; + +const Bool = props => wrapField(props, ( + disabled || onChange(value)} + checkedClassName={props.checkedClassName} + checkedIcon={props.checkedIcon} + disableRipple={props.disableRipple} + disabledClassName={props.disabledClassName} + icon={props.icon} + inputProps={{...props.inputProps, id: props.id}} + inputRef={props.inputRef} + name={props.name} {...filterDOMProps(props)} /> ) : ( disabled || onChange(value)} + checkedClassName={props.checkedClassName} + checkedIcon={props.checkedIcon} + disableRipple={props.disableRipple} + disabledClassName={props.disabledClassName} + icon={props.icon} + indeterminate={props.indeterminate} + indeterminateIcon={props.indeterminateIcon} + inputProps={{...props.inputProps, id: props.id}} + inputRef={props.inputRef} + name={props.name} {...filterDOMProps(props)} /> )} - label={label} + onChange={(event, value) => props.disabled || props.onChange(value)} + disabled={props.disabled} + label={props.label} /> - {error && showInlineError && {errorMessage}} + {props.error && props.showInlineError && {props.errorMessage}} -); +)); -Bool.defaultProps = {appearance: 'checkbox'}; +Bool.defaultProps = { + appearance: 'checkbox', + fullWidth: true +}; Bool.propTypes = { appearance: PropTypes.oneOf(['toggle', 'checkbox']) diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index ac63103a2..d410eb4bf 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -2,8 +2,8 @@ import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; import React from 'react'; import TextField from 'material-ui/TextField'; -import {FormControl} from 'material-ui/Form'; -import {FormHelperText} from 'material-ui/Form'; + +import wrapField from './wrapField'; const dateFormat = value => value && value.toISOString().slice(0, -8); const dateParse = (timestamp, onChange) => { @@ -13,19 +13,30 @@ const dateParse = (timestamp, onChange) => { } }; -export const Date_ = ({disabled, label, onChange, placeholder, value, ...props}) => ( - - dateParse(event.target.valueAsNumber, onChange)} - placeholder={placeholder} - type="datetime-local" - value={dateFormat(value)} - {...filterDOMProps(props)} - /> - {props.error && props.showInlineError && {props.errorMessage}} - -); +export const Date_ = props => wrapField(props, ( + dateParse(event.target.valueAsNumber, props.onChange)} + placeholder={props.placeholder} + type="datetime-local" + value={dateFormat(props.value)} + {...filterDOMProps(props)} + /> +)); + +Date_.defaultProps = { + fullWidth: true +}; export default connectField(Date_); diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index ca754e341..4035fe6ee 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -5,9 +5,9 @@ import React from 'react'; import {FormControl} from 'material-ui/Form'; import {FormHelperText} from 'material-ui/Form'; -const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) => +const ErrorsField = ({children, fullWidth, margin, ...props}, {uniforms: {error, schema}}) => (!error && !children) ? nothing : ( - + {!!children && ( {children} )} @@ -18,6 +18,10 @@ const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) => ) ; +ErrorsField.propTypes = { + fullWidth: true +}; + ErrorsField.contextTypes = BaseField.contextTypes; export default ErrorsField; diff --git a/packages/uniforms-material/src/LongTextField.js b/packages/uniforms-material/src/LongTextField.js index 2446a715d..7f1abf070 100644 --- a/packages/uniforms-material/src/LongTextField.js +++ b/packages/uniforms-material/src/LongTextField.js @@ -2,22 +2,33 @@ import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; import React from 'react'; import TextField from 'material-ui/TextField'; -import {FormControl} from 'material-ui/Form'; -import {FormHelperText} from 'material-ui/Form'; -const LongText = ({disabled, label, onChange, placeholder, value, ...props}) => ( - - onChange(event.target.value)} - placeholder={placeholder} - value={value} - {...filterDOMProps(props)} - /> - {props.error && props.showInlineError && {props.errorMessage}} - -); +import wrapField from './wrapField'; + +const LongText = props => wrapField(props, ( + props.onChange(event.target.value)} + placeholder={props.placeholder} + value={props.value} + {...filterDOMProps(props)} + /> +)); + +LongText.defaultProps = { + fullWidth: true +}; export default connectField(LongText); diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index 193ae507e..645ff8ee7 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -3,25 +3,37 @@ import filterDOMProps from 'uniforms/filterDOMProps'; import React from 'react'; import TextField from 'material-ui/TextField'; import {Component} from 'react'; -import {FormControl} from 'material-ui/Form'; -import {FormHelperText} from 'material-ui/Form'; + +import wrapField from './wrapField'; const noneIfNaN = x => isNaN(x) ? undefined : x; -const Num_ = ({disabled, label, onChange, placeholder, value, ...props}) => ( - - onChange(event.target.value)} - placeholder={placeholder} - type="number" - value={value} - {...filterDOMProps(props)} - /> - {props.error && props.showInlineError && {props.errorMessage}} - -); +const Num_ = props => wrapField(props, ( + props.onChange(event.target.value)} + placeholder={props.placeholder} + type="number" + value={props.value} + {...filterDOMProps(props)} + /> +)); + +Num_.defaultProps = { + fullWidth: true +}; + // NOTE: React < 16 workaround. Make it optional? class Num extends Component { diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index b8f1194b5..fbd594f22 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -9,45 +9,45 @@ import {FormHelperText} from 'material-ui/Form'; import {FormLabel} from 'material-ui/Form'; import {RadioGroup} from 'material-ui/Radio'; -const Radio_ = ({ - allowedValues, - checkboxes, // eslint-disable-line no-unused-vars - disabled, - error, - errorMessage, - filter, - hideFiltered, - label, - name, - onChange, - required, - showInlineError, - transform, - value, - ...props -}) => ( - - {label && {label}} +import wrapField from './wrapField'; + +const Radio_ = props => wrapField(props, ( + + {props.label && {props.label}} onChange(value)} - value={'' + value} + aria-label={props.name} + name={props.name} + onChange={(event, value) => props.onChange(value)} + value={'' + props.value} {...filterDOMProps(props)} > - {(hideFiltered && filter ? allowedValues.filter(filter) : allowedValues).map(item => + {(props.hideFiltered && props.filter + ? props.allowedValues.filter(props.filter) + : props.allowedValues + ).map(item => } - disabled={disabled || (filter && !filter(item))} + disabled={props.disabled || (props.filter && !props.filter(item))} key={item} - label={transform ? transform(item) : item} + label={props.transform ? props.transform(item) : item} value={'' + item} /> )} - {error && showInlineError && {errorMessage}} + {props.error && props.showInlineError && {props.errorMessage}} -); +)); + +Radio_.propTypes = { + fullWidth: true +}; Radio_.propTypes = { filter: PropTypes.func, diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index 2df0b28c2..e65fced15 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -1,18 +1,18 @@ import Checkbox from 'material-ui/Checkbox'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; -import Input from 'material-ui/Input'; import PropTypes from 'prop-types'; import React from 'react'; -import Select from 'material-ui/Select'; +import TextField from 'material-ui/TextField'; import {FormControlLabel} from 'material-ui/Form'; import {FormControl} from 'material-ui/Form'; import {FormGroup} from 'material-ui/Form'; import {FormHelperText} from 'material-ui/Form'; import {FormLabel} from 'material-ui/Form'; -import {InputLabel} from 'material-ui/Input'; import {MenuItem} from 'material-ui/Menu'; +import wrapField from './wrapField'; + const xor = (item, array) => { const index = array.indexOf(item); if (index === -1) { @@ -22,84 +22,82 @@ const xor = (item, array) => { return array.slice(0, index).concat(array.slice(index + 1)); }; -const renderCheckboxes = ({ - allowedValues, - disabled, - error, - errorMessage, - filter, - hideFiltered, - id, - label, - name, - onChange, - required, - showInlineError, - transform, - value, - ...props -}) => ( - - {label && {label}} - - {(hideFiltered && filter ? allowedValues.filter(filter) : allowedValues).map(item => +const renderCheckboxes = props => ( + + {props.label && {props.label}} + + {(props.hideFiltered && props.filter + ? props.allowedValues.filter(props.filter) + : props.allowedValues + ).map(item => onChange(xor(item, value))} + checked={props.value.includes(item)} + onChange={() => props.onChange(xor(item, props.value))} value={item} {...filterDOMProps(props)} />} - disabled={disabled || (filter && !filter(item))} + disabled={props.disabled || (props.filter && !props.filter(item))} key={item} - label={transform ? transform(item) : item} + label={props.transform ? props.transform(item) : item} value={'' + item} /> )} - {error && showInlineError && {errorMessage}} + {props.error && props.showInlineError && {props.errorMessage}} ); -const renderSelect = ({ - allowedValues, - disabled, - displayEmpty, - error, - errorMessage, - filter, - id, - label, - MenuProps, - multiple, - onChange, - renderValue, - required, - showInlineError, - transform, - value, - ...props -}) => ( - - {label && {label}} - - {error && showInlineError && {errorMessage}} - +const renderSelect = props => ( + props.onChange(event.target.value)} + placeholder={props.placeholder} + select + SelectProps={{ + autoWidth: props.autoWidth, + displayEmpty: props.displayEmpty, + MenuProps: props.MenuProps, + multiple: props.multiple, + native: props.native, + renderValue: props.renderValue + }} + value={props.value} + {...filterDOMProps(props)} + > + {(props.filter ? props.allowedValues.filter(props.filter) : props.allowedValues).map(item => + {props.transform ? props.transform(item) : item} + )} + ); -const Select_ = ({checkboxes, ...props}) => checkboxes ? renderCheckboxes(props) : renderSelect(props); +const Select_ = ({checkboxes, ...props}) => wrapField( + props, + checkboxes ? renderCheckboxes(props) : renderSelect(props) +); + +Select_.defaultProps = { + fullWidth: true +}; Select_.propTypes = { filter: PropTypes.func, diff --git a/packages/uniforms-material/src/SubmitField.js b/packages/uniforms-material/src/SubmitField.js index b74fd9bcb..7db41bb4f 100644 --- a/packages/uniforms-material/src/SubmitField.js +++ b/packages/uniforms-material/src/SubmitField.js @@ -9,6 +9,7 @@ const SubmitField = ({disabled, inputRef, label, value, ...props}, {uniforms: {e disabled={disabled === undefined ? !!(error || state.disabled) : disabled} raised ref={inputRef} + type="submit" value={value} {...filterDOMProps(props)} > diff --git a/packages/uniforms-material/src/TextField.js b/packages/uniforms-material/src/TextField.js index 8c31f46a8..0bfa67dff 100644 --- a/packages/uniforms-material/src/TextField.js +++ b/packages/uniforms-material/src/TextField.js @@ -2,21 +2,32 @@ import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; import React from 'react'; import TextField from 'material-ui/TextField'; -import {FormControl} from 'material-ui/Form'; -import {FormHelperText} from 'material-ui/Form'; -const Text = ({disabled, label, onChange, placeholder, value, ...props}) => ( - - onChange(event.target.value)} - placeholder={placeholder} - value={value} - {...filterDOMProps(props)} - /> - {props.error && props.showInlineError && {props.errorMessage}} - -); +import wrapField from './wrapField'; + +const Text = props => wrapField(props, ( + props.onChange(event.target.value)} + placeholder={props.placeholder} + value={props.value} + {...filterDOMProps(props)} + /> +)); + +Text.defaultProps = { + fullWidth: true +}; export default connectField(Text); diff --git a/packages/uniforms-material/src/wrapField.js b/packages/uniforms-material/src/wrapField.js new file mode 100644 index 000000000..441a56333 --- /dev/null +++ b/packages/uniforms-material/src/wrapField.js @@ -0,0 +1,10 @@ +import Grid from 'material-ui/Grid'; +import React from 'react'; + +export const wrapField = (props, children) => ( + + {children} + +); + +export default wrapField; From 04e04ff705e4331c4fde0a9b6ae16674dbbbdfe5 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Thu, 19 Oct 2017 18:37:17 +0200 Subject: [PATCH 12/14] Add margin normal by default for better spacing --- packages/uniforms-material/src/BoolField.js | 3 ++- packages/uniforms-material/src/DateField.js | 3 ++- packages/uniforms-material/src/ErrorsField.js | 5 +++-- packages/uniforms-material/src/LongTextField.js | 3 ++- packages/uniforms-material/src/NumField.js | 3 ++- packages/uniforms-material/src/RadioField.js | 7 ++++--- packages/uniforms-material/src/SelectField.js | 3 ++- packages/uniforms-material/src/TextField.js | 3 ++- 8 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index c6c4530b9..07fd0de70 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -57,7 +57,8 @@ const Bool = props => wrapField(props, ( Bool.defaultProps = { appearance: 'checkbox', - fullWidth: true + fullWidth: true, + margin: 'normal' }; Bool.propTypes = { diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index d410eb4bf..4911de93a 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -36,7 +36,8 @@ export const Date_ = props => wrapField(props, ( )); Date_.defaultProps = { - fullWidth: true + fullWidth: true, + margin: 'normal' }; export default connectField(Date_); diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index 4035fe6ee..a8f74346a 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -18,8 +18,9 @@ const ErrorsField = ({children, fullWidth, margin, ...props}, {uniforms: {error, ) ; -ErrorsField.propTypes = { - fullWidth: true +ErrorsField.defaultProps = { + fullWidth: true, + margin: 'normal' }; ErrorsField.contextTypes = BaseField.contextTypes; diff --git a/packages/uniforms-material/src/LongTextField.js b/packages/uniforms-material/src/LongTextField.js index 7f1abf070..ae29f92f6 100644 --- a/packages/uniforms-material/src/LongTextField.js +++ b/packages/uniforms-material/src/LongTextField.js @@ -28,7 +28,8 @@ const LongText = props => wrapField(props, ( )); LongText.defaultProps = { - fullWidth: true + fullWidth: true, + margin: 'normal' }; export default connectField(LongText); diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index 645ff8ee7..dd3f01367 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -31,7 +31,8 @@ const Num_ = props => wrapField(props, ( )); Num_.defaultProps = { - fullWidth: true + fullWidth: true, + margin: 'normal' }; diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index fbd594f22..1fbe42864 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -45,13 +45,14 @@ const Radio_ = props => wrapField(props, ( )); -Radio_.propTypes = { - fullWidth: true +Radio_.defaultProps = { + fullWidth: true, + margin: 'normal' }; Radio_.propTypes = { filter: PropTypes.func, - hideFiltered: PropTypes.bool + hideFiltered: PropTypes.bool }; export default connectField(Radio_); diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index e65fced15..fd8637eec 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -96,7 +96,8 @@ const Select_ = ({checkboxes, ...props}) => wrapField( ); Select_.defaultProps = { - fullWidth: true + fullWidth: true, + margin: 'normal' }; Select_.propTypes = { diff --git a/packages/uniforms-material/src/TextField.js b/packages/uniforms-material/src/TextField.js index 0bfa67dff..71c7df829 100644 --- a/packages/uniforms-material/src/TextField.js +++ b/packages/uniforms-material/src/TextField.js @@ -27,7 +27,8 @@ const Text = props => wrapField(props, ( )); Text.defaultProps = { - fullWidth: true + fullWidth: true, + margin: 'normal' }; export default connectField(Text); From 06b0d0e7a08448e4387001e0d322908a7730a6d1 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Fri, 20 Oct 2017 00:46:11 +0200 Subject: [PATCH 13/14] Tweaks for NumField and NestField --- packages/uniforms-material/src/NestField.js | 18 +++++++++++++++++- packages/uniforms-material/src/NumField.js | 11 +++++------ 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/uniforms-material/src/NestField.js b/packages/uniforms-material/src/NestField.js index 6454820fd..8b26088b7 100644 --- a/packages/uniforms-material/src/NestField.js +++ b/packages/uniforms-material/src/NestField.js @@ -11,16 +11,27 @@ import AutoField from './AutoField'; const Nest = ({ children, + disabled, error, errorMessage, fields, + fullWidth, itemProps, label, + margin, name, + required, showInlineError, ...props }) => - + {label && {label}} {children ? ( injectName(name, children) @@ -33,4 +44,9 @@ const Nest = ({ ; +Nest.defaultProps = { + fullWidth: true, + margin: 'normal' +}; + export default connectField(Nest, {includeInChain: false}); diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index dd3f01367..49a554d0d 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -30,12 +30,6 @@ const Num_ = props => wrapField(props, ( /> )); -Num_.defaultProps = { - fullWidth: true, - margin: 'normal' -}; - - // NOTE: React < 16 workaround. Make it optional? class Num extends Component { constructor () { @@ -66,4 +60,9 @@ class Num extends Component { } } +Num.defaultProps = { + fullWidth: true, + margin: 'normal' +}; + export default connectField(Num); From 8cf0db12269832199ba6b1aa47302e6a43baffa5 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Tue, 24 Oct 2017 00:02:29 +0200 Subject: [PATCH 14/14] Tweaks for ListItemField, ErrorField, ErrorsField layout --- packages/uniforms-material/src/ErrorField.js | 12 +++--- packages/uniforms-material/src/ErrorsField.js | 18 +++++---- .../uniforms-material/src/ListItemField.js | 37 ++++++++++--------- packages/uniforms-material/src/wrapField.js | 11 +++++- 4 files changed, 47 insertions(+), 31 deletions(-) diff --git a/packages/uniforms-material/src/ErrorField.js b/packages/uniforms-material/src/ErrorField.js index 66d00893b..eff902ab5 100644 --- a/packages/uniforms-material/src/ErrorField.js +++ b/packages/uniforms-material/src/ErrorField.js @@ -5,12 +5,14 @@ import React from 'react'; import {FormControl} from 'material-ui/Form'; import {FormHelperText} from 'material-ui/Form'; -const Error = ({children, error, errorMessage, ...props}) => - !error ? nothing : ( - - {children || errorMessage} +import wrapField from './wrapField'; + +const Error = props => + !props.error ? nothing : wrapField(props, ( + + {props.children || props.errorMessage} - ) + )) ; export default connectField(Error, {initialValue: false}); diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index a8f74346a..c81b74618 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -5,17 +5,19 @@ import React from 'react'; import {FormControl} from 'material-ui/Form'; import {FormHelperText} from 'material-ui/Form'; -const ErrorsField = ({children, fullWidth, margin, ...props}, {uniforms: {error, schema}}) => - (!error && !children) ? nothing : ( - - {!!children && ( - {children} +import wrapField from './wrapField'; + +const ErrorsField = (props, {uniforms: {error, schema}}) => + (!error && !props.children) ? nothing : wrapField(props, ( + + {!!props.children && ( + {props.children} )} - {schema.getErrorMessages(error).map(message => - {message} + {schema.getErrorMessages(error).map((message, index) => + {message} )} - ) + )) ; ErrorsField.defaultProps = { diff --git a/packages/uniforms-material/src/ListItemField.js b/packages/uniforms-material/src/ListItemField.js index 68a293566..1c16d573e 100644 --- a/packages/uniforms-material/src/ListItemField.js +++ b/packages/uniforms-material/src/ListItemField.js @@ -9,26 +9,29 @@ import {ListItem} from 'material-ui/List'; import AutoField from './AutoField'; import ListDelField from './ListDelField'; +import wrapField from './wrapField'; const ListItem_ = props => ( - - - {props.children ? ( - Children.map(props.children, child => - React.cloneElement(child, { - name: joinName(props.name, child.props.name), - label: null - }) - ) - ) : ( - - )} - - - - - + {wrapField({gridProps: {xs: 12}, ...props}, ( + + + {props.children ? ( + Children.map(props.children, child => + React.cloneElement(child, { + name: joinName(props.name, child.props.name), + label: null + }) + ) + ) : ( + + )} + + + + + + ))} ); diff --git a/packages/uniforms-material/src/wrapField.js b/packages/uniforms-material/src/wrapField.js index 441a56333..76fec3026 100644 --- a/packages/uniforms-material/src/wrapField.js +++ b/packages/uniforms-material/src/wrapField.js @@ -1,10 +1,19 @@ +import filterDOMProps from 'uniforms/filterDOMProps'; import Grid from 'material-ui/Grid'; import React from 'react'; export const wrapField = (props, children) => ( - + {children} ); export default wrapField; + +filterDOMProps.register( + 'appearance', + 'checkboxes', + 'fullWidth', + 'gridProps', + 'margin' +);