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

feat(ui-6240): accept collapsed status on resizer panel, during mounting and props change #901

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

wiedld
Copy link

@wiedld wiedld commented Nov 8, 2022

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

  • Updated documentation to reflect changes
  • Added entry to top of Changelog with link to PR (not issue)
  • Tests pass
  • Peer reviewed and approved
  • Signed CLA (if not already signed)


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.
Copy link
Author

Choose a reason for hiding this comment

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

There was a mismatch in the markdown text versus storybook fixture.
2 versus 3

Screen Shot 2022-11-08 at 1 54 57 PM

@wiedld wiedld force-pushed the ui-6240/draggablePanel-init-position branch from 6bc2d23 to d9d798f Compare November 8, 2022 23:51
@@ -19,8 +19,12 @@ import {getColorsFromGradient} from '../../Utils/colors'
export interface DraggableResizerHandleProps extends StandardFunctionProps {
/** Enables a 0.0 direction (Left/Up) Collapse button */
isCollapsibleToLower?: boolean
/** Collapsed state observed from parent */
collapsedLower?: boolean
Copy link
Contributor

Choose a reason for hiding this comment

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

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?

Copy link
Author

@wiedld wiedld Nov 9, 2022

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

Choose a reason for hiding this comment

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

would initialCollapsedLower be a better prop name to communicate that?

Copy link
Author

Choose a reason for hiding this comment

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

it's both the initial, and any change based from the parent.

Use case:

  1. Qx builder is rendered
  2. user is editing flux. panel is init on expanded.
  3. user switches to SQL. which does not re-mount the panel. Instead, we pass a prop changing collapse={true}.
  4. panel collapses.

I also just thought of another use case. Let me make changes, and will ping you back once that's done.

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.

2 participants