@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
127 lines • 3.39 kB
TypeScript
import { BoxProps, Factory, StylesApiProps } from '@mantine/core';
import { FunctionComponent, ReactNode } from 'react';
import { FacetData, FacetItem, FacetItemComponent } from './FacetTypes.js';
export type FacetStylesNames = 'facet' | 'facetItem' | 'facetItems' | 'facetHeader' | 'searchInput' | 'hiddenSearch' | 'facetBody' | 'facetTitleRow' | 'facetTitle' | 'facetRemoveButton' | 'facetSearch' | 'facetControl' | 'separator' | 'separatorLabel';
export interface FacetProps extends BoxProps, StylesApiProps<FacetFactory> {
className?: string;
/**
* The data to render in the component
*/
data: FacetData;
/**
* Function called when an item is selected or unselected
*
* @param values the selected items
*/
onChange?: (values: string[]) => void;
/**
* Function called when the remove icon is clicked.
*/
onRemove?: () => void;
/**
* Initial items selection
*
* @default []
*/
initialSelection?: string[];
/**
* Determines if the facet is removable
*
* @default false
*/
removable?: boolean;
/**
* Determined items selection
*
* @default []
*/
selection?: string[];
/**
* Custom item component
*
* @default a checkbox with the label of the item
*/
itemComponent?: FacetItemComponent;
/**
* Function to format the facet item count
*
* @param count
* @default (count) => count.toString()
*/
itemCountFormatter?: (value: number) => string;
/**
* Search input placeholder
*/
searchPlaceholder?: string;
/**
* Called when the search query changes
*
* @param value the search query
*/
onSearch?: (value: string) => void;
/**
* Function to filter search results
*
* @param query value of the search input
* @param item the current item
*
* @default function that compare the query with the label and value, case-insensitive
*/
filter?: (query: string, item: FacetItem) => boolean;
/**
* Value of the search input
*/
query?: string;
/**
* Nothing found message
*
* @default No matching items
*/
nothingFound?: ReactNode;
/**
* Displayed when a list is empty and there is no search query
*
* @default No items
*/
placeholder?: ReactNode;
/**
* Facet title
*/
title?: ReactNode;
/**
* Maximum height, only used when there is more than 7 values
*
* @default 200
*/
height?: number | 'auto';
/**
* Predefined border-radius value from theme.radius or number for border-radius in px
*
* @default md
*/
radius?: number | string;
/**
* Change list component, can be used to add custom scrollbars
*/
listComponent?: FunctionComponent<any>;
/**
* Limit amount of items showed at a time
*
* @default Infinity
*/
limit?: number;
/**
* Control the displaying of the search input.
*
* @default data.length <= 7
*/
hideSearch?: boolean;
__staticSelector?: string;
}
export type FacetFactory = Factory<{
props: FacetProps;
ref: HTMLDivElement;
stylesNames: FacetStylesNames;
}>;
export declare const Facet: FunctionComponent<FacetProps>;
//# sourceMappingURL=Facet.d.ts.map