refactor(Dashboard): Split editor panes

Author: scottsut

frontend/src/app/components/SplitPane/Pane.tsx

@@ -0,0 +1,49 @@
+import { CSSProperties, LegacyRef, PureComponent, ReactNode } from 'react';
+
+interface PaneProps {
+  className: string;
+  children: ReactNode;
+  size?: string | number;
+  split?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+  eleRef: LegacyRef<HTMLDivElement>;
+}
+
+export class Pane extends PureComponent<PaneProps> {
+  render() {
+    const {
+      children,
+      className,
+      split,
+      style: styleProps,
+      size,
+      eleRef,
+    } = this.props;
+
+    const classes = ['Pane', split, className];
+
+    let style: CSSProperties = {
+      flex: 1,
+      position: 'relative',
+      outline: 'none',
+    };
+
+    if (size !== undefined) {
+      if (split === 'vertical') {
+        style.width = size;
+      } else {
+        style.height = size;
+        style.display = 'flex';
+      }
+      style.flex = 'none';
+    }
+
+    style = Object.assign({}, style, styleProps || {});
+
+    return (
+      <div ref={eleRef} className={classes.join(' ')} style={style}>
+        {children}
+      </div>
+    );
+  }
+}

frontend/src/app/components/SplitPane/Resizer.tsx

@@ -0,0 +1,65 @@
+import { Component, CSSProperties, MouseEvent, TouchEvent } from 'react';
+
+export const RESIZER_DEFAULT_CLASSNAME = 'Resizer';
+
+interface ResizerProps {
+  className: string;
+  onClick?: (e: MouseEvent<HTMLSpanElement>) => void;
+  onDoubleClick?: (e: MouseEvent<HTMLSpanElement>) => void;
+  onMouseDown: (e: MouseEvent<HTMLSpanElement>) => void;
+  onTouchStart: (e: TouchEvent<HTMLSpanElement>) => void;
+  onTouchEnd: (e: TouchEvent<HTMLSpanElement>) => void;
+  split?: 'vertical' | 'horizontal';
+  style?: CSSProperties;
+  resizerClassName?: string;
+}
+
+export class Resizer extends Component<ResizerProps> {
+  static defaultProps = {
+    resizerClassName: RESIZER_DEFAULT_CLASSNAME,
+  };
+
+  render() {
+    const {
+      className,
+      onClick,
+      onDoubleClick,
+      onMouseDown,
+      onTouchEnd,
+      onTouchStart,
+      resizerClassName,
+      split,
+      style,
+    } = this.props;
+    const classes = [resizerClassName, split, className];
+
+    return (
+      <span
+        role="presentation"
+        className={classes.join(' ')}
+        style={style}
+        onMouseDown={event => onMouseDown(event)}
+        onTouchStart={event => {
+          event.preventDefault();
+          onTouchStart(event);
+        }}
+        onTouchEnd={event => {
+          event.preventDefault();
+          onTouchEnd(event);
+        }}
+        onClick={event => {
+          if (onClick) {
+            event.preventDefault();
+            onClick(event);
+          }
+        }}
+        onDoubleClick={event => {
+          if (onDoubleClick) {
+            event.preventDefault();
+            onDoubleClick(event);
+          }
+        }}
+      />
+    );
+  }
+}