Sha256: 51048d39ecb08683bbb1e6832ae6d2aff8b49abead03ece15531e73edf510b9f
Contents?: true
Size: 1.84 KB
Versions: 25
Compression:
Stored size: 1.84 KB
Contents
import React, { useContext } from "react";
import Flex from "../../pb_flex/_flex";
import FlexItem from "../../pb_flex/_flex_item";
import Icon from "../../pb_icon/_icon";
import { GlobalProps } from "../../utilities/globalProps";
import { Getter, Row } from "@tanstack/react-table";
import { DataType } from "../Utilities/types";
import AdvancedTableContext from "../Context/AdvancedTableContext";
interface CustomCellProps {
getValue?: Getter<string>;
onRowToggleClick?: (arg: Row<DataType>) => void;
row: Row<DataType>;
value?: string;
}
export const CustomCell = ({
getValue,
onRowToggleClick,
row,
value,
}: CustomCellProps & GlobalProps) => {
const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
const handleOnExpand = (row: Row<DataType>) => {
onRowToggleClick && onRowToggleClick(row);
setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
};
const RowHasChildren = row.original.children ? true : false
const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()
return (
<div style={{ paddingLeft: `${row.depth * 1.25}em` }}>
<Flex alignItems="center"
columnGap="xs"
orientation="row"
>
{renderButton ? (
<button
className="gray-icon expand-toggle-icon"
onClick={() => handleOnExpand(row)}
>
{row.getIsExpanded() ? (
<Icon cursor="pointer"
icon="circle-play"
rotation={90}
/>
) : (
<Icon cursor="pointer"
icon="circle-play"
/>
)}
</button>
) : null}
<FlexItem paddingLeft={renderButton? "none" : "xs"}>
{row.depth === 0 ? getValue() : value}
</FlexItem>
</Flex>
</div>
);
};
Version data entries
25 entries across 25 versions & 1 rubygems