[ui-react] Refactor into separate files

Author: jamesgpearce

src/ui-react-dom/EditableCellView.tsx

@@ -7,7 +7,8 @@ import {
   useSetCellCallback,
   useStoreOrStoreById,
 } from '../ui-react/hooks.ts';
-import {EDITABLE, EditableThing} from './common.tsx';
+import {EditableThing} from './common/components.tsx';
+import {EDITABLE} from './common/index.tsx';
 
 export const EditableCellView: typeof EditableCellViewDecl = ({
   tableId,

src/ui-react-dom/EditableValueView.tsx

@@ -7,7 +7,8 @@ import {
   useStoreOrStoreById,
   useValue,
 } from '../ui-react/hooks.ts';
-import {EDITABLE, EditableThing} from './common.tsx';
+import {EditableThing} from './common/components.tsx';
+import {EDITABLE} from './common/index.tsx';
 
 export const EditableValueView: typeof EditableValueViewDecl = ({
   valueId,

src/ui-react-dom/RelationshipInHtmlTable.tsx

@@ -17,13 +17,12 @@ import {
 } from '../ui-react/hooks.ts';
 import {CellView} from '../ui-react/index.ts';
 import {EditableCellView} from './EditableCellView.tsx';
+import {useCells, useParams} from './common/hooks.tsx';
 import {
   extraHeaders,
   extraRowCells,
   RelationshipInHtmlRowParams,
-  useCells,
-  useParams,
-} from './common.tsx';
+} from './common/index.tsx';
 
 const useDottedCellIds = (tableId: Id | undefined, store: Store | undefined) =>
   arrayMap(

src/ui-react-dom/ResultSortedTableInHtmlTable.tsx

@@ -9,13 +9,13 @@ import {
   useResultTableCellIds,
 } from '../ui-react/hooks.ts';
 import {ResultCellView} from '../ui-react/index.ts';
+import {HtmlTable} from './common/components.tsx';
 import {
-  HtmlTable,
   useCells,
   useParams,
   useQueriesCellComponentProps,
-  useSortingAndPagination,
-} from './common.tsx';
+} from './common/hooks.tsx';
+import {useSortingAndPagination} from './SortedTablePaginator.tsx';
 
 export const ResultSortedTableInHtmlTable: typeof ResultSortedTableInHtmlTableDecl =
   ({

src/ui-react-dom/ResultTableInHtmlTable.tsx

@@ -5,12 +5,12 @@ import type {
 } from '../@types/ui-react-dom/index.js';
 import {useResultRowIds, useResultTableCellIds} from '../ui-react/hooks.ts';
 import {ResultCellView} from '../ui-react/index.ts';
+import {HtmlTable} from './common/components.tsx';
 import {
-  HtmlTable,
   useCells,
   useParams,
   useQueriesCellComponentProps,
-} from './common.tsx';
+} from './common/hooks.tsx';
 
 export const ResultTableInHtmlTable: typeof ResultTableInHtmlTableDecl = ({
   queryId,

src/ui-react-dom/SliceInHtmlTable.tsx

@@ -11,13 +11,13 @@ import {
   useTableCellIds,
 } from '../ui-react/hooks.ts';
 import {CellView} from '../ui-react/index.ts';
-import {EditableCellView} from './EditableCellView.tsx';
+import {HtmlTable} from './common/components.tsx';
 import {
-  HtmlTable,
   useCells,
   useParams,
   useStoreCellComponentProps,
-} from './common.tsx';
+} from './common/hooks.tsx';
+import {EditableCellView} from './EditableCellView.tsx';
 
 export const SliceInHtmlTable: typeof SliceInHtmlTableDecl = ({
   indexId,

src/ui-react-dom/SortedTableInHtmlTable.tsx

@@ -9,14 +9,14 @@ import {
   useTableCellIds,
 } from '../ui-react/hooks.ts';
 import {CellView} from '../ui-react/index.ts';
-import {EditableCellView} from './EditableCellView.tsx';
+import {HtmlTable} from './common/components.tsx';
 import {
-  HtmlTable,
   useCells,
   useParams,
-  useSortingAndPagination,
   useStoreCellComponentProps,
-} from './common.tsx';
+} from './common/hooks.tsx';
+import {EditableCellView} from './EditableCellView.tsx';
+import {useSortingAndPagination} from './SortedTablePaginator.tsx';
 
 export const SortedTableInHtmlTable: typeof SortedTableInHtmlTableDecl = ({
   tableId,

src/ui-react-dom/SortedTablePaginator.tsx

@@ -3,11 +3,83 @@ import type {
   SortedTablePaginatorProps,
 } from '../@types/ui-react-dom/index.js';
 import {mathMin} from '../common/other.ts';
-import {useCallbackOrUndefined} from './common.tsx';
+import {useCallbackOrUndefined} from './common/hooks.tsx';
+
+import type {ComponentType, ReactNode} from 'react';
+import type {Id} from '../@types/index.js';
+import {useCallback, useMemo, useState} from '../common/react.ts';
+import {HandleSort, SortAndOffset} from './common/index.tsx';
 
 const LEFT_ARROW = '\u2190';
 const RIGHT_ARROW = '\u2192';
 
+export const useSortingAndPagination = (
+  cellId: Id | undefined,
+  descending = false,
+  sortOnClick: boolean | undefined,
+  offset = 0,
+  limit: number | undefined,
+  total: number,
+  paginator: boolean | ComponentType<SortedTablePaginatorProps>,
+  onChange?: (sortAndOffset: SortAndOffset) => void,
+): [
+  sortAndOffset: SortAndOffset,
+  handleSort: HandleSort,
+  paginatorComponent: ReactNode | undefined,
+] => {
+  const [[currentCellId, currentDescending, currentOffset], setState] =
+    useState<SortAndOffset>([cellId, descending, offset]);
+  const setStateAndChange = useCallback(
+    (sortAndOffset: SortAndOffset) => {
+      setState(sortAndOffset);
+      onChange?.(sortAndOffset);
+    },
+    [onChange],
+  );
+  const handleSort = useCallbackOrUndefined(
+    (cellId: Id | undefined) =>
+      setStateAndChange([
+        cellId,
+        cellId == currentCellId ? !currentDescending : false,
+        currentOffset,
+      ]),
+    [setStateAndChange, currentCellId, currentDescending, currentOffset],
+    sortOnClick,
+  );
+  const handleChangeOffset = useCallback(
+    (offset: number) =>
+      setStateAndChange([currentCellId, currentDescending, offset]),
+    [setStateAndChange, currentCellId, currentDescending],
+  );
+  const PaginatorComponent =
+    paginator === true
+      ? SortedTablePaginator
+      : (paginator as ComponentType<SortedTablePaginatorProps>);
+  return [
+    [currentCellId, currentDescending, currentOffset],
+    handleSort,
+    useMemo(
+      () =>
+        paginator === false ? null : (
+          <PaginatorComponent
+            offset={currentOffset}
+            limit={limit}
+            total={total}
+            onChange={handleChangeOffset}
+          />
+        ),
+      [
+        paginator,
+        PaginatorComponent,
+        currentOffset,
+        limit,
+        total,
+        handleChangeOffset,
+      ],
+    ),
+  ];
+};
+
 export const SortedTablePaginator: typeof SortedTablePaginatorDecl = ({
   onChange,
   total,

src/ui-react-dom/TableInHtmlTable.tsx

@@ -5,13 +5,13 @@ import type {
 } from '../@types/ui-react-dom/index.js';
 import {useRowIds, useTableCellIds} from '../ui-react/hooks.ts';
 import {CellView} from '../ui-react/index.ts';
-import {EditableCellView} from './EditableCellView.tsx';
+import {HtmlTable} from './common/components.tsx';
 import {
-  HtmlTable,
   useCells,
   useParams,
   useStoreCellComponentProps,
-} from './common.tsx';
+} from './common/hooks.tsx';
+import {EditableCellView} from './EditableCellView.tsx';
 
 export const TableInHtmlTable: typeof TableInHtmlTableDecl = ({
   tableId,

src/ui-react-dom/ValuesInHtmlTable.tsx

@@ -11,7 +11,7 @@ import {EXTRA, VALUE} from '../common/strings.ts';
 import {useValueIds} from '../ui-react/hooks.ts';
 import {ValueView} from '../ui-react/index.ts';
 import {EditableValueView} from './EditableValueView.tsx';
-import {extraHeaders, extraKey} from './common.tsx';
+import {extraHeaders, extraKey} from './common/index.tsx';
 
 const extraValueCells = (
   extraValueCells: ExtraValueCell[] = [],