UNPKG

@blueprintjs/select

Version:

Components related to selecting items from a list

237 lines 14 kB
"use strict"; /* * Copyright 2022 Palantir Technologies, Inc. All rights reserved. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ Object.defineProperty(exports, "__esModule", { value: true }); exports.Suggest = void 0; const tslib_1 = require("tslib"); const classnames_1 = tslib_1.__importDefault(require("classnames")); const React = tslib_1.__importStar(require("react")); const core_1 = require("@blueprintjs/core"); const common_1 = require("../../common"); const queryList_1 = require("../query-list/queryList"); /** * Suggest component. * * @see https://blueprintjs.com/docs/#select/suggest */ class Suggest extends core_1.AbstractPureComponent { constructor() { var _a; super(...arguments); this.state = { isOpen: (this.props.popoverProps != null && this.props.popoverProps.isOpen) || false, selectedItem: this.getInitialSelectedItem(), }; this.inputElement = null; this.queryList = null; this.handleInputRef = (0, core_1.refHandler)(this, "inputElement", (_a = this.props.inputProps) === null || _a === void 0 ? void 0 : _a.inputRef); this.handleQueryListRef = (ref) => (this.queryList = ref); this.listboxId = core_1.Utils.uniqueId("listbox"); this.renderQueryList = (listProps) => { const { popoverContentProps = {}, popoverProps = {}, popoverRef } = this.props; const { isOpen } = this.state; const { handleKeyDown, handleKeyUp } = listProps; // N.B. no need to set `popoverProps.fill` since that is unused with the `renderTarget` API return (React.createElement(core_1.Popover, { autoFocus: false, enforceFocus: false, isOpen: isOpen, placement: popoverProps.position || popoverProps.placement ? undefined : "bottom-start", ...popoverProps, className: (0, classnames_1.default)(listProps.className, popoverProps.className), content: React.createElement("div", { ...popoverContentProps, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }, listProps.itemList), interactionKind: "click", onInteraction: this.handlePopoverInteraction, onOpened: this.handlePopoverOpened, onOpening: this.handlePopoverOpening, popoverClassName: (0, classnames_1.default)(common_1.Classes.SUGGEST_POPOVER, popoverProps.popoverClassName), popupKind: core_1.PopupKind.LISTBOX, ref: popoverRef, renderTarget: this.getPopoverTargetRenderer(listProps, isOpen) })); }; // We use the renderTarget API to flatten the rendered DOM and make it easier to implement features like // the "fill" prop. Note that we must take `isOpen` as an argument to force this render function to be called // again after that state changes. this.getPopoverTargetRenderer = (listProps, isOpen) => // eslint-disable-next-line react/display-name ({ // pull out `isOpen` so that it's not forwarded to the DOM isOpen: _isOpen, ref, ...targetProps }) => { const { disabled, fill, inputProps = {}, inputValueRenderer, popoverProps = {}, resetOnClose } = this.props; const { selectedItem } = this.state; const { handleKeyDown, handleKeyUp } = listProps; const selectedItemText = selectedItem == null ? "" : inputValueRenderer(selectedItem); const { autoComplete = "off", placeholder = "Search..." } = inputProps; // placeholder shows selected item while open. const inputPlaceholder = isOpen && selectedItemText ? selectedItemText : placeholder; // value shows query when open, and query remains when closed if nothing is selected. // if resetOnClose is enabled, then hide query when not open. (see handlePopoverOpening) const inputValue = isOpen ? listProps.query : selectedItemText === "" ? resetOnClose ? "" : listProps.query : selectedItemText; return (React.createElement(core_1.InputGroup, { "aria-controls": this.listboxId, autoComplete: autoComplete, disabled: disabled, tagName: popoverProps.targetTagName, ...targetProps, ...inputProps, "aria-autocomplete": "list", "aria-expanded": isOpen, className: (0, classnames_1.default)(targetProps.className, inputProps.className), fill: fill, inputRef: (0, core_1.mergeRefs)(this.handleInputRef, ref), onChange: listProps.handleQueryChange, onFocus: this.handleInputFocus, onKeyDown: this.getTargetKeyDownHandler(handleKeyDown), onKeyUp: this.getTargetKeyUpHandler(handleKeyUp), placeholder: inputPlaceholder, role: "combobox", value: inputValue })); }; this.selectText = () => { // wait until the input is properly focused to select the text inside of it this.requestAnimationFrame(() => { var _a; (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, this.inputElement.value.length); }); }; this.handleInputFocus = (event) => { var _a, _b; this.selectText(); // TODO can we leverage Popover.openOnTargetFocus for this? if (!this.props.openOnKeyDown) { this.setState({ isOpen: true }); } (_b = (_a = this.props.inputProps) === null || _a === void 0 ? void 0 : _a.onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, event); }; this.handleItemSelect = (item, event) => { var _a, _b, _c, _d; let nextOpenState; if (!this.props.closeOnSelect) { (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(); this.selectText(); nextOpenState = true; } else { (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.blur(); nextOpenState = false; } // the internal state should only change when uncontrolled. if (this.props.selectedItem === undefined) { this.setState({ isOpen: nextOpenState, selectedItem: item, }); } else { // otherwise just set the next open state. this.setState({ isOpen: nextOpenState }); } (_d = (_c = this.props).onItemSelect) === null || _d === void 0 ? void 0 : _d.call(_c, item, event); }; // Popover interaction kind is CLICK, so this only handles click events. // Note that we defer to the next animation frame in order to get the latest activeElement this.handlePopoverInteraction = (nextOpenState, event) => this.requestAnimationFrame(() => { var _a, _b; const isInputFocused = this.inputElement === core_1.Utils.getActiveElement(this.inputElement); if (this.inputElement != null && !isInputFocused) { // the input is no longer focused, we should close the popover this.setState({ isOpen: false }); } (_b = (_a = this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onInteraction) === null || _b === void 0 ? void 0 : _b.call(_a, nextOpenState, event); }); this.handlePopoverOpening = (node) => { var _a, _b; // reset query before opening instead of when closing to prevent flash of unfiltered items. // this is a limitation of the interactions between QueryList state and Popover transitions. if (this.props.resetOnClose && this.queryList) { this.queryList.setQuery("", true); } (_b = (_a = this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onOpening) === null || _b === void 0 ? void 0 : _b.call(_a, node); }; this.handlePopoverOpened = (node) => { var _a, _b; // scroll active item into view after popover transition completes and all dimensions are stable. if (this.queryList != null) { this.queryList.scrollActiveItemIntoView(); } (_b = (_a = this.props.popoverProps) === null || _a === void 0 ? void 0 : _a.onOpened) === null || _b === void 0 ? void 0 : _b.call(_a, node); }; this.getTargetKeyDownHandler = (handleQueryListKeyDown) => { return (e) => { var _a, _b, _c; if (e.key === "Escape" || e.key === "Tab") { // By default the escape key will not trigger a blur on the // input element. It must be done explicitly. if (e.key === "Escape") { (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.blur(); } this.setState({ isOpen: false }); } else if (this.props.openOnKeyDown && e.key !== "Backspace" && e.key !== "ArrowLeft" && e.key !== "ArrowRight") { this.setState({ isOpen: true }); } if (this.state.isOpen) { handleQueryListKeyDown === null || handleQueryListKeyDown === void 0 ? void 0 : handleQueryListKeyDown(e); } (_c = (_b = this.props.inputProps) === null || _b === void 0 ? void 0 : _b.onKeyDown) === null || _c === void 0 ? void 0 : _c.call(_b, e); }; }; this.getTargetKeyUpHandler = (handleQueryListKeyUp) => { return (evt) => { var _a, _b; if (this.state.isOpen) { handleQueryListKeyUp === null || handleQueryListKeyUp === void 0 ? void 0 : handleQueryListKeyUp(evt); } (_b = (_a = this.props.inputProps) === null || _a === void 0 ? void 0 : _a.onKeyUp) === null || _b === void 0 ? void 0 : _b.call(_a, evt); }; }; } /** @deprecated no longer necessary now that the TypeScript parser supports type arguments on JSX element tags */ static ofType() { return Suggest; } render() { var _a; // omit props specific to this component, spread the rest. const { disabled, inputProps, menuProps, popoverProps, ...restProps } = this.props; return (React.createElement(queryList_1.QueryList, { ...restProps, menuProps: { "aria-label": "selectable options", ...menuProps, id: this.listboxId }, initialActiveItem: (_a = this.props.selectedItem) !== null && _a !== void 0 ? _a : undefined, onItemSelect: this.handleItemSelect, ref: this.handleQueryListRef, renderer: this.renderQueryList })); } componentDidUpdate(prevProps, prevState) { var _a, _b, _c, _d, _e, _f, _g; if (((_a = prevProps.inputProps) === null || _a === void 0 ? void 0 : _a.inputRef) !== ((_b = this.props.inputProps) === null || _b === void 0 ? void 0 : _b.inputRef)) { (0, core_1.setRef)((_c = prevProps.inputProps) === null || _c === void 0 ? void 0 : _c.inputRef, null); this.handleInputRef = (0, core_1.refHandler)(this, "inputElement", (_d = this.props.inputProps) === null || _d === void 0 ? void 0 : _d.inputRef); (0, core_1.setRef)((_e = this.props.inputProps) === null || _e === void 0 ? void 0 : _e.inputRef, this.inputElement); } // If the selected item prop changes, update the underlying state. if (this.props.selectedItem !== undefined && this.props.selectedItem !== this.state.selectedItem) { this.setState({ selectedItem: this.props.selectedItem }); } if (this.state.isOpen === false && prevState.isOpen === true) { // just closed, likely by keyboard interaction // wait until the transition ends so there isn't a flash of content in the popover const timeout = (_g = (_f = this.props.popoverProps) === null || _f === void 0 ? void 0 : _f.transitionDuration) !== null && _g !== void 0 ? _g : core_1.Popover.defaultProps.transitionDuration; setTimeout(() => this.maybeResetActiveItemToSelectedItem(), timeout); } if (this.state.isOpen && !prevState.isOpen && this.queryList != null) { this.queryList.scrollActiveItemIntoView(); } } getInitialSelectedItem() { // controlled > uncontrolled > default if (this.props.selectedItem !== undefined) { return this.props.selectedItem; } else if (this.props.defaultSelectedItem !== undefined) { return this.props.defaultSelectedItem; } else { return null; } } maybeResetActiveItemToSelectedItem() { var _a; const shouldResetActiveItemToSelectedItem = this.props.activeItem === undefined && this.state.selectedItem !== null && !this.props.resetOnSelect; if (this.queryList !== null && shouldResetActiveItemToSelectedItem) { this.queryList.setActiveItem((_a = this.props.selectedItem) !== null && _a !== void 0 ? _a : this.state.selectedItem); } } } exports.Suggest = Suggest; Suggest.displayName = `${core_1.DISPLAYNAME_PREFIX}.Suggest`; Suggest.defaultProps = { closeOnSelect: true, fill: false, openOnKeyDown: false, resetOnClose: false, }; //# sourceMappingURL=suggest.js.map