Multiple improvements for uniforms-material package

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('<SelectField> - 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('<SelectField> - 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('<SelectField> - 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('<SelectField> - 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('<SelectField checkboxes> - renders a set of Radio buttons', () => {

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 = {

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 && (
-      <InputLabel htmlFor={name} {...labelProps}>
-        {label}
-      </InputLabel>
-    ),
-    <Input
-      name={name}
-      onChange={event => 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
+}) => (
+  <TextField
+    disabled={!!disabled}
+    error={!!error}
+    helperText={(error && showInlineError && errorMessage) || helperText}
+    label={label}
+    InputLabelProps={{...labelProps, ...InputLabelProps}}
+    name={name}
+    onChange={event => 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);

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});

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;

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});

packages/uniforms-material/src/LongTextField.js

@@ -33,7 +33,7 @@ const LongText = ({
 );
 LongText.defaultProps = {
   fullWidth: true,
-  margin: 'normal',
+  margin: 'dense',
   type: 'text'
 };
 

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});

packages/uniforms-material/src/NumField.js

@@ -40,7 +40,7 @@ const Num = ({
 );
 Num.defaultProps = {
   fullWidth: true,
-  margin: 'normal'
+  margin: 'dense'
 };
 
 export default connectField(Num);

packages/uniforms-material/src/RadioField.js

@@ -51,7 +51,7 @@ const Radio = ({
 
 Radio.defaultProps = {
   fullWidth: true,
-  margin: 'normal'
+  margin: 'dense'
 };
 
 export default connectField(Radio);

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 && (
-      <InputLabel htmlFor={name} shrink={!!placeholder || !!value} {...labelProps}>
-        {label}
-      </InputLabel>
-    ),
-    <SelectMaterial
-      displayEmpty={!!placeholder}
-      inputProps={{name, id, ...inputProps}}
-      multiple={fieldType === Array || undefined}
-      native={native}
+  return (
+    <TextField
+      disabled={!!disabled}
+      error={!!error}
+      fullWidth={fullWidth}
+      helperText={(error && showInlineError && errorMessage) || helperText}
+      InputLabelProps={{shrink: label && (hasPlaceholder || value !== undefined), ...labelProps, ...InputLabelProps}}
+      label={label}
+      margin={margin}
       onChange={event => 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 && (
         <Item value="" disabled={!!required}>
           {placeholder}
         </Item>
@@ -70,7 +82,7 @@ const renderSelect = ({
           {transform ? transform(value) : value}
         </Item>
       ))}
-    </SelectMaterial>
+    </TextField>
   );
 };
 
@@ -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);

packages/uniforms-material/src/TextField.js

@@ -34,7 +34,7 @@ const Text = ({
 );
 Text.defaultProps = {
   fullWidth: true,
-  margin: 'normal',
+  margin: 'dense',
   type: 'text'
 };