Skip to content

Commit 02a7bb2

Browse files
jameswilddevjameswilddev
committed
Add a row press callback to tables.
1 parent 85fbedf commit 02a7bb2

File tree

2 files changed

+869
-127
lines changed

2 files changed

+869
-127
lines changed

‎react-native/components/createOfflineTableComponent/index.tsx‎

Lines changed: 158 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,12 @@ export const createOfflineTableComponent = <
8989
* The context in which the table is being rendered.
9090
*/
9191
readonly context: TContext;
92+
93+
/**
94+
* Called on pressing a row.
95+
* @param row The row pressed.
96+
*/
97+
onPressRow?(row: TRow): void;
9298
}> => {
9399
const rowViewBase: ViewStyle = {
94100
width: `100%`,
@@ -346,6 +352,7 @@ export const createOfflineTableComponent = <
346352
sortDirection,
347353
onSortChange,
348354
context,
355+
onPressRow,
349356
}) => {
350357
let rows = [...data.rows];
351358

@@ -473,137 +480,161 @@ export const createOfflineTableComponent = <
473480
{rows.length === 0 ? (
474481
<Text style={styles.emptyText}>{whenEmpty}</Text>
475482
) : (
476-
rows.map((row, index) => (
477-
<View
478-
key={String(row[schema.key])}
479-
style={
480-
index === 0
481-
? styles.firstRowView
482-
: index % 2 === 0
483-
? styles.oddRowView
484-
: styles.evenRowView
485-
}
486-
>
487-
{schema.columns.map((column, columnIndex) => {
488-
switch (column.type) {
489-
case `basic`: {
490-
const value = row[column.key];
491-
492-
// TODO: why does TypeScript think this cannot be null, false or true?
493-
switch (value as unknown) {
494-
case null:
495-
return (
496-
<View
497-
key={String(columnIndex)}
498-
style={customCellStyles[columnIndex]}
499-
>
500-
{style.body.primitiveElements.null}
501-
</View>
502-
);
503-
504-
case false:
505-
return (
506-
<View
507-
key={String(columnIndex)}
508-
style={customCellStyles[columnIndex]}
509-
>
510-
{style.body.primitiveElements.false}
511-
</View>
512-
);
513-
514-
case true:
515-
return (
516-
<View
517-
key={String(columnIndex)}
518-
style={customCellStyles[columnIndex]}
519-
>
520-
{style.body.primitiveElements.true}
521-
</View>
522-
);
523-
524-
default:
525-
return (
526-
<Text
527-
key={String(columnIndex)}
528-
style={
529-
index % 2 === 0
530-
? oddRowCellStyles[columnIndex]
531-
: evenRowCellStyles[columnIndex]
532-
}
533-
>
534-
{value}
535-
</Text>
536-
);
537-
}
538-
}
483+
rows.map((row, index) => {
484+
const cells = schema.columns.map((column, columnIndex) => {
485+
switch (column.type) {
486+
case `basic`: {
487+
const value = row[column.key];
488+
489+
// TODO: why does TypeScript think this cannot be null, false or true?
490+
switch (value as unknown) {
491+
case null:
492+
return (
493+
<View
494+
key={String(columnIndex)}
495+
style={customCellStyles[columnIndex]}
496+
>
497+
{style.body.primitiveElements.null}
498+
</View>
499+
);
539500

540-
case `customText`: {
541-
const value = column.render(
542-
row[column.key] as never,
543-
context
544-
);
545-
546-
// TODO: why does TypeScript think this cannot be null, false or true?
547-
switch (value as unknown) {
548-
case null:
549-
return (
550-
<View
551-
key={String(columnIndex)}
552-
style={customCellStyles[columnIndex]}
553-
>
554-
{style.body.primitiveElements.null}
555-
</View>
556-
);
557-
558-
case false:
559-
return (
560-
<View
561-
key={String(columnIndex)}
562-
style={customCellStyles[columnIndex]}
563-
>
564-
{style.body.primitiveElements.false}
565-
</View>
566-
);
567-
568-
case true:
569-
return (
570-
<View
571-
key={String(columnIndex)}
572-
style={customCellStyles[columnIndex]}
573-
>
574-
{style.body.primitiveElements.true}
575-
</View>
576-
);
577-
578-
default:
579-
return (
580-
<Text
581-
key={String(columnIndex)}
582-
style={
583-
index % 2 === 0
584-
? oddRowCellStyles[columnIndex]
585-
: evenRowCellStyles[columnIndex]
586-
}
587-
>
588-
{value}
589-
</Text>
590-
);
591-
}
501+
case false:
502+
return (
503+
<View
504+
key={String(columnIndex)}
505+
style={customCellStyles[columnIndex]}
506+
>
507+
{style.body.primitiveElements.false}
508+
</View>
509+
);
510+
511+
case true:
512+
return (
513+
<View
514+
key={String(columnIndex)}
515+
style={customCellStyles[columnIndex]}
516+
>
517+
{style.body.primitiveElements.true}
518+
</View>
519+
);
520+
521+
default:
522+
return (
523+
<Text
524+
key={String(columnIndex)}
525+
style={
526+
index % 2 === 0
527+
? oddRowCellStyles[columnIndex]
528+
: evenRowCellStyles[columnIndex]
529+
}
530+
>
531+
{value}
532+
</Text>
533+
);
592534
}
535+
}
536+
537+
case `customText`: {
538+
const value = column.render(
539+
row[column.key] as never,
540+
context
541+
);
542+
543+
// TODO: why does TypeScript think this cannot be null, false or true?
544+
switch (value as unknown) {
545+
case null:
546+
return (
547+
<View
548+
key={String(columnIndex)}
549+
style={customCellStyles[columnIndex]}
550+
>
551+
{style.body.primitiveElements.null}
552+
</View>
553+
);
554+
555+
case false:
556+
return (
557+
<View
558+
key={String(columnIndex)}
559+
style={customCellStyles[columnIndex]}
560+
>
561+
{style.body.primitiveElements.false}
562+
</View>
563+
);
593564

594-
case `customElement`:
595-
return (
596-
<View
597-
key={String(columnIndex)}
598-
style={customCellStyles[columnIndex]}
599-
>
600-
{column.render(row, context)}
601-
</View>
602-
);
565+
case true:
566+
return (
567+
<View
568+
key={String(columnIndex)}
569+
style={customCellStyles[columnIndex]}
570+
>
571+
{style.body.primitiveElements.true}
572+
</View>
573+
);
574+
575+
default:
576+
return (
577+
<Text
578+
key={String(columnIndex)}
579+
style={
580+
index % 2 === 0
581+
? oddRowCellStyles[columnIndex]
582+
: evenRowCellStyles[columnIndex]
583+
}
584+
>
585+
{value}
586+
</Text>
587+
);
588+
}
603589
}
604-
})}
605-
</View>
606-
))
590+
591+
case `customElement`:
592+
return (
593+
<View
594+
key={String(columnIndex)}
595+
style={customCellStyles[columnIndex]}
596+
>
597+
{column.render(row, context)}
598+
</View>
599+
);
600+
}
601+
});
602+
603+
if (onPressRow === undefined) {
604+
return (
605+
<View
606+
key={String(row[schema.key])}
607+
style={
608+
index === 0
609+
? styles.firstRowView
610+
: index % 2 === 0
611+
? styles.oddRowView
612+
: styles.evenRowView
613+
}
614+
>
615+
{cells}
616+
</View>
617+
);
618+
} else {
619+
return (
620+
<Hitbox
621+
key={String(row[schema.key])}
622+
style={
623+
index === 0
624+
? styles.firstRowView
625+
: index % 2 === 0
626+
? styles.oddRowView
627+
: styles.evenRowView
628+
}
629+
onPress={() => {
630+
onPressRow(row);
631+
}}
632+
>
633+
{cells}
634+
</Hitbox>
635+
);
636+
}
637+
})
607638
)}
608639
</View>
609640
);

0 commit comments

Comments
 (0)