diff --git a/packages/uniforms-material/__tests__/SelectField.js b/packages/uniforms-material/__tests__/SelectField.js index 977f93c0e..2ffe7bf8b 100644 --- a/packages/uniforms-material/__tests__/SelectField.js +++ b/packages/uniforms-material/__tests__/SelectField.js @@ -3,12 +3,12 @@ import FormControl from '@material-ui/core/FormControl'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormHelperText from '@material-ui/core/FormHelperText'; import FormLabel from '@material-ui/core/FormLabel'; -import InputLabel from '@material-ui/core/InputLabel'; import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import React from 'react'; import Select from '@material-ui/core/Select'; import SelectField from 'uniforms-material/SelectField'; +import TextField from '@material-ui/core/TextField'; import {mount} from 'enzyme'; import createContext from './_createContext'; @@ -150,7 +150,7 @@ test(' - renders a Select which correctly reacts on change', () => expect(wrapper.find(Select)).toHaveLength(1); wrapper - .find(Select) + .find(TextField) .props() .onChange({target: {value: 'b'}}); expect(onChange).toHaveBeenLastCalledWith('x', 'b'); @@ -164,7 +164,7 @@ test(' - renders a Select which correctly reacts on change (empty)' expect(wrapper.find(Select)).toHaveLength(1); wrapper - .find(Select) + .find(TextField) .props() .onChange({target: {value: ''}}); expect(onChange).toHaveBeenLastCalledWith('x', ''); @@ -181,7 +181,7 @@ test(' - renders a Select which correctly reacts on change (same va expect(wrapper.find(Select)).toHaveLength(1); wrapper - .find(Select) + .find(TextField) .props() .onChange({target: {value: 'b'}}); expect(onChange).toHaveBeenLastCalledWith('x', 'b'); @@ -192,7 +192,7 @@ test(' - renders a label', () => { const wrapper = mount(element, createContext({x: {type: String, allowedValues: ['a', 'b']}})); expect(wrapper.find(Select)).toHaveLength(1); - expect(wrapper.find(InputLabel).text()).toBe('y *'); + expect(wrapper.find(TextField).prop('label')).toBe('y'); }); test(' - renders a set of Radio buttons', () => { diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index 1f1283340..ff1d15b43 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -42,7 +42,7 @@ const Bool = ({appearance, disabled, inputRef, label, legend, name, onChange, tr Bool.defaultProps = { appearance: 'checkbox', fullWidth: true, - margin: 'normal' + margin: 'dense' }; Bool.propTypes = { diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index 069e5f1a2..2caf8ccaf 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -1,11 +1,8 @@ -import Input from '@material-ui/core/Input'; -import InputLabel from '@material-ui/core/InputLabel'; import React from 'react'; +import TextField from '@material-ui/core/TextField'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; -import wrapField from './wrapField'; - const DateConstructor = (typeof global === 'object' ? global : window).Date; const dateFormat = value => value && value.toISOString().slice(0, -8); const dateParse = (timestamp, onChange) => { @@ -17,31 +14,41 @@ const dateParse = (timestamp, onChange) => { } }; -const Date = ({inputRef, label, labelProps, name, onChange, placeholder, value, ...props}) => { - const filteredProps = wrapField._filterDOMProps(filterDOMProps(props)); - - return wrapField( - {...props, component: undefined}, - label && ( - - {label} - - ), - dateParse(event.target.valueAsNumber, onChange)} - placeholder={placeholder} - ref={inputRef} - type="datetime-local" - value={dateFormat(value)} - {...filteredProps} - /> - ); -}; +const Date = ({ + InputLabelProps, + disabled, + error, + errorMessage, + helperText, + inputRef, + label, + labelProps, + name, + onChange, + placeholder, + showInlineError, + value, + ...props +}) => ( + disabled || dateParse(event.target.valueAsNumber, onChange)} + placeholder={placeholder} + ref={inputRef} + type="datetime-local" + value={dateFormat(value)} + {...filterDOMProps(props)} + /> +); Date.defaultProps = { fullWidth: true, - margin: 'normal' + margin: 'dense' }; export default connectField(Date); diff --git a/packages/uniforms-material/src/ErrorField.js b/packages/uniforms-material/src/ErrorField.js index 22aa8597d..3b9d3fdd6 100644 --- a/packages/uniforms-material/src/ErrorField.js +++ b/packages/uniforms-material/src/ErrorField.js @@ -15,7 +15,7 @@ const Error = ({children, error, errorMessage, fullWidth, margin, variant, ...pr ); Error.defaultProps = { fullWidth: true, - margin: 'normal' + margin: 'dense' }; export default connectField(Error, {initialValue: false}); diff --git a/packages/uniforms-material/src/ErrorsField.js b/packages/uniforms-material/src/ErrorsField.js index 33a5041ac..fbcdbb228 100644 --- a/packages/uniforms-material/src/ErrorsField.js +++ b/packages/uniforms-material/src/ErrorsField.js @@ -22,7 +22,7 @@ ErrorsField.contextTypes = BaseField.contextTypes; ErrorsField.defaultProps = { fullWidth: true, - margin: 'normal' + margin: 'dense' }; export default ErrorsField; diff --git a/packages/uniforms-material/src/ListAddField.js b/packages/uniforms-material/src/ListAddField.js index 6b047d834..e6843ed60 100644 --- a/packages/uniforms-material/src/ListAddField.js +++ b/packages/uniforms-material/src/ListAddField.js @@ -29,7 +29,7 @@ ListAdd.propTypes = { ListAdd.defaultProps = { fullWidth: true, icon: '+', - margin: 'normal' + margin: 'dense' }; export default connectField(ListAdd, {includeParent: true, initialValue: false}); diff --git a/packages/uniforms-material/src/LongTextField.js b/packages/uniforms-material/src/LongTextField.js index 39b0b242f..e906e3175 100644 --- a/packages/uniforms-material/src/LongTextField.js +++ b/packages/uniforms-material/src/LongTextField.js @@ -33,7 +33,7 @@ const LongText = ({ ); LongText.defaultProps = { fullWidth: true, - margin: 'normal', + margin: 'dense', type: 'text' }; diff --git a/packages/uniforms-material/src/NestField.js b/packages/uniforms-material/src/NestField.js index 32cc738f4..6baadc893 100644 --- a/packages/uniforms-material/src/NestField.js +++ b/packages/uniforms-material/src/NestField.js @@ -18,7 +18,7 @@ const Nest = ({children, fields, itemProps, label, name, ...props}) => Nest.defaultProps = { fullWidth: true, - margin: 'none' + margin: 'dense' }; export default connectField(Nest, {ensureValue: false, includeInChain: false}); diff --git a/packages/uniforms-material/src/NumField.js b/packages/uniforms-material/src/NumField.js index 02bcdb34f..9dd89c9e0 100644 --- a/packages/uniforms-material/src/NumField.js +++ b/packages/uniforms-material/src/NumField.js @@ -40,7 +40,7 @@ const Num = ({ ); Num.defaultProps = { fullWidth: true, - margin: 'normal' + margin: 'dense' }; export default connectField(Num); diff --git a/packages/uniforms-material/src/RadioField.js b/packages/uniforms-material/src/RadioField.js index 026b73270..afcc6acce 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -51,7 +51,7 @@ const Radio = ({ Radio.defaultProps = { fullWidth: true, - margin: 'normal' + margin: 'dense' }; export default connectField(Radio); diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index 6e56a9a45..1a061bced 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -3,13 +3,12 @@ import FormControlLabel from '@material-ui/core/FormControlLabel'; import FormGroup from '@material-ui/core/FormGroup'; import FormHelperText from '@material-ui/core/FormHelperText'; import FormLabel from '@material-ui/core/FormLabel'; -import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Radio from '@material-ui/core/Radio'; import RadioGroup from '@material-ui/core/RadioGroup'; import React from 'react'; -import SelectMaterial from '@material-ui/core/Select'; import Switch from '@material-ui/core/Switch'; +import TextField from '@material-ui/core/TextField'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; @@ -25,42 +24,55 @@ const xor = (item, array) => { }; const renderSelect = ({ + InputLabelProps, allowedValues, disabled, + error, + errorMessage, fieldType, + fullWidth, + helperText, id, inputProps, label, labelProps, + margin, name, native, onChange, placeholder, required, + showInlineError, transform, value, + variant, ...props }) => { const Item = native ? 'option' : MenuItem; - const filteredProps = wrapField._filterDOMProps(filterDOMProps(props)); + const hasPlaceholder = !!placeholder; - return wrapField( - {...props, component: undefined, disabled, required}, - label && ( - - {label} - - ), - disabled || onChange(event.target.value)} + select + SelectProps={{ + displayEmpty: hasPlaceholder, + inputProps: {name, id, ...inputProps}, + multiple: fieldType === Array || undefined, + native, + ...filterDOMProps(props) + }} value={native && !value ? '' : value} - {...filteredProps} + variant={variant} > - {!!placeholder && ( + {hasPlaceholder && ( {placeholder} @@ -70,7 +82,7 @@ const renderSelect = ({ {transform ? transform(value) : value} ))} - + ); }; @@ -152,7 +164,7 @@ const Select = ({checkboxes, ...props}) => (checkboxes ? renderCheckboxes(props) Select.defaultProps = { appearance: 'checkbox', fullWidth: true, - margin: 'normal' + margin: 'dense' }; export default connectField(Select); diff --git a/packages/uniforms-material/src/TextField.js b/packages/uniforms-material/src/TextField.js index a191eb83c..c292ba879 100644 --- a/packages/uniforms-material/src/TextField.js +++ b/packages/uniforms-material/src/TextField.js @@ -34,7 +34,7 @@ const Text = ({ ); Text.defaultProps = { fullWidth: true, - margin: 'normal', + margin: 'dense', type: 'text' };