search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

<View> divider prop doesn't work well with conditional children #247

Closed vladoyoung closed 1 month ago

vladoyoung commented 2 months ago

Describe the bug The <View> component doesn't properly display dividers. If a child is passed, but hidden because of a conditional, a divider will still be displayed.

To Reproduce https://codesandbox.io/p/sandbox/headless-leaf-j6jn39

Expected behavior The dividers to conditionally show/hide depending on children visibility

Environment (please complete the following information):

blvdmitry commented 2 months ago

I'll check how far we can go with checking the component rendered output here. Seems like something possible to do and I think right now we only handle the case where you would do {!hide && <Component />} or <Hidden hide={hide}><Component /></Hidden> in case you need to show or hide it based on the viewport.

blvdmitry commented 2 months ago

Trying a few other approaches, I don't think there is a way in React right now to automatically detect if a component rendering returns a null or something else because it's wrapped in a vdom node anyways due to the function call.

I might research a different way to render dividers in View to address this, so would would be helpful to learn more about your case first and see if there are no other ways to approach the problem. Can you share more about it?

vladoyoung commented 2 months ago

No problem if there's no proper solution! My use case is pretty much the same as the sandbox example I sent. I have a bunch of components within a <View> that should render conditionally based on whether the parent is in edit mode or not. If there's nothing you can do because of technical limitations, is there a specific approach that you would recommend for displaying the dividers properly?

blvdmitry commented 1 month ago

In case you're passing the mode through props to the component, you can either add <Divider /> components manually instead of using a prop or wrap items with <Hidden hide={condition} /> and use it with divided.

In case children components are getting the mode through context, you can also consider moving Divider inside the child component: https://codesandbox.io/p/sandbox/affectionate-neco-s88pjg

vladoyoung commented 1 month ago

I've moved the Divider logic to be into the components that are conditional. All good now!

If it's not technically possible to do the original request, then no problem and you can close the feature request.