search

zakodium-oss / react-science

React components and tools to build scientific applications.
https://react-science.pages.dev
MIT License
2 stars 6 forks source link

StackedPanel component #643

Closed stropitek closed 7 months ago

stropitek commented 7 months ago

API suggestion (if this one does not work let me know)

<StackedPanel>
  {({ openConfirmPanel, closePanel }) => (
    <Toolbar>
      <Toolbar.Item
        onClick={openConfirmPanel({
          title: 'title',
          content: <div>Panel content</div>,
        })}
      />
    </Toolbar>
  )}
</StackedPanel>

calling openConfirmPanel opens a new panel with the close and confirm buttons in the header, places title on the left in the header, and content below the header. It's possible to close the panel within the content by passing closePanel.

Bonus: think about wether this API can be used to stack more than 1 panel on top of the main content. The idea being that we can render in the content property another StackedPanel, it will slide over the entire panel again, not just the "content" part of it. I think this requires to add a react context so that it is the same stack of panels (as in blueprint's component's stack property) that is edited.

stropitek commented 7 months ago

The idea is to create the component so the stories written in https://github.com/zakodium-oss/react-science/pull/633 can be greatly simplified.