lucid-ui

import React, { ReactElement } from 'react'; import { StandardProps, Overwrite } from '../../util/component-types'; import { IDragCaptureZoneProps } from '../DragCaptureZone/DragCaptureZone'; /** Thead <Thead>: The Table Head component */ export interface ITheadPropsRaw extends StandardProps { } declare type ITheadProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, ITheadPropsRaw>; /** Tbody <Tbody>: The Table Body component */ export interface ITBodyPropsRaw extends StandardProps { } declare type ITBodyProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, ITBodyPropsRaw>; /** Tr <Tr>: The Table Row component */ export interface ITrPropsRaw extends StandardProps { /** Applies disabled styles to the row. */ isDisabled: boolean; /** Applies styles to the row for when the row is selected, usually by a checkbox. */ isSelected: boolean; /** Applies active styles to the row, usually when the row has been clicked. */ isActive: boolean; /** */ isActionable?: boolean; } declare type ITrProps = Overwrite<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, ITrPropsRaw>; /** Th <Th>: The Table Header Cell components */ export interface IThProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> { /** Aligns the content of a cell. Can be \`left\`, \`center\`, or \`right\`. */ align?: 'left' | 'center' | 'right'; hasBorderRight?: boolean; /** Should be \`true\` to render a left border. */ hasBorderLeft?: boolean; /** Styles the cell to indicate it should be resizable and sets up drag- related events to enable this resizing functionality. */ isResizable?: boolean; /** Styles the cell to allow column sorting. */ isSortable?: boolean; /** Renders a caret icon to show that the column is sorted. */ isSorted?: boolean; /** Callback triggered as the user drags the resize handle to resize the column atop which this table header cell sits. */ onResize?: (width: number | string | null, { event, props, }: { event: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent; props: IThProps; }) => void; /** Sets the direction of the caret icon when \`isSorted\` is also set. */ sortDirection?: 'left' | 'up' | 'right' | 'down' | undefined; /** Sets the width of the cell. */ width?: number | string; /** Sets the min width of the cell. */ minWidth?: number | string; /** Indicates for how many columns the cell extends */ colSpan?: number; /** Define the cell as being in the first row. */ isFirstRow?: boolean; /** Define the cell as being in the last row. */ isLastRow?: boolean; /** Define the cell as being in the first column. */ isFirstCol?: boolean; /** Define the cell as being in the last column. */ isLastCol?: boolean; /** Define the cell as being the first 1-height cell in the row. */ isFirstSingle?: boolean; /** Sets the field value for the cell. */ field?: string; rowSpan?: number | null; } interface IThState { activeWidth: number | string | null; hasSetWidth: boolean; isResizing: boolean; isDragging: boolean; passiveWidth: number | string | null; } interface ICoordinates { dX: number; dY: number; pageX: number; pageY: number; } export declare class Th extends React.Component<IThProps, IThState> { static displayName: string; static defaultProps: { align: string; isResizable: boolean; isSorted: boolean; sortDirection: string; rowSpan: number; }; static peek: { description: string; }; static propTypes: { align: any; children: any; className: any; hasBorderRight: any; hasBorderLeft: any; isResizable: any; isSortable: any; isSorted: any; onResize: any; sortDirection: any; style: any; width: any; minWidth: any; isFirstRow: any; isLastRow: any; isFirstCol: any; isLastCol: any; isFirstSingle: any; field: any; }; private rootRef; state: { activeWidth: string | number | null; hasSetWidth: boolean; isResizing: boolean; isDragging: boolean; passiveWidth: string | number | null; }; UNSAFE_componentWillReceiveProps({ width }: { width?: number | string | null; }): void; getWidth: () => number | null; handleClickCapture: (event: React.MouseEvent | KeyboardEvent) => void; handleMouseEnter: () => void; handleMouseUp: () => void; handleDragEnded: (coordinates: ICoordinates, { event }: { event: MouseEvent | TouchEvent; }) => void; handleDragged: (coordinates: ICoordinates, { event, props, }: { event: MouseEvent | TouchEvent; props: IDragCaptureZoneProps; }) => void; handleDragStarted: (coordinates: ICoordinates, { event, props, }: { event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.TouchEvent<HTMLDivElement>; props: IDragCaptureZoneProps; }) => void; render(): React.ReactNode; } /** Td <td>: The Table Data Cell element */ export interface ITdProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement> { /** Aligns the content of a cell. Can be \`left\`, \`center\`, or \`right\`. */ align: 'left' | 'center' | 'right'; /** Should be \`true\` to render a right border. */ hasBorderRight: boolean; /** Should be \`true\` to render a left border. */ hasBorderLeft: boolean; /** Define the cell as being in the first row. */ isFirstRow?: boolean; /** Define the cell as being in the last row. */ isLastRow?: boolean; /** Define the cell as being in the first column. */ isFirstCol?: boolean; /** Define the cell as being in the last column. */ isLastCol?: boolean; /** Define the cell as being the first 1-height cell in the row. */ isFirstSingle?: boolean; /** Indicates if the cell has any data or not */ isEmpty?: boolean; rowSpan: number | null; /** Truncates `Table.Td` content with ellipses, must be used with `hasFixedHeader` */ truncateContent?: boolean; /** Sets the width of the cell. */ width?: number | string; } /** Table <Table> The Table Component */ export interface ITableProps extends StandardProps { /** Adjusts the row density of the table to have more or less spacing. */ density?: 'compressed' | 'extended'; /** Allows light header. */ hasLightHeader?: boolean; /** Render the table with borders on the outer edge. */ hasBorder?: boolean; /** Enables word wrapping in tables cells. */ hasWordWrap?: boolean; /** Applies a row hover to rows. Defaults to true. */ hasHover?: boolean; } declare const Table: { (props: ITableProps): JSX.Element; displayName: string; defaultProps: { density: string; hasBorder: boolean; hasWordWrap: boolean; hasLightHeader: boolean; hasHover: boolean; }; peek: { description: string; categories: string[]; madeFrom: string[]; }; propTypes: { style: any; className: any; density: any; hasLightHeader: any; hasBorder: any; hasWordWrap: any; hasHover: any; }; /** ChildComponents */ Thead: { (props: ITheadProps): JSX.Element; displayName: string; peek: { description: string; }; propTypes: { className: any; children: any; }; }; Th: typeof Th; Tbody: { (props: ITBodyProps): JSX.Element; displayName: string; peek: { description: string; }; propTypes: { className: any; children: any; }; }; Tr: { (props: ITrProps): JSX.Element; defaultProps: { isDisabled: boolean; isSelected: boolean; isActive: boolean; }; displayName: string; peek: { description: string; }; propTypes: { children: any; className: any; isDisabled: any; isSelected: any; isActive: any; }; }; Td: { (props: ITdProps): React.ReactElement; displayName: string; defaultProps: { align: string; hasBorderRight: boolean; hasBorderLeft: boolean; rowSpan: number; }; peek: { description: string; categories: never[]; madeFrom: never[]; }; propTypes: { align: any; className: any; hasBorderRight: any; hasBorderLeft: any; isFirstRow: any; isLastRow: any; isFirstCol: any; isLastCol: any; isFirstSingle: any; isEmpty: any; truncateContent: any; }; }; }; export default Table;