galki / material-ui-form Goto Github PK

• latest verison
• readme

now

add data-validations prop to mui input components (validators are comma separated string or array of objects)

suggestion

wrap mui input with Validator component (validators would be props)

think about

• effects on extending validators

Is it at all possible to use material-ui-pickers with material-ui-form?

defaultValue suggested for uncontrolled components so should use value instead

When I put TextFields and every other controls inside the Grid component, the submit does return an empty object, also when I put it inside the div with bootstrap grid classes ( or without any class) in addition the same result appears, moreover the validation does not work.

 submit = (values, pristineValues) => {
            console.log(values);
         }

   <MaterialUIForm onSubmit={this.submit}>
      <Grid container spacing={24}>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Name"
            type="text"
            name="ccccc"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Database Host"
            type="text"
            name="vvvvvvv"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Port"
            type="number"
            name="tttttttt"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Host"
            type="text"
            name="ttttt"
            data-validators="isRequired,isAlpha"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>
        <Grid item xs={12} sm={6}>
          <TextField
            label="Host"
            type="text"
            name="ttt"
            data-validators="isRequired"
            onChange={e => this.customInputHandler(e.target.value)}
            fullWidth
          />
        </Grid>

        </Grid>
      </Grid>
      <Button variant="raised" type="reset">Reset</Button>
      <Button variant="raised" type="submit">Submit</Button>
    </MaterialUIForm>`

Hi! I try add style to form element, but className and style attributes did not work.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import MaterialUIForm from 'material-ui-form'
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

const styles = theme => ({
    form: {
        display: 'flex',
        flexDirection: 'row',
        textAlign: 'center'
    }
});


class Login extends React.Component {
    submit(values, pristineValues) {
        console.log(values, pristineValues)
        // get all values and pristineValues on form submission
    }

    render() {
        const { classes } = this.props;

        return (
            <div className={classes.form} >
                <MaterialUIForm onSubmit={this.submit} style={{ margin: '0 auto' }}>
                    <TextField
                        label="Login"
                        type="text"
                        name="username"
                        value=""
                        data-validators="isRequired"
                        style={{ display: 'flex' }}
                    />
                    <TextField
                        label="Password"
                        type="password"
                        name="password"
                        value=""
                        data-validators="isRequired"
                    />
                    <Button variant="raised" style={{ display: 'flex' }} type="submit">Submit</Button>
                </MaterialUIForm>
            </div>

        );
    }
}

Login.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Login);

https://github.com/unitedhubs/material-ui-form/blob/dev/package.json#L54
Are you sure react is a devDependency and not a dependency ?
You should probably also mention this on the README page.

https://github.com/unitedhubs/material-ui-form/blob/dev/src/components/Form.js#L12
Why not add all these methods as class methods ? You do not seem to use them elsewhere, and by interacting with the instance props, they become intertwined with the class.

https://github.com/unitedhubs/material-ui-form/blob/dev/src/components/Form.js#L190
You can simplify the enableSubmitButton and disableSubmitButton code as follow:

toggleSubmitButton() {
  this.setState({ disableSubmitButton: !this.state.disableSubmitButton })
}

In general:

• The code seriously lacks inline comments and docstrings. You will forget parts of the code and maintaining it will become difficult.
• Adding a simple example in the README comparing a form without your state/validation manager and a form with, to show how simpler it becomes, would make the package a lot more attractive to other developers.
• No unit tests is gonna be a no-go for many people.

Other than that, LGTM !

Hello,

Is it possible to add a string and array of objects in data-validators?
This is what I am trying to achieve:
<TextField fullWidth name="Name" value="" margin="normal" data-validators={['isRequired', [{ isLength: { min: 4, max: 5 } }]]} />

After testing, the 'isLength' validation does not work.

refreshing the page while on say http://localhost:8080/misc-props breaks the site. how to fix this? is there "pass-thru" functionality in webpack-dev-server?

I tried to add the default form attributes and some custom attributes in fields. But it's not rendering into dom.
Below is an example of my MaterialUIForm skeleton.
<MaterialUIForm autoComplete="on" method="POST" action="example.com" name="my_form_name" id="form_id >

But in dom it looks like.
<form autocomplete="on">

As you can except "autocomplete" , no other attributes not working.

flag to determine when to send input data to form [onChange | onBlur]

• fix toThrow() - https://stackoverflow.com/questions/49420305/how-to-get-coverage-for-jest-tothrow-without-failing-test

• isMinLength
• isMaxLength
• isExactLength
• isMinValue
• isMaxValue

the built dist/main file generates this error

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

• docstrings
• Jest tests
• linting

Im switching to Angular and wont maintain this anymore. If you are interested in becoming a maintainer (github and npm) please communicate so here.

I started using material-ui-form along with Firebase Firestore on a current project, thanks for your hard work.

I'm providing an empty string state for each textfields value in my form via the constructor. Then on componentDidMount i'm retrieving the values from my database and updating the state to the retrieved values. The only thing is the textfields are not updating to the new values, what have I missed here?

I can get the values if I hold rendering the form until the values are retrieved, but it does not look as good. I was hoping to disable the form fields whilst loading rather than hiding the whole form.

I hope that all makes sense?

• nested fields + other inputs
  • checkboxes + switches
  • FieldControlLabel clone component
  • FormControl (FormLabel, FormHelperText, children)
    • single field element
    • form group
    • radio group
• custom validation messages
  • validationMessageMap
  • validationMessageKeyPrefix
• custom validators
• custom validate function
  • validate
  • requiredValidatorName
• custom component (Radio buttons)
• stepper
• conditional fields
• misc
  • disableSubmitButtonOnError
  • validations
  • onReset
  • onValuesChange
  • autoComplete

is preventing any input value change. see example Custom Validation Messages

• support new error props

these events should be sent through the Form

When try to edit a text field value the cursor keep jumping to end of input field.

tested and working

• TextField
• TextField { select }
• TextField { select, native }
• TextField { multiline }
• Checkbox
• Switch
• FormControlLabel (control prop)
• FormControl + children
  • RadioGroup
  • FormGroup (no validation support)
  • Input/Select (no component specified)
  • Input/Select (component specified)
  • Input/Select (other ways...)
• the rest ...

import React from 'react';
import InputLabel from '@material-ui/core/InputLabel';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import MaterialUIForm from 'material-ui-form'
import { withStyles } from '@material-ui/core/styles';
import Checkbox from "@material-ui/core/es/Checkbox/Checkbox";

const styles = theme => ({
    form: {
        display: 'flex',
        flexDirection: 'row',
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btn: {
        display: 'flex',
        marginTop: theme.spacing.unit * 2,
        marginLeft: '32px'
    }
});

class OrganizationForm extends React.Component {

    render() {
        let { classes, onSubmit, error, user: organization, empty,  mode, orgList, typeOwn } = this.props;

        if(!typeOwn)
        {
            return null;
        }

        if(!empty && !organization)
        {
            return null;
        }
        else if(empty)
        {
            organization = {};
        }

        const fullDisable = mode === 'view';

        return (
            <div className={classes.form} >
                <MaterialUIForm error={error || null} onSubmit={onSubmit}>
                    {error ? <small className="error">{error}</small> :  null}
                    <TextField
                        label="Название компании"
                        type="text"
                        name="title"
                        value={organization.title || ""}
                        autoComplete={'title'}
                        data-validators="isRequired"
                        style={{ display: 'flex' }}
                        disabled={fullDisable}
                    />

                    <Checkbox
                        checked={organization.isActive}
                        name="isActive"
                        value=""
                        disabled={fullDisable}
                    />
                    <span>Состояние компании</span>

                    <Checkbox
                        checked={organization.bankAccountStatus}
                        name="bankAccountStatus"
                        value=""
                        disabled={fullDisable}
                    />
                    <span>Состояние счета</span>

                    <FormControl>
                        <InputLabel>Связанные компании</InputLabel>
                        <Select
                            multiple
                            required
                            value={organization.relatedOrganizations ? organization.relatedOrganizations.map((o) => o.id) : []}
                            style={{ display: 'flex' }}
                            inputProps={{
                                name: 'relatedOrganizations',
                                id: 'relatedOrganizationsid',
                            }}
                            name='relatedOrganizations[]'
                            disabled={fullDisable}
                        >
                            {orgList.map((o) => <MenuItem key={o.id} value={o.id}>{o.title}</MenuItem>)}
                        </Select>
                    </FormControl>

                    {fullDisable ? null : (
                        <Button
                            variant="raised"
                            size="large"
                            color="primary"
                            className={classes.btn}
                            type="submit">{mode === 'edit' ? 'Обновить' : 'Создать'}</Button>
                    )}

                </MaterialUIForm>
            </div>

        );
    }
}

export default withStyles(styles)(OrganizationForm);

Hi! In this from i have two errors:

Warning: React does not recognize the helperText prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase helpertext instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input)
in Select (created by WithStyles(Select))
in WithStyles(Select) (created by OrganizationForm)
in FieldClone (created by Form)
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by OrganizationForm)
in form (created by Form)
in Form (created by OrganizationForm)
in div (created by OrganizationForm)
in OrganizationForm (created by WithStyles(OrganizationForm))
in WithStyles(OrganizationForm) (created by OrganizationsEdit)
in OrganizationsEdit (created by WithStyles(OrganizationsEdit))
in WithStyles(OrganizationsEdit) (created by component)
in component (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in ContextProvider (created by App)
in MuiThemeProvider (created by App)
in App

and

Warning: Received false for a non-boolean attribute error.

If you want to write it to the DOM, pass a string instead: error="false" or error={value.toString()}.

If you used to conditionally omit it with error={condition && value}, pass error={condition ? value : undefined} instead.
in span (created by ButtonBase)
in ButtonBase (created by WithStyles(ButtonBase))
in WithStyles(ButtonBase) (created by IconButton)
in IconButton (created by WithStyles(IconButton))
in WithStyles(IconButton) (created by SwitchBase)
in SwitchBase (created by WithStyles(SwitchBase))
in WithStyles(SwitchBase) (created by Checkbox)
in Checkbox (created by WithStyles(Checkbox))
in WithStyles(Checkbox) (created by OrganizationForm)
in FieldClone (created by Form)
in form (created by Form)
in Form (created by OrganizationForm)
in div (created by OrganizationForm)
in OrganizationForm (created by WithStyles(OrganizationForm))
in WithStyles(OrganizationForm) (created by OrganizationsEdit)
in OrganizationsEdit (created by WithStyles(OrganizationsEdit))
in WithStyles(OrganizationsEdit) (created by component)
in component (created by Route)
in Route (created by Context.Consumer)
in Switch (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (created by Context.Consumer)
in div (created by Layout)
in Layout (created by WithStyles(Layout))
in WithStyles(Layout) (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in ContextProvider (created by App)
in MuiThemeProvider (created by App)
in App

and i can not understand what this errors???
Please help me! It's very urgent

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.20.0",
        "babel-preset-react": "^6.24.1",
        "prop-types": "^15.6.1",
        "react": "^16.5.2",
        "react-dom": "^16.5.2",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server --port 9001",
        "dev": "encore dev",
        "watch": "encore dev --watch ",
        "build": "encore production"
    },
    "dependencies": {
        "@material-ui/core": "^1.4.1",
        "@material-ui/icons": "^2.0.0",
        "axios": "^0.18.0",
        "babel-preset-stage-0": "^6.24.1",
        "lodash": "^4.17.11",
        "material-ui": "^0.20.2",
        "material-ui-form": "^1.0.0-alpha.26",
        "moment": "^2.22.2",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1"
    }
}

• rename FieldClone to NonCheckableFieldClone
  • make props.children a prop (remove getElementFromProps)
• create CheckableFieldClone (support for Checkbox and Switch)

• nested fields + other inputs
  • checkboxes + switches
  • FieldControlLabel clone component
  • FormControl (FormLabel, FormHelperText, children)
    • single field element
    • form group (no validation support)
    • radio group
• custom validation messages
  • messageMap
  • messageKeyPrefix
• custom validators
• custom validate function
  • validate
  • requiredValidatorName
• stepper
• misc
  • disableSubmitButtonOnError
  • validations
  • onReset
  • onValuesChange
  • autoComplete

ref

• https://reactjs.org/docs/uncontrolled-components.html
• https://material-ui-1dab0.firebaseapp.com/demos/buttons/

treat as non-interactive controlled component

create

• example (custom component)
• doc example (custom component)