Skip to content

Commit

Permalink
fix(table): issue with Safari browser <td> relative position
Browse files Browse the repository at this point in the history
  • Loading branch information
@balzdur
balzdur committed May 20, 2024
1 parent 67bb230 commit 6705d15
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 83 deletions.
154 changes: 79 additions & 75 deletions packages/app-builder/src/components/Data/TableModelNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export function TableModelNode({ data }: NodeProps<TableModelNodeData>) {
columnHelper.group({
id: 'name',
header: () => (
<div className="bg-grey-02 border-grey-50 flex justify-between gap-2 border-b p-4">
<div className="flex justify-between gap-2 p-4">
<div className="flex flex-col gap-2 text-left">
<span className="text-grey-100 text-[30px]">{data.name}</span>
<FormatDescription description={data.description || ''} />
Expand Down Expand Up @@ -194,83 +194,87 @@ export function TableModelNode({ data }: NodeProps<TableModelNodeData>) {
});

return (
<table
className={clsx(
'bg-grey-00 border-grey-50 isolate table-auto border-collapse rounded-xl border',
displayPivot && !isTablePartOfPivot(data.original.id) && 'opacity-20',
)}
>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="border-grey-50 border">
{table.getRowModel().rows.map((row) => {
const visibleCells = row.getVisibleCells();
return (
<div className="border-grey-50 bg-grey-00 overflow-hidden rounded-xl border">
<table
className={clsx(
'isolate table-auto border-collapse',
displayPivot && !isTablePartOfPivot(data.original.id) && 'opacity-20',
)}
>
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr
key={row.id}
className={clsx(
'border-grey-50 relative border',
canEditDataModel && 'hover:bg-purple-10 group',
displayPivot &&
isFieldPartOfPivot(row.original.id) &&
'bg-purple-10',
displayPivot &&
!isFieldPartOfPivot(row.original.id) &&
'opacity-20',
)}
key={headerGroup.id}
className="bg-grey-02 border-b-grey-25 border-b"
>
{visibleCells.map((cell, index) => {
let sourceHandle, targetHandle;
if (index === 0) {
sourceHandle = (
<Handle
type="target"
id={row.original.name}
position={Position.Left}
// For now, we don't want to show the handle or allow connections
style={{ background: 'transparent', border: 'none' }}
isConnectable={false}
/>
);
}
if (index === visibleCells.length - 1) {
targetHandle = (
<Handle
type="source"
id={row.original.name}
position={Position.Right}
// For now, we don't want to show the handle or allow connections
style={{ background: 'transparent', border: 'none' }}
isConnectable={false}
/>
);
}

return (
<td key={cell.id} className="max-w-96 p-2">
{sourceHandle}
{flexRender(cell.column.columnDef.cell, cell.getContext())}
{targetHandle}
</td>
);
})}
{/* This is the handle for the left side of the table */}
<th></th>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
{/* This is the handle for the right side of the table */}
<th></th>
</tr>
);
})}
</tbody>
</table>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => {
const visibleCells = row.getVisibleCells();
return (
<tr
key={row.id}
className={clsx(
'border-t-grey-25 relative scale-100 border-t',
canEditDataModel && 'hover:bg-purple-10 group',
displayPivot &&
isFieldPartOfPivot(row.original.id) &&
'bg-purple-10',
displayPivot &&
!isFieldPartOfPivot(row.original.id) &&
'opacity-20',
)}
>
<td className="relative">
<Handle
type="target"
id={row.original.name}
position={Position.Left}
// For now, we don't want to show the handle or allow connections
style={{ background: 'transparent', border: 'none' }}
isConnectable={false}
/>
</td>
{visibleCells.map((cell) => {
return (
<td key={cell.id} className="max-w-96 p-2 ">
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
);
})}
<td className="relative">
<Handle
type="source"
id={row.original.name}
position={Position.Right}
// For now, we don't want to show the handle or allow connections
style={{ background: 'transparent', border: 'none' }}
isConnectable={false}
/>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
}

Expand Down
8 changes: 4 additions & 4 deletions packages/app-builder/src/components/Decisions/DecisionsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ export function DecisionsList({
),
cell: ({ row }) => (
<Checkbox
className="isolate"
className="relative"
checked={row.getIsSelected()}
onClick={(e) => {
e.stopPropagation();
Expand Down Expand Up @@ -152,7 +152,7 @@ export function DecisionsList({
scenarioId: fromUUID(row.original.scenario.id),
})}
onClick={(e) => e.stopPropagation()}
className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
>
{getValue()}
</Link>
Expand All @@ -169,7 +169,7 @@ export function DecisionsList({
iterationId: fromUUID(row.original.scenario.scenarioIterationId),
})}
onClick={(e) => e.stopPropagation()}
className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
>
{`V${getValue()}`}
</Link>
Expand All @@ -196,7 +196,7 @@ export function DecisionsList({
caseId: fromUUID(row.original.case.id),
})}
onClick={(e) => e.stopPropagation()}
className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
>
{getValue()}
</Link>
Expand Down
2 changes: 1 addition & 1 deletion packages/app-builder/src/components/Decisions/PivotDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ function PivotList({ pivotValues }: Pick<PivotDetailProps, 'pivotValues'>) {
>
<Link
to={getDecisionRoute({ pivotValue: getValue() })}
className="hover:text-purple-120 focus:text-purple-120 isolate font-semibold capitalize text-purple-100 hover:underline focus:underline"
className="hover:text-purple-120 focus:text-purple-120 relative font-semibold capitalize text-purple-100 hover:underline focus:underline"
>
{getValue()}
</Link>
Expand Down
7 changes: 4 additions & 3 deletions packages/ui-design-system/src/Table/Table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,14 +128,14 @@ interface TableProps<TData extends RowData> extends TableOptions<TData> {
/**
* Transform the row into a link.
*
* Be aware you need to use 'isolate' class on other interactable cell elements to avoid z-index issues.
* Be aware you need to use 'relative' class on other interactable cell elements to create a new stacking context and avoid z-index issues.
*
* @example
* rowLink={(row) => <Link to={`/row/${row.id}`}>{row.name}</Link>}
* ...
* columnHelper.accessor({
* ...
* cell: ({ getValue }) => <Checkbox className="isolate">{getValue()}</Checkbox>,
* cell: ({ getValue }) => <Checkbox className="relative">{getValue()}</Checkbox>,
* }),
*/
rowLink?: (row: TData) => JSX.Element;
Expand Down Expand Up @@ -253,7 +253,8 @@ function Row<TData extends RowData>({
...props
}: Omit<React.ComponentProps<'tr'>, 'children'> & { row: Row<TData> }) {
return (
<tr className={clsx('group relative h-16', className)} {...props}>
// Scale-100 is a hack to bypass relative bug on <tr /> for Safari https://bugs.webkit.org/show_bug.cgi?id=240961
<tr className={clsx('group relative h-16 scale-100', className)} {...props}>
{row.getVisibleCells().map((cell) => {
const context = cell.getContext();
if (context.column.id === internalRowLink) {
Expand Down

0 comments on commit 6705d15

Please sign in to comment.