From 874fbe8e6575cbd8fddd8c4fe847d808c85231d1 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Sun, 13 Jan 2019 23:39:37 +0100 Subject: [PATCH 1/3] Multiple improvements for uniforms-material package --- API.md | 12 +---- .../__tests__/SelectField.js | 10 ++-- packages/uniforms-material/src/BoolField.js | 19 +++++-- packages/uniforms-material/src/DateField.js | 53 +++++++++++-------- packages/uniforms-material/src/ErrorField.js | 2 +- packages/uniforms-material/src/ErrorsField.js | 2 +- .../uniforms-material/src/ListAddField.js | 2 +- .../uniforms-material/src/LongTextField.js | 2 +- packages/uniforms-material/src/NestField.js | 2 +- packages/uniforms-material/src/NumField.js | 2 +- packages/uniforms-material/src/RadioField.js | 6 ++- packages/uniforms-material/src/SelectField.js | 53 ++++++++++++------- packages/uniforms-material/src/TextField.js | 2 +- 13 files changed, 96 insertions(+), 71 deletions(-) diff --git a/API.md b/API.md index 57ac15a72..723169625 100644 --- a/API.md +++ b/API.md @@ -326,11 +326,6 @@ import DateField from 'uniforms-unstyled/DateField'; // Choose your theme packag // use this prop instead. inputRef={ref => {}} - // Props for the InputLabel - // Available in: - // material-ui - labelProps={{ shrink: true, disableAnimation: true }} - // Maximum value. // Date object. max={new Date(2100, 1, 1)} @@ -864,11 +859,6 @@ import SelectField from 'uniforms-unstyled/SelectField'; // Choose your theme pa // use this prop instead. inputRef={ref => {}} - // Props for the InputLabel - // Available in: - // material-ui - labelProps={{ shrink: true, disableAnimation: true }} - // Field inline error. // *Some description would be great, huh?* // Available in: @@ -881,7 +871,7 @@ import SelectField from 'uniforms-unstyled/SelectField'; // Choose your theme pa // Label transform. // Allows to transform the each value into a human-readable label transform={value => label} - + // Options.    // Set of values that will be shown in the select. // It is optional and using `options` will override `transform` and `allowedValues`. 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 b68ef6a3b..1a7c23f57 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -10,11 +10,24 @@ import filterDOMProps from 'uniforms/filterDOMProps'; import wrapField from './wrapField'; -const Bool = ({appearance, disabled, inputRef, label, legend, name, onChange, transform, value, ...props}) => { +const Bool = ({ + appearance, + disabled, + fullWidth, + helperText, + inputRef, + label, + legend, + name, + onChange, + transform, + value, + ...props +}) => { const SelectionControl = appearance === 'checkbox' ? Checkbox : Switch; return wrapField( - {...props, component: 'fieldset', disabled}, + {...props, component: 'fieldset', disabled, fullWidth, helperText}, legend && ( {legend} @@ -41,7 +54,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 94404906a..d4d23f367 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 TextField from '@material-ui/core/TextField'; import React from 'react'; 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,28 +14,38 @@ const dateParse = (timestamp, onChange) => { } }; -const Date = ({inputRef, label, labelProps, name, onChange, placeholder, value, ...props}) => - wrapField( - {...props, component: undefined}, - label && ( - - {label} - - ), - dateParse(event.target.valueAsNumber, onChange)} - placeholder={placeholder} - ref={inputRef} - type="datetime-local" - value={dateFormat(value)} - {...filterDOMProps(props)} - /> - ); +const Date = ({ + disabled, + error, + errorMessage, + helperText, + inputRef, + label, + 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 f41ed0910..94dbad3f9 100644 --- a/packages/uniforms-material/src/RadioField.js +++ b/packages/uniforms-material/src/RadioField.js @@ -12,6 +12,8 @@ const Radio = ({ allowedValues, checkboxes, // eslint-disable-line no-unused-vars disabled, + fullWidth, + helperText, id, inputRef, label, @@ -22,7 +24,7 @@ const Radio = ({ ...props }) => wrapField( - {...props, disabled, component: 'fieldset'}, + {...props, disabled, fullWidth, helperText, component: 'fieldset'}, label && ( {label} @@ -48,7 +50,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 3612052b7..016187d5c 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -3,12 +3,11 @@ 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 TextField from '@material-ui/core/TextField'; import Switch from '@material-ui/core/Switch'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; @@ -27,39 +26,52 @@ const xor = (item, array) => { const renderSelect = ({ allowedValues, disabled, + error, + errorMessage, fieldType, + fullWidth, + helperText, id, + InputLabelProps, inputProps, label, - labelProps, name, native, onChange, placeholder, + margin, required, + showInlineError, transform, value, + variant, ...props }) => { const Item = native ? 'option' : MenuItem; + 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} - {...filterDOMProps(props)} + variant={variant} > - {!!placeholder && ( + {hasPlaceholder && ( {placeholder} @@ -69,7 +81,7 @@ const renderSelect = ({ {transform ? transform(value) : value} ))} - + ); }; @@ -80,6 +92,7 @@ const renderCheckboxes = ({ error, errorMessage, fieldType, + fullWidth, id, inputRef, label, @@ -140,7 +153,7 @@ const renderCheckboxes = ({ } return wrapField( - {...props, component: 'fieldset', disabled, error, errorMessage, showInlineError}, + {...props, component: 'fieldset', disabled, fullWidth, error, errorMessage, showInlineError}, (legend || label) && {legend || label}, children ); @@ -150,7 +163,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' }; From b9b3121ae5047cf825fba32f11488f97147af6ef Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Wed, 16 Jan 2019 21:56:51 +0100 Subject: [PATCH 2/3] Import ordering and backward compatibility for labelProps --- API.md | 12 +++++++++++- packages/uniforms-material/src/DateField.js | 5 ++++- packages/uniforms-material/src/SelectField.js | 9 +++++---- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/API.md b/API.md index 723169625..57ac15a72 100644 --- a/API.md +++ b/API.md @@ -326,6 +326,11 @@ import DateField from 'uniforms-unstyled/DateField'; // Choose your theme packag // use this prop instead. inputRef={ref => {}} + // Props for the InputLabel + // Available in: + // material-ui + labelProps={{ shrink: true, disableAnimation: true }} + // Maximum value. // Date object. max={new Date(2100, 1, 1)} @@ -859,6 +864,11 @@ import SelectField from 'uniforms-unstyled/SelectField'; // Choose your theme pa // use this prop instead. inputRef={ref => {}} + // Props for the InputLabel + // Available in: + // material-ui + labelProps={{ shrink: true, disableAnimation: true }} + // Field inline error. // *Some description would be great, huh?* // Available in: @@ -871,7 +881,7 @@ import SelectField from 'uniforms-unstyled/SelectField'; // Choose your theme pa // Label transform. // Allows to transform the each value into a human-readable label transform={value => label} - + // Options.    // Set of values that will be shown in the select. // It is optional and using `options` will override `transform` and `allowedValues`. diff --git a/packages/uniforms-material/src/DateField.js b/packages/uniforms-material/src/DateField.js index d4d23f367..2caf8ccaf 100644 --- a/packages/uniforms-material/src/DateField.js +++ b/packages/uniforms-material/src/DateField.js @@ -1,5 +1,5 @@ -import TextField from '@material-ui/core/TextField'; import React from 'react'; +import TextField from '@material-ui/core/TextField'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; @@ -15,12 +15,14 @@ const dateParse = (timestamp, onChange) => { }; const Date = ({ + InputLabelProps, disabled, error, errorMessage, helperText, inputRef, label, + labelProps, name, onChange, placeholder, @@ -33,6 +35,7 @@ const Date = ({ error={!!error} helperText={(error && showInlineError && errorMessage) || helperText} label={label} + InputLabelProps={{...labelProps, ...InputLabelProps}} name={name} onChange={event => disabled || dateParse(event.target.valueAsNumber, onChange)} placeholder={placeholder} diff --git a/packages/uniforms-material/src/SelectField.js b/packages/uniforms-material/src/SelectField.js index 67c856d9d..1a061bced 100644 --- a/packages/uniforms-material/src/SelectField.js +++ b/packages/uniforms-material/src/SelectField.js @@ -7,8 +7,8 @@ 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 TextField from '@material-ui/core/TextField'; import Switch from '@material-ui/core/Switch'; +import TextField from '@material-ui/core/TextField'; import connectField from 'uniforms/connectField'; import filterDOMProps from 'uniforms/filterDOMProps'; @@ -24,6 +24,7 @@ const xor = (item, array) => { }; const renderSelect = ({ + InputLabelProps, allowedValues, disabled, error, @@ -32,14 +33,14 @@ const renderSelect = ({ fullWidth, helperText, id, - InputLabelProps, inputProps, label, + labelProps, + margin, name, native, onChange, placeholder, - margin, required, showInlineError, transform, @@ -56,7 +57,7 @@ const renderSelect = ({ error={!!error} fullWidth={fullWidth} helperText={(error && showInlineError && errorMessage) || helperText} - InputLabelProps={{shrink: label && (hasPlaceholder || value !== undefined), ...InputLabelProps}} + InputLabelProps={{shrink: label && (hasPlaceholder || value !== undefined), ...labelProps, ...InputLabelProps}} label={label} margin={margin} onChange={event => disabled || onChange(event.target.value)} From 6ba22667008d5157d8dfebbe9a39766fdc31f036 Mon Sep 17 00:00:00 2001 From: Jan Owsiany Date: Wed, 16 Jan 2019 22:05:47 +0100 Subject: [PATCH 3/3] Remove unnecessary changes --- packages/uniforms-material/src/BoolField.js | 17 ++--------------- 1 file changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/uniforms-material/src/BoolField.js b/packages/uniforms-material/src/BoolField.js index 7b7dec944..ff1d15b43 100644 --- a/packages/uniforms-material/src/BoolField.js +++ b/packages/uniforms-material/src/BoolField.js @@ -10,25 +10,12 @@ import filterDOMProps from 'uniforms/filterDOMProps'; import wrapField from './wrapField'; -const Bool = ({ - appearance, - disabled, - fullWidth, - helperText, - inputRef, - label, - legend, - name, - onChange, - transform, - value, - ...props -}) => { +const Bool = ({appearance, disabled, inputRef, label, legend, name, onChange, transform, value, ...props}) => { const SelectionControl = appearance === 'checkbox' ? Checkbox : Switch; const filteredProps = wrapField._filterDOMProps(filterDOMProps(props)); return wrapField( - {...props, component: 'fieldset', disabled, fullWidth, helperText}, + {...props, component: 'fieldset', disabled}, legend && ( {legend}