Add editor split component (#198)

Add split and split divider component

src/components/common/split-divider/split-divider.scss

@@ -0,0 +1,7 @@
+.split-divider {
+  width: 10px;
+  background: white;
+  z-index: 1;
+  cursor: col-resize;
+  box-shadow: 3px 0 6px #e7e7e7;
+}

src/components/common/split-divider/split-divider.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import './split-divider.scss'
+
+export interface SplitDividerProps {
+  onGrab: () => void
+}
+
+export const SplitDivider: React.FC<SplitDividerProps> = ({ onGrab }) => {
+  return (
+    <div
+      onMouseDown={() => onGrab()}
+      onTouchStart={() => onGrab()}
+      className={'split-divider'}/>
+  )
+}

src/components/common/splitter/splitter.scss

@@ -0,0 +1,14 @@
+.splitter {
+  &.left {
+    flex: 0 1 100%;
+    min-width: 200px;
+  }
+
+  &.right {
+    flex: 1 0 200px;
+  }
+
+  &.separator {
+    display: flex;
+  }
+}

src/components/common/splitter/splitter.tsx

@@ -0,0 +1,63 @@
+import React, { ReactElement, useRef, useState } from 'react'
+import { ShowIf } from '../show-if/show-if'
+import { SplitDivider } from '../split-divider/split-divider'
+import './splitter.scss'
+
+export interface SplitterProps {
+  left: ReactElement
+  right: ReactElement
+  containerClassName?: string
+  showLeft: boolean
+  showRight: boolean
+}
+
+export const Splitter: React.FC<SplitterProps> = ({ containerClassName, left, right, showLeft, showRight }) => {
+  const [split, setSplit] = useState(50)
+  const realSplit = Math.max(0, Math.min(100, (showRight ? split : 100)))
+  const [doResizing, setDoResizing] = useState(false)
+  const splitContainer = useRef<HTMLDivElement>(null)
+
+  const recalculateSize = (mouseXPosition: number): void => {
+    if (!splitContainer.current) {
+      return
+    }
+    const x = mouseXPosition - splitContainer.current.offsetLeft
+
+    const newSize = x / splitContainer.current.clientWidth
+    setSplit(newSize * 100)
+  }
+
+  return (
+    <div ref={splitContainer} className={`flex-fill flex-row d-flex ${containerClassName || ''}`}
+      onMouseUp={() => setDoResizing(false)}
+      onTouchEnd={() => setDoResizing(false)}
+      onMouseMove={(mouseEvent) => {
+        if (doResizing) {
+          recalculateSize(mouseEvent.pageX)
+          mouseEvent.preventDefault()
+        }
+      }}
+      onTouchMove={(touchEvent) => {
+        if (doResizing) {
+          recalculateSize(touchEvent.touches[0].pageX)
+        }
+      }}
+    >
+      <ShowIf condition={showLeft}>
+        <div className={'splitter left'} style={{ flexBasis: `calc(${realSplit}% - 5px)` }}>
+          {left}
+        </div>
+      </ShowIf>
+      <ShowIf condition={showLeft && showRight}>
+        <div className='splitter separator'>
+          <SplitDivider onGrab={() => setDoResizing(true)}/>
+        </div>
+      </ShowIf>
+      <ShowIf condition={showRight}>
+        <div className='splitter right'>
+          {right}
+        </div>
+      </ShowIf>
+    </div>
+  )
+}