Files
tempo/ui/src/datacolumn/ExpandColumn.tsx
T

44 lines
1.5 KiB
TypeScript

import * as React from "react";
import { ColumnProps } from "primereact/column";
import { IColumn } from "./IColumn";
import IGetColumnPropsArgs from "./IGetColumnPropsArgs";
import MinusSquareIcon from "../icon/MinusSquareIcon";
import PlusSquareIcon from "../icon/PlusSquareIcon";
export interface IExpandColumnProps {
/** Whether columns are expanded or not */
expanded?: boolean;
/** Called when column header icon is clicked */
onToggle?: (expanded: boolean) => void;
}
/**
* @beta
*/
const ExpandColumn: React.FC<IExpandColumnProps> & IColumn = (props: IExpandColumnProps) => {
// Note this class is only for intellisense with typescript.
// The column component for a datagrid is never rendered. It is only used to propagate props.
// Component lifecycle and constructor will never be called.
// Don't put any logic here. It will never be called.
// In case you didn't read above, DO NOT PUT ANY LOGIC HERE.
return null;
}
ExpandColumn.className = "ExpandColumn";
ExpandColumn.getColumnProps = (args: IGetColumnPropsArgs): ColumnProps => {
const { props } = args;
let { expanded, onToggle } = props as IExpandColumnProps;
return {
className: "p-column-expand",
header: <span className="p-column-expand-icon" onClick={() => onToggle && onToggle(!expanded)}>
{expanded ? (<MinusSquareIcon color="blue-700" size={14} />) : (<PlusSquareIcon color="blue-700" size={14} />)}
</span>
} as ColumnProps;
}
export default ExpandColumn;