fix: Resizer grabbable size option now applied correctly (#33)

Additionally: 

* build: Switched back to styled-components because v5 is very fast

* fix: Reversed collapsing applied to wrong panels

Author: b-zurg

package-lock.json

@@ -50,9 +50,8 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.28",
-    "@emotion/styled": "^10.0.27",
-    "@material-ui/core": "^4.10.2"
+    "@material-ui/core": "^4.10.2",
+    "styled-components": "^5.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.10.2",
@@ -66,6 +65,7 @@
     "@storybook/theming": "^5.3.19",
     "@types/react": "^16.9.36",
     "@types/react-dom": "^16.9.8",
+    "@types/styled-components": "^5.1.0",
     "babel-loader": "^8.1.0",
     "husky": "^4.2.5",
     "react": "^16.13.1",

package.json

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { SplitType } from './SplitPane';
-import styled from '@emotion/styled';
-import { css } from '@emotion/core';
 import { useMergeClasses } from '../hooks/useMergeClasses';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
 
 const DEFAULT_COLLAPSE_TRANSITION_TIMEOUT = 500;
 const verticalCss = css`

src/components/Pane.tsx

@@ -1,5 +1,4 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import styled, { css } from 'styled-components';
 
 type OrientationProps = {
   $isVertical: boolean;
@@ -19,27 +18,20 @@ export const ButtonWrapper = styled.div<OrientationProps>`
 `;
 
 interface ButtonContainerProps extends OrientationProps {
-  grabberSize: string | null;
-  isLtr: boolean;
+  $grabberSize: string | null;
+  $isLtr: boolean;
 }
 export const ButtonContainer = styled.div<ButtonContainerProps>`
+  z-index: 3;
   position: absolute;
-  ${props => (props.$isVertical ? topBottomCss : leftRightCss)}
-  ${props => (props.$isVertical ? 'width: 5rem' : 'height: 5rem')};
-  transform: ${props =>
-    props.$isVertical
-      ? `translateX(${props.isLtr ? '-' : ''}50%) ${
-          props.grabberSize ? `translateX(calc(${props.grabberSize} / 2))` : ''
-        }`
-      : `translateY(${props.isLtr ? '-' : ''}50%) ${
-          props.grabberSize ? `translateY(calc(${props.grabberSize} / 2))` : ''
-        }`};
+  overflow: initial;
   display: flex;
   flex-direction: column;
   align-items: center;
-  overflow: hidden;
-  z-index: 3;
   justify-content: center;
+
+  ${props => `${props.$isVertical ? 'width' : 'height'}: ${props.$grabberSize}`};
+  ${props => (props.$isVertical ? topBottomCss : leftRightCss)}
 `;
 
 interface GrabberProps extends OrientationProps {

src/components/Resizer/helpers.tsx

@@ -10,7 +10,7 @@ import {
 } from './helpers';
 import { useMergeClasses } from '../../hooks/useMergeClasses';
 import { CollapseOptions, ResizerOptions } from '../SplitPane';
-import styled from '@emotion/styled';
+import styled from 'styled-components';
 import { useTransition } from './hooks/useTransition';
 
 const ButtonPositionOffset = styled.div`
@@ -103,7 +103,7 @@ export const Resizer = ({
   );
   const isTransition = collapseOptions?.buttonTransition !== 'none';
   const collapseButton = collapseOptions ? (
-    <ButtonContainer $isVertical={isVertical} grabberSize={grabberSizeWithUnit} isLtr={isLtr}>
+    <ButtonContainer $isVertical={isVertical} $grabberSize={grabberSizeWithUnit} $isLtr={isLtr}>
       <ButtonPositionOffset style={{ flexBasis: preButtonFlex }} />
       <Transition
         in={isTransition ? isHovered : true}

src/components/Resizer/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import styled, { css } from 'styled-components';
 import { CollapseOptions, SplitType } from '.';
 import { Nullable } from '../../types/utilities';
 

src/components/SplitPane/helpers.ts

@@ -27,7 +27,7 @@ export function useCollapseSize({
       moveSizes({ sizes, index, offset, minSizes, collapsedIndices, collapsedSize });
       moveCollapsedSiblings({
         offset,
-        index: idx,
+        index,
         isReversed,
         collapsedIndices,
         minSizes,

src/components/SplitPane/hooks/callbacks/useCollapseSize.ts

@@ -62,6 +62,7 @@ storiesOf('Collapsable Panes', module)
     const collapseDirection = select('Direction', { left: 'left', right: 'right' }, 'left');
     const minSizes = object('Minimum Sizes', [50, 50, 50, 50]);
     const collapseTransition = number('Collapse Transition Speed (ms)', 500);
+    const grabberSize = number('Grabber Size (px)', 10, { min: 1, max: 100, range: true });
     const buttonTransition = select(
       'Button Transition',
       {
@@ -87,7 +88,7 @@ storiesOf('Collapsable Panes', module)
           }}
           minSizes={minSizes}
           resizerOptions={{
-            grabberSize: '1rem',
+            grabberSize,
           }}
           hooks={{
             onCollapse: action(`collapsedSizes`),