1+ // tslint:disable:interface-name
2+ declare module "react-dropdown-tree-select" {
3+ import * as React from "react" ;
4+
5+ export type TreeData = Object | TreeNodeProps [ ] ;
6+
7+ export interface DropdownTreeSelectProps {
8+ data : TreeData ;
9+ /** Clear the input search if a node has been selected/unselected */
10+ clearSearchOnChange ?: boolean ;
11+ /** Displays search results as a tree instead of flattened results */
12+ keepTreeOnSearch ?: boolean ;
13+ /** Displays children of found nodes to allow searching for a parent node on
14+ * then selecting any child node of the found node. Defaults to false
15+ * NOTE this works only in combination with keepTreeOnSearch
16+ */
17+ keepChildrenOnSearch ?: boolean ;
18+ /** The text to display as placeholder on the search box. Defaults to Choose... */
19+ placeholderText ?: string ;
20+ /** If set to true, shows the dropdown when rendered.
21+ * This can be used to render the component with the dropdown open as its initial state
22+ */
23+ showDropdown ?: boolean ;
24+ /** Additional classname for container.
25+ * The container renders with a default classname of react-dropdown-tree-select
26+ */
27+ className ?: string ;
28+ /** Fires when a node change event occurs. Currently the following actions trigger a node change:
29+ * Checkbox click which checks/unchecks the item
30+ * Closing of pill (which unchecks the corresponding checkbox item)
31+ *
32+ * Calls the handler with the current node object and all selected nodes (if any)
33+ */
34+ onChange ?: ( currentNode : TreeNode , selectedNodes : TreeNode [ ] ) => void ;
35+ /** Fired on click of the action */
36+ onAction ?: ( event : ActionEvent ) => void ;
37+ /** Fires when a node is expanded or collapsed.
38+ * Calls the handler with the current node object
39+ */
40+ onNodeToggle ?: ( currentNode : TreeNode ) => void ;
41+ /** Fires when input box receives focus or the dropdown arrow is clicked.
42+ * This is helpful for setting dirty or touched flags with forms
43+ */
44+ onFocus ?: ( ) => void ;
45+ /** Fires when input box loses focus or the dropdown arrow is clicked again (and the dropdown collapses).
46+ * This is helpful for setting dirty or touched flags with forms
47+ */
48+ onBlur ?: ( ) => void ;
49+ /** Turns the dropdown into a simple, single select dropdown.
50+ * If you pass tree data, only immediate children are picked, grandchildren nodes are ignored.
51+ * Defaults to false
52+ */
53+ simpleSelect ?: boolean ;
54+ /** The text to display when the search does not find results in the content list. Defaults to No matches found */
55+ noMatchesText ?: string ;
56+ /** If set to true, shows checkboxes in a partial state when one, but not all of their children are selected.
57+ * Allows styling of partially selected nodes as well, by using :indeterminate pseudo class.
58+ * Simply add desired styles to .node.partial .checkbox-item:indeterminate { ... } in your CSS
59+ */
60+ showPartiallySelected ?: boolean ;
61+ /** disabled=true disables the dropdown completely. This is useful during form submit events */
62+ disabled ?: boolean ;
63+ /** readOnly=true makes the dropdown read only,
64+ * which means that the user can still interact with it but cannot change any of its values.
65+ * This can be useful for display only forms
66+ */
67+ readOnly ?: boolean ;
68+ hierarchical ?: boolean ;
69+ /** Specific id for container. The container renders with a default id of `rdtsN` where N is count of the current component rendered
70+ * Use to ensure a own unique id when a simple counter is not sufficient, e.g in a partial server render (SSR)
71+ */
72+ id ?: string ;
73+ }
74+
75+ export interface DropdownTreeSelectState {
76+ showDropdown : boolean ;
77+ searchModeOn : boolean ;
78+ allNodesHidden : boolean ;
79+ tree : TreeNode [ ] ;
80+ tags : TreeNode [ ] ;
81+ }
82+
83+ export default class DropdownTreeSelect extends React . Component < DropdownTreeSelectProps , DropdownTreeSelectState > {
84+ node : HTMLDivElement ;
85+ searchInput : HTMLInputElement ;
86+ keepDropdownActive : boolean ;
87+ handleClick ( ) : void ;
88+ }
89+
90+ export interface TreeNode {
91+ /** Checkbox label */
92+ label : string ;
93+ /** Checkbox value */
94+ value : string ;
95+ /** Initial state of checkbox. if true, checkbox is selected and corresponding pill is rendered. */
96+ checked ?: boolean ;
97+ /** Selectable state of checkbox. if true, the checkbox is disabled and the node is not selectable. */
98+ disabled ?: boolean ;
99+ /** If true, the node is expanded
100+ * (children of children nodes are not expanded by default unless children nodes also have expanded: true).
101+ */
102+ expanded ?: boolean ;
103+ /** Additional css class for the node. This is helpful to style the nodes your way */
104+ className ?: string ;
105+ /** Css class for the corresponding tag. Use this to add custom style the pill corresponding to the node. */
106+ tagClassName ?: string ;
107+ /** An array of extra action on the node (such as displaying an info icon or any custom icons/elements) */
108+ actions ?: NodeAction [ ] ;
109+ /** Allows data-* attributes to be set on the node and tag elements */
110+ dataset ?: NodeDataSet ;
111+ /** Indicate if a node is a default value.
112+ * When true, the dropdown will automatically select the node(s) when there is no other selected node.
113+ * Can be used on more than one node.
114+ */
115+ isDefaultValue ?: boolean ;
116+ /** Any extra properties that you'd like to receive during `onChange` event */
117+ [ property : string ] : any ;
118+ }
119+
120+ export interface TreeNodeProps extends TreeNode {
121+ /** Array of child objects */
122+ children ?: Node [ ] ;
123+ }
124+
125+ export interface NodeAction {
126+ /** CSS class for the node. e.g. `fa fa-info` */
127+ className : string ;
128+ /** HTML tooltip text */
129+ title ?: string ;
130+ /** Any text to be displayed. This is helpful to pass ligatures if you're using ligature fonts */
131+ text ?: string ;
132+ /** Any extra properties that you'd like to receive during `onChange` event */
133+ [ property : string ] : any ;
134+ }
135+
136+ export interface ActionEvent {
137+ action : string ;
138+ id : string ;
139+ }
140+
141+ export interface NodeDataSet {
142+ [ property : string ] : any ;
143+ }
144+ }
0 commit comments