Add support for PrimeReact #2723
Conversation
packages/playground/package.json
Outdated
| "@rjsf/core": "^4.0.0", | ||
| "@rjsf/fluent-ui": "^4.0.0", | ||
| "@rjsf/material-ui": "^4.0.0", | ||
| "@rjsf/primereact": "https://gitpkg.now.sh/dchenk/react-jsonschema-form/packages/primereact?8a7eb51f2f92d691dd2901476c54dd88245fb9d3", |
There was a problem hiding this comment.
I added this to make sure that the playground works, and the version here can simply be updated upon the next release just like all the other @rjsf/* packages.
There was a problem hiding this comment.
Why lock it down to a specific version?
| # v4.1.0 (upcoming) | ||
|
|
||
| ## @rjsf/primereact | ||
| - Add support for the PrimeReact component library. |
There was a problem hiding this comment.
You'll need to bump this to v4.2.0
| "@rjsf/core": "^4.0.0", | ||
| "@rjsf/fluent-ui": "^4.0.0", | ||
| "@rjsf/material-ui": "^4.0.0", | ||
| "@rjsf/primereact": "https://gitpkg.now.sh/dchenk/react-jsonschema-form/packages/primereact?2ade66860050bf49cfa51680a35802ce6afb63b9", |
There was a problem hiding this comment.
Can you change this to "^4.0.0"?
| <!-- ABOUT THE PROJECT --> | ||
|
|
||
| ## About The Project | ||
|
|
There was a problem hiding this comment.
There is an extra blank line here that can be removed
| @@ -0,0 +1,54 @@ | |||
| <svg width="62" height="71" viewBox="0 0 62 71" fill="none" xmlns="http://www.w3.org/2000/svg"> | |||
There was a problem hiding this comment.
Does it make sense to move this to the src directory?
| required={required} | ||
| disabled={disabled} | ||
| readOnly={readonly} | ||
| value={value ? value : ""} |
There was a problem hiding this comment.
You can use value || "" instead
| onBlur && | ||
| (() => { | ||
| onBlur(id, processValue(schema, value)); | ||
| }) | ||
| } | ||
| onFocus={ | ||
| onFocus && | ||
| (() => { | ||
| onFocus(id, processValue(schema, value)); | ||
| }) | ||
| } | ||
| onChange={(event) => { | ||
| onChange(processValue(schema, getValue(event))); | ||
| }} |
There was a problem hiding this comment.
Recommend moving these above as fat-arrow function like the other libraries are doing and just using the variable here
| onBlur={ | ||
| onBlur && | ||
| (() => { | ||
| onBlur(id, processValue(schema, value)); | ||
| }) | ||
| } | ||
| onFocus={ | ||
| onFocus && | ||
| (() => { | ||
| onFocus(id, processValue(schema, value)); | ||
| }) | ||
| } | ||
| onChange={(event) => { | ||
| onChange(processValue(schema, getValue(event))); | ||
| }} |
There was a problem hiding this comment.
Following the recommendation above you can use the same variables here
| </label> | ||
| )} | ||
| {multiple ? ( | ||
| <MultiSelect |
There was a problem hiding this comment.
Recommend doing something like:
const Selector = multiple ? MultiSelect : Dropdown;
then using `<Selector ... /> here since all the props are identical
|
@dchenk @heath-freenome Any updates to this? since we do really want to user rjsf within our project which is written in primereaact |
|
@dchenk Due to the upcoming v5 release, the |
@heath-freenome do you want to take over from here? I won't have capacity in the near future to see this through. |
|
@dchenk I'm pretty busy just getting 5.0 ready. Once I have finished writing up the migration guide, you hopefully could make the necessary changes. |
|
@dchenk Ok, v5 beta has landed. There are some new templates that will hopefully make things a little easier. See the 5.x migration guide as well as the expanded custom templates documentation |
4 participants
Reasons for making this change
This PR adds support for the PrimeReact library for the form theme. It's a popular library and is used by thousands of projects. The GitHub repo: https://github.com/primefaces/primereact
Checklist