[WIP] Support material-ui v1

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": {

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';

packages/uniforms-material/src/BoolField.js

@@ -1,45 +1,68 @@
-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 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,
-    disabled,
-    id,
-    inputRef,
-    label,
-    name,
-    onChange,
-    value,
-    ...props
-}) =>
-    appearance === 'toggle' ? (
-        <Toggle
-            disabled={disabled}
-            id={id}
-            label={label}
-            name={name}
-            onToggle={(event, value) => disabled || onChange(value)}
-            ref={inputRef}
-            toggled={!!value}
-            {...filterDOMProps(props)}
-        />
-    ) : (
-        <Checkbox
-            checked={!!value}
-            disabled={disabled}
-            id={id}
-            label={label}
-            name={name}
-            onCheck={(event, value) => disabled || onChange(value)}
-            ref={inputRef}
-            {...filterDOMProps(props)}
+import wrapField from './wrapField';
+
+const Bool = props => wrapField(props, (
+    <FormControl
+        disabled={props.disabled}
+        error={!!props.error}
+        fullWidth={props.fullWidth}
+        margin={props.margin}
+        required={props.required}
+    >
+        <FormControlLabel
+            checked={!!props.value}
+            control={props.appearance === 'toggle' ? (
+                <Switch
+                    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)}
+                />
+            ) : (
+                <Checkbox
+                    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)}
+                />
+            )}
+            onChange={(event, value) => props.disabled || props.onChange(value)}
+            disabled={props.disabled}
+            label={props.label}
         />
-    )
-;
+        {props.error && props.showInlineError && <FormHelperText>{props.errorMessage}</FormHelperText>}
+    </FormControl>
+));
+
+Bool.defaultProps = {
+    appearance: 'checkbox',
+    fullWidth: true,
+    margin: 'normal'
+};
 
-Bool.defaultProps = {appearance: 'checkbox'};
+Bool.propTypes = {
+    appearance: PropTypes.oneOf(['toggle', 'checkbox'])
+};
 
 export default connectField(Bool);

packages/uniforms-material/src/DateField.js

@@ -1,121 +1,43 @@
-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 filterDOMProps from 'uniforms/filterDOMProps';
-import {Component}    from 'react';
-
-class Date_ extends Component {
-    static displayName = 'Date';
-
-    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);
+import connectField     from 'uniforms/connectField';
+import filterDOMProps   from 'uniforms/filterDOMProps';
+import React            from 'react';
+import TextField        from 'material-ui/TextField';
+
+import wrapField from './wrapField';
+
+const dateFormat = value => value && value.toISOString().slice(0, -8);
+const dateParse = (timestamp, onChange) => {
+    const date = new Date(timestamp);
+    if (date.getFullYear() < 10000) {
+        onChange(date);
     }
-
-    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 (
-            <div>
-                <TextField
-                    disabled={disabled}
-                    errorText={error && showInlineError ? errorMessage : undefined}
-                    floatingLabelText={label}
-                    hintText={placeholder}
-                    id={id}
-                    name={name}
-                    onFocus={this.onFocus}
-                    ref={inputRef}
-                    value={value ? value.toLocaleString() : ''}
-                    {...filterDOMProps(props)}
-                />
-
-                <DatePicker
-                    DateTimeFormat={DateTimeFormat}
-                    autoOk={autoOk}
-                    cancelLabel={cancelLabel}
-                    disableYearSelection={disableYearSelection}
-                    firstDayOfWeek={firstDayOfWeek}
-                    formatDate={formatDate}
-                    id={`${id}-date`}
-                    locale={locale}
-                    maxDate={max}
-                    minDate={min}
-                    okLabel={okLabel}
-                    onChange={this.onChangeDate}
-                    ref="datepicker"
-                    textFieldStyle={{display: 'none'}}
-                    value={value}
-                />
-
-                <TimePicker
-                    autoOk={autoOk}
-                    cancelLabel={cancelLabel}
-                    format={timeFormat}
-                    id={`${id}-time`}
-                    okLabel={okLabel}
-                    onChange={this.onChangeTime}
-                    pedantic={pedantic}
-                    ref="timepicker"
-                    textFieldStyle={{display: 'none'}}
-                    value={value}
-                />
-            </div>
-        );
-    }
-}
-
-export default connectField(Date_, {ensureValue: false, includeInChain: false});
+};
+
+export const Date_ = props => wrapField(props, (
+    <TextField
+        autoFocus={props.autoFocus}
+        disabled={props.disabled}
+        error={!!props.error}
+        FormHelperTextProps={props.FormHelperTextProps}
+        fullWidth={props.fullWidth}
+        helperText={props.error && props.showInlineError ? props.errorMessage : props.helperText}
+        helperTextClassName={props.helperTextClassName}
+        InputProps={props.InputProps}
+        inputProps={{...props.inputProps, id: props.id}}
+        inputRef={props.inputRef}
+        label={props.label}
+        margin={props.margin}
+        onChange={event => dateParse(event.target.valueAsNumber, props.onChange)}
+        placeholder={props.placeholder}
+        type="datetime-local"
+        value={dateFormat(props.value)}
+        {...filterDOMProps(props)}
+    />
+));
+
+Date_.defaultProps = {
+    fullWidth: true,
+    margin: 'normal'
+};
+
+export default connectField(Date_);

packages/uniforms-material/src/ErrorField.js

@@ -1,19 +1,18 @@
-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}    from 'material-ui/Form';
+import {FormHelperText} from 'material-ui/Form';
 
-const Error = ({children, error, errorMessage, ...props}) =>
-    !error ? nothing : (
-        <ListItem
-            disabled
-            leftIcon={<ErrorOutline />}
-            primaryText={children || errorMessage}
-            {...filterDOMProps(props)}
-        />
-    )
+import wrapField from './wrapField';
+
+const Error = props =>
+    !props.error ? nothing : wrapField(props, (
+        <FormControl error={!!props.error}>
+            <FormHelperText {...filterDOMProps(props)}>{props.children || props.errorMessage}</FormHelperText>
+        </FormControl>
+    ))
 ;
 
 export default connectField(Error, {initialValue: false});

packages/uniforms-material/src/ErrorsField.js

@@ -1,24 +1,30 @@
-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 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 : (
-        <List {...filterDOMProps(props)}>
-            {!!children && (
-                <ListItem primaryText={children} disabled />
+import wrapField from './wrapField';
+
+const ErrorsField = (props, {uniforms: {error, schema}}) =>
+    (!error && !props.children) ? nothing : wrapField(props, (
+        <FormControl error={!!error} fullWidth={props.fullWidth} margin={props.margin} {...filterDOMProps(props)}>
+            {!!props.children && (
+                <FormHelperText>{props.children}</FormHelperText>
             )}
             {schema.getErrorMessages(error).map((message, index) =>
-                <ListItem key={index} disabled primaryText={message} leftIcon={<ErrorOutline />} />
+                <FormHelperText key={index}>{message}</FormHelperText>
             )}
-        </List>
-    )
+        </FormControl>
+    ))
 ;
 
+ErrorsField.defaultProps = {
+    fullWidth: true,
+    margin: 'normal'
+};
+
 ErrorsField.contextTypes = BaseField.contextTypes;
 
 export default ErrorsField;

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';