feat: Add option to always show collapse button (#31)

Author: b-zurg

docs/README.md

@@ -93,7 +93,7 @@ It's a common need to want to collapse the left or initial panel to give more ro
 
 * `beforeToggleButton` - the element displayed as the collapse button **before** the panel is collapsed.  This is an purely aesthetic component.
 * `afterToggleButton` - the element displayed as the collapse button **after** the panel is collapsed.  This is an purely aesthetic component.
-* `buttonTransition` - the animation applied to the button appear/disappear.  Possible options are `zoom`, `grow`, or `fade`
+* `buttonTransition` - the animation applied to the button appear/disappear.  Possible options are `zoom`, `grow`, `fade`, or `none`.  You can try them out in the storybook.  `none` indicates to keep the button always visible.
 * `buttonTransitionTimeout` - the time (in millisecons) that the animation for the appear/disappear of the button will take place
 * `buttonPositionOffset` - a positive or negative number that will either add or subtract the flex-basis (starting at 100) of an invisible div before or after the button. e.g. 50 would make the "before" 150 and the "after" 50
 * `collapseDirection` - `'left' | 'right' | 'up' | 'down'` - this is used to indicate the direction that it should collapse.  By default collapsing happens left and up for the vertical and horizontal splits respectively.  Valid values for a vertical split are `left` or `right` and valid values for a horizontal split are `up` or `down`

src/components/Resizer/hooks/useTransition.ts

@@ -8,6 +8,7 @@ const transitionComponentMap: {
   fade: Fade,
   grow: Grow,
   zoom: Zoom,
+  none: Fade,
 };
 
 export function useTransition(collapseOptions?: CollapseOptions) {

src/components/Resizer/index.tsx

@@ -101,12 +101,13 @@ export const Resizer = ({
     () => Math.max(100 + (collapseOptions?.buttonPositionOffset ?? 0), 0),
     [collapseOptions]
   );
+  const isTransition = collapseOptions?.buttonTransition !== 'none';
   const collapseButton = collapseOptions ? (
     <ButtonContainer $isVertical={isVertical} grabberSize={grabberSizeWithUnit} isLtr={isLtr}>
       <ButtonPositionOffset style={{ flexBasis: preButtonFlex }} />
       <Transition
-        in={isHovered}
-        timeout={collapseOptions.buttonTransitionTimeout}
+        in={isTransition ? isHovered : true}
+        timeout={isTransition ? collapseOptions.buttonTransitionTimeout : 0}
         style={{ flex: '0 0 0', position: 'relative' }}
       >
         <ButtonWrapper

src/components/SplitPane/index.tsx

@@ -21,7 +21,7 @@ export type SplitPaneHooks = {
   onCollapse?: (collapsedSizes: Nullable<number>[]) => void;
 };
 
-export type TransitionType = 'fade' | 'grow' | 'zoom';
+export type TransitionType = 'fade' | 'grow' | 'zoom' | 'none';
 export type CollapseDirection = 'left' | 'right' | 'up' | 'down';
 
 export interface CollapseOptions {
@@ -32,7 +32,7 @@ export interface CollapseOptions {
   buttonPositionOffset?: number;
   collapseDirection?: CollapseDirection;
   collapseTransitionTimeout?: number;
-  collapsedSize: number;
+  collapsedSize?: number;
   overlayCss?: React.CSSProperties;
 }
 

stories/Collapse.stories.tsx

@@ -62,6 +62,16 @@ 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 buttonTransition = select(
+      'Button Transition',
+      {
+        fade: 'fade',
+        zoom: 'zoom',
+        grow: 'grow',
+        none: 'none',
+      },
+      'grow'
+    );
 
     return (
       <Header>
@@ -70,8 +80,8 @@ storiesOf('Collapsable Panes', module)
           collapseOptions={{
             beforeToggleButton: <Button>{collapseDirection === 'left' ? '⬅' : '➡'}</Button>,
             afterToggleButton: <Button>{collapseDirection === 'left' ? '➡' : '⬅'}</Button>,
-            collapsedSize: 40,
             collapseTransitionTimeout: collapseTransition,
+            buttonTransition,
             collapseDirection,
             buttonPositionOffset,
           }}
@@ -119,7 +129,6 @@ storiesOf('Collapsable Panes', module)
         collapseOptions={{
           beforeToggleButton: <Button>{collapseDirection === 'up' ? '⬆' : '⬇'}</Button>,
           afterToggleButton: <Button>{collapseDirection === 'up' ? '⬇' : '⬆'}</Button>,
-          collapsedSize: 40,
           collapseDirection,
         }}
         resizerOptions={{