@ansible/ansible-ui-framework
Version:
A framework for building applications using PatternFly.
324 lines (323 loc) • 11.6 kB
TypeScript
import { ReactNode } from 'react';
import { PageTableViewTypeE } from '../PageToolbar/PageTableViewType';
export declare enum ColumnTableOption {
description = "description",
expanded = "expanded",
hidden = "hidden"
}
export declare enum ColumnListOption {
name = "name",
subtitle = "subtitle",
description = "description",
hidden = "hidden",
primary = "primary",
secondary = "secondary"
}
export declare enum ColumnCardOption {
name = "name",
subtitle = "subtitle",
description = "description",
hidden = "hidden"
}
export declare enum ColumnModalOption {
hidden = "hidden"
}
export declare enum ColumnDashboardOption {
hidden = "hidden"
}
export declare enum ColumnPriority {
last = "last"
}
interface ITableColumnCommon<T extends object> {
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: 'asc' | 'desc';
defaultSort?: boolean;
icon?: (item: T) => ReactNode;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
}
export interface ITableColumnTypeReactNode<T extends object> extends ITableColumnCommon<T> {
type?: undefined;
value?: CellFn<T, string | string[] | number | boolean | undefined | null>;
cell: CellFn<T, ReactNode | undefined>;
}
export interface ITableColumnTypeText<T extends object> extends ITableColumnCommon<T> {
type: 'text';
value: CellFn<T, string | null | undefined>;
to?: (item: T) => string | undefined;
}
export interface ITableColumnTypeDescription<T extends object> extends ITableColumnCommon<T> {
type: 'description';
value: CellFn<T, string | undefined | null>;
}
export interface ITableColumnTypeCount<T extends object> extends ITableColumnCommon<T> {
type: 'count';
value: CellFn<T, number | undefined>;
}
export interface ITableColumnTypeLabels<T extends object> extends ITableColumnCommon<T> {
type: 'labels';
value: CellFn<T, string[] | undefined>;
}
export interface ITableColumnTypeDateTime<T extends object> extends ITableColumnCommon<T> {
type: 'datetime';
value: CellFn<T, number | string | undefined>;
}
export type ITableColumn<T extends object> = ITableColumnTypeReactNode<T> | ITableColumnTypeText<T> | ITableColumnTypeDescription<T> | ITableColumnTypeDateTime<T> | ITableColumnTypeLabels<T> | ITableColumnTypeCount<T>;
export declare function TableColumnCell<T extends object>(props: {
item: T;
column?: ITableColumn<T>;
}): JSX.Element;
export declare function useVisibleTableColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export declare function useVisibleListColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export declare function useVisibleCardColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export declare function useVisibleModalColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export declare function useDashboardColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export declare function useVisibleColumns<T extends object>(columns: ITableColumn<T>[], viewType: PageTableViewTypeE): ITableColumn<T>[];
export declare function useDescriptionColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export declare function useExpandedColumns<T extends object>(columns: ITableColumn<T>[]): ITableColumn<T>[];
export type CellFn<T extends object, R> = (item: T) => R;
export declare function useColumnsWithoutSort<T extends object>(columns: ITableColumn<T>[]): ({
sort: undefined;
type?: undefined;
value?: CellFn<T, string | number | boolean | string[] | null | undefined> | undefined;
cell: CellFn<T, ReactNode>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
sort: undefined;
type: "text";
value: CellFn<T, string | null | undefined>;
to?: ((item: T) => string | undefined) | undefined;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
sort: undefined;
type: "description";
value: CellFn<T, string | null | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
sort: undefined;
type: "datetime";
value: CellFn<T, string | number | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
sort: undefined;
type: "labels";
value: CellFn<T, string[] | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
sort: undefined;
type: "count";
value: CellFn<T, number | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
table?: keyof typeof ColumnTableOption;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
})[];
export declare function useColumnsWithoutExpandedRow<T extends object>(columns: ITableColumn<T>[]): ({
table: "hidden" | "description" | undefined;
type?: undefined;
value?: CellFn<T, string | number | boolean | string[] | null | undefined> | undefined;
cell: CellFn<T, ReactNode>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
table: "hidden" | "description" | undefined;
type: "text";
value: CellFn<T, string | null | undefined>;
to?: ((item: T) => string | undefined) | undefined;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
table: "hidden" | "description" | undefined;
type: "description";
value: CellFn<T, string | null | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
table: "hidden" | "description" | undefined;
type: "datetime";
value: CellFn<T, string | number | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
table: "hidden" | "description" | undefined;
type: "labels";
value: CellFn<T, string[] | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
} | {
table: "hidden" | "description" | undefined;
type: "count";
value: CellFn<T, number | undefined>;
id?: string;
header: string;
helpText?: string;
minWidth?: number;
maxWidth?: number;
fullWidth?: boolean;
sort?: string;
defaultSortDirection?: "asc" | "desc";
defaultSort?: boolean;
icon?: ((item: T) => ReactNode) | undefined;
list?: keyof typeof ColumnListOption;
card?: keyof typeof ColumnCardOption;
modal?: keyof typeof ColumnModalOption;
dashboard?: keyof typeof ColumnDashboardOption;
priority?: keyof typeof ColumnPriority;
})[];
export {};