lucid-ui
Version:
A UI component library from Xandr.
444 lines • 18.3 kB
TypeScript
import React from 'react';
import PropTypes from 'prop-types';
import { propsSearch } from '../../util/text-manipulation';
import { StandardProps } from '../../util/component-types';
import { ISearchFieldProps } from '../SearchField/SearchField';
import { IDropMenuProps, IDropMenuState, IDropMenuOptionProps, IDropMenuOptionGroupProps, IOptionsData, DropMenuDumb as DropMenu } from '../DropMenu/DropMenu';
import { ISelectionProps, ISelectionLabelProps } from '../Selection/Selection';
import * as reducers from './SearchableMultiSelect.reducers';
/** SearchableMultiSelect.OptionGroup */
interface ISearchableSingleSelectOptionGroupProps extends IDropMenuOptionGroupProps {
Selected?: React.ReactNode;
}
/** Option Child Component */
declare type ISearchableMultiSelectOptionSelectionProps = Partial<ISelectionProps>;
export interface ISearchableMultiSelectOptionProps extends IDropMenuOptionProps {
Selection?: ISearchableMultiSelectOptionSelectionProps;
description?: string;
name?: string;
Selected?: React.ReactNode;
}
export declare type Size = 'large' | 'medium' | 'small';
export interface ISearchableMultiSelectProps extends StandardProps {
isDisabled?: boolean;
isLoading: boolean;
maxMenuHeight?: string | null;
hasRemoveAll: boolean;
hasSelectAll?: boolean;
selectAllText?: string;
hasSelections?: boolean;
searchText: string;
initialState?: any;
responsiveMode: Size;
selectedIndices?: number[];
SearchField?: React.ReactNode;
DropMenu: IDropMenuProps;
Option?: ISearchableMultiSelectOptionProps;
OptionGroup?: IDropMenuOptionGroupProps;
SelectionLabel?: ISelectionLabelProps;
Error?: React.ReactNode;
onSelect: (optionIndices: number[] | number, { props, event, }: {
props: IDropMenuOptionProps | undefined;
event: React.KeyboardEvent | React.MouseEvent;
}) => void;
onSearch: (searchText: string, firstVisibleIndex: number | null, { props, event, }: {
props: IDropMenuOptionProps;
event: React.KeyboardEvent | React.MouseEvent;
}) => void;
optionFilter: (searchValue: string, props: any) => boolean;
onRemoveAll: ({ props, event, }: {
props: IDropMenuOptionProps;
event: React.KeyboardEvent | React.MouseEvent;
}) => void;
}
export interface ISearchableMultiSelectState {
DropMenu: IDropMenuState;
selectedIndices: number[];
searchText: string | null;
optionGroups: IDropMenuOptionGroupProps[];
flattenedOptionsData: IOptionsData[];
ungroupedOptionData: IOptionsData[];
optionGroupDataLookup: {
[key: number]: IOptionsData[];
};
}
declare class SearchableMultiSelect extends React.Component<ISearchableMultiSelectProps, ISearchableMultiSelectState> {
static displayName: string;
static peek: {
description: string;
categories: string[];
madeFrom: string[];
};
static defaultProps: {
isDisabled: boolean;
isLoading: boolean;
hasRemoveAll: boolean;
hasSelections: boolean;
hasSelectAll: boolean;
selectAllText: string;
searchText: string;
responsiveMode: "large";
selectedIndices: never[];
DropMenu: {
isDisabled: boolean;
isExpanded: boolean;
direction: "down";
alignment: "start";
selectedIndices: never[];
focusedIndex: null;
flyOutStyle: {
maxHeight: string;
};
onExpand: (...args: any[]) => void;
onCollapse: (...args: any[]) => void;
onSelect: (...args: any[]) => void;
onFocusNext: (...args: any[]) => void;
onFocusPrev: (...args: any[]) => void;
onFocusOption: (...args: any[]) => void;
portalId: string;
optionContainerStyle: {};
ContextMenu: {
direction: string;
directonOffset: number;
minWidthOffset: number;
alignment: string;
getAlignmentOffset: () => number;
isExpanded: boolean;
onClickOut: null;
portalId: null;
};
};
Error: null;
optionFilter: typeof propsSearch;
onSearch: (...args: any[]) => void;
onRemoveAll: (...args: any[]) => void;
onSelect: (...args: any[]) => void;
};
static reducers: typeof reducers;
static Option: {
(_props: ISearchableMultiSelectOptionProps): null;
displayName: string;
peek: {
description: string;
};
Selection: {
(_props: ISelectionProps): null;
displayName: string;
propTypes: {
className: PropTypes.Requireable<string>;
kind: PropTypes.Requireable<string>;
isTop: PropTypes.Requireable<boolean>;
isFilled: PropTypes.Requireable<boolean>;
isRemovable: PropTypes.Requireable<boolean>;
hasBackground: PropTypes.Requireable<boolean>;
isBold: PropTypes.Requireable<boolean>;
onRemove: PropTypes.Requireable<(...args: any[]) => any>;
Label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
Icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
responsiveMode: PropTypes.Requireable<string>;
};
propName: string;
peek: {
description: string;
};
};
Selected: {
(_props: {
children?: React.ReactNode;
}): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {};
};
propName: string;
propTypes: {
isDisabled: PropTypes.Requireable<boolean>;
isHidden: PropTypes.Requireable<boolean>;
isWrapped: PropTypes.Requireable<boolean>;
/**
Customizes the rendering of the Option when it is selected and is
displayed instead of the Placeholder.
*/
Selected: PropTypes.Requireable<any>;
/**
Uses a Selection object for custom rendering of the selected option
*/
Selection: PropTypes.Requireable<any>;
value: PropTypes.Requireable<string>;
filterText: PropTypes.Requireable<string>;
};
defaultProps: {
isDisabled: boolean;
isHidden: boolean;
isWrapped: boolean;
};
};
static OptionGroup: {
(_props: ISearchableSingleSelectOptionGroupProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
isHidden: PropTypes.Requireable<boolean>;
};
defaultProps: {
isHidden: boolean;
};
Selected: {
(_props: {
children?: React.ReactNode;
}): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {};
};
};
static SearchField: {
(_props: ISearchFieldProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
onChange: PropTypes.Requireable<(...args: any[]) => any>;
onChangeDebounced: PropTypes.Requireable<(...args: any[]) => any>;
debounceLevel: PropTypes.Requireable<number>;
onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
value: PropTypes.Requireable<string | number>;
isValid: PropTypes.Requireable<boolean>;
isDisabled: PropTypes.Requireable<boolean>;
placeholder: PropTypes.Requireable<string>;
className: PropTypes.Requireable<string>;
Icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
TextField: PropTypes.Requireable<PropTypes.ReactNodeLike>;
};
defaultProps: {
isDisabled: boolean;
onChange: (...args: any[]) => void;
onChangeDebounced: (...args: any[]) => void;
debounceLevel: number;
onSubmit: (...args: any[]) => void;
value: string;
};
};
static NullOption: {
(_props: import("../DropMenu/DropMenu").IDropMenuNullOptionProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {};
};
static FixedOption: {
(_props: import("../DropMenu/DropMenu").IDropMenuFixedOptionProps): null;
displayName: string;
peek: {
description: string;
};
propName: string;
propTypes: {
isDisabled: PropTypes.Requireable<boolean>;
isHidden: PropTypes.Requireable<boolean>;
isWrapped: PropTypes.Requireable<boolean>;
};
defaultProps: {
isDisabled: boolean;
isHidden: boolean;
isWrapped: boolean;
};
};
static DropMenu: typeof DropMenu;
static SelectionLabel: import("../../util/component-types").FC<ISelectionLabelProps>;
static propTypes: {
/**
Should be instances of \`SearchableMultiSelect.Option\`. Other direct
child elements will not render.
*/
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
/**
Appended to the component-specific class names set on the root element.
*/
className: PropTypes.Requireable<string>;
/**
Disables the control from being clicked or focused.
*/
isDisabled: PropTypes.Requireable<boolean>;
/**
Displays a LoadingIcon to allow for asynchronous loading of options.
*/
isLoading: PropTypes.Requireable<boolean>;
/**
The max height of the fly-out menu.
*/
maxMenuHeight: PropTypes.Requireable<string | number>;
onSearch: PropTypes.Requireable<(...args: any[]) => any>; /**
Called when the user enters a value to search for; the set of visible
Options will be filtered using the value. Signature: \`(searchText,
firstVisibleIndex, {props, event}) => {}\` \`searchText\` is the value
from the \`SearchField\` and \`firstVisibleIndex\` is the index of the
first option that will be visible after filtering.
*/
/**
Called when an option is selected. Signature: \`(optionIndex, {props,
event}) => {}\` \`optionIndex\` is the new \`selectedIndex\` or \`null\`.
*/
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
/**
Called when the user clicks to remove all selections. Signature:
\`({props, event}) => {}\`.
*/
onRemoveAll: PropTypes.Requireable<(...args: any[]) => any>;
/**
The function that will be run against each Option's props to determine
whether it should be visible or not. The default behavior of the function
is to match, ignoring case, against any text node descendant of the
\`Option\`. Signature: \`(searchText, optionProps) => {}\` If \`true\`
is returned, the option will be visible. If \`false\`, the option will
not be visible.
*/
optionFilter: PropTypes.Requireable<(...args: any[]) => any>;
/**
The current search text to filter the list of options by.
*/
searchText: PropTypes.Requireable<string>;
/**
An array of currently selected \`SearchableMultiSelect.Option\` indices
or \`null\` if nothing is selected.
*/
selectedIndices: PropTypes.Requireable<(number | null | undefined)[]>;
/**
Object of DropMenu props which are passed through to the underlying
DropMenu component.
*/
DropMenu: PropTypes.Requireable<PropTypes.InferProps<{
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
className: PropTypes.Requireable<string>;
style: PropTypes.Requireable<object>;
isDisabled: PropTypes.Requireable<boolean>;
isExpanded: PropTypes.Requireable<boolean>;
direction: PropTypes.Requireable<string>;
alignment: PropTypes.Requireable<string>;
selectedIndices: PropTypes.Requireable<(number | null | undefined)[]>;
focusedIndex: PropTypes.Requireable<number>;
portalId: PropTypes.Requireable<string>;
flyOutStyle: PropTypes.Requireable<object>;
optionContainerStyle: PropTypes.Requireable<object>;
onExpand: PropTypes.Requireable<(...args: any[]) => any>;
onCollapse: PropTypes.Requireable<(...args: any[]) => any>;
onSelect: PropTypes.Requireable<(...args: any[]) => any>;
onFocusNext: PropTypes.Requireable<(...args: any[]) => any>;
onFocusPrev: PropTypes.Requireable<(...args: any[]) => any>;
onFocusOption: PropTypes.Requireable<(...args: any[]) => any>;
Control: PropTypes.Requireable<any>;
Option: PropTypes.Requireable<any>;
OptionGroup: PropTypes.Requireable<any>;
NullOption: PropTypes.Requireable<any>;
Header: PropTypes.Requireable<any>;
ContextMenu: PropTypes.Requireable<any>;
FixedOption: PropTypes.Requireable<any>;
}>>;
Option: PropTypes.Requireable<any>; /**
*Child Element* - These are menu options. Each \`Option\` may be passed a
prop called \`isDisabled\` to disable selection of that \`Option\`. Any
other props pass to Option will be available from the \`onSelect\`
handler. It also support the \`Selection\` prop that can be used to
forward along props to the underlying \`Selection\` component.
*/
/**
Adjusts the display of this component. This should typically be driven by
screen size. Currently \`small\` and \`large\` are explicitly handled by
this component.
*/
responsiveMode: PropTypes.Requireable<string>;
/**
Controls the visibility of the "remove all" button that's shown with the
selected items.
*/
hasRemoveAll: PropTypes.Requireable<boolean>;
/**
Controls the visibility of the \`Selection\` component that appears below
the search field.
*/
hasSelections: PropTypes.Requireable<boolean>;
/**
Controls whether to show a "Select All" option.
*/
hasSelectAll: PropTypes.Requireable<boolean>;
/**
The select all text.
*/
selectAllText: PropTypes.Requireable<string>;
/**
In most cases this will be a string, but it also accepts any valid React
element. If this is a falsey value, then no error message will be
displayed. If this is the literal \`true\`, it will add the
\`-is-error\` class to the wrapper div, but not render the
\`-error-content\` \`div\`.
*/
Error: PropTypes.Requireable<any>;
FixedOption: PropTypes.Requireable<any>; /**
*Child Element* - A special kind of \`Option\` that is always rendered at the top of
the menu.
*/
NullOption: PropTypes.Requireable<any>; /**
*Child Element* - A special kind of \`Option\` that is always rendered at
the top of the menu and has an \`optionIndex\` of \`null\`. Useful for
unselect.
*/
OptionGroup: PropTypes.Requireable<any>; /**
*Child Element* - Used to group \`Option\`s within the menu. Any
non-\`Option\`s passed in will be rendered as a label for the group.
*/
SearchField: PropTypes.Requireable<any>; /**
*Child Element* - The visual Search element that the user can pass text
to.
*/
Label: PropTypes.Requireable<any>; /**
*Child Element* - A custom label used as header text when options are
selected.
*/
};
handleDropMenuSelect: (optionIndex: number | null, { event, props, }: {
props: IDropMenuOptionProps | undefined;
event: React.KeyboardEvent | React.MouseEvent;
}) => void;
handleSelectAll: ({ event, props, }: {
event: React.KeyboardEvent | React.MouseEvent;
props: IDropMenuOptionProps | undefined;
}) => void;
handleSelectionRemove: ({ event, props, props: { callbackId: optionIndex }, }: {
event: React.KeyboardEvent | React.MouseEvent;
props: any;
}) => void;
handleRemoveAll: ({ event, props, }: {
event: React.KeyboardEvent | React.MouseEvent;
props: IDropMenuOptionProps;
}) => void;
handleSearch: (searchText: string, { event }: {
event: React.KeyboardEvent | React.MouseEvent;
}) => void;
UNSAFE_componentWillMount(): void;
UNSAFE_componentWillReceiveProps(nextProps: ISearchableMultiSelectProps): void;
renderUnderlinedChildren: (childText: string, searchText: string) => any;
renderOption: ({ optionProps, optionIndex, }: {
optionProps: ISearchableMultiSelectOptionProps;
optionIndex: number;
}) => React.ReactElement;
renderOptions: () => React.ReactElement[] | React.ReactElement | null;
render: () => JSX.Element;
}
declare const _default: typeof SearchableMultiSelect & import("../../util/state-management").IHybridComponent<ISearchableMultiSelectProps, ISearchableMultiSelectState>;
export default _default;
export { SearchableMultiSelect as SearchableMultiSelectDumb };
//# sourceMappingURL=SearchableMultiSelect.d.ts.map