erikras / redux-form-material-ui Goto Github PK
View Code? Open in Web Editor NEWA set of wrapper components to facilitate using Material UI with Redux Form
Home Page: http://erikras.github.io/redux-form-material-ui/
License: MIT License
A set of wrapper components to facilitate using Material UI with Redux Form
Home Page: http://erikras.github.io/redux-form-material-ui/
License: MIT License
The new version fixes #10, but caused react to start warning of unexpected props passed to <input>
:
This is because material-ui passes through unexpected props to the underlying <input>
element. I think the fix is to black-list non-standard props from being passed through to material UI:
active
asyncValidating
dirty
invalid
pristine
valid
visited
The name of these wrapper components are appearing as 'StatelessComponent' when viewed in the inspector. That is all.
Right now, if you select a date, the text field is filled with the selected value. As soon as you open the date picker again, it switches to blank and the date picker shows no selected date.
If you compare this to the behaviour of the bare MUI date picker, you will see that the selected date is still in the field and the selected date is marked in the date picker.
For debugging, I tried to use MUI with redux-form directly and it boiled down that this starts to happen if you add the onBlur
/onFocus
callbacks. Unfortunately, without this callback the dirty/touched tracking does not work.
Any ideas?
Console shows message 'Failed prop type: Invalid prop value
of type string
supplied to DatePicker
, expected object
.'
when import DatePicker from 'redux-form-material-ui'.
'redux-form-material-ui' seems force to set the plain value for datepicker,
but the prototype of it only accepts object.
Hi, I've just import { TextField } from 'redux-form-material-ui';
and got this error createComponent.js:55 Uncaught TypeError: Cannot read property 'name' of undefined
I never get this error before but today I got it don't know why.
I can't manage to add an onChange to SelectField
, it seems to be ignored.
With the new breaking change in RF RC2, the createComponent
function in RFMUI doesn't work. I can get it going by changing render
to use mapProps(this.props.input)
, but that's going to break all other versions of Redux Form.
I'd submit a PR, but I'm not sure how you want to handle previous versions?
Can we generate forms and it's fields dynamically with a spec file ... like here redux-form-generator
When used in a vertical stepper, Field breaks the transition animation between steps. The animation should be:
current step closes upwards
next step opens downwards
what happens:
next step opens downwards
current step closes immediately
Any Field component inside a StepContent component seems to break the animation.
Hi. It appears that redux-form-material-ui doesn't support the dataSourceConfig Prop on the AutoComplete component.
I have an array of objects e.g:
const datasource = [ { code: 'USD', description: 'United States Dollar' }, { code: 'GBP', description: 'United Kingdom Pound' } ];
and a dataSourceConfig:
const dsConfig = {
text: 'description',
value: 'code'
};
Is support for this in the pipeline?
Many thanks.
Just wondering, any possible solution to override the style of the component?
for instance, override the style of TextField?
In the example .. Just changed the following:
<Field
name="driver"
component={SelectField}
hintText="Driver"
**onChange={this.handleSelectChange.bind(this)}**
floatingLabelText="Driver">
<MenuItem value="[email protected]" primaryText="Alice"/>
<MenuItem value="[email protected]" primaryText="Bob"/>
<MenuItem value="[email protected]" primaryText="Carl"/>
</Field>
The onChange Handler returns the value as :
handleSelectChange(value) {
return value
}
Result : The selected item doesn't update anymore. Any suggestions ?
<Field name="at"
component={TimePicker}
defaultValue={null}
hintText="At what time?"/>
warning.js:36 Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `TimePicker`, expected `object`.
To set the format for the TimePicker we use the format prop like this
<TimePicker format="24hr" />
How to set prop format when using the Field component?
<Field name="some_name" component={TimePicker} format="24hr" />
This is not working because the Field component already has a prop called format.
`
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import MenuItem from 'material-ui/MenuItem';
import { RadioButton } from 'material-ui/RadioButton';
import {
Checkbox,
RadioButtonGroup,
SelectField,
TextField,
Toggle
} from 'redux-form-material-ui';
// Local import(s)
import { getData, updateData } from '../actions';
export const fields = ['first_name']
const validate = values => {
const errors = {}
const requiredFields = [ 'first_name' ]
requiredFields.forEach(field => {
if (!values[ field ]) {
errors[ field ] = 'Required'
}
})
return errors
}
class UserEditForm extends Component {
componentWillMount() {
console.log("this.refs : ", this.refs); // this.refs: {}
this.refs.firstName.getRenderedComponent().getRenderedComponent().focus() // on TextField
// dispatching action: get Partner-Lead details
this.props.getData(this.props.user_id);
}
onSubmit(formData) {
this.props.updateData(this.props.user_id, formData);
}
render() {
const {
fields: {first_name},
pristine,
handleSubmit,
submitting
} = this.props
return (
<form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
<Field name="first_name" component={TextField} hintText="First Name" floatingLabelText="First Name" ref="firstName" withRef {...first_name}/>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
</div>
</form>
)
}
}
export default reduxForm ({
form: 'UserEditForm',
fields,
validate
}, function mapStateToProps(state) {
return {
initialValues: state.userNode.getResponse,
}
}, {
getData, updateData
})(UserEditForm);
`
I have a controlled slider (with a state). But it resets to the beginning when it loses the focus, note that the value maintains itself
constructor(props) {
super(props);
this.state = {
salarioSlider: 0
};
}
handleSalarioSlider(value) {
this.setState({salarioSlider: value});
}
<Field name="salario" component={Slider}
min={0}
max={100000}
defaultValue={0}
step={1000}
style={styles.slider}
value={this.state.salarioSlider}
onChange={this.handleSalarioSlider.bind(this)}
/>
<div className="texto-slider">{'Bs. ' + this.state.salarioSlider}</div>
Here is a Snapshot
Any thoughts??
I have a SelectField whose value should dynamically update another SelectField. I'm using the new v6 syntax, however, I'm unable to get access to the onChange event. Would love a suggestion of how to cleanly implement this. Thank you!
The checkbox should be able to display errors. This will become handy when dealing with the requirement to agree to use terms / agreements for example.
I'm not the greatest JS developer but I'm starting work on a React/Redux UI for a Python project I maintain, so please pardon my ignorance if this isn't a problem w/ your code!
I'm trying to get this working using the following dependencies:
"dependencies": {
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"material-ui": "^0.15.0",
"react": "^15.1.0",
"react-dom": "^15.1.0",
"react-notification": "^5.0.4",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"react-router-redux": "^4.0.4",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.5.2",
"redux-api-middleware": "^1.0.2",
"redux-form": "^5.2.5",
"redux-form-material-ui": "^2.0.0",
"redux-rest-resource": "^0.4.1",
"redux-thunk": "^2.1.0"
}
I've got a DeviceForm
component that has a FlatButton
with text "Create Device" that when clicked opens a Dialog
with a form
inside. The idea is, you click the button, fill out the form, and then the modal closes.
So, it works fine without the TextField
. When I try to add a Field
with the component TextField
to the form like in your example code, it never renders and I get this in the console.log
:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `DeviceForm`.
Here's the entire component called DeviceForm
:
import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import { Field, reduxForm } from 'redux-form';
import {TextField} from 'redux-form-material-ui';
// import TextField from 'material-ui/TextField';
class DeviceForm extends React.Component {
constructor(props) {
super(props);
// Initial state
this.state = {
open: false,
}
// Bind methods
this.handleOpen = this.handleOpen.bind(this);
this.handleClose = this.handleClose.bind(this);
}
handleOpen() {
console.log('DeviceForm.handleOpen()');
this.setState({open: true});
}
handleClose() {
console.log('DeviceForm.handleClose()');
this.setState({open: false});
}
render() {
const {
fields: {hostname},
handleSubmit,
pristine,
resetForm,
submitting
} = this.props;
return (
<div>
<RaisedButton label="Create Device" onTouchTap={this.handleOpen} />
<Dialog
title="Create Device"
modal={false}
open={this.state.open}
onRequestClose={this.handleClose}
>
I am a a dialog.
<form onSubmit={handleSubmit}>
<Field
name="hostname"
component={TextField}
hintText="Hostname"
floatingLabelText="Hostname"
required
defaultValue={hostname.value}
/>
<FlatButton
label="Close"
primary={true}
onTouchTap={this.handleClose}
/>
<FlatButton
label="Create"
type="submit"
primary={true}
keyboardFocused={true}
disabled={pristine || submitting}
onTouchTap={this.handleClose}
/>
</form>
</Dialog>
</div>
);
}
}
DeviceForm = reduxForm({
form: 'deviceForm',
fields: ['hostname']
})(DeviceForm)
export default DeviceForm;
If I remove the Field
from the form, the modal pops when I click the "Create Device" button. Any ideas? Is this a bug? Thanks in advance!
Cheers!
I believe this is a bug:
https://github.com/erikras/redux-form-material-ui/blob/master/package.json#L56
It should be in dependencies, not devDependencies since it's imported here:
I noticed in the live demo (http://erikras.github.io/redux-form-material-ui/), the Driver is a required field. When I touch the field and don't select a value, the 'Required' errorText is not showing. Other fields seem to work. I tried my self on my project and same result.
At a reasonable typing speed, the TextField
seems to lag keyboard input. I don't observe this behavior with vanilla material-ui TextField
components.
Example JSX:
import {Field} from 'redux-form';
import {TextField as TextFieldRX} from 'redux-form-material-ui';
<Field
name="myField"
component={TextFieldRX}
floatingLabelFixed={true}
floatingLabelText="myField"
/>
package versions:
{
"material-ui": "0.15.2",
"react": "15.2.1",
"redux": "3.5.2",
"redux-form": "^6.0.0-rc.3",
"redux-form-material-ui": "^3.0.0"
}
Edit: Observing this with other components as well, such as Toggle
. See the below GIF to observe the lag effect.
Hi,
When testing the SelectField example, I don't get the same display.
<Field
name="driver"
component={SelectField}
hintText="Driver"
floatingLabelText="Driver">
<MenuItem value="[email protected]" primaryText="Alice"/>
<MenuItem value="[email protected]" primaryText="Bob"/>
<MenuItem value="[email protected]" primaryText="Carl"/>
</Field>
The first option's primaryText and the floatingLabelText overlap:
Using
"redux-form": "6.0.0-rc.4",
"redux-form-material-ui": "4.0.1"
Am I the only one?
I am trying to get redux-form-material-ui
to work with my app.
I basically copied the code from the material-ui
demo to see if it worked.
It doesn't.
Here are the files. I have a index.js
and a register.js
file in components/auth/ directory.
I commented out the errors check, even though I had all the fields filled out, (I was still getting the errors).
The form still won't send.
Can someone please take a look?
I need some suggestions.
Thanks so much
Hi,
I must be doing something wrong, but when I pass a value to a Field, this value doesn't get passed to the wrapped SelectField component.
Thx in advance,
Olivier Allouch
www.illicotravel.com
Do you think it will be relevant to update material-ui version to 0.15.2 to get update made on TextField and SelectedItem component ?
First, this is awesome.
I want to be able to focus a text field if someone hits an "edit" icon. I can't use withRef
on the field though since the underlying component is a stateless functional component.
Happy to help translate these to Component
I'm curious about the possibility of having the active
prop cause the underlying material-ui component to gain focus. It seems that, when a component gains focus, it calls an onFocus
callback that's been handed to it by redux-form. This callback fires a FOCUS
action, which results in a state mutation and the active
flag being set on the ui component. Could the setting of the active field state, via the reducer plugin, do the reverse and cause the field's focus()
method to be called? Right now, messing with the state directly does cause the active
prop to be properly set on the ui component. But the component does not translate that into a call to its focus()
method, afaik. These wrappers could see the change to the active
prop and pass that down to the material ui component via a ref call. mui/material-ui#1594 demonstrates how to set focus on a mui field programmatically.
I have this code:
import { Field, reduxForm } from 'redux-form/immutable';
import { TextField } from 'redux-form-material-ui';
and I use react-boilerplate. After building and opening page in browser I get the next error:
Cannot find module "material-ui/RadioButton"
I just tried to import TextField and got this issue.
Maybe it is somehow related with this issue?
This is how I'm using the DatePicker component:
<Field name="date" component={DatePicker} hintText="Pick a Date" />
Getting this error:
Failed prop type: Invalid prop `value` of type `string` supplied to `DatePicker`, expected `object`.
in DatePicker (created by ReduxFormMaterialUIDatePicker)
When using the latest redux-form-material-ui, my form can't reflect any change.
Do you have any idea?
You can try it here
[https://github.com/anykao/live-guide2]
npm install
npm start
Hi, I'm getting this error:
propType: Required prop fields
was not specified in ReduxForm(CreateIncident)
. Check the render method of Connect(ReduxForm(CreateIncident))
from purely copying and pasting the example code into a class called 'CreateIncident'
Anyone have any idea why this error is being thrown? I assumed the component "Field" was what was specifying the field prop? Thanks
Do you have a hook to translate error messages while rendering the MaterialUI component? I'm using react-intl for internationalization.
When I am using redux-form I can translate the error by having validate return an intl message object to render like this:
<TextField
errorText={(email.touched && email.error) ? formatMessage(email.error) : '';}
{...email}
/>
However, with redux-form-material-ui I am supposed to use the Field tag. From my testing it looks like the errorText
property of the Field tag is overridden by any error on that field. This makes it impossible to translate an error message outside of the validate
function. That function has no state, and no way to access the locale data so I'm wondering what pattern to use to translate error messages. Thank for any tips!
i want to make my custom action along with state updation when radio buttion is selected from radioGroup.
<Field name={id} component={RadioButtonGroup} onChange={this.handleRadioSelect}>
{radioButtons}
</Field>
when i write onChange event listener redux form state is not updating ?
Hello,
Can import react, material-ui et cetera but only importing redux-form-material-ui is giving me an eslint error.
import { TextField } from 'redux-form-material-ui';
'[eslint] Unable to resolve path to module 'redux-form-material-ui'. (import/no-unresolved)'
I have imported the npm package. My package.json is:
..... "redux": "3.5.2", "redux-form": "^6.0.0-rc.4", "redux-form-material-ui": "^4.0.1", .....
Not sure where to start looking and why only redux-form-material-ui is giving me this eslint error.
After npm updating to 2.1.0 we have the following error:
Unable to resolve some modules:
"./TogglTextFieldcke" in ...../node_modules/redux-form-material-ui/lib/index.js
(web.browser)
Reverting to 2.0.0 solves issue.
Looks like it's supposed to be Toggle but possibly messed up in transpiling.
Hello, I am having trouble to set value to radio button programmatically.
I am able to dispatch a change action for radio buttons the same way as nickbarry in his post here redux-form/redux-form#369
I am also able to see that Redux store value has been succesfully changed, in redux dev tools in chrome.
My problem is that Radio Button Group component on my page is not reflecting this change.
I tried similar thing for a TextBox and it worked as I expected.
I am still quite fresh to React and Redux, but I think following could be related problem - when you call reset on a form, Radio buttons are not resetted for material design wrappers but for normal Radio buttons reset works. Here is example that does not work for radio buttons. http://erikras.github.io/redux-form-material-ui/
Could the reason be that mapping for onchange is missing in the wrapper, or something?
Thanks!
Is there a recommended way of having the value of a field as an array and using checkboxes to populate the array?
For example, in the live demo you have toppings like pepperoni, mushroom, ham etc. and these are all just fields with separate names. However, if one wanted to have the value of these stored in an array under a separate key, 'toppings', what's the way to do this?
I'm basically wanting to replicate a HTML checkbox input like:
<input type="checkbox" name="toppings[]" value="mushrooms">
<input type="checkbox" name="toppings[]" value="pepperoni">
Changes are not being processed. Maybe this is due to breaking changes in the new rc?
Alden
I'm passing in values in this.props.initialize() function , the textfield displays it just fine. the values do show up in the form reducer just not in the datePicker field on the page.
Is it because DatePicker requires an object, and redux-form defaults to ''
I have a form with one TimePicker field, like so:
<form>
<Field
name='start_time'
component={TimePicker}
/>
</form>
And I get this warning:
Warning: Failed prop type: Required prop component
was not specified in Field
.
Followed by this error:
Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ConnectedField
.
If I change the component prop to DatePicker, it works fine.
"redux-form": "^6.0.0-alpha.15",
"redux-form-material-ui": "^2.0.0",
copied example from readme gives bunch of errors:
Warning: Element:
keyis not a prop. Trying to access it will result in
undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.
Warning: Element:
refis not a prop. Trying to access it will result in
undefined being returned. If you need to access the same value within the child component, you should pass it as a different prop.
Warning: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
Uncaught Invariant Violation: Component(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.
running example gives an error on npm install
:
Hash: 5df58aa01ae6cec441a7
Version: webpack 1.13.1
Time: 2657ms
Asset Size Chunks Chunk Names
bundle.js 85.8 kB 0 [emitted] main
bundle.js.map 706 kB 0 [emitted] main
[0] multi main 40 bytes {0} [built] [1 error]
+ 298 hidden modules
ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index in mypath/node_modules/redux-form-material-ui/example
@ multi main
running example from 'Live Demo' throws an error:
reduxForm.js:521Uncaught TypeError: Cannot read property 'wrapped' of undefined
I would appreciate a hint, how to make it work
I have following:
const mapDispatchToProps = dispatch => {
return {
selectTruck: id => {
dispatch(change(formName, 'truckId', id));
}
};
};
'truckId'
is bound to a SelectField (a Field
with component={SelectField}
).
When a certain event happens I call this.props.selectTruck(id)
. The event changes the form value as expected. I know this because the value is there upon submitting the form. Also the label floats, which indicates an option is chosen.
However the select appears blank. The display value of the truck does not appear. Why isn't the field showing the selected option? Do I need to do something else besides change the value?
Is this even a redux-form-material-ui
issue?
The flow would then become:
import { WrappedTextField } from 'redux-form-material-ui';
const MyForm = props =>
<form onSubmit={props.handleSubmit}>
<Field
name="username"
component={WrappedTextField}
floatingLabelText="Username"
/>
</form>;
export default reduxForm({
form: 'myForm',
})(MyForm);
This allows for a better tree shaking with webpack2, is more explicit and less error prone in my opinion (no string component matching).
With below code, i cannot type anything on the textfield. I mean to say nothing gets type in the textfield. Autocomplete works though. Why is it not showing the text i have typed?
What might be the reason for this issue? Have i done somewhere mistake?
import React, { Component } from 'react';
import _ from 'lodash';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';
import {
AutoComplete as MUIAutoComplete, MenuItem,
FlatButton, RaisedButton,
} from 'material-ui';
import {
AutoComplete,
TextField
} from 'redux-form-material-ui';
const validate = values => {
const errors = {};
const requiredFields = ['deviceName', 'deviceIcon', 'deviceTimeout'];
requiredFields.forEach(field => {
if (!values[field]) {
errors[field] = 'Required';
}
});
return errors;
};
class DeviceName extends Component {
handleSubmit = (e) => {
e.preventDefault();
this.props.handleNext();
}
render() {
const {
handleSubmit,
fetchIcon,
stepIndex,
handlePrev,
pristine,
submitting
} = this.props;
const listOfIcon = _.map(fetchIcon.icons, (icon) => ({
text: icon.name,
id: icon.id,
value:
<MenuItem
primaryText={icon.name}
leftIcon={
<i className="material-icons md-23">
{icon.name}
</i>
}
/>
}));
return (
<div className="device-name-form">
<form>
<div>
<Field
name="deviceName"
component={TextField}
floatingLabelStyle={{ color: '#1ab394' }}
hintText="Device Name"
onChange={(e) => this.setState({ deviceName: e.target.name })}
/>
</div>
<div>
<Field
name="deviceIcon"
component={AutoComplete}
hintText="icon"
openOnFocus
filter={MUIAutoComplete.fuzzyFilter}
className="autocomplete"
dataSource={listOfIcon}
onNewRequest={(e) => { this.setState({ deviceIcon: e.id }); }}
/>
</div>
<div>
<Field
name="deviceTimeout"
component={TextField}
floatingLabelStyle={{ color: '#1ab394' }}
hintText="Device Timeout"
ref="deviceTimeout" withRef
onChange={(e) => this.setState({ deviceTimeout: e.target.name })}
/>
</div>
<div style={{ marginTop: 12 }}>
<FlatButton
label="Back"
className="back-btn"
onTouchTap={() => handlePrev()}
style={{ marginRight: 12 }}
/>
<RaisedButton
label={stepIndex === 4 ? 'Finish' : 'Next'}
primary
disabled={pristine || submitting}
className="our-btn"
onTouchTap={(e) => handleSubmit(e)}
/>
</div>
</form>
</div>
);
}
}
const mapStateToProps = ({ fetchIcon }) => ({
fetchIcon
});
const DeviceForm = reduxForm({
form: 'DeviceForm',
validate,
})(DeviceName);
export default connect(mapStateToProps)(DeviceForm);```
Hi,
I couldn't find a way to display errors on a RadioButtonGroup.
For instance, I have a RadioButtonGroup with no default value that is required.
At the moment, user stucks on the submit button without any proper message.
Did any one found a way to display them?
Best regards,
The majority of the components are able to display error/required messages via the import mapError from './map'
statement, except for poor old DatePicker. It's never able to display an error message as the props are never mapped.
From your example about Autocomplete in: http://erikras.github.io/redux-form-material-ui/
After I choose one option then I can't choose another one without page refresh.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.