fix: always use arrow functions for hooks to prevent scope hoisting

Author: b-zurg

src/components/Resizer/hooks/useTransition.ts

@@ -11,8 +11,7 @@ const transitionComponentMap: {
   none: Fade,
 };
 
-export function useTransition(collapseOptions?: CollapseOptions) {
-  return useMemo(() => transitionComponentMap[collapseOptions?.buttonTransition ?? 'fade'], [
+export const useTransition = (collapseOptions?: CollapseOptions) =>
+  useMemo(() => transitionComponentMap[collapseOptions?.buttonTransition ?? 'fade'], [
     collapseOptions,
   ]);
-}

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { moveCollapsedSiblings, moveSizes } from '../../helpers';
 import * as ReactDOM from 'react-dom';
 
-export function useCollapseSize({
+export const useCollapseSize = ({
   isReversed,
   movedSizes,
   minSizes,
@@ -18,8 +18,8 @@ export function useCollapseSize({
   setSizes: React.Dispatch<React.SetStateAction<number[]>>;
   setMovedSizes: React.Dispatch<React.SetStateAction<number[]>>;
   collapsedSize: number;
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     ({ size, idx }: { idx: number; size: number }) => {
       const offset = isReversed ? -(collapsedSize - size) : collapsedSize - size;
       const index = isReversed ? idx - 1 : idx;
@@ -41,4 +41,3 @@ export function useCollapseSize({
     },
     [isReversed, collapsedSize, movedSizes, minSizes, collapsedIndices, setMovedSizes, setSizes]
   );
-}

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

@@ -3,15 +3,14 @@ import { getRefSize } from '../../helpers';
 import { ChildPane } from '../useSplitPaneResize';
 import { SplitType } from '../..';
 
-export function useGetCurrentPaneSizes({
+export const useGetCurrentPaneSizes = ({
   childPanes,
   split,
 }: {
   childPanes: Pick<ChildPane, 'ref'>[];
   split: SplitType;
-}) {
-  return useCallback(() => childPanes.map(({ ref }): number => getRefSize({ split, ref })), [
+}) =>
+  useCallback(() => childPanes.map(({ ref }): number => getRefSize({ split, ref })), [
     childPanes,
     split,
   ]);
-}

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

@@ -1,9 +1,8 @@
 import { useCallback } from 'react';
 
-export function useGetIsPaneCollapsed({ collapsedIndices }: { collapsedIndices: number[] }) {
-  return useCallback(
+export const useGetIsPaneCollapsed = ({ collapsedIndices }: { collapsedIndices: number[] }) =>
+  useCallback(
     (paneIndex: number) =>
       collapsedIndices.length > 0 ? collapsedIndices.includes(paneIndex) : false,
     [collapsedIndices]
   );
-}

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

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { DragState } from '../effects/useDragState';
 import { moveCollapsedSiblings, moveSizes } from '../../helpers';
 
-export function useGetMovedSizes({
+export const useGetMovedSizes = ({
   sizes: originalSizes,
   isLtr,
   minSizes,
@@ -16,8 +16,8 @@ export function useGetMovedSizes({
   collapsedIndices: number[];
   isReversed: boolean;
   collapsedSize: number;
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     (dragState: DragState): number[] => {
       const sizes = [...originalSizes];
       const index = dragState.index;
@@ -44,4 +44,3 @@ export function useGetMovedSizes({
     },
     [collapsedIndices, collapsedSize, isLtr, isReversed, minSizes, originalSizes]
   );
-}

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

@@ -4,7 +4,7 @@ import { SplitPaneHooks } from '../..';
 /**
  * called at the end of a drag, sets the final size as well as runs the callback hook
  */
-export function useHandleDragFinished({
+export const useHandleDragFinished = ({
   setSizes,
   hooks,
   movedSizes,
@@ -13,9 +13,8 @@ export function useHandleDragFinished({
   setSizes: React.Dispatch<React.SetStateAction<number[]>>;
   movedSizes: number[];
   hooks?: SplitPaneHooks;
-}) {
-  return useCallback(() => {
+}) =>
+  useCallback(() => {
     setSizes(movedSizes);
     hooks?.onSaveSizes?.(movedSizes);
   }, [movedSizes, hooks, setSizes]);
-}

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

@@ -5,20 +5,19 @@ import { SplitPaneHooks } from '../..';
 /**
  * Callback that starts the drag process and called at the beginning of the dragging.
  */
-export function useHandleDragStart({
+export const useHandleDragStart = ({
   isReversed,
   hooks,
   beginDrag,
 }: {
   isReversed: boolean;
   hooks?: SplitPaneHooks;
   beginDrag: BeginDragCallback;
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     ({ index, position }: { index: number; position: ClientPosition }): void => {
       hooks?.onDragStarted?.();
       beginDrag({ position, index: isReversed ? index - 1 : index });
     },
     [beginDrag, hooks, isReversed]
   );
-}

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

@@ -1,7 +1,7 @@
 import { addArray } from '../../helpers';
 import React, { useCallback } from 'react';
 
-export function useRecalculateSizes({
+export const useRecalculateSizes = ({
   getCurrentPaneSizes,
   collapsedSize,
   collapsedIndices,
@@ -15,8 +15,8 @@ export function useRecalculateSizes({
   minSizes: number[];
   setMovedSizes: React.Dispatch<React.SetStateAction<number[]>>;
   setSizes: React.Dispatch<React.SetStateAction<number[]>>;
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     (initialSizes?: number[]) => {
       const curSizes = getCurrentPaneSizes();
       const ratio =
@@ -41,4 +41,3 @@ export function useRecalculateSizes({
     },
     [collapsedIndices, collapsedSize, getCurrentPaneSizes, setMovedSizes, setSizes]
   );
-}

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

@@ -1,18 +1,17 @@
 import React, { useCallback } from 'react';
 
-export function useToggleCollapse({
+export const useToggleCollapse = ({
   collapsedIndices,
   setCollapsed,
 }: {
   collapsedIndices: number[];
   setCollapsed: React.Dispatch<React.SetStateAction<number[]>>;
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     (index: number) => {
       collapsedIndices.includes(index)
         ? setCollapsed(collapsedIndices.filter(i => i !== index))
         : setCollapsed([...collapsedIndices, index]);
     },
     [collapsedIndices, setCollapsed]
   );
-}

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import * as ReactDOM from 'react-dom';
 import { moveSizes } from '../../helpers';
 
-export function useUncollapseSize({
+export const useUncollapseSize = ({
   isReversed,
   movedSizes,
   minSizes,
@@ -18,8 +18,8 @@ export function useUncollapseSize({
   setMovedSizes: React.Dispatch<React.SetStateAction<number[]>>;
   collapsedSize: number;
   collapsedIndices: number[];
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     ({ size, idx }: { size: number; idx: number }) => {
       const offset = isReversed ? -(size - 50) : size - 50;
       const index = isReversed ? idx - 1 : idx;
@@ -32,4 +32,3 @@ export function useUncollapseSize({
     },
     [collapsedIndices, collapsedSize, isReversed, minSizes, movedSizes, setMovedSizes, setSizes]
   );
-}

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

@@ -4,7 +4,7 @@ import { useUncollapseSize } from './useUncollapseSize';
 import { SplitPaneHooks } from '../..';
 import { Nullable } from '../../../../types/utilities';
 
-export function useUpdateCollapsedSizes({
+export const useUpdateCollapsedSizes = ({
   movedSizes,
   setCollapsedSizes,
   collapsedSizes,
@@ -20,8 +20,8 @@ export function useUpdateCollapsedSizes({
   unCollapseSize: ReturnType<typeof useUncollapseSize>;
   setCollapsedSizes: React.Dispatch<React.SetStateAction<Nullable<number>[]>>;
   hooks?: SplitPaneHooks;
-}) {
-  return useCallback(
+}) =>
+  useCallback(
     (indices: number[]) => {
       setCollapsedSizes(
         collapsedSizes.map((size, idx) => {
@@ -42,4 +42,3 @@ export function useUpdateCollapsedSizes({
     },
     [collapseSize, collapsedSizes, hooks, movedSizes, setCollapsedSizes, sizes, unCollapseSize]
   );
-}

src/components/SplitPane/hooks/effects/useDragState.ts

@@ -21,10 +21,10 @@ interface DragStateHandlers {
   onMouseEnter?: (event: MouseEvent) => void;
 }
 
-function useDragStateHandlers(
+const useDragStateHandlers = (
   isVertical: boolean,
   onDragFinished: (dragState: DragState) => void
-): DragStateHandlers {
+): DragStateHandlers => {
   const [isDragging, setIsDragging] = useState(false);
   const [dragStartPos, setDragStartPos] = useState<number | null>(null);
   const [currentPos, setCurrentPos] = useState<number | null>(null);
@@ -90,16 +90,16 @@ function useDragStateHandlers(
   );
 
   return { beginDrag, dragState, onMouseMove, onTouchMove, onMouseUp, onMouseEnter };
-}
+};
 
 interface UseDragStateReturn {
   dragState: DragState | null;
   beginDrag: BeginDragCallback;
 }
-export function useDragState(
+export const useDragState = (
   isVertical: boolean,
   onDragFinished: (dragState: DragState) => void
-): UseDragStateReturn {
+): UseDragStateReturn => {
   const {
     beginDrag,
     dragState,
@@ -115,4 +115,4 @@ export function useDragState(
   useEventListener('mouseenter', onMouseEnter);
 
   return { dragState, beginDrag };
-}
+};

src/components/SplitPane/hooks/memos/useChildPanes.ts

@@ -3,15 +3,15 @@ import * as React from 'react';
 import { ChildPane } from '../useSplitPaneResize';
 
 // converts all children nodes into 'childPane' objects that has its ref, key, but not the size yet
-export function useChildPanes({
+export const useChildPanes = ({
   paneRefs,
   children,
   minSizes,
 }: {
   paneRefs: React.MutableRefObject<Map<string, React.RefObject<HTMLDivElement>>>;
   children: React.ReactChild[];
   minSizes: number[];
-}) {
+}) => {
   const childPanes: Omit<ChildPane, 'size'>[] = useMemo(() => {
     const prevPaneRefs = paneRefs.current;
     paneRefs.current = new Map<string, React.RefObject<HTMLDivElement>>();
@@ -23,4 +23,4 @@ export function useChildPanes({
     });
   }, [children, minSizes, paneRefs]);
   return childPanes;
-}
+};

src/components/SplitPane/hooks/memos/useCollapseOptions.tsx

@@ -21,16 +21,16 @@ const getDefault = (props: {
 /**
  * function that returns a set of valid collapseOptions from uncertain input.
  */
-export function useCollapseOptions({
+export const useCollapseOptions = ({
   originalValue,
   ...orientationDetails
 }: {
   originalValue: Partial<CollapseOptions> | undefined | boolean;
   isVertical: boolean;
   isLtr: boolean;
   isReversed: boolean;
-}): Required<CollapseOptions> | undefined {
+}): Required<CollapseOptions> | undefined => {
   if (originalValue === undefined || originalValue === false) return undefined;
   if (originalValue === true) return getDefault(orientationDetails);
   return { ...getDefault(orientationDetails), ...originalValue };
-}
+};

src/components/SplitPane/hooks/memos/useCollapsedSize.ts

@@ -2,6 +2,5 @@ import { useMemo } from 'react';
 import { CollapseOptions } from '../../index';
 export const DEFAULT_COLLAPSE_SIZE = 50;
 
-export function useCollapsedSize({ collapseOptions }: { collapseOptions?: CollapseOptions }) {
-  return useMemo(() => collapseOptions?.collapsedSize ?? DEFAULT_COLLAPSE_SIZE, [collapseOptions]);
-}
+export const useCollapsedSize = ({ collapseOptions }: { collapseOptions?: CollapseOptions }) =>
+  useMemo(() => collapseOptions?.collapsedSize ?? DEFAULT_COLLAPSE_SIZE, [collapseOptions]);

src/components/SplitPane/hooks/memos/useCollapsedSizes.ts

@@ -1,16 +1,15 @@
 import { useMemo } from 'react';
 import { SplitPaneProps } from '../../index';
 
-export function useCollapsedSizes({
+export const useCollapsedSizes = ({
   collapsedSizes,
   children,
   collapse,
-}: Pick<SplitPaneProps, 'collapsedSizes' | 'children' | 'collapse'>) {
-  return useMemo(
+}: Pick<SplitPaneProps, 'collapsedSizes' | 'children' | 'collapse'>) =>
+  useMemo(
     () =>
       collapsedSizes?.length === children.length && !!collapse
         ? collapsedSizes
         : new Array(children.length).fill(null),
     [children.length, collapse, collapsedSizes]
   );
-}

src/components/SplitPane/hooks/memos/useIsCollapseReversed.ts

@@ -10,6 +10,5 @@ export const isCollapseDirectionReversed = (
     : false;
 };
 
-export function useIsCollapseReversed(collapseOptions?: Partial<CollapseOptions> | boolean) {
-  return useMemo(() => isCollapseDirectionReversed(collapseOptions), [collapseOptions]);
-}
+export const useIsCollapseReversed = (collapseOptions?: Partial<CollapseOptions> | boolean) =>
+  useMemo(() => isCollapseDirectionReversed(collapseOptions), [collapseOptions]);

src/components/SplitPane/hooks/memos/useIsLtr.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { Direction, SplitType } from '../../index';
 
-export function useIsLtr({ split, dir }: { dir?: Direction; split: SplitType }) {
-  return useMemo(() => (split === 'vertical' ? dir !== 'rtl' : true), [split, dir]);
-}
+export const useIsLtr = ({ split, dir }: { dir?: Direction; split: SplitType }) =>
+  useMemo(() => (split === 'vertical' ? dir !== 'rtl' : true), [split, dir]);

src/components/SplitPane/hooks/memos/useMinSizes.ts

@@ -5,7 +5,7 @@ import { CollapseOptions } from '../../index';
 /**
  * Returns the current actual minimum size of the panel.  This in some cases means the collapsed size.
  */
-export function useMinSizes({
+export const useMinSizes = ({
   minSizes,
   numSizes,
   collapsedIndices,
@@ -15,8 +15,8 @@ export function useMinSizes({
   minSizes?: number | number[];
   collapsedIndices: number[];
   collapseOptions?: CollapseOptions;
-}): number[] {
-  return useMemo(
+}): number[] =>
+  useMemo(
     () =>
       Array.from({ length: numSizes }).map((_child, idx) =>
         collapsedIndices.includes(idx)
@@ -25,4 +25,3 @@ export function useMinSizes({
       ),
     [numSizes, collapseOptions, collapsedIndices, minSizes]
   );
-}