d2coreui 23.0.38 → 23.0.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,34 +1,33 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
interface InputSearchWithHistoryProps extends Omit<AutoCompleteProps, "onChange" | "onSearch" | "placeholder" | "options"> {
|
|
2
|
+
import { InputProps } from "antd/es";
|
|
3
|
+
interface InputSearchWithHistoryProps extends Omit<InputProps, "onChange" | "onSearch" | "onSelect" | "placeholder" | "options"> {
|
|
5
4
|
value?: string;
|
|
6
5
|
options?: string[];
|
|
7
6
|
placeholder?: string;
|
|
8
7
|
prefix?: React.ReactNode;
|
|
9
8
|
onChange(searchString: string): void;
|
|
10
9
|
onSearch(): void;
|
|
10
|
+
onSelect?: () => void;
|
|
11
11
|
onPressEnter?(): void;
|
|
12
|
+
inputReadonly?: boolean;
|
|
12
13
|
stringFormatter?(rawString: string): string;
|
|
13
14
|
}
|
|
14
15
|
interface InputSearchWithHistoryState {
|
|
15
16
|
opened: boolean;
|
|
16
|
-
|
|
17
|
-
searchString?: string;
|
|
17
|
+
searchString: string;
|
|
18
18
|
}
|
|
19
19
|
export default class AutoCompleteInput extends React.Component<InputSearchWithHistoryProps, InputSearchWithHistoryState> {
|
|
20
20
|
static get defaultProps(): {
|
|
21
21
|
onSearch: () => void;
|
|
22
22
|
onChange: () => void;
|
|
23
23
|
};
|
|
24
|
-
private
|
|
24
|
+
private inputRef;
|
|
25
|
+
private menuRef;
|
|
25
26
|
constructor(props: Readonly<InputSearchWithHistoryProps>);
|
|
27
|
+
componentDidUpdate(prevProps: Readonly<InputSearchWithHistoryProps>): void;
|
|
26
28
|
focus(): void;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
getAutocompleteOptions(): DefaultOptionType[];
|
|
30
|
-
onSearch(): void;
|
|
31
|
-
onSelect(searchString: string): void;
|
|
29
|
+
private triggerChange;
|
|
30
|
+
private toggleDropdown;
|
|
32
31
|
render(): React.JSX.Element;
|
|
33
32
|
}
|
|
34
33
|
export {};
|
|
@@ -10,9 +10,9 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React from "react";
|
|
13
|
-
import {
|
|
13
|
+
import { Dropdown, Input, Menu } from "antd";
|
|
14
|
+
import { DownOutlined } from "@ant-design/icons";
|
|
14
15
|
import { Key } from "ts-key-enum";
|
|
15
|
-
import DropdownArrow from "../icons/dropdownArrow";
|
|
16
16
|
export default class AutoCompleteInput extends React.Component {
|
|
17
17
|
static get defaultProps() {
|
|
18
18
|
return {
|
|
@@ -24,100 +24,91 @@ export default class AutoCompleteInput extends React.Component {
|
|
|
24
24
|
}
|
|
25
25
|
constructor(props) {
|
|
26
26
|
super(props);
|
|
27
|
+
this.inputRef = React.createRef();
|
|
28
|
+
this.menuRef = React.createRef();
|
|
29
|
+
this.triggerChange = (value) => {
|
|
30
|
+
this.setState({ searchString: value }, () => {
|
|
31
|
+
this.props.onChange(value);
|
|
32
|
+
});
|
|
33
|
+
};
|
|
34
|
+
this.toggleDropdown = (e) => {
|
|
35
|
+
e === null || e === void 0 ? void 0 : e.preventDefault();
|
|
36
|
+
e === null || e === void 0 ? void 0 : e.stopPropagation();
|
|
37
|
+
if (this.props.disabled && !this.props.inputReadonly)
|
|
38
|
+
return;
|
|
39
|
+
const willOpen = !this.state.opened;
|
|
40
|
+
this.setState({ opened: willOpen }, () => {
|
|
41
|
+
if (willOpen) {
|
|
42
|
+
setTimeout(() => {
|
|
43
|
+
var _a;
|
|
44
|
+
(_a = this.menuRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
45
|
+
}, 50);
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
};
|
|
27
49
|
this.state = {
|
|
28
50
|
opened: false,
|
|
29
|
-
|
|
51
|
+
searchString: props.value || "",
|
|
30
52
|
};
|
|
31
|
-
this.autocomplete = React.createRef();
|
|
32
|
-
this.focus = this.focus.bind(this);
|
|
33
|
-
}
|
|
34
|
-
focus() {
|
|
35
|
-
var _a;
|
|
36
|
-
(_a = this.autocomplete.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
37
|
-
}
|
|
38
|
-
static getDerivedStateFromProps(props, state) {
|
|
39
|
-
const newState = {};
|
|
40
|
-
if (props.value !== state.searchString) {
|
|
41
|
-
newState.searchString = props.value;
|
|
42
|
-
}
|
|
43
|
-
return newState;
|
|
44
|
-
}
|
|
45
|
-
setSearchString(searchString) {
|
|
46
|
-
if (this.props.stringFormatter) {
|
|
47
|
-
if (searchString.indexOf("ðð") < 0 && this.props.options && this.props.options.length > 0) {
|
|
48
|
-
for (let i = 0; i < this.props.options.length; i++) {
|
|
49
|
-
if (searchString === this.props.stringFormatter(this.props.options[i])) {
|
|
50
|
-
searchString = this.props.options[i];
|
|
51
|
-
break;
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
if (this.state.searchString !== searchString) {
|
|
56
|
-
this.setState({ opened: false, searchString: searchString }, () => {
|
|
57
|
-
this.props.onChange(searchString);
|
|
58
|
-
});
|
|
59
|
-
}
|
|
60
|
-
else {
|
|
61
|
-
this.setState({ opened: false });
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
else {
|
|
65
|
-
this.setState({ opened: false, searchString: searchString });
|
|
66
|
-
this.props.onChange(searchString);
|
|
67
|
-
}
|
|
68
53
|
}
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
autocompleteData.push(...this.props.options);
|
|
54
|
+
componentDidUpdate(prevProps) {
|
|
55
|
+
if (this.props.value !== prevProps.value && this.props.value !== this.state.searchString) {
|
|
56
|
+
this.setState({ searchString: this.props.value || "" });
|
|
73
57
|
}
|
|
74
|
-
return autocompleteData.filter((e) => !!e).map((e) => {
|
|
75
|
-
return ({
|
|
76
|
-
value: "" + (this.props.stringFormatter ? this.props.stringFormatter(e) : e),
|
|
77
|
-
label: "" + (this.props.stringFormatter ? this.props.stringFormatter(e) : e)
|
|
78
|
-
});
|
|
79
|
-
});
|
|
80
58
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
onSelect(searchString) {
|
|
85
|
-
this.setSearchString(searchString);
|
|
59
|
+
focus() {
|
|
60
|
+
var _a;
|
|
61
|
+
(_a = this.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
86
62
|
}
|
|
87
63
|
render() {
|
|
88
|
-
|
|
89
|
-
const
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
if (typeof searchString === "string") {
|
|
96
|
-
this.onSelect(searchString);
|
|
97
|
-
}
|
|
64
|
+
const _a = this.props, { disabled, inputReadonly, placeholder, prefix, onPressEnter, onSearch, onSelect, options, stringFormatter, style, value, onBlur, onKeyDown, onFocus } = _a, rest = __rest(_a, ["disabled", "inputReadonly", "placeholder", "prefix", "onPressEnter", "onSearch", "onSelect", "options", "stringFormatter", "style", "value", "onBlur", "onKeyDown", "onFocus"]);
|
|
65
|
+
const hasHistory = options && options.length > 0;
|
|
66
|
+
const historyMenu = (React.createElement(Menu, { ref: this.menuRef, onClick: ({ key }) => {
|
|
67
|
+
this.triggerChange(key);
|
|
68
|
+
this.setState({ opened: false });
|
|
69
|
+
onSearch === null || onSearch === void 0 ? void 0 : onSearch();
|
|
70
|
+
onSelect === null || onSelect === void 0 ? void 0 : onSelect();
|
|
98
71
|
}, onKeyDown: (e) => {
|
|
99
|
-
if (
|
|
100
|
-
this.setState({ opened: true });
|
|
101
|
-
}
|
|
102
|
-
else if (e.key === Key.Escape) {
|
|
72
|
+
if (e.key === Key.Escape) {
|
|
103
73
|
this.setState({ opened: false });
|
|
74
|
+
this.focus();
|
|
104
75
|
}
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
76
|
+
}, items: options === null || options === void 0 ? void 0 : options.filter(Boolean).map((opt) => ({
|
|
77
|
+
key: opt,
|
|
78
|
+
label: stringFormatter ? stringFormatter(opt) : opt,
|
|
79
|
+
})) }));
|
|
80
|
+
return (React.createElement("div", { style: Object.assign({ width: 200, display: "inline-block" }, style) },
|
|
81
|
+
React.createElement(Dropdown, { popupRender: () => historyMenu, open: this.state.opened && hasHistory, onOpenChange: (open) => {
|
|
82
|
+
this.setState({ opened: open });
|
|
83
|
+
}, trigger: [] },
|
|
84
|
+
React.createElement(Input, Object.assign({}, rest, { ref: this.inputRef, placeholder: placeholder, prefix: prefix, value: stringFormatter ? stringFormatter(this.state.searchString) : this.state.searchString, disabled: disabled && !inputReadonly, readOnly: inputReadonly, allowClear: !disabled || inputReadonly, onChange: (e) => {
|
|
85
|
+
this.triggerChange(e.target.value);
|
|
86
|
+
}, onKeyDown: (e) => {
|
|
87
|
+
if (!this.state.opened && e.key === Key.ArrowDown) {
|
|
88
|
+
e.preventDefault();
|
|
89
|
+
this.toggleDropdown();
|
|
90
|
+
}
|
|
91
|
+
else if (e.key === Key.Escape) {
|
|
92
|
+
e.preventDefault();
|
|
93
|
+
this.setState({ opened: false });
|
|
94
|
+
}
|
|
95
|
+
else if (this.state.opened && e.key === Key.Enter) {
|
|
96
|
+
e.preventDefault();
|
|
97
|
+
this.setState({ opened: false });
|
|
98
|
+
if (onSearch)
|
|
99
|
+
onSearch();
|
|
100
|
+
}
|
|
101
|
+
else if (!this.state.opened && e.key === Key.Enter) {
|
|
102
|
+
if (onPressEnter)
|
|
103
|
+
onPressEnter();
|
|
104
|
+
if (onSearch)
|
|
105
|
+
onSearch();
|
|
106
|
+
}
|
|
107
|
+
}, suffix: hasHistory ? (React.createElement(DownOutlined, { style: {
|
|
108
|
+
cursor: (disabled && !inputReadonly) ? "not-allowed" : "pointer",
|
|
109
|
+
color: "rgba(0, 0, 0, 0.25)",
|
|
110
|
+
padding: "4px"
|
|
111
|
+
}, onMouseDown: (e) => e.preventDefault(), onClick: this.toggleDropdown })) : null })))));
|
|
121
112
|
}
|
|
122
113
|
}
|
|
123
114
|
//# sourceMappingURL=autoCompleteInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autoCompleteInput.js","sourceRoot":"","sources":["../../../../components/input/autoCompleteInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\"\r\nimport {AutoComplete, Input} from \"antd\";\r\nimport {AutoCompleteProps} from \"antd/es/auto-complete\";\r\nimport {DefaultOptionType, RefSelectProps} from \"antd/es/select\";\r\nimport {Key} from \"ts-key-enum\";\r\nimport DropdownArrow from \"../icons/dropdownArrow\";\r\n\r\ninterface InputSearchWithHistoryProps extends Omit<AutoCompleteProps, \"onChange\" | \"onSearch\" | \"placeholder\" | \"options\"> {\r\n value?: string\r\n\r\n options?: string[]\r\n\r\n placeholder?: string\r\n\r\n prefix?: React.ReactNode\r\n\r\n onChange(searchString: string): void\r\n\r\n onSearch(): void\r\n\r\n onPressEnter?(): void\r\n\r\n stringFormatter?(rawString: string): string\r\n}\r\n\r\ninterface InputSearchWithHistoryState {\r\n opened: boolean\r\n loading: boolean\r\n searchString?: string\r\n}\r\n\r\nexport default class AutoCompleteInput extends React.Component<InputSearchWithHistoryProps, InputSearchWithHistoryState> {\r\n static get defaultProps() {\r\n return {\r\n onSearch: () => {\r\n },\r\n onChange: () => {\r\n }\r\n };\r\n }\r\n\r\n private autocomplete: React.RefObject<RefSelectProps>;\r\n\r\n constructor(props: Readonly<InputSearchWithHistoryProps>) {\r\n super(props);\r\n this.state = {\r\n opened: false,\r\n loading: false,\r\n };\r\n\r\n this.autocomplete = React.createRef();\r\n this.focus = this.focus.bind(this);\r\n }\r\n\r\n focus() {\r\n this.autocomplete.current?.focus();\r\n }\r\n\r\n /**\r\n * Handling setting search string from parent component\r\n */\r\n static getDerivedStateFromProps(props: InputSearchWithHistoryProps, state: InputSearchWithHistoryState): Partial<InputSearchWithHistoryState> {\r\n const newState: Partial<InputSearchWithHistoryState> = {};\r\n if (props.value !== state.searchString) {\r\n newState.searchString = props.value;\r\n }\r\n return newState;\r\n }\r\n\r\n setSearchString(searchString: string) {\r\n if(this.props.stringFormatter) {\r\n if (searchString.indexOf(\"ðð\") < 0 && this.props.options && this.props.options.length > 0) {\r\n for (let i = 0; i < this.props.options.length; i++) {\r\n if (searchString === this.props.stringFormatter(this.props.options[i])) {\r\n searchString = this.props.options[i];\r\n break;\r\n }\r\n }\r\n }\r\n if (this.state.searchString !== searchString) {\r\n this.setState({opened: false, searchString: searchString}, () => {\r\n this.props.onChange(searchString);\r\n });\r\n } else {\r\n this.setState({opened: false});\r\n }\r\n } else {\r\n this.setState({opened: false, searchString: searchString});\r\n this.props.onChange(searchString);\r\n }\r\n }\r\n\r\n getAutocompleteOptions(): DefaultOptionType[] {\r\n const autocompleteData = [];\r\n if (this.props.options && this.props.options.length > 0) {\r\n autocompleteData.push(...this.props.options);\r\n }\r\n return autocompleteData.filter((e) => !!e).map((e) => {\r\n return ({\r\n value: \"\" + (this.props.stringFormatter ? this.props.stringFormatter(e) : e),\r\n label: \"\" + (this.props.stringFormatter ? this.props.stringFormatter(e) : e)\r\n });\r\n });\r\n }\r\n\r\n /**\r\n * Handling search confirmation by pressing enter\r\n */\r\n onSearch() {\r\n this.props.onSearch();\r\n }\r\n\r\n onSelect(searchString: string) {\r\n this.setSearchString(searchString);\r\n }\r\n\r\n render() {\r\n let {disabled, stringFormatter, onChange, onSearch, placeholder, onPressEnter, options, value, size, prefix, ...rest} = this.props;\r\n const searchHistoryPresent = this.props.options && this.props.options.length > 0;\r\n return (\r\n <AutoComplete\r\n options={this.state.opened ? this.getAutocompleteOptions() : []}\r\n style={{width: 200}}\r\n value={this.state.searchString && stringFormatter ? stringFormatter(this.state.searchString) : this.state.searchString}\r\n defaultOpen={false}\r\n defaultActiveFirstOption={false}\r\n onChange={(searchString) => {\r\n if (typeof searchString === \"string\") {\r\n this.setSearchString(searchString as string);\r\n }\r\n }}\r\n onSelect={(searchString) => {\r\n if (typeof searchString === \"string\") {\r\n this.onSelect(searchString as string);\r\n }\r\n }}\r\n onKeyDown={(e) => {\r\n if (!this.state.opened && e.key === Key.ArrowDown) {\r\n this.setState({opened: true});\r\n } else if (e.key === Key.Escape) {\r\n this.setState({opened: false});\r\n } else if (this.state.opened && e.key === Key.Enter) {\r\n this.setState({opened: false});\r\n this.onSearch();\r\n } else if (!this.state.opened && e.key === Key.Enter) {\r\n this.onSearch();\r\n }\r\n }}\r\n onBlur={() => {\r\n this.setState({opened: false});\r\n }}\r\n {...rest}\r\n disabled={disabled || this.state.loading}\r\n >\r\n <Input\r\n size={size}\r\n allowClear={!disabled}\r\n placeholder={placeholder}\r\n prefix={prefix}\r\n suffix={\r\n searchHistoryPresent &&\r\n <DropdownArrow opened={this.state.opened}\r\n onClick={() => {\r\n if (!this.props.disabled && !this.state.loading) {\r\n this.setState({opened: !this.state.opened});\r\n }\r\n }}/>\r\n }\r\n disabled={disabled || this.state.loading}\r\n onPressEnter={this.state.opened ? undefined : onPressEnter}/>\r\n </AutoComplete>\r\n );\r\n }\r\n}"]}
|
|
1
|
+
{"version":3,"file":"autoCompleteInput.js","sourceRoot":"","sources":["../../../../components/input/autoCompleteInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from \"react\";\r\nimport {Dropdown, Input, InputRef, Menu} from \"antd\";\r\nimport {DownOutlined} from \"@ant-design/icons\";\r\nimport {InputProps} from \"antd/es\";\r\nimport {Key} from \"ts-key-enum\";\r\n\r\ninterface InputSearchWithHistoryProps extends Omit<InputProps, \"onChange\" | \"onSearch\" | \"onSelect\" | \"placeholder\" | \"options\"> {\r\n value?: string\r\n\r\n options?: string[]\r\n\r\n placeholder?: string\r\n\r\n prefix?: React.ReactNode\r\n\r\n onChange(searchString: string): void\r\n\r\n onSearch(): void\r\n\r\n onSelect?: () => void\r\n\r\n onPressEnter?(): void\r\n\r\n inputReadonly?: boolean\r\n\r\n stringFormatter?(rawString: string): string\r\n}\r\n\r\ninterface InputSearchWithHistoryState {\r\n opened: boolean\r\n searchString: string\r\n}\r\n\r\nexport default class AutoCompleteInput extends React.Component<InputSearchWithHistoryProps, InputSearchWithHistoryState> {\r\n static get defaultProps() {\r\n return {\r\n onSearch: () => {\r\n },\r\n onChange: () => {\r\n }\r\n };\r\n }\r\n\r\n private inputRef = React.createRef<InputRef>();\r\n private menuRef = React.createRef<any>();\r\n\r\n constructor(props: Readonly<InputSearchWithHistoryProps>) {\r\n super(props);\r\n this.state = {\r\n opened: false,\r\n searchString: props.value || \"\",\r\n };\r\n }\r\n\r\n componentDidUpdate(prevProps: Readonly<InputSearchWithHistoryProps>) {\r\n if (this.props.value !== prevProps.value && this.props.value !== this.state.searchString) {\r\n this.setState({searchString: this.props.value || \"\"});\r\n }\r\n }\r\n\r\n public focus() {\r\n this.inputRef.current?.focus();\r\n }\r\n\r\n private triggerChange = (value: string) => {\r\n this.setState({searchString: value}, () => {\r\n this.props.onChange(value);\r\n });\r\n };\r\n\r\n private toggleDropdown = (e?: React.MouseEvent) => {\r\n e?.preventDefault();\r\n e?.stopPropagation();\r\n\r\n if (this.props.disabled && !this.props.inputReadonly) return;\r\n\r\n const willOpen = !this.state.opened;\r\n\r\n this.setState({opened: willOpen}, () => {\r\n if (willOpen) {\r\n setTimeout(() => {\r\n this.menuRef.current?.focus();\r\n }, 50);\r\n }\r\n });\r\n };\r\n\r\n render() {\r\n const {\r\n disabled,\r\n inputReadonly,\r\n placeholder,\r\n prefix,\r\n onPressEnter,\r\n onSearch,\r\n onSelect,\r\n options,\r\n stringFormatter,\r\n style,\r\n value,\r\n onBlur,\r\n onKeyDown,\r\n onFocus,\r\n\r\n ...rest\r\n } = this.props;\r\n\r\n const hasHistory = options && options.length > 0;\r\n\r\n const historyMenu = (\r\n <Menu\r\n ref={this.menuRef}\r\n onClick={({key}) => {\r\n this.triggerChange(key);\r\n this.setState({opened: false});\r\n onSearch?.();\r\n onSelect?.();\r\n }}\r\n onKeyDown={(e) => {\r\n if (e.key === Key.Escape) {\r\n this.setState({opened: false});\r\n this.focus();\r\n }\r\n }}\r\n items={options?.filter(Boolean).map((opt) => ({\r\n key: opt,\r\n label: stringFormatter ? stringFormatter(opt) : opt,\r\n }))}\r\n />\r\n );\r\n\r\n return (\r\n <div style={{width: 200, display: \"inline-block\", ...style}}>\r\n <Dropdown\r\n popupRender={() => historyMenu}\r\n open={this.state.opened && hasHistory}\r\n onOpenChange={(open) => {\r\n this.setState({opened: open});\r\n }}\r\n trigger={[]}\r\n >\r\n <Input\r\n {...rest}\r\n ref={this.inputRef}\r\n placeholder={placeholder}\r\n prefix={prefix}\r\n value={stringFormatter ? stringFormatter(this.state.searchString) : this.state.searchString}\r\n disabled={disabled && !inputReadonly}\r\n readOnly={inputReadonly}\r\n allowClear={!disabled || inputReadonly}\r\n onChange={(e) => {\r\n this.triggerChange(e.target.value);\r\n }}\r\n onKeyDown={(e) => {\r\n if (!this.state.opened && e.key === Key.ArrowDown) {\r\n e.preventDefault();\r\n this.toggleDropdown();\r\n } else if (e.key === Key.Escape) {\r\n e.preventDefault();\r\n this.setState({opened: false});\r\n } else if (this.state.opened && e.key === Key.Enter) {\r\n e.preventDefault();\r\n this.setState({opened: false});\r\n if (onSearch) onSearch();\r\n } else if (!this.state.opened && e.key === Key.Enter) {\r\n if (onPressEnter) onPressEnter();\r\n if (onSearch) onSearch();\r\n }\r\n }}\r\n suffix={\r\n hasHistory ? (\r\n <DownOutlined\r\n style={{\r\n cursor: (disabled && !inputReadonly) ? \"not-allowed\" : \"pointer\",\r\n color: \"rgba(0, 0, 0, 0.25)\",\r\n padding: \"4px\"\r\n }}\r\n onMouseDown={(e) => e.preventDefault()}\r\n onClick={this.toggleDropdown}\r\n />\r\n ) : null\r\n }\r\n />\r\n </Dropdown>\r\n </div>\r\n );\r\n }\r\n}"]}
|