deadly0 / final-form-material-ui Goto Github PK

A set of wrapper components to facilitate using Material UI with Final Form

JavaScript 15.91% TypeScript 84.09%

final-form-material-ui's Introduction

Final Form Material UI

A set of wrapper components to facilitate using Material-UI with Final Form.

Available fields

import {TextField, Checkbox, Radio, Select, Input} from 'final-form-material-ui';

TextField

import React from 'react';
import {Field} from 'react-final-form';
import {TextField} from 'final-form-material-ui';

<Field
    name="domain"
    type="text"
    component={TextField}
    label="Domain"
    margin="normal"
    fullWidth
/>

Input

import React from 'react';
import {Field} from 'react-final-form';
import {Input} from 'final-form-material-ui';
import InputAdornment from '@material-ui/core/InputAdornment';

<Field
	name="password"
	component={Input}
	className="input"
	type="password"
	placeholder="Password"
	endAdornment={
		<InputAdornment position="end">
			<Link className="inputLink" to="/forgot">
				Forgot password?
			</Link>
		</InputAdornment>
	}
/>

Select

Use can pass any props from Select docs to Field. Additional props for Field:

label - label for select
formControlProps - object of props for FormControl component

import React from 'react';
import {Field} from 'react-final-form';
import {Select} from 'final-form-material-ui';
import MenuItem from '@material-ui/core/MenuItem';

<Field
    name="city"
    label="Select city"
    formControlProps={{className: 'my-class'}}
    component={Select}
>
    <MenuItem value="London">
        London
    </MenuItem>
    
    <MenuItem value="Paris">
        Paris
    </MenuItem>
</Field>

final-form-material-ui's People

Contributors

Stargazers

Watchers

final-form-material-ui's Issues

Live demo

@Deadly0 It's a great project, thank you for creating it!
I have made a live demo integration, do you want to link it in the documentation? https://codesandbox.io/s/9ywq085k9w :)

The Select component cannot be used in TypeScript applications [Workaround Found]

Type error: Type 'FunctionComponent' is not assignable to type 'string | ComponentClass<FieldRenderProps, any> | FunctionComponent | undefined'.
Type 'FunctionComponent' is not assignable to type 'FunctionComponent'.
Types of parameters 'props' and 'props' are incompatible.
Type 'FieldRenderProps & { children?: ReactNode; }' is not assignable to type 'FormHelperTextWrapperProps & { children?: ReactNode; }'.
Type 'FieldRenderProps & { children?: ReactNode; }' is missing the following properties from type 'FormHelperTextWrapperProps': label, formControlProps TS2322
141 | <div>
142 | <label>City </label>
143 | <Field name="city" label="Select city" component={FFMUI.Select}>
Up arrow pointing to the word component:
144 | <MenuItem value="London">London </MenuItem>
145 | <MenuItem value="Paris">Paris </MenuItem>
146 | </Field>

I've just found an easy workaround: type-cast the Select to any when assigned to the component prop:
component={FFMUI.Select as any}

multiple select

Hi,
how can I set up a multiple select like the one with the tags in this example?

Thanks

Add support for material-ui-pickers

It would be awesome to support these date pickers and time pickers. I have added an example in https://codesandbox.io/s/9ywq085k9w.

Include module entry in package.json

In order to work with modern development tools like snowpack or vite 😍

Label for the Select

final-form-material-ui/src/Select.tsx

Line 28 in 555cb24

<Select

The label should also be passed to the Select component to display the label correctly.

helperText is just for errors

In TextField, there is this code: helperText={showError ? meta.error || meta.submitError : undefined}
that basically ignores any initial value of helperText.

Is there any reason not to have the code like:
helperText={showError ? meta.error || meta.submitError : rest.helperText} ...or something to that effect?

I apologize if I violated your guidelines for requesting a feature.

Support @material-ui/core 4.x

Right now this library only includes MUI 1.x-3.x in the peerDeps.

Given how thin a wrapper this library is, it should probably just use >= 1.0.0 instead.

Only display errors if field has been modified

If a field is set to auto focus and a user moves away from the field without making any changes, validation runs and errors display. I think that errors shouldn't be displayed until a field has been modified. Final Form provides the modified meta value, therefore this should be an easy change.

TextField does not animate properly

Bug:

Classes are not being passed down properly on focus.

For example, if you click a TextField with variant outline, the class does not get passed down properly, so no animation effect is seen when using this library. Compare the behavior of a <TextField variant=filled> with a <TextField variant=filled> from the material-ui/core and you'll notice the difference in behavior.

Easy Fix:

Fix found at: final-form/react-final-form#294

Change inputProps to InputProps. Then everything works normally. Confirmed the fix works.

Can you please make this fix and release?

How to use Checkbox?

Just simple use doesn't work:

<Field name="dhcp" component={Checkbox}/>

How to override the color of outlines of outlined input?

<Field
    className={classes.textField}
    name="
    color="primary"
    component={TextField}
    type="text"
    variant="outlined"
    required={true}
    label="email"/>

I am currently using the component like above. However, even when I have set the primary color to be orange in the theme, the textfield outline color stays black and the error color is red. How do I change the outline color?

Compatability with Autosuggest component

Material UI supports great autosuggest components, which especially help with long lists or when the user is unfamiliar with the options. So far, react-select seems to be one of the more popular ones.

React-select's autosuggest component replaces MUI's Select:
import Select from 'react-select';
(see codesandbox link)

Trying to integrate with react-select (like editing src/select.tsx accordingly) will look okay on the surface, but the input's value is not available.

Styling options for Select

variant="outlined"
won't work on Select components.

Neither does
formControlProps={{variant:'outlined'}}

(Unlike TextFields, where the variant property is set in the element itself, Select requires that it be set in the FormControl parent.)

autocomplete

yeah i see this lib is not mainteined any more so its kinda useless to write here but for those who is looking for autocomplete bindings
https://trejgun.github.io/articles/bindings-for-using-final-form-with-material-ui-autocomplete

Reference Error of windows not defined errors

By just doing a import { TextField } from "final-form-material-ui"; I am gettting a Reference Error of windows which is not defined.

How to use onChange

Hello,
i try to use an onChange Event:

<Field fullWidth id="title" component={TextField} name="title" onChange={(e) => onTitleChange(e)} placeholder="Title" label="Titel" />
But the event is not fired.

I also tried:
<Field fullWidth id="title" component={TextField} name="title" inputProps={{onChange: console.log('test')}} placeholder="Title" label="Titel" />
Any help?
Thank you very much!

Select not open on first click

Hi,
can anyone help me why the Select won't open at first click?
https://stackblitz.com/edit/react-jtv7me?file=demo.js