From f75e0bddbfd1cc7036c57a870e1dd6b7436019be Mon Sep 17 00:00:00 2001
From: percy507 <percymong@163.com>
Date: Sun, 29 Jan 2023 15:58:28 +0800
Subject: [PATCH] feat: add classname `split-view-sash-dragging` for top-level
 container

---
 README.md                    | 39 ++++++++++++++++++------------------
 src/allotment.tsx            |  7 +++++++
 src/split-view/split-view.ts | 14 +++++++------
 3 files changed, 35 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<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);
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);