115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { TouchableOpacity, View } from "react-native";
|
|
import {
|
|
TableWidgetProps,
|
|
Column,
|
|
Row,
|
|
Cell as CellData,
|
|
ColumnsProps,
|
|
RowsProps,
|
|
CellProps,
|
|
} from "../../../App/common/interface/widgets/widgetData";
|
|
import { StyledImage, StyledText } from "..";
|
|
import { styles } from "./TableWidgetStyles";
|
|
import { sendAsAnalyticsEvent } from "../../../App/common/hooks/useAnalyticsEvent";
|
|
|
|
const Cell = ({ widgetData, cell, index, handleClick }: CellProps) => {
|
|
useEffect(()=>{
|
|
cell?.analyticEvents?.onViewEvent && sendAsAnalyticsEvent(cell?.analyticEvents?.onViewEvent)
|
|
},[])
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.cell, widgetData?.columns?.[index]?.columnStyle]}
|
|
onPress={() => {
|
|
handleClick && cell?.cta && handleClick(cell?.cta);
|
|
}}
|
|
activeOpacity={1}
|
|
>
|
|
{cell?.title?.text && (
|
|
<StyledText key={`text-${index}`} textFieldData={cell?.title} />
|
|
)}
|
|
|
|
{cell?.image?.url && (
|
|
<StyledImage key={`image-${index}`} imageFieldData={cell?.image} />
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const Rows = ({ widgetData, rowsToDisplay, handleClick }: RowsProps) => {
|
|
return (
|
|
<>
|
|
{widgetData?.rows &&
|
|
widgetData?.rows
|
|
?.slice(0, rowsToDisplay)
|
|
?.map((row: Row, index: number) => {
|
|
return (
|
|
<View style={styles.row} key={index}>
|
|
{row?.cells?.map((cell: CellData, index: number) => (
|
|
<Cell
|
|
cell={cell}
|
|
index={index}
|
|
key={index}
|
|
widgetData={widgetData}
|
|
handleClick={handleClick}
|
|
/>
|
|
))}
|
|
</View>
|
|
);
|
|
})}
|
|
</>
|
|
);
|
|
};
|
|
const Columns = ({ widgetData }: ColumnsProps) => {
|
|
return (
|
|
<View style={[styles.row]}>
|
|
{widgetData?.columns &&
|
|
widgetData?.columns?.map((column: Column, index: number) => {
|
|
return (
|
|
<View
|
|
style={[styles.cell, styles.header, column?.columnStyle]}
|
|
key={index}
|
|
>
|
|
{column?.title?.text && (
|
|
<StyledText textFieldData={column?.title} />
|
|
)}
|
|
{column?.subtitle?.text && (
|
|
<StyledText textFieldData={column?.subtitle} />
|
|
)}
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const Table = ({ widgetData, handleClick }: TableWidgetProps) => {
|
|
const [rowsToDisplay, setRowsToDisplay] = useState<number | undefined>(
|
|
widgetData?.rowsToDisplay || widgetData?.rows?.length,
|
|
);
|
|
|
|
const handleSelect = () => {
|
|
setRowsToDisplay(widgetData?.rows?.length);
|
|
widgetData.viewButton?.cta?.analyticsEventProperties && sendAsAnalyticsEvent(widgetData.viewButton?.cta?.analyticsEventProperties)
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Columns widgetData={widgetData} />
|
|
<Rows
|
|
widgetData={widgetData}
|
|
rowsToDisplay={rowsToDisplay}
|
|
handleClick={handleClick}
|
|
/>
|
|
{rowsToDisplay !== widgetData?.rows?.length &&
|
|
widgetData.viewButton?.text && (
|
|
<TouchableOpacity onPress={handleSelect} activeOpacity={1}>
|
|
<StyledText textFieldData={widgetData?.viewButton} />
|
|
</TouchableOpacity>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Table;
|