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.

Sign up for GitHub

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

Jump to bottom

feat: add classname split-view-sash-dragging to top-level container #536

Merged
merged 2 commits into from
Feb 2, 2023
Merged

feat: add classname split-view-sash-dragging to top-level container #536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f75e0bd
feat: add classname `split-view-sash-dragging` for top-level container
percy507 Jan 29, 2023
dd2ab68
docs: add new basic story `Visible With Animation`
percy507 Jan 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
39 changes: 20 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,22 +236,23 @@ These include:

For more involved styling you can target the component's child elements.

| Class | Description |
| :----------------------------- | :------------------------------------------------------------- |
| `.split-view` | Styles applied to the top-level container |
| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false} |
| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true} |
| `.split-view-separator-border` | Styles applied to the top-level container if `separator={true} |
| `.sash-container` | Styles applied to the sash container |
| `.sash` | Styles applied to the sash |
| `.sash-active` | Styles applied to the sash if being dragged |
| `.sash-disabled` | Styles applied to the sash if disabled |
| `.sash-horizontal` | Styles applied to the sash if vertical={false}` |
| `.sash-hover` | Styles applied to the sash if being hovered over |
| `.sash-mac` | Styles applied to the sash if running under macos |
| `.sash-maximum` | Styles applied to the sash if the pane is maximised |
| `.sash-minimum` | Styles applied to the sash if the pane is minimised |
| `.sash-vertical` | Styles applied to the sash if vertical={true}` |
| `.split-view-container` | Styles applied to the split view container |
| `.split-view-view` | Styles applied to the split view view |
| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |
| Class | Description |
| :----------------------------- | :-------------------------------------------------------------- |
| `.split-view` | Styles applied to the top-level container |
| `.split-view-horizontal` | Styles applied to the top-level container if `vertical={false}` |
| `.split-view-vertical` | Styles applied to the top-level container if `vertical={true}` |
| `.split-view-separator-border` | Styles applied to the top-level container if `separator={true}` |
| `.split-view-sash-dragging` | Styles applied to the top-level container if sash is dragging |
| `.sash-container` | Styles applied to the sash container |
| `.sash` | Styles applied to the sash |
| `.sash-active` | Styles applied to the sash if being dragged |
| `.sash-disabled` | Styles applied to the sash if disabled |
| `.sash-horizontal` | Styles applied to the sash if `vertical={false}` |
| `.sash-hover` | Styles applied to the sash if being hovered over |
| `.sash-mac` | Styles applied to the sash if running under macos |
| `.sash-maximum` | Styles applied to the sash if the pane is maximised |
| `.sash-minimum` | Styles applied to the sash if the pane is minimised |
| `.sash-vertical` | Styles applied to the sash if `vertical={true}` |
| `.split-view-container` | Styles applied to the split view container |
| `.split-view-view` | Styles applied to the split view view |
| `.split-view-view-visible` | Styles applied to the split view view if `visible={true}` |
7 changes: 7 additions & 0 deletions src/allotment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,13 @@ const Allotment = forwardRef<AllotmentHandle, AllotmentProps>(
onChange
);

splitViewRef.current.on("sashDragStart", () => {
containerRef.current?.classList.add("split-view-sash-dragging");
});
splitViewRef.current.on("sashDragEnd", () => {
containerRef.current?.classList.remove("split-view-sash-dragging");
});

splitViewRef.current.on("sashchange", (_index: number) => {
if (onVisibleChange && splitViewRef.current) {
const keys = childrenArray.map((child) => child.key as string);
Expand Down
14 changes: 8 additions & 6 deletions src/split-view/split-view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,17 +469,19 @@ export class SplitView extends EventEmitter implements Disposable {
current: e.currentX,
});

sash.on("start", (event: BaseSashEvent) =>
this.onSashStart(sashEventMapper(event))
);
sash.on("start", (event: BaseSashEvent) => {
this.emit("sashDragStart");
this.onSashStart(sashEventMapper(event));
});

sash.on("change", (event: BaseSashEvent) =>
this.onSashChange(sashEventMapper(event))
);

sash.on("end", () =>
this.onSashEnd(this.sashItems.findIndex((item) => item.sash === sash))
);
sash.on("end", () => {
this.emit("sashDragEnd");
this.onSashEnd(this.sashItems.findIndex((item) => item.sash === sash));
});

sash.on("reset", () => {
const index = this.sashItems.findIndex((item) => item.sash === sash);
Expand Down
12 changes: 12 additions & 0 deletions stories/basic.stories.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,15 @@
color: rgb(30, 30, 30);
overflow: visible;
}

/* Styles for VisibleWithAnimation demo */
.leftPane,
.rightPane {
transition: all 0.15s ease-in-out;
will-change: width;
}
.splitViewContainer:global(.split-view-sash-dragging) .leftPane,
.splitViewContainer:global(.split-view-sash-dragging) .rightPane {
/* disable animation while sash dragging */
transition: none;
}
36 changes: 36 additions & 0 deletions stories/basic.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,42 @@ export const Visible: Story<AllotmentProps> = (args) => {
};
Visible.args = {};

export const VisibleWithAnimation: Story<AllotmentProps> = (args) => {
const [visible, setVisible] = useState(true);

return (
<div>
<button
className={styles.button}
type="button"
onClick={() => {
setVisible((visible) => !visible);
}}
>
{visible ? "Hide" : "Show"}
</button>
<div className={styles.container}>
<Allotment
{...args}
className={styles.splitViewContainer}
snap
onVisibleChange={(_index, value) => {
setVisible(value);
}}
>
<Allotment.Pane visible={visible} className={styles.leftPane}>
<Content />
</Allotment.Pane>
<Allotment.Pane className={styles.rightPane}>
<Content />
</Allotment.Pane>
</Allotment>
</div>
</div>
);
};
VisibleWithAnimation.args = {};

export const OnReset: Story = (args) => {
const ref = useRef<AllotmentHandle>(null!);

Expand Down