feat: Gcox/update splitter (#5458)

* Updated to new splitter

* Got local split working with emotion

* Moved to NPM package

* Fix include

* PR fixes

* Remove old props

* Add reset on double click

* PR fixes

Composer/packages/client/package.json

@@ -37,6 +37,7 @@
     "@bfc/ui-plugin-select-skill-dialog": "*",
     "@botframework-composer/types": "*",
     "@emotion/core": "^10.0.27",
+    "@geoffcox/react-splitter": "^2.0.3",
     "@reach/router": "^1.2.1",
     "@uifabric/fluent-theme": "^7.1.107",
     "@uifabric/icons": "^7.3.59",

Composer/packages/client/src/components/Page.tsx

@@ -6,13 +6,15 @@ import { jsx, css, SerializedStyles } from '@emotion/core';
 import React from 'react';
 import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 import { Toolbar, IToolbarItem } from '@bfc/ui-shared';
+import { useRecoilValue } from 'recoil';
+import { Split, SplitMeasuredSizes } from '@geoffcox/react-splitter';
 
-import { LeftRightSplit } from '../components/Split/LeftRightSplit';
 import { navigateTo, buildURL } from '../utils/navigation';
-import { PageMode } from '../recoilModel';
+import { dispatcherState, PageMode } from '../recoilModel';
 
 import { NavTree, INavTreeItem } from './NavTree';
 import { ProjectTree } from './ProjectTree/ProjectTree';
+import { renderThinSplitter } from './Split/ThinSplitter';
 
 // -------------------- Styles -------------------- //
 
@@ -124,6 +126,12 @@ const Page: React.FC<IPageProps> = (props) => {
     fileId,
   } = props;
 
+  const { setPageElementState } = useRecoilValue(dispatcherState);
+
+  const onMeasuredSizesChanged = (sizes: SplitMeasuredSizes) => {
+    setPageElementState(pageMode, { leftSplitWidth: sizes.primary });
+  };
+
   return (
     <div css={root} data-testid={props['data-testid']}>
       <div css={pageWrapper}>
@@ -133,7 +141,14 @@ const Page: React.FC<IPageProps> = (props) => {
           {onRenderHeaderContent && <div css={headerContent}>{onRenderHeaderContent()}</div>}
         </div>
         <div css={main} role="main">
-          <LeftRightSplit initialLeftGridWidth="20%" minLeftPixels={200} minRightPixels={800} pageMode={pageMode}>
+          <Split
+            resetOnDoubleClick
+            initialPrimarySize="20%"
+            minPrimarySize="200px"
+            minSecondarySize="800px"
+            renderSplitter={renderThinSplitter}
+            onMeasuredSizesChanged={onMeasuredSizesChanged}
+          >
             {useNewTree ? (
               <ProjectTree
                 defaultSelected={{
@@ -170,7 +185,7 @@ const Page: React.FC<IPageProps> = (props) => {
             >
               {children}
             </div>
-          </LeftRightSplit>
+          </Split>
         </div>
       </div>
     </div>

Composer/packages/client/src/components/Split/ThinSplitter.tsx

@@ -0,0 +1,55 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { RenderSplitterProps } from '@geoffcox/react-splitter';
+
+const splitVisualClassName = 'thin-split-visual';
+
+const HitArea = styled.div(({ horizontal, dragging }: { horizontal: boolean; dragging: boolean }) => ({
+  boxSizing: 'border-box',
+  outline: 'none',
+  overflow: 'hidden',
+  height: '100%',
+  width: '100%',
+  cursor: horizontal ? 'row-resize' : 'col-resize',
+  background: 'transparent',
+  [`&:hover .${splitVisualClassName}`]: {
+    background: dragging ? 'black' : 'gray',
+  },
+  userSelect: 'none',
+}));
+
+const getCenteredMargin = (size: number) => `${Math.max(0, Math.floor(size / 2) - 1)}px`;
+
+const Splitter = styled.div(
+  ({ horizontal, splitterSize, dragging }: { horizontal: boolean; splitterSize: number; dragging: boolean }) => ({
+    boxSizing: 'border-box',
+    outline: 'none',
+    overflow: 'hidden',
+    height: horizontal ? '1px' : '100%',
+    width: horizontal ? '100%' : '1px',
+    marginLeft: horizontal ? '0' : getCenteredMargin(splitterSize),
+    marginTop: horizontal ? getCenteredMargin(splitterSize) : '0',
+    background: dragging ? 'black' : 'silver',
+  })
+);
+
+/**
+ * The default splitter which provides a thin line within a possibly larger mouse hit area.
+ * @param props
+ */
+export const ThinSplitter = (props: RenderSplitterProps) => {
+  const { horizontal, pixelSize, dragging } = props;
+
+  return (
+    <HitArea dragging={dragging} horizontal={horizontal}>
+      <Splitter className={splitVisualClassName} dragging={dragging} horizontal={horizontal} splitterSize={pixelSize} />
+    </HitArea>
+  );
+};
+
+export const renderThinSplitter = (props: RenderSplitterProps) => {
+  return <ThinSplitter {...props} />;
+};