1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 | import { __assign, __extends, __rest } from "tslib";
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 | import classNames from "classnames";
|
22 | import * as React from "react";
|
23 | import { AbstractPureComponent2, Classes as CoreClasses, DISPLAYNAME_PREFIX, Keys, Popover, PopoverInteractionKind, Position, refHandler, setRef, TagInput, } from "@blueprintjs/core";
|
24 | import { Classes } from "../../common";
|
25 | import { QueryList } from "../query-list/queryList";
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | var MultiSelect = (function (_super) {
|
33 | __extends(MultiSelect, _super);
|
34 | function MultiSelect() {
|
35 | var _this = this;
|
36 | var _a;
|
37 | _this = _super.apply(this, arguments) || this;
|
38 | _this.state = {
|
39 | isOpen: (_this.props.popoverProps && _this.props.popoverProps.isOpen) || false,
|
40 | };
|
41 | _this.input = null;
|
42 | _this.queryList = null;
|
43 | _this.refHandlers = {
|
44 | input: refHandler(_this, "input", (_a = _this.props.tagInputProps) === null || _a === void 0 ? void 0 : _a.inputRef),
|
45 | queryList: function (ref) { return (_this.queryList = ref); },
|
46 | };
|
47 | _this.renderQueryList = function (listProps) {
|
48 | var _a;
|
49 | var _b = _this.props, fill = _b.fill, _c = _b.tagInputProps, tagInputProps = _c === void 0 ? {} : _c, _d = _b.popoverProps, popoverProps = _d === void 0 ? {} : _d, _e = _b.selectedItems, selectedItems = _e === void 0 ? [] : _e, placeholder = _b.placeholder;
|
50 | var handlePaste = listProps.handlePaste, handleKeyDown = listProps.handleKeyDown, handleKeyUp = listProps.handleKeyUp;
|
51 | if (fill) {
|
52 | popoverProps.fill = true;
|
53 | tagInputProps.fill = true;
|
54 | }
|
55 |
|
56 | var inputProps = __assign(__assign({}, tagInputProps.inputProps), { className: classNames((_a = tagInputProps.inputProps) === null || _a === void 0 ? void 0 : _a.className, Classes.MULTISELECT_TAG_INPUT_INPUT) });
|
57 | var handleTagInputAdd = function (values, method) {
|
58 | if (method === "paste") {
|
59 | handlePaste(values);
|
60 | }
|
61 | };
|
62 | return (React.createElement(Popover, __assign({ autoFocus: false, canEscapeKeyClose: true, enforceFocus: false, isOpen: _this.state.isOpen, position: Position.BOTTOM_LEFT }, popoverProps, { className: classNames(listProps.className, popoverProps.className), interactionKind: PopoverInteractionKind.CLICK, onInteraction: _this.handlePopoverInteraction, popoverClassName: classNames(Classes.MULTISELECT_POPOVER, popoverProps.popoverClassName), onOpened: _this.handlePopoverOpened }),
|
63 | React.createElement("div", { onKeyDown: _this.getTagInputKeyDownHandler(handleKeyDown), onKeyUp: _this.getTagInputKeyUpHandler(handleKeyUp) },
|
64 | React.createElement(TagInput, __assign({ placeholder: placeholder }, tagInputProps, { className: classNames(Classes.MULTISELECT, tagInputProps.className), inputRef: _this.refHandlers.input, inputProps: inputProps, inputValue: listProps.query,
|
65 |
|
66 | onAdd: handleTagInputAdd, onInputChange: listProps.handleQueryChange, onRemove: _this.handleTagRemove, values: selectedItems.map(_this.props.tagRenderer) }))),
|
67 | React.createElement("div", { onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, listProps.itemList)));
|
68 | };
|
69 | _this.handleItemSelect = function (item, evt) {
|
70 | var _a, _b;
|
71 | if (_this.input != null) {
|
72 | _this.input.focus();
|
73 | }
|
74 | (_b = (_a = _this.props).onItemSelect) === null || _b === void 0 ? void 0 : _b.call(_a, item, evt);
|
75 | };
|
76 | _this.handleQueryChange = function (query, evt) {
|
77 | var _a, _b;
|
78 | _this.setState({ isOpen: query.length > 0 || !_this.props.openOnKeyDown });
|
79 | (_b = (_a = _this.props).onQueryChange) === null || _b === void 0 ? void 0 : _b.call(_a, query, evt);
|
80 | };
|
81 |
|
82 |
|
83 | _this.handlePopoverInteraction = function (nextOpenState, evt) {
|
84 | return _this.requestAnimationFrame(function () {
|
85 | var _a, _b;
|
86 | var isInputFocused = _this.input === document.activeElement;
|
87 | if (_this.input != null && !isInputFocused) {
|
88 |
|
89 | _this.setState({ isOpen: false });
|
90 | }
|
91 | else if (!_this.props.openOnKeyDown) {
|
92 |
|
93 | _this.setState({ isOpen: true });
|
94 | }
|
95 | (_b = (_a = _this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onInteraction) === null || _b === void 0 ? void 0 : _b.call(_a, nextOpenState, evt);
|
96 | });
|
97 | };
|
98 | _this.handlePopoverOpened = function (node) {
|
99 | var _a, _b;
|
100 | if (_this.queryList != null) {
|
101 |
|
102 | _this.queryList.scrollActiveItemIntoView();
|
103 | }
|
104 | (_b = (_a = _this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onOpened) === null || _b === void 0 ? void 0 : _b.call(_a, node);
|
105 | };
|
106 | _this.handleTagRemove = function (tag, index) {
|
107 | var _a;
|
108 | var _b = _this.props, _c = _b.selectedItems, selectedItems = _c === void 0 ? [] : _c, onRemove = _b.onRemove, tagInputProps = _b.tagInputProps;
|
109 | onRemove === null || onRemove === void 0 ? void 0 : onRemove(selectedItems[index], index);
|
110 | (_a = tagInputProps === null || tagInputProps === void 0 ? void 0 : tagInputProps.onRemove) === null || _a === void 0 ? void 0 : _a.call(tagInputProps, tag, index);
|
111 | };
|
112 | _this.getTagInputKeyDownHandler = function (handleQueryListKeyDown) {
|
113 | return function (e) {
|
114 |
|
115 | var which = e.which;
|
116 | if (which === Keys.ESCAPE || which === Keys.TAB) {
|
117 |
|
118 |
|
119 | if (_this.input != null) {
|
120 | _this.input.blur();
|
121 | }
|
122 | _this.setState({ isOpen: false });
|
123 | }
|
124 | else if (!(which === Keys.BACKSPACE || which === Keys.ARROW_LEFT || which === Keys.ARROW_RIGHT)) {
|
125 | _this.setState({ isOpen: true });
|
126 | }
|
127 | var isTargetingTagRemoveButton = e.target.closest(".".concat(CoreClasses.TAG_REMOVE)) != null;
|
128 | if (_this.state.isOpen && !isTargetingTagRemoveButton) {
|
129 | handleQueryListKeyDown === null || handleQueryListKeyDown === void 0 ? void 0 : handleQueryListKeyDown(e);
|
130 | }
|
131 | };
|
132 | };
|
133 | _this.getTagInputKeyUpHandler = function (handleQueryListKeyUp) {
|
134 | return function (e) {
|
135 | var isTargetingInput = e.target.classList.contains(Classes.MULTISELECT_TAG_INPUT_INPUT);
|
136 |
|
137 |
|
138 | if (_this.state.isOpen && isTargetingInput) {
|
139 | handleQueryListKeyUp === null || handleQueryListKeyUp === void 0 ? void 0 : handleQueryListKeyUp(e);
|
140 | }
|
141 | };
|
142 | };
|
143 | return _this;
|
144 | }
|
145 | MultiSelect.ofType = function () {
|
146 | return MultiSelect;
|
147 | };
|
148 | MultiSelect.prototype.componentDidUpdate = function (prevProps) {
|
149 | var _a, _b, _c, _d, _e;
|
150 | if (((_a = prevProps.tagInputProps) === null || _a === void 0 ? void 0 : _a.inputRef) !== ((_b = this.props.tagInputProps) === null || _b === void 0 ? void 0 : _b.inputRef)) {
|
151 | setRef((_c = prevProps.tagInputProps) === null || _c === void 0 ? void 0 : _c.inputRef, null);
|
152 | this.refHandlers.input = refHandler(this, "input", (_d = this.props.tagInputProps) === null || _d === void 0 ? void 0 : _d.inputRef);
|
153 | setRef((_e = this.props.tagInputProps) === null || _e === void 0 ? void 0 : _e.inputRef, this.input);
|
154 | }
|
155 | };
|
156 | MultiSelect.prototype.render = function () {
|
157 |
|
158 | var _a = this.props, openOnKeyDown = _a.openOnKeyDown, popoverProps = _a.popoverProps, tagInputProps = _a.tagInputProps, restProps = __rest(_a, ["openOnKeyDown", "popoverProps", "tagInputProps"]);
|
159 | return (React.createElement(QueryList, __assign({}, restProps, { onItemSelect: this.handleItemSelect, onQueryChange: this.handleQueryChange, ref: this.refHandlers.queryList, renderer: this.renderQueryList })));
|
160 | };
|
161 | MultiSelect.displayName = "".concat(DISPLAYNAME_PREFIX, ".MultiSelect");
|
162 | MultiSelect.defaultProps = {
|
163 | fill: false,
|
164 | placeholder: "Search...",
|
165 | };
|
166 | return MultiSelect;
|
167 | }(AbstractPureComponent2));
|
168 | export { MultiSelect };
|
169 |
|
\ | No newline at end of file |