formsy / formsy-material-ui Goto Github PK
View Code? Open in Web Editor NEWA Formsy compatibility wrapper for Material-UI form components
License: MIT License
A Formsy compatibility wrapper for Material-UI form components
License: MIT License
It does correctly affect canSubmit state, but not the field itself.
This project gets a high score on http://packagequality.com/, so why not show it off?
Here's an example of another project showing it off on the README.md.
It would be nice for the value of a FormsyText component to accept numbers as well instead of just strings. The material-ui TextField accepts of Proptype of "any". If you think this is a valid change, I can submit a PR.
Hey there, could you update the readme to include an example of how to use the new "composable" select components? I am seeing a lot of the warnings but am not quite sure how to fix them.
Thanks!
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 `FormsyText`.
In FormsyText.js, I figure out that
var TextField = require('material-ui/lib/text-field');
should be
var TextField = require('material-ui/lib/text-field').default;
Because text-field.js has changed in material-ui:
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _TextField = require('./TextField');
var _TextField2 = _interopRequireDefault(_TextField);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _TextField2.default;
material-ui has released an alpha of 0.15 where onEnterKeyDown has been deprecated.
This causes a warning in the console:
Warning: "onEnterKeyDown" property of "TextField" has been deprecated.
Use onKeyDown and check for keycode instead.
When using the normal MUI Checkbox component the toggling of the checkbox is working perfect. When using the FormsyCheckbox component the toggling isn't working an the component stays in the original state.
I'm using [email protected] and [email protected]
Hey man,
I really love this plugin, but when I try to overwrite onChange event, nothing happened.
After installing this package you will get another copy of react which is not what you want.
After opening the modal of FormsyDate, there is a ~1s delay until the date-picker becomes responsive.
Also after clicking on a date, there is another ~1s delay until the corresponding date gets shown as text in modal header (example: clicking on 13, wait, "Fri,Nov 13" is shown in the header)
Any ideas what could cause these delays/ performance issues?
App info: Meteor 1.3 beta-latest, formsy-react
and formsy-material-ui
have been installed via the new Meteor modules syntax. When I am only using formsy-react (<Formsy.Form />
) with a custom created input component, everything loads fine and no errors.
However, as soon as I put <FormsyDate />
(or any of the other input types) nested into the Formsy.Form component, I get these errors on the client:
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 FormsyDate
.
and Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of FormsyDate
.
I am importing both modules into my current file like so:
const Formsy = require('formsy-react');
const FMUI = require('formsy-material-ui');
const { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
I have tried everything to make these errors go away, but I've hit a wall for sure. Do you have any idea what could be causing these errors?
Hi everyone,
Here my component, I try to set defaultDate is minDate
but the form is still invalid cause the value of start_date_time
still null until I make a change on this. Have you had any idea for this?
<FormsyDate
required
fullWidth
disableYearSelection
minDate={minDate}
defaultDate={minDate}
formatDate={this.handleFormatDate}
name="start_date_time"
floatingLabelText="Start date" />```
I find the text inputs and checkboxes to be really slow when you type. Its fine if you type 1 letter but if you try to type a few words it lags like crazy. This occurs in your demo page as well. Any thoughts?
I am using formsy-react 0.14.1 & formsy-material-ui 0.2.2
componentDidMount: function(nextProps) {
this.resetForm({
'name': 'asd',
'email': '[email protected]'
});
},
resetForm: function (model) {
this.refs.form.reset(model);
},
submitForm: function (model) {
console.log(model);
}
When I submit I could see asd and [email protected], but I can not see the value in the form itself.
I'm having multiple FormsyText
components and basically just following the example. Reproduction:
So, as a user, I'm stuck with whatever I've written into the input the first time I visited it.
Any ideas what could cause that issue?
I'm using ES6 class syntax and React v0.14.1, material-ui v0.13.1
I have a form which contains some FormsyCheck:
<Formsy.Form
ref='searchForm'
method="GET"
className="form"
onValidSubmit={this.submitForm}
onInvalidSubmit={this.submitForm}
onChange={onChange}
>
<FormsyCheckbox
name={name}
floatingLabelText={name}
label={name}
defaultChecked={!!defaultValue}
/>
<RaisedButton
label="Reset"
onTouchTap={onReset}
/>.
when Inside onReset I call
this.refs.searchForm.reset();
I have the following warning:
warning.js:45 Warning: Failed propType: Required prop
switchedwas not specified in
EnhancedSwitch. Check the render method of
Checkbox.
I recently started using material-ui and stumbled upon formsy-material-ui just what I needed.
I get this odd issue when selecting an option by double clicking a text field.There is a yellow box made around it.This does not go until I type something.Is this only my issue.How do I prevent it.
This issue is also in the live demo.
Maybe there is some other way to do this, but I'm having the following problem...
Using valueLink
breaks validation as it does not go through formsy's getValue() behavior. If you attempt to pass a value
prop, as you normally would with formsy, then that prop is spread down to the material-ui component and bypasses formsy's getValue() behavior as well.
I'm in a crunch so I don't have time to make a PR, but I've proven, at least for FormsyText that the following example using destructuring works:
let FormsyText = React.createClass({
mixins: [ Formsy.Mixin, FormComponentMixin ],
render: function() {
var { value, ...other } = this.props;
return (
<TextField
value={this.getValue()}
{...other}
onChange={this.handleChange}
errorText={this.getErrorMessage()} />
);
}
});
I don't know whether the same destructuring can be used for the other fields. But I thought I'd start a dialog here around this problem.
Nothing happens when I click on a FormsySelect component. (Neither are there any errors/warnings/messages in the console.)
I created the FormsySelect component as per the README.md
<FormsySelect
name='frequency'
required
floatingLabelText="How often?">
<MenuItem value={'never'} primaryText="Never" />
<MenuItem value={'nightly'} primaryText="Every Night" />
<MenuItem value={'weeknights'} primaryText="Weeknights" />
</FormsySelect>
Please note FormsyText works as per the README.
I am using
"formsy-material-ui": "^0.3.8",
"formsy-react": "^0.17.0",
"material-ui": "^0.14.4",
@mbrookes Please update latest tag 0.2.3 on npm.
Thanks
Often can't be selected by mouse, up/down keys don't cycle through selection when the dropdown isn't open.
Update exports to ES2015 module format, without breaking things for CommonJS imports like Material-UI 0.14.1 did!
Hi,
Apparently, setting the required
attribute on a FormsyText
reports the form state as invalid (the submit button can be disabled), but no message appears below the field? Is it the expected behavior? Shouldn't we do something with the showRequired
function?
Hi,
I have a modal with the form as the content. I pass my submit button in the actions attribute of the modal component but when clicking the button I don't receive my formData values. How can I submit the form and receive the data from the form with putting the submit button outside the form?
Here is the code that I use for the moment :
import React from 'react';
import Dialog from 'material-ui/lib/dialog';
import FlatButton from 'material-ui/lib/flat-button';
import FormsyText from 'formsy-material-ui/lib/FormsyText';
import { Form } from 'formsy-react';
class EventForm extends React.Component {
constructor(props) {
super(props);
this.submit = this.submit.bind(this);
this.enableButton = this.enableButton.bind(this);
this.disableButton = this.disableButton.bind(this);
this.state = {
canSubmit: false
};
}
enableButton(){
this.setState({canSubmit: true});
}
disableButton(){
this.setState({canSubmit: false});
}
submit(formData) {
console.log(formData);
}
render() {
const actions = [
<FlatButton
label="Close"
secondary
onTouchTap={this.props.onHide}
/>,
<FlatButton
label="Submit"
secondary
/>
];
return (
<div>
<Dialog
title="Add Event"
actions={actions}
titleClassName={"dialog-title"}
actionsContainerClassName={"dialog-footer"}
modal
autoScrollBodyContent
>
<Form onValidSubmit={this.submit} onValid={this.enableButton}>
<FormsyText
name="description"
validations="minLength:3"
validationError="Description of the event"
required
hintText="Description (required)"
floatingLabelText="Description (required)"
/>
</Form>
</Dialog>
</div>
);
}
}
export default EventForm;
If a user fills out a textfield as the last required input, with onBlur the submit button isn't enabled unless the user clicks away from the field. With onChange this problem would likely be resolved.
WIth onChange we can also validate urls in real-time without waiting until they click away, forcing them to re-click on the field.
I can see why with URLs you might want to wait until they have finished typing so we don't pre-maturely show an error but having to re-click on the field is even more frustrating (from my point-of view).
Supporting all of formsy's options in conjunction with material-ui is becoming increasingly complex for such a small project. An automated test suite would maybe help, although it could itself become more complex than the code it's testing.
Thoughts?
Current implementation of formatDate formatter skips locale settings thus giving incorrect value due time-zone calculations.
Date set for today is 2015-11-30 which gives "2015-11-29T23:00:00.000Z" as ISO representation. My timezone is CET. Substringing it will give the day before which is incorrect.
The simplest fix would be to change FormsyDate.jsx:12 from
formatDate={(date) => date.toISOString().substring(0,10)}
to
formatDate={(date) => date.toLocaleString().substring(0,10)}
see this example
<Formsy.Form>
<FormsySelect name="hey" hintText="plzzzzzzzzzzzzzz">
<MenuItem value="" primaryText="please select"/>
<MenuItem value="foo" primaryText="foo"/>
<MenuItem value="bar" primaryText="bar"/>
<MenuItem value="baz" primaryText="baz"/>
</FormsySelect>
</Formsy.Form>
This seems quite odd.
A naive solution would be modifying https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsySelect.jsx#L21
this.setState({hasChanged: true});
like this
this.setState({ hasChanged: value !== '' });
Are there any possible side effects caused by this behavior?
can we have the possibility to style the error message?
for instance sending a hintStyle objects styles the hint text, maybe we can have an errorStyle to style the error
I'm trying to show a defaultValue. However, if hintText or floatingLabelText is set they will overlay over the defaultValue.
Using these versions:
"material-ui": "0.13.1",
"formsy-react": "0.17.0",
"formsy-material-ui": "0.2.4",
It appears the internal switched
property (on MUI Checkbox) is no longer being toggled properly when wrapped in a <FormsyCheckbox>
.
It appears that:
<EnhancedSwitch>
's _handleChange()
.this.props.onParentShouldUpdate()
, which is implemented by <Checkbox>
and calls this.setState({switched: true})
.<EnhancedSwitch>
also calls this.props.onSwitch()
, which is implemented by <Checkbox>
.<Checkbox>
calls its own onCheck
which is set by Formsy-MUI.setValue()
, which fires another setState()
.<FormsyCheckbox>
to rerender, which fires <Checkbox>
's componentWillReceiveProps.<Checkbox>
's componentWillReceiveProps calls its own setState()
, which looks at the value of this.state.switched
and overwrites it. But it hasn't changed yet, the transition is still pending, so it is always set to false
.Not sure what the fix is here. <EnhancedSwitch>
should probably be passing a callback to onParentShouldUpdate()
that it can send to setState()
, to ensure the state transition flushes before any other handlers fire.
With material-ui I can access its property through ref, but FormsyText can't:
<TextField
ref="TodoTextField"
hintText="task name"
floatingLabelText="I will do"
errorText={this.state.data.get('textFieldError')}
value={this.state.data.get('textFieldValue')}
onChange={this._handleTextFieldChange}
this.refs.TodoTextField.focus(); //work as expected
With FormsyText
<FormsyText
ref="TodoTextField"
name="todoText"
required
hintText="task name"
value={this.state.data.get('textFieldValue')}
floatingLabelText="I will do" />
Uncaught TypeError: this.refs.TodoTextField.focus is not a function
I've some problems with the FormsySelect
component. When I use the example code from your readme, i get the following deprecated warnings:
Warning: "menuItems" property of "SelectField" has been deprecated.
to promote composability.
Warning: "menuItems" property of "DropDownMenu" has been deprecated.
Instead, use composability.
When I use the example from the Select Field component, it doesn't work. I think the problem is the onChange
property (#27).
Example code:
<FormsySelect
name="salutation"
floatingLabelText="Salutation"
onChange={this._changeSalutation}
required
style={{ textAlign: 'left' }}
tabIndex={1}
value={this.state.salutation}
>
{salutationList}
</FormsySelect>
Extract from package.json
:
"dependencies": {
"formsy-material-ui": "^0.3.4",
"formsy-react": "^0.17.0",
"material-ui": "^0.14.2",
}
Thanks for your help.
With multiple checkboxes as part of an array, Formsy throws an error because formsy-material-ui/checkbox automatically sets checked to be the value of the checkbox.
https://github.com/mbrookes/formsy-material-ui/blob/master/src/FormsyCheckbox.jsx#L30
Unfortunately if you are trying to save actual values in an array, this falls apart. Example:
<FormsyCheckbox name="tags[]" value="test" label="test"/>
<FormsyCheckbox name="tags[]" value="test2" label="test2"/>
<FormsyCheckbox name="tags[]" value="test3" label="test3"/>
Material UI enhanced switch component PropTypes require that checked be a boolean here:
https://github.com/callemall/material-ui/blob/master/src/enhanced-switch.jsx#L77
So in your component you need to allow for value to be a string and separate from the checked prop if both are defined.
propTypes of Validations and ValidationErrors should be oneOf string or object.
Hi I am trying to use FormsyDate DateField type input for form to format date.
But i am getting following error
Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render
method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
Please let me know what mite be wrong
Hey there, I'm wondering if you know of an easy way to add/remove form fields depending on the state of the form. For example, showing a new section of the form if a user selects a certain checkbox.
Thank you!
Hi ,
I am getting following error whenever we use formsy date
Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render
method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
I dont know how to fix this, please help
I npm installed twice to update to v0.3.0, and the package only contained the following:
Using the example from formsy-material-ui github page.
The other fields work but FormsyTime - value is not shown when time picked.
When using TimePicker itself, it works
Hi,
Since material-ui
v1.15.0-alpha.1, warning messages show up in browser console if we use FormsyText
(see below picture)
I made simple snippet to re-produce it here (just npm install
and npm run show-me
)
I could submit a simple PR to use onKeyDown
but I not sure whether it's enough so I file this issue
When using the Example code of formsy-material-ui, I am getting the following error. I am using 0.15.0-alpha.1 version of material-ui.
Warning: "onEnterKeyDown" property of "TextField" has been deprecated.
Use onKeyDown and check for keycode instead.
I think it will be something like FormsyText, but some harder than one. I mean this:
http://www.material-ui.com/#/components/auto-complete
Can you do it?
I used to use select2
with BS3
.
Have any Select Component
for this
?
disregard. till I find a way to fix
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.