Skip to content

Commit 10ea5e8

Browse files
jamesgpearcejamesgpearce
committed
[ui-react-dom] Split components into files
1 parent acfc69b commit 10ea5e8

12 files changed

+1078
-965
lines changed

‎src/ui-react-dom/EditableCellView.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type {Cell} from '../@types/index.js';
2+
import type {EditableCellView as EditableCellViewDecl} from '../@types/ui-react-dom/index.js';
3+
import type {CellProps} from '../@types/ui-react/index.js';
4+
import {CELL} from '../common/strings.ts';
5+
import {
6+
useCell,
7+
useSetCellCallback,
8+
useStoreOrStoreById,
9+
} from '../ui-react/hooks.ts';
10+
import {EDITABLE, EditableThing} from './common.tsx';
11+
12+
export const EditableCellView: typeof EditableCellViewDecl = ({
13+
tableId,
14+
rowId,
15+
cellId,
16+
store,
17+
className,
18+
showType,
19+
}: CellProps & {readonly className?: string; readonly showType?: boolean}) => (
20+
<EditableThing
21+
thing={useCell(tableId, rowId, cellId, store)}
22+
onThingChange={useSetCellCallback(
23+
tableId,
24+
rowId,
25+
cellId,
26+
(cell: Cell) => cell,
27+
[],
28+
store,
29+
)}
30+
className={className ?? EDITABLE + CELL}
31+
showType={showType}
32+
hasSchema={useStoreOrStoreById(store)?.hasTablesSchema}
33+
/>
34+
);

‎src/ui-react-dom/EditableValueView.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import type {Value} from '../@types/index.js';
2+
import type {EditableValueView as EditableValueViewDecl} from '../@types/ui-react-dom/index.js';
3+
import type {ValueProps} from '../@types/ui-react/index.js';
4+
import {VALUE} from '../common/strings.ts';
5+
import {
6+
useSetValueCallback,
7+
useStoreOrStoreById,
8+
useValue,
9+
} from '../ui-react/hooks.ts';
10+
import {EDITABLE, EditableThing} from './common.tsx';
11+
12+
export const EditableValueView: typeof EditableValueViewDecl = ({
13+
valueId,
14+
store,
15+
className,
16+
showType,
17+
}: ValueProps & {readonly className?: string; readonly showType?: boolean}) => (
18+
<EditableThing
19+
thing={useValue(valueId, store)}
20+
onThingChange={useSetValueCallback(
21+
valueId,
22+
(value: Value) => value,
23+
[],
24+
store,
25+
)}
26+
className={className ?? EDITABLE + VALUE}
27+
showType={showType}
28+
hasSchema={useStoreOrStoreById(store)?.hasValuesSchema}
29+
/>
30+
);

‎src/ui-react-dom/RelationshipInHtmlTable.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import type {Id, Store} from '../@types/index.js';
2+
import type {
3+
HtmlTableProps,
4+
RelationshipInHtmlTableProps,
5+
} from '../@types/ui-react-dom/index.js';
6+
import type {RowProps} from '../@types/ui-react/index.d.ts';
7+
import {arrayMap} from '../common/array.ts';
8+
import {objToArray} from '../common/obj.ts';
9+
import {isUndefined} from '../common/other.ts';
10+
import {getProps, getRelationshipsStoreTableIds} from '../common/react.ts';
11+
import {DOT, strSplit} from '../common/strings.ts';
12+
import {CellView} from '../ui-react/components.tsx';
13+
import {
14+
useRelationshipsOrRelationshipsById,
15+
useRemoteRowId,
16+
useRowIds,
17+
useTableCellIds,
18+
} from '../ui-react/hooks.ts';
19+
import {EditableCellView} from './EditableCellView.tsx';
20+
import {
21+
extraHeaders,
22+
extraRowCells,
23+
RelationshipInHtmlRowParams,
24+
useCells,
25+
useParams,
26+
} from './common.tsx';
27+
28+
const useDottedCellIds = (tableId: Id | undefined, store: Store | undefined) =>
29+
arrayMap(
30+
useTableCellIds(tableId as Id, store),
31+
(cellId) => tableId + DOT + cellId,
32+
);
33+
34+
export const RelationshipInHtmlRow = ({
35+
localRowId,
36+
params: [
37+
idColumn,
38+
cells,
39+
localTableId,
40+
remoteTableId,
41+
relationshipId,
42+
relationships,
43+
store,
44+
extraCellsBefore,
45+
extraCellsAfter,
46+
],
47+
}: {
48+
readonly localRowId: Id;
49+
readonly params: RelationshipInHtmlRowParams;
50+
}) => {
51+
const remoteRowId = useRemoteRowId(
52+
relationshipId,
53+
localRowId,
54+
relationships,
55+
) as Id;
56+
const rowProps: RowProps = {
57+
tableId: localTableId ?? '',
58+
rowId: localRowId,
59+
store,
60+
};
61+
return (
62+
<tr>
63+
{extraRowCells(extraCellsBefore, rowProps)}
64+
{idColumn === false ? null : (
65+
<>
66+
<th>{localRowId}</th>
67+
<th>{remoteRowId}</th>
68+
</>
69+
)}
70+
{objToArray(
71+
cells,
72+
({component: CellView, getComponentProps}, compoundCellId) => {
73+
const [tableId, cellId] = strSplit(compoundCellId, DOT, 2);
74+
const rowId =
75+
tableId === localTableId
76+
? localRowId
77+
: tableId === remoteTableId
78+
? remoteRowId
79+
: null;
80+
return isUndefined(rowId) ? null : (
81+
<td key={compoundCellId}>
82+
<CellView
83+
{...getProps(getComponentProps, rowId, cellId)}
84+
store={store}
85+
tableId={tableId}
86+
rowId={rowId}
87+
cellId={cellId}
88+
/>
89+
</td>
90+
);
91+
},
92+
)}
93+
{extraRowCells(extraCellsAfter, rowProps, 1)}
94+
</tr>
95+
);
96+
};
97+
98+
export const RelationshipInHtmlTable = ({
99+
relationshipId,
100+
relationships,
101+
editable,
102+
customCells,
103+
extraCellsBefore,
104+
extraCellsAfter,
105+
className,
106+
headerRow,
107+
idColumn = true,
108+
}: RelationshipInHtmlTableProps & HtmlTableProps): any => {
109+
const [resolvedRelationships, store, localTableId, remoteTableId] =
110+
getRelationshipsStoreTableIds(
111+
useRelationshipsOrRelationshipsById(relationships),
112+
relationshipId,
113+
);
114+
const cells = useCells(
115+
[
116+
...useDottedCellIds(localTableId, store),
117+
...useDottedCellIds(remoteTableId, store),
118+
],
119+
customCells,
120+
editable ? EditableCellView : CellView,
121+
);
122+
const params = useParams(
123+
idColumn,
124+
cells,
125+
localTableId,
126+
remoteTableId,
127+
relationshipId,
128+
resolvedRelationships,
129+
store,
130+
extraCellsBefore,
131+
extraCellsAfter,
132+
);
133+
return (
134+
<table className={className}>
135+
{headerRow === false ? null : (
136+
<thead>
137+
<tr>
138+
{extraHeaders(extraCellsBefore)}
139+
{idColumn === false ? null : (
140+
<>
141+
<th>{localTableId}.Id</th>
142+
<th>{remoteTableId}.Id</th>
143+
</>
144+
)}
145+
{objToArray(cells, ({label}, cellId) => (
146+
<th key={cellId}>{label}</th>
147+
))}
148+
{extraHeaders(extraCellsAfter, 1)}
149+
</tr>
150+
</thead>
151+
)}
152+
<tbody>
153+
{arrayMap(useRowIds(localTableId as Id, store), (localRowId) => (
154+
<RelationshipInHtmlRow
155+
key={localRowId}
156+
localRowId={localRowId}
157+
params={params}
158+
/>
159+
))}
160+
</tbody>
161+
</table>
162+
);
163+
};

‎src/ui-react-dom/ResultSortedTableInHtmlTable.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import type {
2+
HtmlTableProps,
3+
ResultSortedTableInHtmlTable as ResultSortedTableInHtmlTableDecl,
4+
ResultSortedTableInHtmlTableProps,
5+
} from '../@types/ui-react-dom/index.js';
6+
import {ResultCellView} from '../ui-react/components.tsx';
7+
import {
8+
useResultRowCount,
9+
useResultSortedRowIds,
10+
useResultTableCellIds,
11+
} from '../ui-react/hooks.ts';
12+
import {
13+
HtmlTable,
14+
useCells,
15+
useParams,
16+
useQueriesCellComponentProps,
17+
useSortingAndPagination,
18+
} from './common.tsx';
19+
20+
export const ResultSortedTableInHtmlTable: typeof ResultSortedTableInHtmlTableDecl =
21+
({
22+
queryId,
23+
cellId,
24+
descending,
25+
offset,
26+
limit,
27+
queries,
28+
sortOnClick,
29+
paginator = false,
30+
customCells,
31+
extraCellsBefore,
32+
extraCellsAfter,
33+
onChange,
34+
...props
35+
}: ResultSortedTableInHtmlTableProps & HtmlTableProps): any => {
36+
const [sortAndOffset, handleSort, paginatorComponent] =
37+
useSortingAndPagination(
38+
cellId,
39+
descending,
40+
sortOnClick,
41+
offset,
42+
limit,
43+
useResultRowCount(queryId, queries),
44+
paginator,
45+
onChange,
46+
);
47+
return (
48+
<HtmlTable
49+
{...props}
50+
params={useParams(
51+
useCells(
52+
useResultTableCellIds(queryId, queries),
53+
customCells,
54+
ResultCellView,
55+
),
56+
useQueriesCellComponentProps(queries, queryId),
57+
useResultSortedRowIds(queryId, ...sortAndOffset, limit, queries),
58+
extraCellsBefore,
59+
extraCellsAfter,
60+
sortAndOffset,
61+
handleSort,
62+
paginatorComponent,
63+
)}
64+
/>
65+
);
66+
};

‎src/ui-react-dom/ResultTableInHtmlTable.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import type {
2+
HtmlTableProps,
3+
ResultTableInHtmlTable as ResultTableInHtmlTableDecl,
4+
ResultTableInHtmlTableProps,
5+
} from '../@types/ui-react-dom/index.js';
6+
import {ResultCellView} from '../ui-react/components.tsx';
7+
import {useResultRowIds, useResultTableCellIds} from '../ui-react/hooks.ts';
8+
import {
9+
HtmlTable,
10+
useCells,
11+
useParams,
12+
useQueriesCellComponentProps,
13+
} from './common.tsx';
14+
15+
export const ResultTableInHtmlTable: typeof ResultTableInHtmlTableDecl = ({
16+
queryId,
17+
queries,
18+
customCells,
19+
extraCellsBefore,
20+
extraCellsAfter,
21+
...props
22+
}: ResultTableInHtmlTableProps & HtmlTableProps): any => (
23+
<HtmlTable
24+
{...props}
25+
params={useParams(
26+
useCells(
27+
useResultTableCellIds(queryId, queries),
28+
customCells,
29+
ResultCellView,
30+
),
31+
useQueriesCellComponentProps(queries, queryId),
32+
useResultRowIds(queryId, queries),
33+
extraCellsBefore,
34+
extraCellsAfter,
35+
)}
36+
/>
37+
);

‎src/ui-react-dom/SliceInHtmlTable.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type {Id} from '../@types/index.js';
2+
import type {
3+
HtmlTableProps,
4+
SliceInHtmlTable as SliceInHtmlTableDecl,
5+
SliceInHtmlTableProps,
6+
} from '../@types/ui-react-dom/index.js';
7+
import {getIndexStoreTableId} from '../common/react.ts';
8+
import {CellView} from '../ui-react/components.tsx';
9+
import {
10+
useIndexesOrIndexesById,
11+
useSliceRowIds,
12+
useTableCellIds,
13+
} from '../ui-react/hooks.ts';
14+
import {EditableCellView} from './EditableCellView.tsx';
15+
import {
16+
HtmlTable,
17+
useCells,
18+
useParams,
19+
useStoreCellComponentProps,
20+
} from './common.tsx';
21+
22+
export const SliceInHtmlTable: typeof SliceInHtmlTableDecl = ({
23+
indexId,
24+
sliceId,
25+
indexes,
26+
editable,
27+
customCells,
28+
extraCellsBefore,
29+
extraCellsAfter,
30+
...props
31+
}: SliceInHtmlTableProps & HtmlTableProps): any => {
32+
const [resolvedIndexes, store, tableId] = getIndexStoreTableId(
33+
useIndexesOrIndexesById(indexes),
34+
indexId,
35+
);
36+
return (
37+
<HtmlTable
38+
{...props}
39+
params={useParams(
40+
useCells(
41+
useTableCellIds(tableId as Id, store),
42+
customCells,
43+
editable ? EditableCellView : CellView,
44+
),
45+
useStoreCellComponentProps(store, tableId as Id),
46+
useSliceRowIds(indexId, sliceId, resolvedIndexes),
47+
extraCellsBefore,
48+
extraCellsAfter,
49+
)}
50+
/>
51+
);
52+
};

0 commit comments

Comments
 (0)