feat: add classname split-view-sash-dragging for top-level container

johnwalley · Jan 29, 2023 · f75e0bd · f75e0bd
1 parent 5af7d85
commit f75e0bd
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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);