kaivi / riek Goto Github PK
View Code? Open in Web Editor NEWAn set of common form components for React, editable in-line
License: MIT License
An set of common form components for React, editable in-line
License: MIT License
With riek 1.1.0 and react ^16.12.0 I see this error in the browser console:
Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: RIEInput, RIENumber, RIESelect react-dom.development.js:12357
When editing if i hit ESC key the events after and before and not being called.
I need to create an action upon these events.
Thanks.
Hi,
i use RIENumber in my app. But it not work on Firefox browser.
http://kaivi.github.io/riek/ your demo doesn't work on Firefox browser
the RIEInput component assumes it is in loading mode as soon as you edit any value and assumes it is out of loading mode as soon as it receives a 'props' update.
This is not a robust mechanism for detecting loading state.
EDIT:
There should be an explicity property isLoading
in the component so we can tell if its loading or not.
I'm looking at the demo page and when I set the value of the number input to an odd number, the input accepts the change and doesn't warn me that the value is invalid. It is supposed to enforce value % 2 = 0
unless I am missing something?
Thanks for creating this - it's a great component.
Just a suggestion: on first use it wasn't clear that RIESelect needs a value
of {id: XXX, text:YYY}
rather than just the id
. It may be worth adding a note to the README.md.
Hi,
I did incidentally something similar at react-edit. I extracted it from my table implementation so that shaped the API somewhat.
I wonder if it would make sense to merge these components somehow. If it was possible to get the edit
wrapper to riek and port boolean to it (it's a little different there), that would allow me to deprecate react-edit in favor of a more established option.
The change function is called even if the field value is not changed, when the input field loses its focus. If I execute async db requests when the change event occurs, this will not be efficient. IMHO the change event should only be fired if the input field value is actually changed. What do you think ?
A user may have spent a long time entering new text in an input or text area field. If the user clicks somewhere else, and for some reason (e.g. maximum length exceeded) validation fails, all new text is lost as the field reverts to the non-editing state with old text.
Such a user experience is unacceptable, as a lot of time would have been wasted by the user and he or she would feel angry.
Therefore, if validation fails, the field should remain in editing state so that the user is given a chance to make corrections.
Hi,
I tried testing this on iPad Chrome. For some the tag editor seems broken (doesn't activate). The rest seems fine, though.
There are instances that the value should be a null with a place holder. I cant seems to find a way to do this. Any help will be greatly appreciated.
Thanks,
Chat.
Hi
I need to add word completion to some of my riek fields. Currently I am using Awesomplete [1] in my project, and according to the documentation a very simple setup would be, with no explicit Javascript needed (after including css and js):
<input class="awesomplete" list="mylist" />
<datalist id="mylist">
<option>Ada</option>
<option>Java</option>
<option>JavaScript</option>
<option>Brainfuck</option>
<option>LOLCODE</option>
<option>Node.js</option>
<option>Ruby on Rails</option>
</datalist>
However, it doesn't seem like riek preserves the list attribute. The field is defined:
<RIEInput change={propObj => this.onChange(index, propObj)}
className="awesomplete"
list="mylist"
propName="name"
value=""
{...validator} />
The Chrome inspection tool shows me that in editing mode the field is:
<input class="awesomplete" value="hat">
The list attribute is missing and awesomplete does not work. Is there some way to make this work or to add any other word completion to a riek field?
Thank you,
When I pass in an inline style to the style prop like:
<RIEInput
value={this.props.item.get('name')}
style={{
color: itemTypeColor,
textTransform: 'uppercase',
}}
propName={"itemName"}
change={itemNameChange}
/>
The color doesn't change and the text transform doesn't take effect.
For a string like "hello, world"
, when I click on it the corresponding input tag only shows "hello,"
.
I really like the idea of this project, however it definitely still needs some features + bugfixes. It seems that nothing has been contributed to the main codebase for almost a year now, even with PRs stacking up.
I'm just curious if this project, as it is, is dead and no longer maintained by @kaivi ? If so, I'd be interested in picking it up or at least helping with sifting through issues/PRs to merge on a different repo.
Currently, as far as the parent component is rendered, the RIEInput
component is also rendered so, even if the user was editing the input, the RIEInput
assumes that the parent has provided him with a new value
and hides the <input>
(producing mouse blur and so on).
So finally, I had to write a simple wrapper component which just holds a RIEInput
component, and implements shouldComponentUpdate(nextProps, nextState)
returning false
if the newProps.value === this.props.value
.
Of course, this makes imposible for the parent component to change other RIEInput
props such as `className, and so on, but it becomes much more easier to use.
So, shouldn't RIEInput
internally implement something like this?
When delete all of content in RIETextArea and save it. Then edit it, delete all of content and save again. Finally, edit it again, this textarea will be disabled. (ps: 'Add a Description' just is like a placeholder )
When component rerenders the RIEInput is deselected and all changes is lost. I've made a minimal demo of the bug here:
https://github.com/r0stig/riek-blur-bug
Follow the instructions in the README to recreate the bug.
I suspect the problem lies in https://github.com/kaivi/riek/blob/master/src/RIEBase.js#L67 where in this case we should not reset the state. But I'm not sure how to fix this without creating bugs in some other case.
Any ideas?
<RIEInput value={ data } />
is not clickable when data is falsey. Ideally this component should be clickable somehow to enter a value
Hello! It seems to me that RIEInput
requires a validation function or else it always fails validation.
Here https://github.com/kaivi/riek/blob/master/src/RIEBase.js#L52 if there is no validator set, the state is set as invalid. RIEInput
is never given a validator that defaults to true.
This is a breaking change from earlier versions and I suspect it's a bug because the docs mark validator
as optional.
Hi there,
I'm planning to use this plugin! Thanks a lot for making it!!!
My use case is the following an Edit pencil when highlighting and giving the option to Confirm (V) or Cancel (X) the action. Here are the examples...
WITHOUT
MouseOverWITH
MouseOverOther options also include showing highlighted values in drop-down values...
Line 94 in 3956a09
Hello,
is it possible to add support for react 15?
it seems that it sill work...
and it should be just about changing the dependencies to smth like :
"react": "^0.14.0 || ^15.0.0"
I want to give an id (as in the vanilla HTML attribute) to the rendered <span>
, but it seems like <RIEInput>
doesn't pass it through.
Maybe you could add custom render function in future , because I would like to use it with Highlighter to highlight for searching word when not editing. I managed to make it work like this with workaround but , still could be good idea for custom rendering ;)
In iOS Safari, the change handler doesn't fire upon element blur, likely because iOS handles blur events differently than a desktop browser.
Not sure the best way to handle this case. You could perhaps add a global window onClick/onTouchTap handler to pretend like the element has been blurred.
Steps to reproduce:
<RIETextArea />
with a change
prop bound to an event handler.Note that the field remains editable and the change handler does not fire.
Use --save-dev because you don't want to build and pack JS/CSS in production
Could you please elaborate on this, thanks
Hi,
Would it be possible to add a property to the RIEInput (or RIEBase ...) component to show it by default in editing mode?
-- Dylan
I get the following issue when trying to add values to a RIETags element:
Uncaught TypeError: _this2.props.value.add is not a function(โฆ)
If I try to remove a tag, I get the following:
newSet.delete is not a function
My change
event doesn't fire regardless.
Demo.js has a random console.log for the even numbers. Need to remove it.
Wondering if support for textareas exists or is on the roadmap.
Awesome library.
Steps:
Uncaught TypeError: value.split is not a function
at RIETextArea._this.renderNormalComponent (RIETextArea.js:63)
at RIETextArea.RIEStatefulBase._this.render (RIEStatefulBase.js:142)
at ReactCompositeComponent.js:796
The src for RIEBase has the prop isDisabled
, but it is currently no-op. The expected functionality would be to prevent firing startEditing
, or somehow prevent switching to the editing: true
state. I believe this could be accomplished by adding a single line to the startEditing method:
if(this.props.isDisabled) return;
I'm using React and Material UI table.
I want to make the table cells editable so I put a RIEInput in a cell of the table.
The problem is that after being edited, the RIEInput is disabled :
you can see that the 'loading' state remains to 'true' after leaving focus the element.
here is my code :
<TableRow key={index}>
<TableRowColumn>
<RIEInput
value={item.title}
change={(text) =>self.updateTitle(text, item.ID)}
propName="text"
validate={_.isString}
/>
</TableRowColumn>
</TableRow>
how can I manage this strange behavior?
When using the RIENumber element an error is thrown in Chrome:
RIEBase.js:36 Uncaught DOMException: Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.
And in firefox no errors are thrown, but the input does not become editable.
I guess this is just an iOS software tool, this DOES NOT RUN on Windows... will play with it and see what makes it tick.
If there is no data in the input field, the element vanishes and the user cannot put in a new value. E.g., in the demo, click the "Example text value" value, erase it, press enter, and you're hosed.
Is there a way to set in the input (for example RIENumber), an inline message with the errors returned from server after changing the input value? I could use client side validation of course but that doesn't guarantee nothing. Because reading through the documentation and demo i could only find that i can style it when invalid but not set an error message.
Thanks
It would be nice to have option groups on RIESelect.
How to I pass aditional parameter to change={this.dataChanged}, I need to pass the ID to update the change on the database
Thank You
if propName
is unset then call change
back with just value instead of state with [propName]
It would be nice if we could get more custom behavior for what happens when an input is in edit mode. For instance, cursor at end of line, start of line ( normal focus ) or all highlighted.
current implementation:
Line 56 in d32b464
which is invoked directly after focus() I noticed the behavior is different in a handful of other components
@kaivi Any plans to bump peerDeps to support react 16? I can do pull request if you'd like. Been using this in a project with React 16 for a month with no issues so far.
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.