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