@knowmax/genericlist-fluentuiv9/dist/index.d.ts

Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.

import * as react from 'react';
import { FunctionComponent, ReactElement } from 'react';
import { GenericList, IOrder, IFilter, GenericCudList } from '@knowmax/genericlist-core';
import { ButtonProps } from '@fluentui/react-button';

/** Wrap this around each list and use @see ListItemPanel for each item in list. */
declare const ListPanel: FunctionComponent<{
    loading?: boolean;
    children?: React.ReactNode;
    className?: string;
}>;

/** Wrap this around each list item panel. */
declare const ListItemPanel: FunctionComponent<{
    children?: React.ReactNode;
    className?: string;
}>;

type TOnRenderListItem<T> = (item: T, index: number) => ReactElement;
type TListLayout = 'list' | 'grid' | 'compact' | 'card';
interface IListProps<T = unknown> {
    list: GenericList<T>;
    onRenderListItem: TOnRenderListItem<T>;
    showPager?: boolean;
    layout?: TListLayout;
    className?: string;
}
/** Generic component to render list for items in provided @see GenericList. */
declare const List: (<T>({ list, onRenderListItem, showPager, layout, className }: IListProps<T>) => react.JSX.Element) & {
    displayName: string;
};

interface IVirtualizedListProps<T = unknown> {
    list: GenericList<T>;
    onRenderListItem: TOnRenderListItem<T>;
    /**
     * Fixed pixel height of each list item row.
     * When omitted, defaults to 90 px for `list`/`grid`/`card` and 64 px for `compact`.
     */
    itemHeight?: number;
    /**
     * Height of the scrollable list container in pixels.
     *
     * When omitted, the list expands to fill all available vertical space in its
     * parent using `AutoSizer` (from `react-virtualized-auto-sizer`). This requires
     * that a parent element in the tree has a **constrained height** (e.g. `height:
     * 100vh`, `flex: 1` in a fixed-height flex column, or an explicit pixel value).
     * Without a constrained ancestor the measured height will be 0 and nothing will
     * render.
     *
     * When provided, `AutoSizer` is skipped and the list container is sized to the
     * exact pixel value – useful when the parent height is unconstrained.
     */
    height?: number;
    /**
     * Layout style – mirrors the `layout` prop of `List` to ease migration.
     *
     * `list` and `compact` translate naturally to row-based virtualization.
     * `grid` and `card` are accepted for API compatibility but items will still
     * render one per row – react-window's absolute-positioned rows are incompatible
     * with CSS multi-column grid on the container.
     */
    layout?: TListLayout;
    /** Number of extra items rendered outside the visible area for smoother scrolling. Defaults to 3. */
    overscanCount?: number;
    className?: string;
}
/**
 * Virtualized list component that renders items with react-window and loads more
 * results automatically as the user scrolls down (infinite scroll).
 *
 * Items from the underlying {@link GenericList} are accumulated across pages so the
 * user never loses previously loaded rows. A new page is requested from the server
 * once the visible window reaches within {@link IVirtualizedListProps.overscanCount}
 * rows of the last loaded item.
 *
 * **Height behaviour**
 *
 * - When `height` is **omitted** the list uses `AutoSizer` to fill all available
 *   vertical space in its parent. The parent (or an ancestor) must have a
 *   constrained height; otherwise the measured size will be 0 and nothing renders.
 * - When `height` is **provided** `AutoSizer` is bypassed and the container is
 *   fixed to that pixel value, which works fine even when the parent height is
 *   unconstrained.
 *
 * The existing {@link List} component remains unchanged and continues to work with
 * a traditional pager – this component is an additive, non-breaking addition.
 */
declare const VirtualizedList: (<T>({ list, onRenderListItem, itemHeight, height, layout, overscanCount, className }: IVirtualizedListProps<T>) => react.JSX.Element) & {
    displayName: string;
};

/** Wrap this around components to be put on a fancy side panel besides list. Renders as div. */
declare const SidePanel: FunctionComponent<{
    children?: React.ReactNode;
    caption?: string;
    showResetFilters?: boolean;
    showRecycleBinFilter?: boolean;
    collapsible?: boolean;
    collapsed?: boolean;
    list?: GenericList;
    listId?: string;
    className?: string;
    captionClassName?: string;
}>;

declare module '@knowmax/genericlist-core' {
    interface IOrder {
    }
}
/** Offers sort order options. Serializes and deserializes in query params of url. */
declare const OrderSelector: FunctionComponent<{
    list: IOrder[];
    listId?: string;
}>;

/** Offers operator options. Serializes and deserializes in query params of url. */
declare const OperatorSelector: FunctionComponent<{
    filter: IFilter;
    listId?: string;
}>;

/** Renders a single filter. Serializes and deserializes in query params of url. */
declare const Filter: FunctionComponent<{
    filter: IFilter;
    listId?: string;
}>;

/** Renders a single text input filter. Serializes and deserializes in query params of url. */
declare const FilterText: FunctionComponent<{
    filter: IFilter;
    listId?: string;
}>;

/** Renders filter with renderCustom property set. */
declare const FilterCustom: FunctionComponent<{
    filter: IFilter;
    listId?: string;
}>;

declare const FilterOptions: FunctionComponent<{
    filter: IFilter;
    listId?: string;
}>;

/** Renders filter for boolean value. */
declare const FilterBoolean: FunctionComponent<{
    filter: IFilter;
    listId?: string;
}>;

/** Renders list of filters. */
declare const FilterList: FunctionComponent<{
    list: IFilter[];
    listId?: string;
    className?: string;
}>;

/** Shows list of filters currently serialized in params of query. */
declare const SelectedFilterList: FunctionComponent<{
    list: IFilter[];
    hiddenOnly?: boolean;
    allowClear?: boolean;
    listId?: string;
    className?: string;
}>;

declare const SelectedFilter: FunctionComponent<{
    filter: IFilter;
    value: string;
    allowClear: boolean;
    listId?: string;
}>;

/** Total number of items in generic list. */
declare const TotalItems: FunctionComponent<{
    list: GenericList;
}>;

/** Dedicated pager wrapper including loader and total number of items for lists. */
declare const PagerWrapper: FunctionComponent<{
    list: GenericList;
    className?: string;
}>;

declare const ResetFilters: FunctionComponent<{
    list?: GenericList;
    listId?: string;
}>;

declare const RecycleBinFilter: FunctionComponent<{
    listId?: string;
}>;

type IProps$1<T = unknown, ET = unknown> = {
    list: GenericCudList<T, ET>;
    template?: ET;
} & ButtonProps;
/** Renders button to start process to create new item. */
declare const CreateItem: (<T = unknown, ET = unknown>(props: IProps$1<T, ET>) => react.JSX.Element) & {
    displayName: string;
};

type IProps<T = unknown> = {
    list: GenericList<T>;
} & ButtonProps;
/** Renders button to refresh/reload the list data. */
declare const RefreshList: (<T = unknown>(props: IProps<T>) => react.JSX.Element) & {
    displayName: string;
};

type IHeadPanelSharedProps<T = unknown, ET = unknown> = {
    /** Title to display in head panel. */
    title?: string;
    /** Optional children to render between optional title and create item. */
    children?: React.ReactNode;
    /** Set to show a refresh button on the right side of head panel. Only when @see list is set. */
    showRefreshList?: boolean;
    /** Props for optional refresh list button. */
    refreshListProps?: ButtonProps;
    /** Optional text to display for optional refresh list button. */
    refreshListText?: string;
    /** Optional class name to merge with default class. */
    className?: string;
    /**
     * Set to show a layout selector on the right side of the head panel. Defaults to false.
     * Requires @see layout and @see onLayoutChange to be set.
     */
    showLayoutSelector?: boolean;
    /** Currently active layout. Required when @see showLayoutSelector is true. */
    layout?: TListLayout;
    /** Callback fired when the user selects a different layout. Required when @see showLayoutSelector is true. */
    onLayoutChange?: (layout: TListLayout) => void;
    /** Restrict the layouts offered in the selector. Defaults to all four layouts. */
    availableLayouts?: TListLayout[];
};
type IHeadPanelRefreshOnlyProps<T = unknown, ET = unknown> = IHeadPanelSharedProps<T, ET> & {
    /** List associated with head panel, used for refresh functionality. */
    list?: GenericList<T>;
    /** Set to show create item button on the right side of head panel. */
    showCreateItem?: false;
    /** Create item props are only supported when list supports create(). */
    createItemProps?: never;
    /** Create item text is only supported when list supports create(). */
    createItemText?: never;
};
type IHeadPanelCudProps<T = unknown, ET = unknown> = IHeadPanelSharedProps<T, ET> & {
    /** List associated with head panel, needed to show create item. */
    list?: GenericCudList<T, ET>;
    /** Set to show create item button on the right side of head panel. Only when @see list supports create(). */
    showCreateItem?: boolean;
    /** Props for optional create item. */
    createItemProps?: ButtonProps & {
        template?: ET;
    };
    /** Optional text to display for optional create item. */
    createItemText?: string;
};
type IHeadPanelProps<T = unknown, ET = unknown> = IHeadPanelRefreshOnlyProps<T, ET> | IHeadPanelCudProps<T, ET>;
/** Use to put a fancy head panel above list. For example containing list title, custom contents and create button. */
declare const HeadPanel: (<T = unknown, ET = unknown>(props: IHeadPanelProps<T, ET>) => react.JSX.Element) & {
    displayName: string;
};

type TLayoutOption = {
    layout: TListLayout;
    /** Translation key used with onTranslate, or a fallback label when not translated. */
    labelKey: string;
    /** Fallback label shown when no translator is configured. */
    defaultLabel: string;
    icon: ReactElement;
};
/** Default layout options. Labels are resolved via the onTranslate mechanism at render time. */
declare const ALL_LAYOUT_OPTIONS: TLayoutOption[];
interface ILayoutSelectorProps {
    /** Currently active layout. */
    value: TListLayout;
    /** Callback fired when the user selects a different layout. */
    onChange: (layout: TListLayout) => void;
    /**
     * Subset of layouts to offer. Defaults to all four layouts.
     * When exactly two layouts are provided a two-icon toggle bar is shown;
     * for three or more a menu button is shown.
     */
    availableLayouts?: TListLayout[];
}
/** Renders a layout selector for a list. Shows a two-icon toggle for two options, or a menu button for three or more. */
declare const LayoutSelector: FunctionComponent<ILayoutSelectorProps>;

export { ALL_LAYOUT_OPTIONS, CreateItem, Filter, FilterBoolean, FilterCustom, FilterList, FilterOptions, FilterText, HeadPanel, type ILayoutSelectorProps, type IListProps, type IVirtualizedListProps, LayoutSelector, List, ListItemPanel, ListPanel, OperatorSelector, OrderSelector, PagerWrapper, RecycleBinFilter, RefreshList, ResetFilters, SelectedFilter, SelectedFilterList, SidePanel, type TLayoutOption, type TListLayout, type TOnRenderListItem, TotalItems, VirtualizedList };