@gechiui/components
Version:
UI components for GeChiUI.
136 lines • 4.84 kB
TypeScript
/**
* External dependencies
*/
import type { ReactNode } from 'react';
declare type ResetAllFilter = () => void;
declare type ResetAll = (filters?: ResetAllFilter[]) => void;
export declare type ToolsPanelProps = {
/**
* The child elements.
*/
children: ReactNode;
/**
* Flags that the items in this ToolsPanel will be contained within an inner
* wrapper element allowing the panel to lay them out accordingly.
*/
hasInnerWrapper: boolean;
/**
* Text to be displayed within the panel's header and as the `aria-label`
* for the panel's dropdown menu.
*/
label: string;
/**
* If a `panelId` is set, it is passed through the `ToolsPanelContext` and
* used to restrict panel items. Only items with a matching `panelId` will
* be able to register themselves with this panel.
*/
panelId: string;
/**
* A function to call when the `Reset all` menu option is selected. This is
* passed through to the panel's header component.
*/
resetAll: ResetAll;
/**
* Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
* placeholder content instead of null when they are toggled off and hidden.
*/
shouldRenderPlaceholderItems: boolean;
};
export declare type ToolsPanelHeaderProps = {
/**
* Text to be displayed within the panel header. It is also passed along as
* the `label` for the panel header's `DropdownMenu`.
*/
label: string;
/**
* The `resetAll` prop provides the callback to execute when the "Reset all"
* menu item is selected. Its purpose is to facilitate resetting any control
* values for items contained within this header's panel.
*/
resetAll: ResetAll;
/**
* This is executed when an individual control's menu item is toggled. It
* will update the panel's menu item state and call the panel item's
* `onSelect` or `onDeselect` callbacks as appropriate.
*/
toggleItem: (label: string) => void;
};
export declare type ToolsPanelItem = {
/**
* This is called when building the `ToolsPanel` menu to determine the
* item's initial checked state.
*/
hasValue: () => boolean;
/**
* This prop identifies the current item as being displayed by default. This
* means it will show regardless of whether it has a value set or is toggled
* on in the panel's menu.
*/
isShownByDefault: boolean;
/**
* The supplied label is dual purpose. It is used as:
* 1. the human-readable label for the panel's dropdown menu
* 2. a key to locate the corresponding item in the panel's menu context to
* determine if the panel item should be displayed.
* A panel item's `label` should be unique among all items within a single
* panel.
*/
label: string;
/**
* Panel items will ensure they are only registering with their intended
* panel by comparing the `panelId` props set on both the item and the panel
* itself. This allows items to be injected from a shared source.
*/
panelId: string;
/**
* A `ToolsPanel` will collect each item's `resetAllFilter` and pass an
* array of these functions through to the panel's `resetAll` callback. They
* can then be iterated over to perform additional tasks.
*/
resetAllFilter: ResetAllFilter;
};
export declare type ToolsPanelItemProps = ToolsPanelItem & {
/**
* The child elements.
*/
children?: ReactNode;
/**
* Called when this item is deselected in the `ToolsPanel` menu. This is
* normally used to reset the panel item control's value.
*/
onDeselect?: () => void;
/**
* A callback to take action when this item is selected in the `ToolsPanel`
* menu.
*/
onSelect?: () => void;
};
export declare type ToolsPanelMenuItemKey = 'default' | 'optional';
export declare type ToolsPanelMenuItems = {
[menuItemKey in ToolsPanelMenuItemKey]: {
[key: string]: boolean;
};
};
export declare type ToolsPanelContext = {
panelId?: string;
menuItems: ToolsPanelMenuItems;
hasMenuItems: boolean;
registerPanelItem: (item: ToolsPanelItem) => void;
deregisterPanelItem: (label: string) => void;
flagItemCustomization: (label: string, group?: ToolsPanelMenuItemKey) => void;
isResetting: boolean;
shouldRenderPlaceholderItems: boolean;
areAllOptionalControlsHidden: boolean;
};
export declare type ToolsPanelControlsGroupProps = {
items: [string, boolean][];
onClose: () => void;
toggleItem: (label: string) => void;
};
export declare type ToolsPanelMenuItemsConfig = {
panelItems: ToolsPanelItem[];
shouldReset: boolean;
currentMenuItems?: ToolsPanelMenuItems;
};
export {};
//# sourceMappingURL=types.d.ts.map