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

#536)
johnwalley · Feb 2, 2023 · a59c774 · a59c774
1 parent c15f646
commit a59c774
Show file tree

Hide file tree

Showing 5 changed files with 83 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);

diff --git 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
@@ -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!);