github/oneuptime
1
1
Fork 0
mirror of https://github.com/OneUptime/oneuptime.git synced 2026-04-06 00:32:12 +02:00
Code Issues 193 Packages Projects Releases Wiki Activity

refactor(table-row): extract columnContent and consolidate column rendering

Browse Source 
- Move per-column value/element logic into a single columnContent variable
- Add contentWrapperClassName and actionsContainerClassName to unify wrappers
- Remove duplicated JSX branches for desktop row cells and simplify action rendering
This commit is contained in:
Nawaz Dhandala
2025-10-24 13:00:24 +01:00
parent 91b54ced67
commit 41fca346b9
1 changed files with 89 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
Common/UI/Components/Table/TableRow.tsx
View File

@@ -350,6 +350,90 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
className =
"whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
}
let columnContent: React.ReactNode = null;
if (column.key && !column.getElement) {
columnContent =
column.type === FieldType.Date ? (
props.item[column.key] ? (
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.item[column.key] as string,
true,
)
) : (
column.noValueMessage || ""
)
) : column.type === FieldType.DateTime ? (
props.item[column.key] ? (
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.item[column.key] as string,
false,
)
) : (
column.noValueMessage || ""
)
) : column.type === FieldType.USDCents ? (
props.item[column.key] ? (
((props.item[column.key] as number) || 0) / 100 + " USD"
) : (
column.noValueMessage || "0 USD"
)
) : column.type === FieldType.Percent ? (
props.item[column.key] ? (
props.item[column.key] + "%"
) : (
column.noValueMessage || "0%"
)
) : column.type === FieldType.Color ? (
props.item[column.key] ? (
<ColorInput value={props.item[column.key] as Color} />
) : (
column.noValueMessage || "0%"
)
) : column.type === FieldType.LongText ? (
props.item[column.key] ? (
<LongTextViewer
text={props.item[column.key] as string}
/>
) : (
column.noValueMessage || ""
)
) : column.type === FieldType.Boolean ? (
props.item[column.key] ? (
<Icon
icon={IconProp.Check}
className={"h-5 w-5 text-gray-500"}
thick={ThickProp.Thick}
/>
) : (
<Icon
icon={IconProp.False}
className={"h-5 w-5 text-gray-500"}
thick={ThickProp.Thick}
/>
)
) : (
getNestedValue(
props.item,
String(column.key),
)?.toString() ||
column.noValueMessage ||
""
);
} else if (column.key && column.getElement) {
columnContent = column.getElement(props.item);
}
const contentWrapperClassName: string = column.contentClassName
? column.contentClassName
: "";
const actionsContainerClassName: string =
column.contentClassName
? `flex justify-end ${column.contentClassName}`
: "flex justify-end";
return (
<td
key={i}
@@ -364,85 +448,13 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
}
}}
>
{column.key && !column.getElement ? (
column.type === FieldType.Date ? (
props.item[column.key] ? (
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.item[column.key] as string,
true,
)
) : (
column.noValueMessage || ""
)
) : column.type === FieldType.DateTime ? (
props.item[column.key] ? (
OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
props.item[column.key] as string,
false,
)
) : (
column.noValueMessage || ""
)
) : column.type === FieldType.USDCents ? (
props.item[column.key] ? (
((props.item[column.key] as number) || 0) / 100 +
" USD"
) : (
column.noValueMessage || "0 USD"
)
) : column.type === FieldType.Percent ? (
props.item[column.key] ? (
props.item[column.key] + "%"
) : (
column.noValueMessage || "0%"
)
) : column.type === FieldType.Color ? (
props.item[column.key] ? (
<ColorInput value={props.item[column.key] as Color} />
) : (
column.noValueMessage || "0%"
)
) : column.type === FieldType.LongText ? (
props.item[column.key] ? (
<LongTextViewer
text={props.item[column.key] as string}
/>
) : (
column.noValueMessage || ""
)
) : column.type === FieldType.Boolean ? (
props.item[column.key] ? (
<Icon
icon={IconProp.Check}
className={"h-5 w-5 text-gray-500"}
thick={ThickProp.Thick}
/>
) : (
<Icon
icon={IconProp.False}
className={"h-5 w-5 text-gray-500"}
thick={ThickProp.Thick}
/>
)
) : (
getNestedValue(
props.item,
String(column.key),
)?.toString() ||
column.noValueMessage ||
""
)
) : (
<></>
)}
{column.key && column.getElement ? (
column.getElement(props.item)
) : (
<></>
{columnContent !== null && columnContent !== undefined && (
<div className={contentWrapperClassName}>
{columnContent}
</div>
)}
{column.type === FieldType.Actions && (
<div className="flex justify-end">
<div className={actionsContainerClassName}>
{error && (
<div className="text-align-left">
<ConfirmModal