twisty / formsy-react-components Goto Github PK
View Code? Open in Web Editor NEWBootstrap components for a formsy-react form.
License: MIT License
Bootstrap components for a formsy-react form.
License: MIT License
Right now this codebase uses the ref="string"
pattern a lot:
https://github.com/twisty/formsy-react-components/search?utf8=โ&q=ref
But the React docs mention this approach will be deprecated in favor of callbacks:
https://facebook.github.io/react/docs/more-about-refs.html
Also, for some weird reason string refs have been causing errors in certain situations, while callback refs don't. Would you consider a PR to replace the strings by callbacks?
I just started getting Only a ReactOwner can have refs
errors when using the CheckboxGroup
component. What's weird is that it doesn't happen for any other component, including RadioGroup
. Does CheckboxGroup
do anything different that might be triggering the issue?
Here's the full 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).
This project have support for react 0.14?
It seems formsy-react has been abandoned by it's owner.
At the moment it still works, but there are plenty of issues with fixes submitted by the community that can't be released without the owner's participation.
See:
We should remove the form-control
class from range inputs.
See:
Suggestion of integration with react-select2-wrapper
define(function (require, exports, module) {/*jshint node:true */
'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require('react');
var ReactDOM = require('react-dom')
var Formsy = require('formsy-react');
var ComponentMixin = require('./mixins/component');
var Row = require('./row');
var select2 = require('select2')
var Select = React.createClass({
mixins: [Formsy.Mixin, ComponentMixin],
displayName: 'Select',
getDefaultProps: function(){
return {
data: [],
events: [
['change', 'changeValue'],
// ['select2:open', 'onOpen'],
// ['select2:close', 'onClose'],
['select2:select', 'changeValue'],
['select2:unselect', 'changeValue'],
],
options: {},
multiple: false
};
},
getInitialState: function() {
return {
el: null,
};
},
changeValue: function changeValue(event) {
console.log("changeValue", event);
var target = event.currentTarget;
var value;
if (this.props.multiple) {
value = [];
for (var i = 0; i < target.length; i++) {
var option = target.options[i];
if (option.selected) {
value.push(option.value);
}
}
} else {
value = target.value;
}
this.setValue(value);
this.props.onChange(this.props.name, value);
},
componentDidMount() {
if (this.props.select2 != undefined){
this.el = $(ReactDOM.findDOMNode(this));
this.el.select2(this.props.select2);
this.props.events.forEach(event => {
this.el.on(event[0], this.changeValue);
});
}
},
componentWillUnmount() {
if (this.props.select2 != undefined){
this.props.events.forEach(event => {
this.el.off(event[0], this.changeValue);
});
this.el.select2('destroy');
}
},
renderElement: function renderElement() {
var optionNodes = this.props.options.map(function (item, index) {
return React.createElement(
'option',
_extends({ key: index }, item, { label: null }),
item.label
);
});
return React.createElement(
'select',
_extends({
className: 'form-control'
}, this.props, {
id: this.getId(),
value: this.getValue(),
onChange: this.changeValue,
disabled: this.isFormDisabled() || this.props.disabled
}),
optionNodes
);
},
render: function render() {
if (this.getLayout() === 'elementOnly') {
return this.renderElement();
}
return React.createElement(
Row,
_extends({}, this.getRowProperties(), {
htmlFor: this.getId()
}),
this.renderElement(),
this.renderHelp(),
this.renderErrorMessage()
);
},
});
module.exports = Select;
});
Input is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
This happens on a few of my forms.. not sure why
It does not like multiple definitions of property value
in this code:
React.createElement(Checkbox, React.__spread({},
sharedProps,
{name: "checkbox1",
value: "Foo",
label: "Check me out",
rowLabel: "Checkbox (single)",
value: true})
),
Brought to my attention PR #35, we should really be able to render any valid attribute on individual options within HTML select elements.
See: option attributes and global attributes.
Buttons on input groups don't get disabled.
How about improve performance with pure-render-mixin
?
Hi, I updated formsy-react to 0.18.0 to make it satisfied with react 15. The problem now is that formsy-react-components does not work anymore. It might well be something I'm doing wrong, so just let me know if there is any info that I can give that might be helpful.
Hidden input elements fail to render in 0.6.5
render: function () {
return (
<Formsy.Form className="form-signin" role="form" onSubmit={this.handleSubmit} method="post">
<h3 className="form-signin-heading">Please sign in</h3>
<Input type="hidden" name="provider" value="WindowsAuthentication"/>
<Input className="form-control username" layout="vertical" type="text" name="username" placeholder="Username"/>
<Input className="form-control password" layout="vertical" type="password" name="password"
placeholder="Password"/>
<button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</Formsy.Form>
)
}
Uncaught TypeError: Cannot read property 'length' of undefined
hashString @ app.0.0.0.js:24317 (React.hashString)
getId @ app.0.0.0.js:24336 (Input.renderElement)
renderElement @ app.0.0.0.js:24177
render @ app.0.0.0.js:24138
Currently, the onChange
for <Input type="file" />
sets the formsy value to be event.currentTarget.value
(this is how all our other input types work).
This value
maybe isn't the most useful data the element collects.
Instead, using event.currentTarget.files
as the element's returned value could be more useful.
Considering changing this to be the default behaviour.
I'm thinking of bringing the playground app into the main repo, as it's a poor man's test suite for this project at the moment, and would benefit from being more closely tied to the source.
Is there a way or hiding the icons? I have looked at the source and can't see a way of doing it. Have I missed something? If not I will add this option in.
Current source:
layout: this.props.layout || 'horizontal',
Suggested source:
layout: this.props.layout || FormsyReactComponents.defaults.layout || 'horizontal'
Shall I send a PR?
I would like to pass in a tooltip as a node for my label but looking at the source code the label propType is set to a string. Would we be able to change it to accept and object as well?
<Input
name="cvv"
label={<OverlayTrigger placement='top' overlay={<Tooltip><strong>Holy guacamole!</strong></Tooltip>}><p>Check this info.</p></OverlayTrigger>}
type="text"
value={this.props.cvv}
/>
After upgrade to React v15, getting the following warning:
warning.js?0260:44 Warning: Input is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
This is happening only when Input is used without value prop (no initial value). I believe this could be fixed if initial value is assumed to be undefined or an empty string when none is provided (React v15 will also emit a warning if null is used).
Mentioned in #38
When using addonAfter, addtional styling for the Input component may be necessary to correctly display the error icon.
May be worth considering something like:
Will / Does this library support IE8? The current site that I am working on has a large IE8 audience and unfortunately cannot be ignored ๐
I only bring this up as an issue because I am personally starting to use the alpha. I started using this package a week ago and it has been a life saver. I have been updating some of the components to use the new classes. If you are cool with it I will fork and create a pull request when I think its ready. I am guessing it would need to live in a separate branch unless we added some type of switch that tells the package what components to use.
Anyway thanks for this either way!
Could you please move on to the newer release of React (v15)? In the moment no breaking error can be experienced when using the components in v15 environment.
The only problem right now is the package.json which requires v0.14 in its dependencies section. Moving it to devDependencies, npm-install won't pull React v0.14 into its modules tree and therefore it won't result in a conflict caused by the two React versions.
Seems like there is no way to disable autocomplete on forms? Please let me know if there is.
I think it would be better that it can scroll to first invalid form control when the form is not validate
From #31 (comment):
So in the component.js mixin there is a getId function which is trying to do a hash of stringifyed props.
this.hashString(JSON.stringify(this.props)
The props has a circular structure so cannot be stringifyed when we pass in a node. By just supplying an ID props the function wont run this code and I can use a node. Wondering if we need to make some changes to not call stringify on the props.
Here is the function: https://github.com/twisty/formsy-react-components/blob/master/src/mixins/component.js#L33-L35
Need to tweak the strategy for generating the ID.
How about make inputs more accessibility with aria-invalid
and aria-describedby
? โฟ
See https://medium.com/@roblcopeland/how-can-i-make-my-forms-a-little-more-accessible-1726d63210f2
It would be cool
I love this project. Thanks for doing a lot of work for me!
I'm confused by some things I see:
In input.js
:
changeValue: function changeValue(event) {
var value = event.currentTarget.value;
this.setValue(value);
this.props.onChange(this.props.name, value);
},
On the last line, why wouldn't you call this.props.onChange(event)
?
My motivation here is that I'm using redux-form, and trying to use this library alongside it, as formsy-react's validation is much better. redux-form
's onChange expects an event OR a value, and you are passing the input name and then the value, which seems odd.
I thought about modifying changeValue
myself, by creating my own React component. My idea was to use input.js
's Input
class as a mixin for my component (with a slightly modified changeValue
), but you can't use a react class as a mixin, you can only use a plain javascript object. input.js
does not expose a plain object. Would you consider exposing the plain javascript object?
anyone working with electron example using formsy?
When I set a addon with an element
addonBefore = { <i name="test" className='ion-person' /> }
It throws Uncaught TypeError: Converting circular structure to JSON
, when I doesn't set a ID
I found that error is on this line, by hashing the addon prop
https://github.com/twisty/formsy-react-components/blob/master/src/mixins/component.js#L119
But I don't have a "clean" solution for this now.
Thanks for the excellent library! Do you have any interest in adding a component to wrap the react-bootstrap-datetimepicker component? input[type=date] isn't well-supported yet, so I could work on a pull request if you are interested. I understand if you do not want to add any dependencies. Thanks!
solved -> my mistake
Is it possibile to merge latest master commits into bootstrap-4-dev branch? I saw that it still requires react .14 and formsy-react .17.
Thanks
node r.js -convert path/to/commonjs/modules/ path/to/output
See https://travis-ci.org/twisty/formsy-react-components/jobs/67965975
Error: Please run node with the --harmony flag!
Possibly related to jestjs/jest#243
Specifically for rows, I'd want to be able to arrange them on the page with arbitrary class names based on my grid, etc.
Right now we're using Bootstrap, but moving away from it is in the cards.
I can do a PR of what I think I'd do.
htmlFor does not work because "for" in html links with id attributes and not name of the form. If id is not specified we could default it to be the name, possibly prefixed?
Just an idea anyway!
https://github.com/twisty/formsy-react-components/blob/master/src/row.js#L76
Why? Ordinary labels, say for Input, do not.
Result is CheckboxGroup with rowLabel is bold, other form labels are not.
(Thanks for the project BTW, very useful.)
Hi, I've a application using ES6 classes, and I wish to know
if there is a way to use formsy-react-components not as mixin.
Best Regards
Just noticed this. The error class is applied to the containing div and not the element.
There is a mistyped line for the demo. First email input should be
<Input
{...sharedProps}
name="email"
value=""
label="Email"
type="email"
autoComplete="off"
placeholder="This is an email input."
validations="isEmail"
/>
Seems like formsy-react-components requires formsy version 0.13.1 but the current version is 0.14.1
I mean I'm unable to set refs to inner input element.
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.