Use Select instead of TextField, fix some bugs

Author: danieloprado

.gitignore

@@ -7,6 +7,7 @@
 **/*.js.map
 **/*.d.ts
 !declarations/*.d.ts
+!docs/project/src/*.d.ts
 !docs/**/*.js
 !docs/**/*.js.map
 

API.md

@@ -13,6 +13,7 @@ API
 * [Autocomplete](#autocomplete)
 * [Hidden](#hidden)
 * [Custom Message](#custom-message)
+* [FormValidation](#form-validation)
 
 ### Base (Common props)
 
@@ -73,7 +74,7 @@ All [material-ui-pickers](https://github.com/dmtrKovalenko/material-ui-pickers)
 | maxDate       | false    | Date           |                           |
 | disablePast   | false    | boolean        |                           |
 | disableFuture | false    | boolean        |                           |
-| format        | false    | string         | date fns string format       |
+| format        | false    | string         | date fns string format    |
 | locale        | false    | string         | use dateLocale as default |
 | onChange      | true     | Function(date) |                           |
 
@@ -116,3 +117,15 @@ All [material-ui](https://material-ui.com/api/select/) props and:
 |----------|----------|--------|--------------------|
 | rules    | true     | string | separated by comma |
 | children | true     | string | message            |
+
+
+#### Form Validation
+
+| Props    | Required | Type     | Description               |
+|----------|----------|----------|---------------------------|
+| onSubmit | true     | function | params = isValid: boolean |
+
+| Methods by Ref | Params                                | Return  | Description                  |
+|----------------|---------------------------------------|---------|------------------------------|
+| isValid        | formSubmitted: boolean = default true | boolean | Check is all field are valid |
+| reset          |                                       | void    | Reset the validation state   |

README.md

@@ -45,11 +45,11 @@ yarn add @react-form-fields/material-ui
 
 ```jsx
   // import
-  import ValidationContext from '@react-form-fields/material-ui/components/ValidationContext';
+  import FormValidation from '@react-form-fields/material-ui/components/FormValidation';
   import FieldText from '@react-form-fields/material-ui/components/Text';
 
   // render()
-  <ValidationContext ref={ref=> this.validation = ref}>
+  <FormValidation onSubmit={this.onSubmit}>
     <FieldText
       ref={ref => this.field = ref}
       label='Email'
@@ -66,12 +66,17 @@ yarn add @react-form-fields/material-ui
       validation='required'
       onChange={v => this.setState({ password: v }))}
     />
-  </ValidationContext>
+  </FormValidation>
 
   // onSubmit()
-  if(this.validation.isValid()) { 
-    console.log('all fields are valid');
+  onSubmit = (isValid: boolean) => {
+    if(isValid) { 
+      console.log('all fields are valid');
+    }
+    // or by React.createRef
+    const isValid = this.formValidation.current.isValid();
   }
+  
 ```
 
 ### Config
@@ -80,8 +85,8 @@ Global Setup example:
 
 ```js
 import { setConfig } from '@react-form-fields/material-ui/config';
-import commonMasks from '@react-form-fields/material-ui/mask/common/pt-br';
-import validationMessage from '@react-form-fields/material-ui/validator/custom-languages/pt-br';
+import commonMasks from '@react-form-fields/core/mask/common/pt-br';
+import validationMessage from '@react-form-fields/core/validator/custom-languages/pt-br';
 
 setConfig({
   masks: commonMasks,

components/Autocomplete/index.tsx

@@ -17,7 +17,7 @@ import * as Autosuggest from 'react-autosuggest';
 
 import { getConfig } from '../../config';
 import { WithStyles } from '../../decorators/withStyles';
-import { ITextFieldProps } from '../../interfaces/props';
+import { IBaseFieldProps, TextFieldPropsResolver } from '../../interfaces/props';
 import Input from './Input';
 import SuggestionsContainer from './SuggestionsContainer';
 
@@ -27,7 +27,7 @@ interface IState extends IStateFieldBase {
   suggestions: IProps['options'][0][];
 }
 
-interface IProps extends ITextFieldProps {
+interface IProps extends IBaseFieldProps, TextFieldPropsResolver {
   value: any;
   onChange: (value: any) => void;
   options: { value: any, label: string }[];

components/Color/index.tsx

@@ -3,16 +3,14 @@ import FieldCoreBase, { IStateFieldBase } from '@react-form-fields/core/componen
 import * as React from 'react';
 
 import { getConfig } from '../../config';
-import { ITextFieldProps } from '../../interfaces/props';
+import { IBaseFieldProps, TextFieldPropsResolver } from '../../interfaces/props';
 import PickerDialog from './PickerDialog';
 
 interface IState extends IStateFieldBase {
   showPicker: boolean;
 }
 
-interface IProps extends ITextFieldProps {
-  value: string;
-  onChange: (value: string) => void;
+interface IProps extends IBaseFieldProps, TextFieldPropsResolver {
 }
 
 export default class FieldColor extends FieldCoreBase<IProps, IState> {

components/CustomMessageComponent.tsx renamed to components/CustomMessage.tsx

@@ -35,7 +35,7 @@ export default class FieldDate extends FieldCoreBase<IProps> {
   }
 
   render() {
-    const { value, label, format, helperText, ...extraProps } = this.props;
+    const { value, label, format, helperText, validation, validationContext, ...extraProps } = this.props;
 
     return (
       <React.Fragment>

components/Date.tsx

@@ -1,18 +1,22 @@
-import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
-import InputAdornment from '@material-ui/core/InputAdornment/InputAdornment';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import TextField from '@material-ui/core/TextField/TextField';
+import Select from '@material-ui/core/Select';
 import FieldCoreBase from '@react-form-fields/core/components/FieldCoreBase';
 import * as React from 'react';
 
 import { getConfig } from '../config';
-import { ITextFieldProps } from '../interfaces/props';
+import { IBaseFieldProps, SelectPropsResolver } from '../interfaces/props';
 
-interface IProps extends ITextFieldProps {
+interface IProps extends IBaseFieldProps, SelectPropsResolver {
   options?: { value: string | number, label: string }[];
-  emptyOption?: boolean;
   loading?: boolean;
+  helperText?: string;
   onChange: (value: any) => void;
+  emptyOption?: string;
 }
 
 export default class FieldSelect extends FieldCoreBase<IProps> {
@@ -29,46 +33,46 @@ export default class FieldSelect extends FieldCoreBase<IProps> {
   }
 
   render() {
-    const { value, options, children, loading, emptyOption } = this.props;
+    const { value, options, children, label, loading, helperText, emptyOption, ...extra } = this.props;
 
     return (
       <React.Fragment>
         {super.render()}
 
-        <TextField
-          {...{
-            fullWidth: true,
-            margin: 'normal',
-            ...this.props,
-            value: !value ? '' : value,
-            required: this.isRequired,
-            select: true,
-            error: !!this.errorMessage,
-            helperText: this.errorMessage,
-            onChange: this.onChange,
-            onBlur: this.onBlur,
-            submitted: null,
-            touched: null,
-            loading: null
-          }}
-          InputProps={{
-            endAdornment: !loading ? null : (
-              <InputAdornment position='end'>
-                <CircularProgress size={20} />
-              </InputAdornment>
-            )
-          }}
-        >
-          {emptyOption &&
-            <MenuItem value={''}>Selecione...</MenuItem>
-          }
-          {(options || []).map(option => (
-            <MenuItem key={option.value} value={option.value}>
-              {option.label}
-            </MenuItem>
-          ))}
-          {children}
-        </TextField>
+        <FormControl margin='normal' fullWidth error={!!this.errorMessage}>
+          <InputLabel shrink={!!emptyOption} error={!!this.errorMessage}>{label}</InputLabel>
+          <Select
+            {...{
+              fullWidth: true,
+              endAdornment: !loading ? null : (
+                <InputAdornment position='end'>
+                  <CircularProgress size={20} />
+                </InputAdornment>
+              ),
+              ...extra,
+              displayEmpty: !!emptyOption,
+              value: !value ? '' : value,
+              required: this.isRequired,
+              error: !!this.errorMessage,
+              onChange: this.onChange,
+              onBlur: this.onBlur,
+              submitted: null,
+              touched: null,
+              loading: null
+            }}
+          >
+            {emptyOption &&
+              <MenuItem value={''}>{emptyOption}</MenuItem>
+            }
+            {(options || []).map(option => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+            {children}
+          </Select>
+          <FormHelperText error={!!this.errorMessage}>{this.errorMessage || helperText}</FormHelperText>
+        </FormControl>
       </React.Fragment>
     );
   }

components/Select.tsx

@@ -5,9 +5,9 @@ import FieldCoreBase from '@react-form-fields/core/components/FieldCoreBase';
 import * as React from 'react';
 
 import { getConfig } from '../config';
-import { ITextFieldProps } from '../interfaces/props';
+import { IBaseFieldProps, TextFieldPropsResolver } from '../interfaces/props';
 
-interface IProps extends ITextFieldProps {
+interface IProps extends IBaseFieldProps, TextFieldPropsResolver {
   mask?: 'phone';
   loading?: boolean;
   value: any;

components/Text.tsx

@@ -1,6 +1,6 @@
 {
   "main.css": "static/css/main.7f08d526.css",
   "main.css.map": "static/css/main.7f08d526.css.map",
-  "main.js": "static/js/main.ef712415.js",
-  "main.js.map": "static/js/main.ef712415.js.map"
+  "main.js": "static/js/main.20586e5c.js",
+  "main.js.map": "static/js/main.20586e5c.js.map"
 }