Skip to content
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

Properly hide rows when ui:widget is hidden (bootstrap-4) #2175

Closed
wants to merge 2 commits into from

Conversation

pjb7687
Copy link

@pjb7687 pjb7687 commented Dec 20, 2020

Reasons for making this change

When ui:widget is hidden, add class d-none to Row so that the corresponding row is properly hided. This fix is for bootstrap-4, but basically the other themes can also be patched in the same way.

Checklist

  • I'm updating documentation
  • I'm adding or updating code
    • I've added and/or updated tests
    • I've updated docs if needed
  • I'm adding a new feature
    • I've updated the playground with an example use of the feature

@pjb7687
Copy link
Author

pjb7687 commented Dec 20, 2020

Related to #1683.

@@ -33,7 +33,7 @@ const ObjectFieldTemplate = ({
)}
<Container fluid className="p-0">
{properties.map((element: any, index: number) => (
<Row key={index} style={{ marginBottom: "10px" }}>
<Row key={index} style={{ marginBottom: "10px" }} className={(element.content.props.uiSchema["ui:widget"] === "hidden")?"d-none":undefined} >
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, the analogous code in @rjsf/core just says:

{props.properties.map(prop => prop.content)}

When ui:widget is hidden, is element.content equal to null / undefined? I'm trying to see if we can achieve the same effect without having to explicitly check for ui:widget equal to hidden, such as something like the following:

{element.content && <Row>...</Row>}

Copy link
Author

@pjb7687 pjb7687 Dec 21, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi,

  1. element.content exists for the hidden fields.
  2. The row object contains the hidden input element, and removing the entire row means no hidden input element is included in the form.

@Morriz
Copy link

Morriz commented Jun 12, 2021

bump

@epicfaace
Copy link
Member

Thanks for your PR @pjb7687 ! Merging this into #2405.

@epicfaace epicfaace closed this Jun 15, 2021
epicfaace added a commit that referenced this pull request Jun 15, 2021
…ss hidden prop to ObjectFieldTemplate (#2405)

* material-ui: hide grid for hidden fields

Implementations follows the one that already exists for ant design.

Closes #1974

* Update test snapshot to latest master

* Add comment

* Move ui:widget evaluation into core

* Add test for hidden in antd

* Hide hidden fields in bootstrap

Closes #2175

* Improve tests

* Remove whitespace for hidden in fluent-ui

* Update custom-templates.md

Co-authored-by: Ashwin Ramaswami <aramaswamis@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants