jquense / react-widgets Goto Github PK
View Code? Open in Web Editor NEWPolished, feature rich, accessible form inputs built with React
Home Page: http://jquense.github.io/react-widgets/
License: MIT License
Polished, feature rich, accessible form inputs built with React
Home Page: http://jquense.github.io/react-widgets/
License: MIT License
On the demo (website)[http://theporchrat.github.io/react-widgets/docs/#dropdown-list] the example says to use:
var DropdownList = require('react-widgets').DropdownList
which does not work. After 20 minutes of troubleshooting, I realized that the module is actually named DropDownlist
One or the other should be updated. I think DropdownList makes more sense.
v: 1.4.4
React has updated the way components are called. Using any widgets produces the warning: Warning: ComboBox is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
.
This is true for at least ComboBox, DropDownList, DateTimePicker, Calendar, ReplaceTransitionGroup, MonthView, NumberPicker, and Select.
Number picker will coerce eveything to a number, but == null || ''
is a reasonable value for the picker.
should only allow null when there is no min
prop set (ie. it is -Infinity
)
Lists, are not opening to the selected item, the start at the top of the list, instead of at the scroll position of the selected item. In IE (and occasionally in other browsers) the problem is the element is set set to visible, before the height is set, so it is height 0, which breaks the scrollTop
Suggestions aren't as good as they can be
suggest
and filter
don't work at all togetherI'd like to automate the .css creation process (create from my custom bootstrap theme & variables) and I need the .less files for that.
At the moment the build creates a single react-widgets.css
file under dist/css
- which makes sense. If you want individual component styles, just build the LESS for that component.
However, we use SASS (and hopefully inline in the future) and don't particularly want to add another loader to our build. We also don't use all of the widgets (per application, maybe two or three), so it's a bit of a waste to ship the entire react-widgets.css.
What are your thoughts on having the react-widgets.css
stylesheet, but also individual component stylesheets under dist/css
as well?
Hello
I stumbled upon a bug in the datepicker's behavior:
From now on, the datepicker keeps displaying the value picked in 2) and the user cannot clear it (when I clear the text input, onChange does not get called).
Can be reproduced on the DOC page demos.
I have been looking at adding it myself, but I thought I'd ask what you thought and if you have any directions on where to start?
I am attempting to install the DateTimePicker and the calendar and timepicker menus are not visible when their icons are clicked. Inspecting the html reveals that the div with classes rw-calendar-popup and rw-popup-container is set to visibility: hidden and height: 0px. Toggling the visibility and setting a height does reveal the calendar. I am using it with Bootstrap2 styles, could that be causing the issue?
Error: Cannot find module '../util/dom' from '/myproject/node_modules/react-widgets/lib/dropdowns'
at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:42:25
at load (/usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:60:43)
at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:66:22
at /usr/lib/node_modules/browserify/node_modules/resolve/lib/async.js:21:47
at Object.oncomplete (fs.js:107:15)
any idea what I might be doing wrong?
Calendar / datepicker seems to start week always from sunday even though 'fi' culture states firstDay
as monday.
I'm initializing the culture like:
var Globalize = require('globalize');
require('globalize/lib/cultures/globalize.culture.fi');
Globalize.culture('fi');
running Globalize.culture()
states that fi
culture is chosen but the dateinput component still starts week from sunday.
There are a few methods in _.js
that can be satisfied by es5 shim, and should be going forward. They require shims not already required by React, so it is difficult to require them on a minor bump.
Array.prototype.some
Array.prototype.filter
Array.prototype.reduce
(not used yet, but i always end up needing it)I'd like to be able to render the taglist externally on a multiselect component. Would you be open to a PR for this feature?
Hello! So I noticed this in the example page:
Looks quite bad to me... Why is not full width like the time picker? Moreover, number doesn't seem to be aligned. Also in FF there is that horizontal scrollbar. On the other hand, in Chrome there is no scrollbar but you cannot read it all.
Making some css changes:
.rw-popup-container.rw-calendar-popup {
//Remove right and width from here
}
//This is for align numbers to center inside the picker
.rw-calendar-grid td .rw-btn {
padding: 0;
}
.rw-calendar-grid .rw-btn {
text-align: center;
}
Then I get:
What do you think? I was trying to override the css but because I cannot remove the two properties from .rw-popup-container.rw-calendar-popup
(only override them), I am not sure what values to put but I can't achieve the same effect I achieved when deleting them...
Hi, I am using react-widgets in my project and I also happen to have automated policy tester tool in company I work for. Testing date picker control resulted in ~40 violations. So here it goes:
3 Each form control must have associated text.
35 The WAI-ARIA property aria-selected is not supported global property on element BUTTON that does not have a WAI-ARIA role.
1 The attribute aria-labeledby referenced by the element TABLE is not a valid WAI-ARIA State or Property.
1 Elements having an aria-active descendant property must also contain a tabindex attribute with a value greater than or equal 0
1 A WAI-ARIA widget must have an accessible name
And two potential violations:
2 Elements that use 'role' must contain required child elements for the role
Hey-
Nice set of widgets here! Would love to use for my project but I'm not seeing a way to change the name attribute on the input elements that the date time picker creates. Is there a way to do this?
edit: specifically looking at https://github.com/jquense/react-widgets/blob/master/lib/pickers/date-input.js#L53-L64 and it seems like the answer is no. Just wanted to make sure I'm not missing anything
I'm new to React and needed a library of ui widgets. When it came time to add a Datepicker to my form I did:
<DateTimePicker name="toDate" format='yyyy-MM-dd' time={false} />
Now, the "name" attribute gets pass down to the rendered input but when I choose a new date from the datepicker, it does not update this input value.
Am I missing something? The reason I need this value is because I do a regular form submit of a form.
This is because rw-input
is a text input, which doesn't allow multiple lines. Having a textarea
instead might be a decent solution, in combination with something like autosize which would allow a single line, but grow if the tag becomes too long for the parent.
What are your thoughts on this?
Hey again
I'm having a weird problem with the DatePicker that I can't quite pinpoint. Some of my unit tests keep failing with the React invariant violation: getDOMNode(): A component must be mounted to have a DOM node.
I tried to debug this as far as I could and it happens in ReplaceTransitionGroup's _tryFinish method, which tries to acquire the DOM node of an element that is unmounted. In general, I think the problem is that the animation can finish after the component has been unmounted, resulting in this error.
Do you think I'm doing something wrong? If not, would it be possible for the ReplaceTransitonGroup to check for the unmounted state prior to whatever it is trying to do with the DOM node?
As a side note, it seems like the DateTimePicker does not pass its duration property to the underlying Calendar component, which might be related to the issue I'm having (we always use 0 durations for animations), but it might not be the only problem.
Any help/suggestions would be most welcome.
This is a difficult bug to reproduce but I was able to do it on the demo page.
[email protected] works fine, so I've had to revert to it for now. But with [email protected], sometimes focusing on a widget or interacting with it causes the page to jump, occasionally outside of the view, which makes the feature unusable. Here is a video of me reproducing it.
react-widgets 1.4.3
When typing into a Number Picker field, I get a _ is not defined
error, and it points to react-widgets > lib > pickers > number-input.js
Upon examining the JS file, lodash is not declared, and adding , _ = require('lodash')
fixes the problem.
PS. Two things I noticed on the documentation page for NumberPicker when trying to fix this:
<NumberPicker
value={this.state.value}
onChange={this._change}
min='2'
max='10'/>
As it is, it produces the error: Warning: Invalid prop
valueof type
stringsupplied to
NumberPicker, expected
number.
I've put some DropdownList components into a react-bootstrap modal and an error is thrown when the escape key is pressed while a DropdownList component is closed and has focus.
TypeError: "Cannot read property 'next' of undefined" is thrown in the component's search
method.
The search method sets a timeout that expects the component to have a refs.list
but refs.list
does not exist because the modal has already closed and the modal and all of it's contents were removed from the DOM.
I'm thinking the escape key should do nothing when the dropdown list is in a closed state. What are your thoughts?
This is probably a documentation + my ignorance issue.
<head>
<script src="http://fb.me/react-0.12.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="react-widgets.js"></script>
</head>
Results in: Uncaught TypeError: Cannot read property 'createClass' of undefined. react-widgets:3
What is the correct way to use the browser build?
When a DateTimePicker value starts with a null date, the calendar drop down shows the current month, but the user cannot navigate months until a date is selected. Then the the user can click previous and next months.
How to reproduce:
This is a very minor bug :)
Widgets should expose abilities to override or extend default functionality in the same way inputs do, through some sort of event system. Such a system should have an event object that is preventable. This would give the user the ability to interject their own behaviour when they need something different.
example is issue #20 where there should be an onSearch
event where you can prevent the default, filter the data yourself and pass it back into the widget through props
.
this is different from our normal callbacks b/c the user has the option to not handle it at all, unlike something like onChange
where the consumer is required to handle the value or it doesn't change.
A little hard to understand with no visible clicks in the gif, but basically if you select an option via mouse click, then you have to lose focus on the input and then reclick the input to show the popup again.
I've spend a little bit looking into this to solve it for you, but the focus logic is a little hard for me to follow:
_focus(focused, e){
if (this.props.disabled === true)
return
this.setTimeout('focus', () => {
if (focused)
this.refs.input.focus()
else
this.refs.tagList && this.refs.tagList.clear()
if (focused !== this.state.focused){
focused
? this.open()
: this.close();
this.notify(focused ? 'onFocus' : 'onBlur', e)
this.setState({ focused: focused })
}
})
},
From what it looks like, focused
and this.state.focused
are both true
when the user clicks the input the second time. I assume a third var might be required?
Not sure, sorry mate!
'/combobox'
'/dropdown-list'
'./datepicker' etc
Thanks very much for putting this repo together. I'm using moment.js to format my datetimes, which are returned from the server in iso8601 format. Wondering if your time picker is TZ aware, or if I'll have to mutate the value to append the current user's TZ via moment. Cheers.
Currently when we set min / max, the back arrow will stop a month before the actual month.
To reproduce, visit the demo page and set min to May 2014, set max to November 2014, the back arrow will work until you hit June.
This seems to be an issue with the inRange
function in the date-math library.
They question is also on how to do RTL, maybe a good candidate for child Context?
The initial click doesn't do anything. if you manually clear the input and then select something and then use the clear X it works.
Hey guys
I came across a problem in IE8 when I tried using the Combobox component. The code tries to modify CSS properties via the removeProperty method (see src/util/dom.js, method called css) which is not supported in IE 8 (see e.g. http://help.dottoro.com/ljopsjck.php).
This causes an exception that prevents the Combobox from closing.
Could you tweak the method to use something else in IE8? Based on a short search, removeAttribute method could work.
Widgets that allow filtering (combobox, select) only allow you to do custom filtering against the text field, passed in function args should be able to operate on the dataItem itself.
Widgets should also have the option to completely delegate out the filtering functionality to a parent component, perhaps with an onFilter
event?
http://jquense.github.io/react-widgets -- not working
Hey there. Was wondering if you could supply a browser version of this library. I use rails-assets to gemify asset packages so right now using this lib would require manual download and packaging without version control. Cheers.
Hello guys
The current version (2.2.4) doesn't seem to work in IE8, there's an exception in util/dom/css.js line 36, causing dropdowns not to close.
Strangely enough, the code is different in src and in libs - in src it looks like the issue is fixed, but not in libs. Furthermore, the 2.2.4 commit modified a ton of files in libs, but not css.js. I didn't look at the build process, but this seems like maybe some build step was omitted or something.
Could someone please look into this?
Hi,
i have a server/client checksum problem when i use the Multiselect component.
I am using the component like this:
var data = [
{ id : "1", name : "foo", ...other props },
{ id : "2", name : "bar", ...other props}]
On the client is everything ok but if I checkout the source html sended by the server I have noticed that all the objects, and not just the name, is printed inside the selection list.
This issue make React to re-render everything client side.
Do you know which could be the cause?
Thanks!
Running a accessibility tool, I got several violations using Date and Time Picker. They are the following:
Violation: Each form control must have associated text.
Inputs like:
<input class="rw-input" type="text" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.0" aria-readonly="false" aria-disabled="true" value="" role="combobox" disabled="" placeholder="Start Date" aria-haspopup="true" aria-owns="myID_cal myID_time_listbox" aria-busy="false" aria-expanded="false">
Violation: The WAI-ARIA property identifier is not supported global property on element identifier that does not have a WAI-ARIA role.
Buttons like:
<button class="rw-btn" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.3.0.1.$month_2.1.$week_0.$day_0.0" type="button" disabled="" aria-disabled="true" aria-selected="false" tabindex="-1">01</button>
Violation: Elements having an aria-activedescendant property must also contain a tabindex attribute with a value greater than or equal to zero.
Tables like
`
Violation: A WAI-ARIA widget must have an accessible name (see message help text for details).
ul like:
<ul id="myID_time_listbox" class=" rw-list" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3.2.0.0" role="listbox" step="30" max="Thu Dec 31 2099 00:00:00 GMT+0100 (CET)" min="Mon Jan 01 1900 00:00:00 GMT+0100 (WMT)" style="max-height:200px;height:auto;" aria-hidden="true">
Violation: Use the HTML5 attribute or the associated WAI-ARIA attribute (not both) on any one input element.
Elements like:
<input class="rw-input" type="text" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.0" aria-readonly="false" aria-disabled="true" value="" role="combobox" disabled="" placeholder="Start Date" aria-haspopup="true" aria-owns="myID_cal myID_time_listbox" aria-busy="false" aria-expanded="false">
<button class="rw-btn" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.3.0.1.$month_2.1.$week_0.$day_4.0" type="button" disabled="" aria-disabled="true" aria-selected="false" tabindex="-1">05</button>
Potential violation: Elements that use 'role' must contain required child elements for the role.
Inputs like:
<input class="rw-input" type="text" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3.0" aria-readonly="false" aria-disabled="true" value="" role="combobox" disabled="" placeholder="End Date" aria-haspopup="true" aria-owns="myID_cal myID_time_listbox" aria-busy="false" aria-expanded="false">
Potential violation: WAI-ARIA widget elements must have a onkeydown or onkeypress event handler in order to be keyboard operable.
Elements like:
<ul id="myID_time_listbox" class=" rw-list" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.2.2.0.0" role="listbox" step="30" max="Thu Dec 31 2099 00:00:00 GMT+0100 (CET)" min="Mon Jan 01 1900 00:00:00 GMT+0100 (WMT)" style="max-height:200px;height:auto;" aria-hidden="true">
<tr data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3.3.0.1.$month_2.1.$week_1" role="row">
Potential violation: Use header elements where appropriate.
<div id="myID" class="start-end-calendar rw-datetimepicker rw-widget rw-state-disabled rw-has-both" data-reactid=".0.3.3.0.1.1.0.$=13:0.0.1.0.1.0.0.2.1.3" tabindex="-1" aria-label="End Date" aria-required="false">
With the great job you did with accessibility in this library and the keyboard navigation, I think it is worth to check those issues, they don't seem really complicated.
Thank you!
Working with the Combobox, it seems the only callback provided for a change in value is the onChange event.
The problem is that onChange is called with each progressive change in value, i.e. after every keypress. There's no information as to whether or not the value provided is intermediate or final.
There is an event that fires when the choice is final: onToggle. But onToggle only passes in the isOpen parameter, not the value of the widget.
Essentially what I'm looking for is some combination of onChange and onToggle. I would like a callback that fires on a new value when the widget closes.
Hi, this looks like a great library and exactly what I need for my project. I'm using server side rendering and encountering an error in dom.js line 7: , el = document.createElement('div')
because document
doesn't exist. Has anyone tried using this library with server side rendering or know of a fix/workaround for this?
Thanks!
Had to test this because we've run into it so many times in our own code :)
If you type 15.55 in a number picker:
And then hit backspace, when you hit backspace on 15.5
, it'll pop from 15.
to 15
. This is because the parseInt of 15.
is 15
, and so it replaces the input.
My solution to this so far is to confirm that both string and numeric representations of the input are different before allowing the component to update, but there may be a cleverer solution.
http://jquense.github.io/react-widgets/docs/#selectlist
It is handy that you will highlight (gray background) an item when you mouse over it. However, you can not select/click unless you click the mouse directly over the name or button/box. The highlight in the blank area gives a false impression.
Fx35 (dev channel)
Thanks for your lib; I may use it soon!
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.