import React, { Component, MouseEventHandler } from 'react'; import { CustomCheckboxes } from '../../Components/CheckboxTree/CheckboxTreeNode'; import '../../Components/CheckboxTree/wdk-CheckboxTree.scss'; export declare enum LinksPosition { None = 0, Top = 2, Bottom = 4, Both = 6 } declare type StatefulNode = T & { __expandableTreeState: { isSelected: boolean; isVisible: boolean; isIndeterminate?: boolean; isExpanded?: boolean; }; __expandableTreeChildren: StatefulNode[]; }; declare type ChangeHandler = (ids: string[]) => void; export declare type Props = { /** Node representing root of the data to be rendered as an expandable tree */ tree: T; /** Takes a node, returns unique ID for this node; ID is used as input value of the nodes checkbox if using selectability */ getNodeId: (node: T) => string; /** Takes a node, Called during rendering to provide the children for the current node */ getNodeChildren: (node: T) => T[]; /** Called when the set of expanded (branch) nodes changes. The function will be called with the array of the expanded node ids. If omitted, no handler is called. */ onExpansionChange: ChangeHandler; /** Whether to, on expanding a node, automatically expand its descendants with one child */ shouldExpandDescendantsWithOneChild?: boolean; /** Whether to expand a node if its contents are clicked */ shouldExpandOnClick?: boolean; /** Whether to show the root node or start with the array of children; optional, defaults to false */ showRoot?: boolean; /** Called during rendering to create the react element holding the display name and tooltip for the current node, defaults to {this.props.getNodeId(node) */ renderNode?: (node: T, path?: number[]) => React.ReactNode; /** List of expanded nodes as represented by their ids, default to null; if null, expandedList will be generated by the expandable tree. */ expandedList: string[]; /** If true, checkboxes and ‘select…’ links are shown and the following parameters are honored, else no checkboxes or ‘select…’ links are shown and props below are ignored; default to false */ isSelectable?: boolean; /** List of selected nodes as represented by their ids, defaults to [ ] */ selectedList: string[]; /** An object mapping a node (by its id) to a function that returns a React component. This component will be used instead of the default checkbox. */ customCheckboxes?: CustomCheckboxes; /** Tells whether more than one selection is allowed; defaults to true. If false, only the first item in selectedList is selected, and radio boxes are rendered. */ isMultiPick?: boolean; /** Value to use for the name of the checkboxes in the tree */ name?: string; /** Takes array of ids, thus encapsulates: selectAll, clearAll, selectDefault, selectCurrent (i.e. reset) */ onSelectionChange: ChangeHandler; /** List of “current” ids, if omitted (undefined or null), then don’t display link */ currentList?: string[]; /** List of default ids, if omitted (undefined or null), then don’t display link */ defaultList?: string[]; /** Indicates whether this is a searchable CBT. If so, then show boxes and respect the optional parameters below, also turn off expansion; default to false */ isSearchable: boolean; /** Indicates if the search box should have autoFocus set to true */ autoFocusSearchBox?: boolean; /** Whether to show search box; defaults to true (but only if isSearchable is true). Useful if searching is controlled elsewhere */ showSearchBox?: boolean; /** PlaceHolder text; shown in grey if searchTerm is empty */ searchBoxPlaceholder: string; /** Name of icon to show in search box */ searchIconName?: string; /** Search box help text: if present, a help icon will appear; mouseover the icon and a tooltip will appear with this text */ searchBoxHelp?: string; /** Current search term; if non-empty, expandability is disabled */ searchTerm: string; /** Takes single arg: the new search text. Called when user types into the search box */ onSearchTermChange: (term: string) => void; /** Takes (node, searchTerms) and returns boolean. searchTerms is a list of query terms, parsed from the original input string. This function returns a boolean indicating if a node matches search criteria and should be shown */ searchPredicate: (node: T, terms: string[]) => boolean; renderNoResults?: (searchTerm: string, tree: T) => React.ReactNode; /** Link placement */ linksPosition?: LinksPosition; /** Additional actions to render with links */ additionalActions?: React.ReactNode[]; /** Additional filter controls to render with searchbox */ additionalFilters?: React.ReactNode[]; /** Indicates if an additional filter has been applied; optional, defaults to false */ isAdditionalFilterApplied?: boolean; /** Wrap tree section with additional UI elements */ wrapTreeSection?: (treeSection: React.ReactNode) => React.ReactNode; }; declare type TreeLinkHandler = MouseEventHandler; declare type State = { isLeafVisible: (id: string) => boolean; generated: { statefulTree: StatefulNode; expandedList: string[]; }; }; /** * Expandable tree component */ export default class CheckboxTree extends Component, State> { static LinkPlacement: typeof LinksPosition; static defaultProps: { showRoot: boolean; expandedList: null; isSelectable: boolean; selectedList: never[]; customCheckboxes: {}; isMultiPick: boolean; onSelectionChange: () => void; isSearchable: boolean; showSearchBox: boolean; searchBoxPlaceholder: string; searchBoxHelp: string; searchTerm: string; onSearchTermChange: () => void; searchPredicate: () => boolean; linksPosition: LinksPosition; }; expandAll: TreeLinkHandler; expandNone: TreeLinkHandler; selectAll: TreeLinkHandler; selectNone: TreeLinkHandler; addVisible: TreeLinkHandler; removeVisible: TreeLinkHandler; selectOnlyVisible: TreeLinkHandler; selectCurrentList: TreeLinkHandler; selectDefaultList: TreeLinkHandler; /** * Hards binds all the user interaction methods to this object. * @param props - component properties */ constructor(props: Props); /** * When new props are passed, the checkbox tree must apply them to the existing * stateful tree to determine which nodes have changed due to changing props. * * Also if search-related props have changed, the isLeafVisible function must * be regenerated so the currently-matching nodes are made visible. */ componentWillReceiveProps(nextProps: Props): void; /** * Toggle expansion of the given node. If node is a leaf, does nothing. */ toggleExpansion(node: T): void; /** * Toggle selection of the given node. * If toggled checkbox is a selected leaf - add the leaf to the select list to be returned * If toggled checkbox is an unselected leaf - remove the leaf from the select list to be returned * If toggled checkbox is a selected non-leaf - identify the node's leaves and add them to the select list to be returned * If toggled checkbox is an unselected non-leaf - identify the node's leaves and remove them from the select list to be returned */ toggleSelection(node: T, selected: boolean): void; renderNode(node: T, path?: number[]): {} | null | undefined; /** * Renders the expandable tree and related components */ render(): JSX.Element; } export {}; //# sourceMappingURL=CheckboxTree.d.ts.map