-
Notifications
You must be signed in to change notification settings - Fork 2.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support for PrimeReact #2723
base: main
Are you sure you want to change the base?
Conversation
packages/playground/package.json
Outdated
@@ -48,6 +48,7 @@ | |||
"@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You'll need to bump this to v4.2.0
@@ -48,6 +48,7 @@ | |||
"@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you change this to "^4.0.0"
?
<!-- ABOUT THE PROJECT --> | ||
|
||
## About The Project | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Following the recommendation above you can use the same variables here
</label> | ||
)} | ||
{multiple ? ( | ||
<MultiSelect |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
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