@blueprintjs/select
Version:
Components related to selecting items from a list
237 lines • 14 kB
JavaScript
"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