1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.BaseExtendedPicker = void 0;
|
4 | var tslib_1 = require("tslib");
|
5 | var React = require("react");
|
6 | var Utilities_1 = require("../../Utilities");
|
7 | var Autofill_1 = require("../../Autofill");
|
8 | var stylesImport = require("./BaseExtendedPicker.scss");
|
9 | var FocusZone_1 = require("../../FocusZone");
|
10 | var Selection_1 = require("../../Selection");
|
11 | var styles = stylesImport;
|
12 | var BaseExtendedPicker = (function (_super) {
|
13 | tslib_1.__extends(BaseExtendedPicker, _super);
|
14 | function BaseExtendedPicker(basePickerProps) {
|
15 | var _this = _super.call(this, basePickerProps) || this;
|
16 | _this.floatingPicker = React.createRef();
|
17 | _this.selectedItemsList = React.createRef();
|
18 | _this.root = React.createRef();
|
19 | _this.input = React.createRef();
|
20 | _this.onSelectionChange = function () {
|
21 | _this.forceUpdate();
|
22 | };
|
23 | _this.onInputChange = function (value, composing) {
|
24 |
|
25 | if (!composing) {
|
26 | _this.setState({ queryString: value });
|
27 | if (_this.floatingPicker.current) {
|
28 | _this.floatingPicker.current.onQueryStringChanged(value);
|
29 | }
|
30 | }
|
31 | };
|
32 | _this.onInputFocus = function (ev) {
|
33 | if (_this.selectedItemsList.current) {
|
34 | _this.selectedItemsList.current.unselectAll();
|
35 | }
|
36 | if (_this.props.inputProps && _this.props.inputProps.onFocus) {
|
37 | _this.props.inputProps.onFocus(ev);
|
38 | }
|
39 | };
|
40 | _this.onInputClick = function (ev) {
|
41 | if (_this.selectedItemsList.current) {
|
42 | _this.selectedItemsList.current.unselectAll();
|
43 | }
|
44 | if (_this.floatingPicker.current && _this.inputElement) {
|
45 |
|
46 | var shoudUpdateValue = _this.inputElement.value === '' || _this.inputElement.value !== _this.floatingPicker.current.inputText;
|
47 | _this.floatingPicker.current.showPicker(shoudUpdateValue);
|
48 | }
|
49 | };
|
50 |
|
51 |
|
52 | _this.onBackspace = function (ev) {
|
53 |
|
54 | if (ev.which !== Utilities_1.KeyCodes.backspace) {
|
55 | return;
|
56 | }
|
57 | if (_this.selectedItemsList.current && _this.items.length) {
|
58 | if (_this.input.current &&
|
59 | !_this.input.current.isValueSelected &&
|
60 | _this.input.current.inputElement === ev.currentTarget.ownerDocument.activeElement &&
|
61 | _this.input.current.cursorLocation === 0) {
|
62 | if (_this.floatingPicker.current) {
|
63 | _this.floatingPicker.current.hidePicker();
|
64 | }
|
65 | ev.preventDefault();
|
66 | _this.selectedItemsList.current.removeItemAt(_this.items.length - 1);
|
67 | _this._onSelectedItemsChanged();
|
68 | }
|
69 | else if (_this.selectedItemsList.current.hasSelectedItems()) {
|
70 | if (_this.floatingPicker.current) {
|
71 | _this.floatingPicker.current.hidePicker();
|
72 | }
|
73 | ev.preventDefault();
|
74 | _this.selectedItemsList.current.removeSelectedItems();
|
75 | _this._onSelectedItemsChanged();
|
76 | }
|
77 | }
|
78 | };
|
79 | _this.onCopy = function (ev) {
|
80 | if (_this.selectedItemsList.current) {
|
81 |
|
82 | _this.selectedItemsList.current.onCopy(ev);
|
83 | }
|
84 | };
|
85 | _this.onPaste = function (ev) {
|
86 | if (_this.props.onPaste) {
|
87 | var inputText = ev.clipboardData.getData('Text');
|
88 | ev.preventDefault();
|
89 | _this.props.onPaste(inputText);
|
90 | }
|
91 | };
|
92 | _this._onSuggestionSelected = function (item) {
|
93 | var currentRenderedQueryString = _this.props.currentRenderedQueryString;
|
94 | var queryString = _this.state.queryString;
|
95 | if (currentRenderedQueryString === undefined || currentRenderedQueryString === queryString) {
|
96 | var processedItem = _this.props.onItemSelected
|
97 | ? _this.props.onItemSelected(item)
|
98 | : item;
|
99 | if (processedItem === null) {
|
100 | return;
|
101 | }
|
102 | var processedItemObject = processedItem;
|
103 | var processedItemPromiseLike = processedItem;
|
104 | var newItem_1;
|
105 | if (processedItemPromiseLike && processedItemPromiseLike.then) {
|
106 | processedItemPromiseLike.then(function (resolvedProcessedItem) {
|
107 | newItem_1 = resolvedProcessedItem;
|
108 | _this._addProcessedItem(newItem_1);
|
109 | });
|
110 | }
|
111 | else {
|
112 | newItem_1 = processedItemObject;
|
113 | _this._addProcessedItem(newItem_1);
|
114 | }
|
115 | }
|
116 | };
|
117 | _this._onSelectedItemsChanged = function () {
|
118 | _this.focus();
|
119 | };
|
120 | |
121 |
|
122 |
|
123 |
|
124 |
|
125 |
|
126 |
|
127 |
|
128 |
|
129 | _this._onSuggestionsShownOrHidden = function () {
|
130 | _this.forceUpdate();
|
131 | };
|
132 | Utilities_1.initializeComponentRef(_this);
|
133 | _this.selection = new Selection_1.Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });
|
134 | _this.state = {
|
135 | queryString: '',
|
136 | };
|
137 | return _this;
|
138 | }
|
139 | Object.defineProperty(BaseExtendedPicker.prototype, "items", {
|
140 | get: function () {
|
141 | var _a, _b, _c, _d;
|
142 | return (_d = (_c = (_a = this.props.selectedItems) !== null && _a !== void 0 ? _a : (_b = this.selectedItemsList.current) === null || _b === void 0 ? void 0 : _b.items) !== null && _c !== void 0 ? _c : this.props.defaultSelectedItems) !== null && _d !== void 0 ? _d : null;
|
143 | },
|
144 | enumerable: false,
|
145 | configurable: true
|
146 | });
|
147 | BaseExtendedPicker.prototype.componentDidMount = function () {
|
148 | this.forceUpdate();
|
149 | };
|
150 | BaseExtendedPicker.prototype.focus = function () {
|
151 | if (this.input.current) {
|
152 | this.input.current.focus();
|
153 | }
|
154 | };
|
155 | BaseExtendedPicker.prototype.clearInput = function () {
|
156 | if (this.input.current) {
|
157 | this.input.current.clear();
|
158 | }
|
159 | };
|
160 | Object.defineProperty(BaseExtendedPicker.prototype, "inputElement", {
|
161 | get: function () {
|
162 | return this.input.current && this.input.current.inputElement;
|
163 | },
|
164 | enumerable: false,
|
165 | configurable: true
|
166 | });
|
167 | Object.defineProperty(BaseExtendedPicker.prototype, "highlightedItems", {
|
168 | get: function () {
|
169 | return this.selectedItemsList.current ? this.selectedItemsList.current.highlightedItems() : [];
|
170 | },
|
171 | enumerable: false,
|
172 | configurable: true
|
173 | });
|
174 | BaseExtendedPicker.prototype.render = function () {
|
175 | var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled, focusZoneProps = _a.focusZoneProps;
|
176 | var activeDescendant = this.floatingPicker.current && this.floatingPicker.current.currentSelectedSuggestionIndex !== -1
|
177 | ? 'sug-' + this.floatingPicker.current.currentSelectedSuggestionIndex
|
178 | : undefined;
|
179 | var isExpanded = this.floatingPicker.current ? this.floatingPicker.current.isSuggestionsShown : false;
|
180 | return (React.createElement("div", { ref: this.root, className: Utilities_1.css('ms-BasePicker ms-BaseExtendedPicker', className ? className : ''), onKeyDown: this.onBackspace, onCopy: this.onCopy },
|
181 | React.createElement(FocusZone_1.FocusZone, tslib_1.__assign({ direction: FocusZone_1.FocusZoneDirection.bidirectional }, focusZoneProps),
|
182 | React.createElement(Selection_1.SelectionZone, { selection: this.selection, selectionMode: Selection_1.SelectionMode.multiple },
|
183 | React.createElement("div", { className: Utilities_1.css('ms-BasePicker-text', styles.pickerText), role: 'list' },
|
184 | this.props.headerComponent,
|
185 | this.renderSelectedItemsList(),
|
186 | this.canAddItems() && (React.createElement(Autofill_1.Autofill, tslib_1.__assign({}, inputProps, { className: Utilities_1.css('ms-BasePicker-input', styles.pickerInput), ref: this.input, onFocus: this.onInputFocus, onClick: this.onInputClick, onInputValueChange: this.onInputChange, "aria-activedescendant": activeDescendant, "aria-owns": isExpanded ? 'suggestion-list' : undefined, "aria-expanded": isExpanded, "aria-haspopup": "true", role: "combobox", disabled: disabled, onPaste: this.onPaste })))))),
|
187 | this.renderFloatingPicker()));
|
188 | };
|
189 | Object.defineProperty(BaseExtendedPicker.prototype, "floatingPickerProps", {
|
190 | get: function () {
|
191 | return this.props.floatingPickerProps;
|
192 | },
|
193 | enumerable: false,
|
194 | configurable: true
|
195 | });
|
196 | Object.defineProperty(BaseExtendedPicker.prototype, "selectedItemsListProps", {
|
197 | get: function () {
|
198 | return this.props.selectedItemsListProps;
|
199 | },
|
200 | enumerable: false,
|
201 | configurable: true
|
202 | });
|
203 | BaseExtendedPicker.prototype.canAddItems = function () {
|
204 | var itemLimit = this.props.itemLimit;
|
205 | return itemLimit === undefined || this.items.length < itemLimit;
|
206 | };
|
207 | BaseExtendedPicker.prototype.renderFloatingPicker = function () {
|
208 | var FloatingPicker = this.props.onRenderFloatingPicker;
|
209 | return (React.createElement(FloatingPicker, tslib_1.__assign({ componentRef: this.floatingPicker, onChange: this._onSuggestionSelected, onSuggestionsHidden: this._onSuggestionsShownOrHidden, onSuggestionsShown: this._onSuggestionsShownOrHidden, inputElement: this.input.current ? this.input.current.inputElement : undefined, selectedItems: this.items, suggestionItems: this.props.suggestionItems ? this.props.suggestionItems : undefined }, this.floatingPickerProps)));
|
210 | };
|
211 | BaseExtendedPicker.prototype.renderSelectedItemsList = function () {
|
212 | var SelectedItems = this.props.onRenderSelectedItems;
|
213 | return (React.createElement(SelectedItems, tslib_1.__assign({ componentRef: this.selectedItemsList, selection: this.selection, selectedItems: this.props.selectedItems ? this.props.selectedItems : undefined, onItemsDeleted: this.props.selectedItems ? this.props.onItemsRemoved : undefined }, this.selectedItemsListProps)));
|
214 | };
|
215 | BaseExtendedPicker.prototype._addProcessedItem = function (newItem) {
|
216 |
|
217 |
|
218 | if (this.props.onItemAdded) {
|
219 | this.props.onItemAdded(newItem);
|
220 | }
|
221 | if (this.selectedItemsList.current) {
|
222 | this.selectedItemsList.current.addItems([newItem]);
|
223 | }
|
224 | if (this.input.current) {
|
225 | this.input.current.clear();
|
226 | }
|
227 | if (this.floatingPicker.current) {
|
228 | this.floatingPicker.current.hidePicker();
|
229 | }
|
230 | this.focus();
|
231 | };
|
232 | return BaseExtendedPicker;
|
233 | }(React.Component));
|
234 | exports.BaseExtendedPicker = BaseExtendedPicker;
|
235 |
|
\ | No newline at end of file |