create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/AppTable/table/grid/useTableGridRuntimeSettings.ts

@@ -0,0 +1,49 @@
+import { useMemo, useRef } from 'react'
+import { type GridSettings } from 'handsontable'
+
+type TableGridRuntimeCallback = (
+  this: unknown,
+  ...arrArguments: unknown[]
+) => unknown
+
+/**
+ * 为 Handsontable 顶层回调配置提供稳定函数引用。
+ *
+ * React 重新渲染时会重新创建 cells、rowHeaders 和各类 Hook 函数。若直接把这些
+ * 新函数交给 updateSettings，即使业务数据或高度没有改变，Handsontable 仍会执行
+ * 一次完整重绘。桥接函数只创建一次，执行时再从 Ref 读取最新回调，因此同时避免
+ * 多余重绘和旧闭包问题；非函数配置仍由运行时差量比较决定是否更新。
+ */
+export function useTableGridRuntimeSettings(
+  objSettings: GridSettings
+): GridSettings {
+  const objLatestSettingsRef = useRef(objSettings)
+  const objCallbackBridgesRef = useRef(
+    new Map<PropertyKey, TableGridRuntimeCallback>()
+  )
+  objLatestSettingsRef.current = objSettings
+
+  return useMemo(() => {
+    const objRuntimeSettings: GridSettings = {}
+    Reflect.ownKeys(objSettings).forEach((objKey) => {
+      const objValue = Reflect.get(objSettings, objKey)
+      if (typeof objValue !== 'function') {
+        Reflect.set(objRuntimeSettings, objKey, objValue)
+        return
+      }
+
+      let fnBridge = objCallbackBridgesRef.current.get(objKey)
+      if (!fnBridge) {
+        fnBridge = function (this: unknown, ...arrArguments: unknown[]) {
+          const fnLatest = Reflect.get(objLatestSettingsRef.current, objKey)
+          return typeof fnLatest === 'function'
+            ? Reflect.apply(fnLatest, this, arrArguments)
+            : undefined
+        }
+        objCallbackBridgesRef.current.set(objKey, fnBridge)
+      }
+      Reflect.set(objRuntimeSettings, objKey, fnBridge)
+    })
+    return objRuntimeSettings
+  }, [objSettings])
+}

package/template/src/components/AppTable/table/index.ts

@@ -0,0 +1,4 @@
+export * from './components'
+export * from './controller'
+export * from './grid'
+export * from './layout'

package/template/src/components/AppTable/table/layout/TablePanels.tsx

@@ -0,0 +1,389 @@
+import {
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { type TableRow } from '@/components/AppTable/engine/shared/types'
+import type { ResolvedTableComponentProps } from '../../config'
+import { useAppTableMessages } from '../../messages'
+import type { ReturnTypeOfUseResizablePanel } from './types'
+import type { useTablePanels } from './useTablePanels'
+
+interface ITableBottomPanelProps {
+  bVisible: boolean
+  nHeight: number
+  bResizable: boolean
+  strTitle?: string
+  bClosable?: boolean
+  objResize: ReturnTypeOfUseResizablePanel
+  fnOnClose: () => void
+  children: ReactNode
+}
+
+function TableBottomPanel({
+  bVisible,
+  nHeight,
+  bResizable,
+  strTitle,
+  bClosable,
+  objResize,
+  fnOnClose,
+  children,
+}: ITableBottomPanelProps) {
+  const objMessages = useAppTableMessages()
+  const strTitleId = useId()
+  if (!bVisible) return null
+  return (
+    <aside
+      data-slot='table-bottom-panel'
+      aria-labelledby={strTitle ? strTitleId : undefined}
+      aria-label={strTitle ? undefined : objMessages.strBottomPanel}
+      className='relative flex shrink-0 flex-col border-t bg-background'
+      style={{ height: nHeight }}
+    >
+      {bResizable ? (
+        <div
+          role='separator'
+          tabIndex={0}
+          aria-orientation='horizontal'
+          aria-label={objMessages.strResizeBottomPanelAriaLabel}
+          aria-valuemin={objResize.nMinSize}
+          aria-valuemax={objResize.nMaxSize}
+          aria-valuenow={objResize.nSize}
+          className='absolute inset-x-0 top-0 z-10 h-1 -translate-y-1/2 cursor-row-resize touch-none outline-none focus-visible:bg-ring'
+          onPointerDown={objResize.fnStartResize}
+          onKeyDown={objResize.fnHandleResizeKeyDown}
+        />
+      ) : null}
+      {strTitle || bClosable ? (
+        <header className='flex h-10 items-center justify-between border-b px-3'>
+          {strTitle ? <strong id={strTitleId}>{strTitle}</strong> : <span />}
+          {bClosable ? (
+            <Button
+              type='button'
+              variant='ghost'
+              size='icon-sm'
+              aria-label={objMessages.fnClosePanelAriaLabel(
+                strTitle || objMessages.strBottomPanel
+              )}
+              onClick={fnOnClose}
+            >
+              <X />
+            </Button>
+          ) : null}
+        </header>
+      ) : null}
+      <div className='min-h-0 flex-1 overflow-auto p-3'>{children}</div>
+    </aside>
+  )
+}
+
+interface ITableRightPanelProps {
+  bVisible: boolean
+  objWidth: number | string
+  bResizable: boolean
+  strTitle?: string
+  bClosable: boolean
+  objResize: ReturnTypeOfUseResizablePanel
+  fnOnClose: () => void
+  children: ReactNode
+}
+
+const TABLE_MOBILE_QUERY = '(max-width: 760px)'
+const TABLE_FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',')
+let nTableBodyScrollLocks = 0
+let strTableBodyOverflow = ''
+
+function fnAcquireTableBodyScrollLock() {
+  if (nTableBodyScrollLocks === 0) {
+    strTableBodyOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+  }
+  nTableBodyScrollLocks += 1
+  let bReleased = false
+  return () => {
+    if (bReleased) return
+    bReleased = true
+    nTableBodyScrollLocks = Math.max(0, nTableBodyScrollLocks - 1)
+    if (nTableBodyScrollLocks === 0) {
+      document.body.style.overflow = strTableBodyOverflow
+    }
+  }
+}
+
+function TableRightPanel({
+  bVisible,
+  objWidth,
+  bResizable,
+  strTitle,
+  bClosable,
+  objResize,
+  fnOnClose,
+  children,
+}: ITableRightPanelProps) {
+  const objMessages = useAppTableMessages()
+  const strTitleId = useId()
+  const objPanelRef = useRef<HTMLElement>(null)
+  const [bMobile, fnSetMobile] = useState(false)
+  const { fnSyncRenderedSize } = objResize
+
+  useEffect(() => {
+    if (typeof window.matchMedia !== 'function') return
+    const objMedia = window.matchMedia(TABLE_MOBILE_QUERY)
+    const fnSync = () => fnSetMobile(objMedia.matches)
+    fnSync()
+    objMedia.addEventListener('change', fnSync)
+    return () => objMedia.removeEventListener('change', fnSync)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (!bVisible || !bResizable || typeof objWidth !== 'string') return
+    const objPanel = objPanelRef.current
+    if (!objPanel) return
+    const fnSyncWidth = () => {
+      const nWidth = objPanel.getBoundingClientRect().width
+      if (nWidth > 0) fnSyncRenderedSize(nWidth)
+    }
+    fnSyncWidth()
+    const objObserver = new ResizeObserver(fnSyncWidth)
+    objObserver.observe(objPanel)
+    return () => objObserver.disconnect()
+  }, [bResizable, bVisible, fnSyncRenderedSize, objWidth])
+
+  useEffect(() => {
+    if (!bVisible || !bMobile) return
+    const objPreviousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : undefined
+    const fnReleaseScrollLock = fnAcquireTableBodyScrollLock()
+    const fnHandleKeyDown = (objEvent: KeyboardEvent) => {
+      if (objEvent.key === 'Escape' && bClosable) {
+        objEvent.preventDefault()
+        fnOnClose()
+        return
+      }
+      if (objEvent.key !== 'Tab') return
+      const arrFocusable = [
+        ...(objPanelRef.current?.querySelectorAll<HTMLElement>(
+          TABLE_FOCUSABLE_SELECTOR
+        ) ?? []),
+      ]
+      if (!arrFocusable.length) {
+        objEvent.preventDefault()
+        objPanelRef.current?.focus()
+        return
+      }
+      const objFirst = arrFocusable[0]!
+      const objLast = arrFocusable[arrFocusable.length - 1]!
+      if (objEvent.shiftKey && document.activeElement === objFirst) {
+        objEvent.preventDefault()
+        objLast.focus()
+      } else if (!objEvent.shiftKey && document.activeElement === objLast) {
+        objEvent.preventDefault()
+        objFirst.focus()
+      }
+    }
+    document.addEventListener('keydown', fnHandleKeyDown, true)
+    window.requestAnimationFrame(() => objPanelRef.current?.focus())
+    return () => {
+      document.removeEventListener('keydown', fnHandleKeyDown, true)
+      fnReleaseScrollLock()
+      if (objPreviousFocus?.isConnected) objPreviousFocus.focus()
+    }
+  }, [bClosable, bMobile, bVisible, fnOnClose])
+
+  if (!bVisible) return null
+  return (
+    <>
+      {bMobile ? (
+        <div
+          aria-hidden='true'
+          className='fixed inset-0 z-40 cursor-default bg-black/35'
+          onClick={bClosable ? fnOnClose : undefined}
+        />
+      ) : null}
+      <aside
+        ref={objPanelRef}
+        data-slot='table-right-panel'
+        role={bMobile ? 'dialog' : 'complementary'}
+        aria-modal={bMobile ? true : undefined}
+        aria-labelledby={strTitle ? strTitleId : undefined}
+        aria-label={strTitle ? undefined : objMessages.strRightPanel}
+        tabIndex={-1}
+        className={cn(
+          'relative z-20 flex min-h-0 shrink-0 flex-col border-l bg-background outline-none',
+          bMobile &&
+            'fixed inset-y-0 end-0 z-50 max-w-[calc(100vw-2rem)] shadow-xl'
+        )}
+        style={{ width: objWidth }}
+      >
+        {bResizable && !bMobile ? (
+          <div
+            role='separator'
+            tabIndex={0}
+            aria-orientation='vertical'
+            aria-label={objMessages.strResizeRightPanelAriaLabel}
+            aria-valuemin={objResize.nMinSize}
+            aria-valuemax={objResize.nMaxSize}
+            aria-valuenow={objResize.nSize}
+            className='absolute inset-y-0 start-0 z-10 w-1 -translate-x-1/2 cursor-col-resize touch-none outline-none focus-visible:bg-ring'
+            onPointerDown={objResize.fnStartResize}
+            onKeyDown={objResize.fnHandleResizeKeyDown}
+          />
+        ) : null}
+        {strTitle || bClosable ? (
+          <header className='flex h-11 shrink-0 items-center justify-between border-b px-3'>
+            {strTitle ? <strong id={strTitleId}>{strTitle}</strong> : <span />}
+            {bClosable ? (
+              <Button
+                type='button'
+                variant='ghost'
+                size='icon-sm'
+                aria-label={objMessages.fnClosePanelAriaLabel(
+                  strTitle || objMessages.strRightPanel
+                )}
+                onClick={fnOnClose}
+              >
+                <X />
+              </Button>
+            ) : null}
+          </header>
+        ) : null}
+        <div className='min-h-0 flex-1 overflow-auto p-3'>{children}</div>
+      </aside>
+    </>
+  )
+}
+
+interface ITablePanelRegionProps<T extends TableRow> {
+  objProps: ResolvedTableComponentProps<T>
+  objPanels: ReturnType<typeof useTablePanels<T>>
+  arrRows: readonly T[]
+  arrSelectedRows: readonly T[]
+  children: ReactNode
+}
+
+/** 解析业务面板组件与详情放置位置，并挂载对应的底部、右侧容器。 */
+export function TablePanelRegion<T extends TableRow>({
+  objProps,
+  objPanels,
+  arrRows,
+  arrSelectedRows,
+  children,
+}: ITablePanelRegionProps<T>) {
+  const objMessages = useAppTableMessages()
+  const BottomComponent = objProps.bottomPanel && objProps.bottomPanel.component
+  const RightComponent = objProps.rightPanel && objProps.rightPanel.component
+  const DetailComponent =
+    objProps.rowDetailPanel && objProps.rowDetailPanel.component
+  const objBottomContent =
+    objPanels.bBottomUsesDetail &&
+    DetailComponent &&
+    objPanels.objCurrentRow ? (
+      <DetailComponent
+        rows={arrRows}
+        selectedRows={arrSelectedRows}
+        row={objPanels.objCurrentRow}
+        close={objPanels.fnCloseRowDetailPanel}
+      />
+    ) : BottomComponent ? (
+      <BottomComponent
+        rows={arrRows}
+        selectedRows={arrSelectedRows}
+        currentRow={objPanels.objCurrentRow}
+        close={objPanels.fnCloseBottomPanel}
+      />
+    ) : null
+  const objRightContent =
+    objPanels.bRightUsesDetail && DetailComponent && objPanels.objCurrentRow ? (
+      <DetailComponent
+        rows={arrRows}
+        selectedRows={arrSelectedRows}
+        row={objPanels.objCurrentRow}
+        close={objPanels.fnCloseRowDetailPanel}
+      />
+    ) : RightComponent ? (
+      <RightComponent
+        rows={arrRows}
+        selectedRows={arrSelectedRows}
+        currentRow={objPanels.objCurrentRow}
+        close={objPanels.fnCloseRightPanel}
+      />
+    ) : null
+
+  return (
+    <div className='flex min-h-0 min-w-0 flex-1'>
+      <div className='flex min-h-0 min-w-0 flex-1 flex-col'>
+        {children}
+        <TableBottomPanel
+          bVisible={objPanels.bBottomOpen}
+          nHeight={objPanels.objBottomResize.nSize}
+          bResizable={Boolean(
+            objProps.bottomPanel && objProps.bottomPanel.resizable !== false
+          )}
+          strTitle={
+            objPanels.bBottomUsesDetail && objProps.rowDetailPanel
+              ? (objProps.rowDetailPanel.title ?? objMessages.strDetail)
+              : undefined
+          }
+          bClosable={
+            objPanels.bBottomUsesDetail && objProps.rowDetailPanel
+              ? objProps.rowDetailPanel.closable !== false
+              : false
+          }
+          objResize={objPanels.objBottomResize}
+          fnOnClose={
+            objPanels.bBottomUsesDetail
+              ? objPanels.fnCloseRowDetailPanel
+              : objPanels.fnCloseBottomPanel
+          }
+        >
+          {objBottomContent}
+        </TableBottomPanel>
+      </div>
+      <TableRightPanel
+        bVisible={objPanels.bRightOpen}
+        objWidth={objPanels.objRightWidth}
+        bResizable={Boolean(
+          objProps.rightPanel && objProps.rightPanel.resizable !== false
+        )}
+        strTitle={
+          objPanels.bRightUsesDetail && objProps.rowDetailPanel
+            ? (objProps.rowDetailPanel.title ?? objMessages.strDetail)
+            : objProps.rightPanel
+              ? objProps.rightPanel.title
+              : undefined
+        }
+        bClosable={
+          objPanels.bRightUsesDetail && objProps.rowDetailPanel
+            ? objProps.rowDetailPanel.closable !== false
+            : Boolean(
+                objProps.rightPanel && objProps.rightPanel.closable !== false
+              )
+        }
+        objResize={objPanels.objRightResize}
+        fnOnClose={
+          objPanels.bRightUsesDetail
+            ? objPanels.fnCloseRowDetailPanel
+            : objPanels.fnCloseRightPanel
+        }
+      >
+        {objRightContent}
+      </TableRightPanel>
+    </div>
+  )
+}

package/template/src/components/AppTable/table/layout/index.ts

@@ -0,0 +1,7 @@
+export {
+  resolveTableInitialGridHeight,
+  useTableAdaptiveHeight,
+} from './useTableAdaptiveHeight'
+export { TablePanelRegion } from './TablePanels'
+export { useTablePanels } from './useTablePanels'
+export { useTableTheme } from './useTableTheme'

package/template/src/components/AppTable/table/layout/types.ts

@@ -0,0 +1,3 @@
+import type { useResizablePanel } from './useResizablePanel'
+
+export type ReturnTypeOfUseResizablePanel = ReturnType<typeof useResizablePanel>

package/template/src/components/AppTable/table/layout/useResizablePanel.ts

@@ -0,0 +1,213 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type PointerEvent as ReactPointerEvent,
+} from 'react'
+
+interface IUseResizablePanelOptions {
+  strAxis: 'horizontal' | 'vertical'
+  strEdge?: 'start' | 'end'
+  objInitialSize?: unknown
+  nDefaultSize: number
+  nMinSize: number
+  nMaxSize: number
+  bDisabled?: boolean
+  fnGetDirection?: () => 'ltr' | 'rtl'
+  fnOnResize?: (nSize: number) => void
+  fnOnResizeEnd?: (nSize: number) => void
+}
+
+/** React 面板共享的 Pointer Events、键盘调整和资源清理边界。 */
+export function useResizablePanel({
+  strAxis,
+  strEdge = 'start',
+  objInitialSize,
+  nDefaultSize,
+  nMinSize,
+  nMaxSize,
+  bDisabled,
+  fnGetDirection,
+  fnOnResize,
+  fnOnResizeEnd,
+}: IUseResizablePanelOptions) {
+  const nNormalizedMin = Math.max(0, nMinSize)
+  const nNormalizedMax = Math.max(nNormalizedMin, nMaxSize)
+  const fnNormalizeSize = useCallback(
+    (objValue: unknown) => {
+      const nCandidate = Number(objValue)
+      const nSize = Number.isFinite(nCandidate) ? nCandidate : nDefaultSize
+      return Math.min(nNormalizedMax, Math.max(nNormalizedMin, nSize))
+    },
+    [nDefaultSize, nNormalizedMax, nNormalizedMin]
+  )
+  const [nSize, fnSetSize] = useState(() => fnNormalizeSize(objInitialSize))
+  const [bResizing, fnSetResizing] = useState(false)
+  const fnCleanupRef = useRef<() => void>(() => {})
+  const nResizeFrameRef = useRef(0)
+
+  useEffect(() => {
+    fnSetSize((nCurrent) => fnNormalizeSize(nCurrent))
+  }, [fnNormalizeSize])
+
+  useEffect(() => {
+    if (objInitialSize === undefined) return
+    fnSetSize(fnNormalizeSize(objInitialSize))
+  }, [fnNormalizeSize, objInitialSize])
+
+  useEffect(
+    () => () => {
+      fnCleanupRef.current()
+      window.cancelAnimationFrame(nResizeFrameRef.current)
+    },
+    []
+  )
+
+  const nResizeDirection = useMemo(() => {
+    const nEdgeDirection = strEdge === 'start' ? -1 : 1
+    return strAxis === 'horizontal' && fnGetDirection?.() === 'rtl'
+      ? -nEdgeDirection
+      : nEdgeDirection
+  }, [fnGetDirection, strAxis, strEdge])
+
+  const fnCommitSize = useCallback(
+    (objValue: unknown) => {
+      const nNextSize = fnNormalizeSize(objValue)
+      fnSetSize(nNextSize)
+      fnOnResize?.(nNextSize)
+      fnOnResizeEnd?.(nNextSize)
+    },
+    [fnNormalizeSize, fnOnResize, fnOnResizeEnd]
+  )
+
+  const fnSyncRenderedSize = useCallback(
+    (objValue: unknown) => {
+      fnSetSize(fnNormalizeSize(objValue))
+    },
+    [fnNormalizeSize]
+  )
+
+  const fnHandleResizeKeyDown = useCallback(
+    (objEvent: ReactKeyboardEvent) => {
+      if (bDisabled) return
+      if (objEvent.key === 'Home') {
+        objEvent.preventDefault()
+        fnCommitSize(nNormalizedMin)
+        return
+      }
+      if (objEvent.key === 'End') {
+        objEvent.preventDefault()
+        fnCommitSize(nNormalizedMax)
+        return
+      }
+      const nCoordinateDelta =
+        strAxis === 'horizontal'
+          ? objEvent.key === 'ArrowLeft'
+            ? -10
+            : objEvent.key === 'ArrowRight'
+              ? 10
+              : undefined
+          : objEvent.key === 'ArrowUp'
+            ? -10
+            : objEvent.key === 'ArrowDown'
+              ? 10
+              : undefined
+      if (nCoordinateDelta === undefined) return
+      objEvent.preventDefault()
+      fnCommitSize(nSize + nResizeDirection * nCoordinateDelta)
+    },
+    [
+      bDisabled,
+      fnCommitSize,
+      nNormalizedMax,
+      nNormalizedMin,
+      nResizeDirection,
+      nSize,
+      strAxis,
+    ]
+  )
+
+  const fnStartResize = useCallback(
+    (objEvent: ReactPointerEvent<HTMLElement>) => {
+      if (objEvent.button !== 0 || bDisabled) return
+      objEvent.preventDefault()
+      fnCleanupRef.current()
+      const objBody = document.body
+      const strOldCursor = objBody.style.cursor
+      const strOldUserSelect = objBody.style.userSelect
+      const nStartCoordinate =
+        strAxis === 'horizontal' ? objEvent.clientX : objEvent.clientY
+      const objPanelRect =
+        objEvent.currentTarget.parentElement?.getBoundingClientRect()
+      const nRenderedSize =
+        strAxis === 'horizontal' ? objPanelRect?.width : objPanelRect?.height
+      const nStartSize = fnNormalizeSize(
+        nRenderedSize && nRenderedSize > 0 ? nRenderedSize : nSize
+      )
+      objBody.style.cursor =
+        strAxis === 'horizontal' ? 'col-resize' : 'row-resize'
+      objBody.style.userSelect = 'none'
+      fnSetSize(nStartSize)
+      fnSetResizing(true)
+
+      const fnOnMove = (objMoveEvent: PointerEvent) => {
+        const nCoordinate =
+          strAxis === 'horizontal' ? objMoveEvent.clientX : objMoveEvent.clientY
+        const nNextSize = fnNormalizeSize(
+          nStartSize + nResizeDirection * (nCoordinate - nStartCoordinate)
+        )
+        fnSetSize(nNextSize)
+        window.cancelAnimationFrame(nResizeFrameRef.current)
+        nResizeFrameRef.current = window.requestAnimationFrame(() =>
+          fnOnResize?.(nNextSize)
+        )
+      }
+      const fnRemoveListeners = () => {
+        window.removeEventListener('pointermove', fnOnMove)
+        window.removeEventListener('pointerup', fnOnEnd)
+        window.removeEventListener('pointercancel', fnOnEnd)
+        window.removeEventListener('blur', fnOnEnd)
+        window.cancelAnimationFrame(nResizeFrameRef.current)
+        objBody.style.cursor = strOldCursor
+        objBody.style.userSelect = strOldUserSelect
+        fnSetResizing(false)
+        fnCleanupRef.current = () => {}
+      }
+      const fnOnEnd = () => {
+        fnSetSize((nCurrent) => {
+          fnOnResize?.(nCurrent)
+          fnOnResizeEnd?.(nCurrent)
+          return nCurrent
+        })
+        fnRemoveListeners()
+      }
+      window.addEventListener('pointermove', fnOnMove)
+      window.addEventListener('pointerup', fnOnEnd, { once: true })
+      window.addEventListener('pointercancel', fnOnEnd, { once: true })
+      window.addEventListener('blur', fnOnEnd, { once: true })
+      fnCleanupRef.current = fnRemoveListeners
+    },
+    [
+      bDisabled,
+      fnNormalizeSize,
+      fnOnResize,
+      fnOnResizeEnd,
+      nResizeDirection,
+      nSize,
+      strAxis,
+    ]
+  )
+
+  return {
+    nSize,
+    bResizing,
+    nMinSize: nNormalizedMin,
+    nMaxSize: nNormalizedMax,
+    fnSyncRenderedSize,
+    fnStartResize,
+    fnHandleResizeKeyDown,
+  }
+}