@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
107 lines (106 loc) • 2.96 kB
TypeScript
import { StackProps } from '@mui/material/Stack';
import React, { FC } from 'react';
import { IActionGroup } from '../ActionGroup';
import { ButtonPropsWithTestId } from '../models/MuiExtension.type';
export type IFilterOption = {
name: string;
value: string;
};
export interface IProjectGridHeader extends Omit<StackProps, 'title'> {
/**
* The first line of text / content.
*/
title: React.ReactNode;
/**
* The second line of text / content.
*/
description?: React.ReactNode;
/**
* List of action icons to include
*
* ```
* export type ActionItem = {
* label: string;
* icon: ReactNode;
* onClick: () => void;
* }
* ```
* @default []
*/
actions?: IActionGroup['actions'];
/**
* If the `actions` props does not meet requirements, `actionsComponent` can be used to customize header action elements.
*/
actionsComponent?: React.ReactNode;
/**
* If true, the create document button is disabled
* @default false
*/
disableCreateButton?: boolean;
/**
* Create Button props, extends from MUI ButtonProps.
*
*/
createButtonProps?: ButtonPropsWithTestId;
/**
* Options of the project type filter
*/
projectTypeOptions?: ReadonlyArray<IFilterOption>;
/**
* Label for project type filter.
* @default Project Type
*/
projectTypeFilterLabel?: string;
/**
* Options of the ownership filter
*/
ownershipOptions?: ReadonlyArray<IFilterOption>;
/**
* Options of the sort by filter
*/
sortOptions?: ReadonlyArray<IFilterOption>;
/**
* Default project filter values
* @default []
*/
defaultProjectTypes?: ReadonlyArray<string>;
/**
* Default ownership filter value
* @default undefined
*/
defaultOwnership?: string | undefined;
/**
* Default sort by filter value
* @default undefined
*/
defaultSortBy?: string | undefined;
/**
* The on click event of share button
*/
onShare?: () => void;
/**
* The search input text change event
*/
onSearch: (searchText: string) => void;
/**
* Create document callback function
*/
onCreate: () => void;
/**
* The on change event of the project type filter
*/
onProjectTypeFilterChange?: (selectedFilters: string[]) => void;
/**
* The on change event of the ownership filter
*/
onOwnershipFilterChange?: (selectedFilter: string | undefined) => void;
/**
* The on change event of the sort by filter
*/
onSortFilterChange?: (selectedSortBy: string | undefined) => void;
/**
* The on click event of left "Menu Icon" when the screen is small size.
*/
onMenuToggle?: React.MouseEventHandler<HTMLButtonElement>;
}
export declare const ProjectGridHeader: FC<IProjectGridHeader>;