Updated material-ui (#160).

vazco · Jan 5, 2017 · cd6876e · cd6876e
1 parent 3e68302
commit cd6876e
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 69 deletions.
diff --git a/API.md b/API.md
@@ -312,6 +312,11 @@ import {DateField} from 'uniforms-unstyled'; // Choose your theme package.
     //   bootstrap3
     //   bootstrap4
     wrapClassName="a b c"
+
+    // Display time picker in ampm (12hr) format or 24hr format.
+    // Available in:
+    //   material-ui
+    timeFormat="ampm"
 />
 ```
 

diff --git a/README.md b/README.md
@@ -99,6 +99,7 @@ $ meteor npm install graphql
 # Components (pick one)
 $ meteor npm install --save react react-dom uniforms uniforms-bootstrap3
 $ meteor npm install --save react react-dom uniforms uniforms-bootstrap4
+$ meteor npm install --save react react-dom uniforms uniforms-material
 $ meteor npm install --save react react-dom uniforms uniforms-semantic
 $ meteor npm install --save react react-dom uniforms uniforms-unstyled
 ```
@@ -109,6 +110,7 @@ $ meteor npm install --save react react-dom uniforms uniforms-unstyled
 # Components (pick one)
 $ npm install --save react react-dom uniforms uniforms-bootstrap3
 $ npm install --save react react-dom uniforms uniforms-bootstrap4
+$ npm install --save react react-dom uniforms uniforms-material
 $ npm install --save react react-dom uniforms uniforms-semantic
 $ npm install --save react react-dom uniforms uniforms-unstyled
 ```

diff --git a/packages/uniforms-material/src/components/fields/DateField.js b/packages/uniforms-material/src/components/fields/DateField.js
@@ -5,55 +5,69 @@ import TimePicker         from 'material-ui/TimePicker';
 import {connectField}     from 'uniforms';
 import {ListItem}         from 'material-ui/List';
 
+const dateFormat = value => value && value.toISOString().slice(0, -8);
+
 class Date_ extends Component {
     render () {
         const {
             props: {
                 id,
                 max,
                 min,
-                onChange,
                 value,
+                style,
+                onChange,
+                timeFormat,
                 ...props
             }
         } = this;
 
         return (
             <ListItem
                 disabled
-                primaryText={<div>
-                    <TextField
-                        onChange={onChange}
-                        onFocus={() => this.refs.datepicker.openDialog()}
-                        value={value}
-                        type="datetime"
-                        {...props}
-                    />
-                    <DatePicker
-                        value={value}
-                        maxDate={max}
-                        minDate={min}
-                        onChange={(event, date) => {
-                            if (value) {
-                                date.setHours(value.getHours());
-                                date.setMinutes(value.getMinutes());
-                            }
-                            onChange(date);
-                            // TODO: Risky race?
-                            this.refs.timepicker.openDialog();
-                        }}
-                        ref="datepicker"
-                        id={`${id}-date`}
-                        textFieldStyle={{display: 'none'}}
-                    />
-                    <TimePicker
-                        value={value}
-                        onChange={(event, date) => onChange(date)}
-                        ref="timepicker"
-                        id={`${id}-time`}
-                        textFieldStyle={{display: 'none'}}
-                    />
-                </div>}
+                primaryText={(
+                    <div>
+                        <TextField
+                            onChange={() => {}}
+                            onFocus={() => this.refs.datepicker.openDialog()}
+                            value={dateFormat(value)}
+                            type="datetime-local"
+                            style={{marginTop: -14, ...style}}
+                            {...props}
+                        />
+                        <DatePicker
+                            maxDate={max}
+                            minDate={min}
+                            value={value}
+                            onChange={(event, date) => {
+                                if (value) {
+                                    date.setHours(value.getHours());
+                                    date.setMinutes(value.getMinutes());
+                                }
+                                onChange(date);
+                                this.refs.timepicker.openDialog();
+                            }}
+                            ref="datepicker"
+                            id={`${id}-date`}
+                            textFieldStyle={{display: 'none'}}
+                        />
+                        <TimePicker
+                            format={timeFormat}
+                            value={value}
+                            onChange={(event, date) => {
+                                if (value) {
+                                    date.setFullYear(value.getFullYear());
+                                    date.setMonth(value.getMonth());
+                                    date.setDate(value.getDate());
+                                }
+                                onChange(date);
+                            }}
+                            ref="timepicker"
+                            id={`${id}-time`}
+                            textFieldStyle={{display: 'none'}}
+                        />
+                    </div>
+                )}
             />
         );
     }

diff --git a/packages/uniforms-material/src/components/fields/ErrorField.js b/packages/uniforms-material/src/components/fields/ErrorField.js
@@ -1,6 +1,8 @@
 import React            from 'react';
 import {connectField}   from 'uniforms';
 import {filterDOMProps} from 'uniforms';
+import {ListItem}       from 'material-ui/List';
+import ErrorOutline     from 'material-ui/svg-icons/alert/error-outline';
 import {nothing}        from 'uniforms';
 
 const Error = ({
@@ -9,9 +11,12 @@ const Error = ({
     ...props
 }) =>
     !errorMessage ? nothing : (
-        <section {...filterDOMProps(props)}>
-            {children || errorMessage}
-        </section>
+        <ListItem
+            disabled
+            leftIcon={<ErrorOutline />}
+            primaryText={children || errorMessage}
+            {...filterDOMProps(props)}
+        />
     )
 ;
 

diff --git a/packages/uniforms-material/src/components/fields/ErrorsField.js b/packages/uniforms-material/src/components/fields/ErrorsField.js
@@ -11,7 +11,6 @@ const ErrorsField = ({children, ...props}, {uniforms: {error, schema}}) =>
             {!! children && (
                 <ListItem primaryText={children} disabled />
             )}
-            {/* TODO: Make leftIcon optional */}
             {schema.getErrorMessages(error).map((message, index) =>
                 <ListItem key={index} disabled primaryText={message} leftIcon={<ErrorOutline />} />
             )}

diff --git a/packages/uniforms-material/src/components/fields/ListAddField.js b/packages/uniforms-material/src/components/fields/ListAddField.js
@@ -12,11 +12,10 @@ const ListAdd = ({
 }) => {
     const limitNotReached = !disabled && !(parent.maxCount <= value.length);
 
-    // TODO: Add support for tooltip
     return (
         <IconButton
-            {...filterDOMProps(props)}
             onTouchTap={() => limitNotReached && parent.onChange(parent.value.concat([value]))}
+            {...filterDOMProps(props)}
         >
             <Add />
         </IconButton>

diff --git a/packages/uniforms-material/src/components/fields/ListDelField.js b/packages/uniforms-material/src/components/fields/ListDelField.js
@@ -13,14 +13,13 @@ const ListDel = ({
     const fieldIndex      = +name.slice(1 + name.lastIndexOf('.'));
     const limitNotReached = !disabled && !(parent.minCount >= parent.value.length);
 
-    // TODO: Add support for tooltip
     return (
         <IconButton
-            {...filterDOMProps(props)}
             onTouchTap={() => limitNotReached && parent.onChange([]
                 .concat(parent.value.slice(0,  fieldIndex))
                 .concat(parent.value.slice(1 + fieldIndex))
             )}
+            {...filterDOMProps(props)}
         >
             <Remove />
         </IconButton>

diff --git a/packages/uniforms-material/src/components/fields/ListItemField.js b/packages/uniforms-material/src/components/fields/ListItemField.js
@@ -7,18 +7,19 @@ import {ListItem as ListItemMaterial} from 'material-ui/List';
 import AutoField    from './AutoField';
 import ListDelField from './ListDelField';
 
-const ListItem = props =>
+const ListItem = ({style, ...props}) =>
     <ListItemMaterial
         disabled
         primaryText={props.children ? (
             Children.map(props.children, child =>
                 React.cloneElement(child, {
                     name: joinName(props.name, child.props.name),
-                    label: null
+                    label: null,
+                    style: {marginTop: -14, ...style}
                 })
             )
         ) : (
-            <AutoField {...props} />
+            <AutoField style={{marginTop: -14, ...style}} {...props} />
         )}
         rightIconButton={<ListDelField name={props.name} />}
     />

diff --git a/packages/uniforms-material/src/components/fields/RadioField.js b/packages/uniforms-material/src/components/fields/RadioField.js
@@ -5,6 +5,9 @@ import {filterDOMProps} from 'uniforms';
 import {ListItem}       from 'material-ui/List';
 import {List}           from 'material-ui/List';
 
+/*
+ * TODO: Investigate why the checkboxes needed to be unpacked
+ */
 const Radio = ({
     allowedValues,
     disabled,
@@ -14,6 +17,7 @@ const Radio = ({
     onChange,
     transform,
     value,
+    checkboxes, // eslint-disable-line no-unused-vars
     ...props
 }) =>
     <List {...filterDOMProps(props)}>

diff --git a/packages/uniforms-material/src/components/fields/SelectField.js b/packages/uniforms-material/src/components/fields/SelectField.js
@@ -3,7 +3,6 @@ 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 {connectField}   from 'uniforms';
 import {filterDOMProps} from 'uniforms';
 import {ListItem}       from 'material-ui/List';
@@ -32,9 +31,10 @@ const renderCheckboxes = ({
 }) =>
     <List {...filterDOMProps(props)}>
         {!!label && (
-            <Subheader>
-                {label}
-            </Subheader>
+            <ListItem
+                disabled
+                primaryText={label}
+            />
         )}
 
         {allowedValues.map(item =>
@@ -72,32 +72,36 @@ const renderSelect = ({
     name,
     onChange,
     placeholder,
+    style,
     transform,
     value,
     ...props
 }) =>
     <ListItem
         disabled
-        primaryText={<SelectField
-            disabled={disabled}
-            errorText={errorMessage}
-            floatingLabelText={label}
-            hintText={placeholder}
-            id={id}
-            name={name}
-            onChange={(event, index, value) => onChange(value)}
-            ref={inputRef}
-            value={value}
-            {...filterDOMProps(props)}
-        >
-            {allowedValues.map(value =>
-                <MenuItem
-                    key={value}
-                    value={value}
-                    primaryText={transform ? transform(value) : value}
-                />
-            )}
-        </SelectField>}
+        primaryText={(
+            <SelectField
+                disabled={disabled}
+                errorText={errorMessage}
+                floatingLabelText={label}
+                hintText={placeholder}
+                id={id}
+                name={name}
+                onChange={(event, index, value) => onChange(value)}
+                ref={inputRef}
+                style={{marginTop: -14, ...style}}
+                value={value}
+                {...filterDOMProps(props)}
+            >
+                {allowedValues.map(value =>
+                    <MenuItem
+                        key={value}
+                        value={value}
+                        primaryText={transform ? transform(value) : value}
+                    />
+                )}
+            </SelectField>
+        )}
     />
 ;