feat(ui-6240): accept collapsed status on resizer panel, during mounting and props change #901
Conversation
| # 2 Panel Stateful Example | ||
| # 3 Panel Stateful Example | ||
|
|
||
| Here's a stateful example of `DraggableResizer` with 2 panels. Because this example contained in a stateful wrapper the example code in the JSX tab is obscured. Try looking at the State tab to see state changes in real time. |
There was a problem hiding this comment.
There was a mismatch in the markdown text versus storybook fixture.
2 versus 3
…ing and props change
wiedld
force-pushed
the
ui-6240/draggablePanel-init-position
branch
from
6bc2d23 to
d9d798f
Compare
| /** Enables a 0.0 direction (Left/Up) Collapse button */ | ||
| isCollapsibleToLower?: boolean | ||
| /** Collapsed state observed from parent */ | ||
| collapsedLower?: boolean |
There was a problem hiding this comment.
Is this only an initial state that can be overriden by the collapse buttons? as in, when this prop is provided, can the user then override the collapse state by pressing the collapse buttons?
There was a problem hiding this comment.
yes, exactly. See the video.
And the parent can still pass a prop too. Such that the parent can ask for the panel to collapse. e.g. when we are in SQL editing, and want to collapse certain panels, and reopen as needed.
There was a problem hiding this comment.
would initialCollapsedLower be a better prop name to communicate that?
There was a problem hiding this comment.
it's both the initial, and any change based from the parent.
Use case:
- Qx builder is rendered
- user is editing flux. panel is init on expanded.
- user switches to SQL. which does not re-mount the panel. Instead, we pass a prop changing
collapse={true}. - panel collapses.
I also just thought of another use case. Let me make changes, and will ping you back once that's done.
2 participants
Part of influxdata/ui#6240
Changes
Want to have collapsed state be set-able by the parent.
See comment here: influxdata/ui#6240 (comment)
Vid
Screen.Recording.2022-11-08.at.2.40.50.PM.mov
Checklist