From a59c774eec366070614bd95033157839139b0263 Mon Sep 17 00:00:00 2001 From: percy507 Date: Fri, 3 Feb 2023 00:41:17 +0800 Subject: [PATCH] feat: add classname `split-view-sash-dragging` for top-level container (#536) --- README.md | 39 ++++++++++++++++---------------- src/allotment.tsx | 7 ++++++ src/split-view/split-view.ts | 14 +++++++----- stories/basic.stories.module.css | 12 ++++++++++ stories/basic.stories.tsx | 36 +++++++++++++++++++++++++++++ 5 files changed, 83 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 11061490..65a0b7f6 100644 --- a/README.md +++ b/README.md @@ -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}` | diff --git a/src/allotment.tsx b/src/allotment.tsx index e8268b0d..f352bd7e 100644 --- a/src/allotment.tsx +++ b/src/allotment.tsx @@ -249,6 +249,13 @@ const Allotment = forwardRef( 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); diff --git a/src/split-view/split-view.ts b/src/split-view/split-view.ts index a7346dff..4d7759fd 100644 --- a/src/split-view/split-view.ts +++ b/src/split-view/split-view.ts @@ -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); diff --git a/stories/basic.stories.module.css b/stories/basic.stories.module.css index c604129e..cfcbbc36 100644 --- a/stories/basic.stories.module.css +++ b/stories/basic.stories.module.css @@ -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; +} diff --git a/stories/basic.stories.tsx b/stories/basic.stories.tsx index 11c7a72f..ac897a2d 100644 --- a/stories/basic.stories.tsx +++ b/stories/basic.stories.tsx @@ -354,6 +354,42 @@ export const Visible: Story = (args) => { }; Visible.args = {}; +export const VisibleWithAnimation: Story = (args) => { + const [visible, setVisible] = useState(true); + + return ( +
+ +
+ { + setVisible(value); + }} + > + + + + + + + +
+
+ ); +}; +VisibleWithAnimation.args = {}; + export const OnReset: Story = (args) => { const ref = useRef(null!);