blob: 16ada06f110a6e04b958ec663a22706dfd75fb21 [file] [log] [blame]
// Copyright (C) 2023 The Android Open Source Project
//
// 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.
import m from 'mithril';
import {classNames} from '../base/classnames';
import {FuzzySegment} from '../base/fuzzy';
import {isString} from '../base/object_utils';
import {exists} from '../base/utils';
import {raf} from '../core/raf_scheduler';
import {EmptyState} from '../widgets/empty_state';
import {KeycapGlyph} from '../widgets/hotkey_glyphs';
import {Popup} from '../widgets/popup';
interface OmniboxOptionRowAttrs {
// Human readable display name for the option.
// This can either be a simple string, or a list of fuzzy segments in which
// case highlighting will be applied to the matching segments.
displayName: FuzzySegment[] | string;
// Highlight this option.
highlighted: boolean;
// Arbitrary components to put on the right hand side of the option.
rightContent?: m.Children;
// Some tag to place on the right (to the left of the right content).
label?: string;
// Additional attrs forwarded to the underlying element.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
[htmlAttrs: string]: any;
}
class OmniboxOptionRow implements m.ClassComponent<OmniboxOptionRowAttrs> {
private highlightedBefore = false;
view({attrs}: m.Vnode<OmniboxOptionRowAttrs>): void | m.Children {
const {displayName, highlighted, rightContent, label, ...htmlAttrs} = attrs;
return m(
'li',
{
class: classNames(highlighted && 'pf-highlighted'),
...htmlAttrs,
},
m('span.pf-title', this.renderTitle(displayName)),
label && m('span.pf-tag', label),
rightContent,
);
}
private renderTitle(title: FuzzySegment[] | string): m.Children {
if (isString(title)) {
return title;
} else {
return title.map(({matching, value}) => {
return matching ? m('b', value) : value;
});
}
}
onupdate({attrs, dom}: m.VnodeDOM<OmniboxOptionRowAttrs, this>) {
if (this.highlightedBefore !== attrs.highlighted) {
if (attrs.highlighted) {
dom.scrollIntoView({block: 'nearest'});
}
this.highlightedBefore = attrs.highlighted;
}
}
}
// Omnibox option.
export interface OmniboxOption {
// The value to place into the omnibox. This is what's returned in onSubmit.
key: string;
// Display name provided as a string or a list of fuzzy segments to enable
// fuzzy match highlighting.
displayName: FuzzySegment[] | string;
// Some tag to place on the right (to the left of the right content).
tag?: string;
// Arbitrary components to put on the right hand side of the option.
rightContent?: m.Children;
}
export interface OmniboxAttrs {
// Current value of the omnibox input.
value: string;
// What to show when value is blank.
placeholder?: string;
// Called when the text changes.
onInput?: (value: string, previousValue: string) => void;
// Class or list of classes to append to the Omnibox element.
extraClasses?: string | string[];
// Called on close.
onClose?: () => void;
// Dropdown items to show. If none are supplied, the omnibox runs in free text
// mode, where anyt text can be input. Otherwise, onSubmit will always be
// called with one of the options.
// Options are provided in groups called categories. If the category has a
// name the name will be listed at the top of the group rendered with a little
// divider as well.
options?: OmniboxOption[];
// Called when the user expresses the intent to "execute" the thing.
onSubmit?: (value: string, mod: boolean, shift: boolean) => void;
// Called when the user hits backspace when the field is empty.
onGoBack?: () => void;
// When true, disable and grey-out the omnibox's input.
readonly?: boolean;
// Ref to use on the input - useful for extracing this element from the DOM.
inputRef?: string;
// Whether to close when the user presses Enter. Default = false.
closeOnSubmit?: boolean;
// Whether to close the omnibox (i.e. call the |onClose| handler) when we
// click outside the omnibox or its dropdown. Default = false.
closeOnOutsideClick?: boolean;
// Some content to place into the right hand side of the after the input.
rightContent?: m.Children;
// If we have options, this value indicates the index of the option which
// is currently highlighted.
selectedOptionIndex?: number;
// Callback for when the user pressed up/down, expressing a desire to change
// the |selectedOptionIndex|.
onSelectedOptionChanged?: (index: number) => void;
}
export class Omnibox implements m.ClassComponent<OmniboxAttrs> {
private popupElement?: HTMLElement;
private dom?: Element;
private attrs?: OmniboxAttrs;
view({attrs}: m.Vnode<OmniboxAttrs>): m.Children {
const {
value,
placeholder,
extraClasses,
onInput = () => {},
onSubmit = () => {},
onGoBack = () => {},
inputRef = 'omnibox',
options,
closeOnSubmit = false,
rightContent,
selectedOptionIndex = 0,
} = attrs;
return m(
Popup,
{
onPopupMount: (dom: HTMLElement) => (this.popupElement = dom),
onPopupUnMount: (_dom: HTMLElement) => (this.popupElement = undefined),
isOpen: exists(options),
showArrow: false,
matchWidth: true,
offset: 2,
trigger: m(
'.omnibox',
{
class: classNames(extraClasses),
},
m('input', {
ref: inputRef,
value,
placeholder,
oninput: (e: Event) => {
onInput((e.target as HTMLInputElement).value, value);
},
onkeydown: (e: KeyboardEvent) => {
if (e.key === 'Backspace' && value === '') {
onGoBack();
} else if (e.key === 'Escape') {
e.preventDefault();
this.close(attrs);
}
if (options) {
if (e.key === 'ArrowUp') {
e.preventDefault();
this.highlightPreviousOption(attrs);
} else if (e.key === 'ArrowDown') {
e.preventDefault();
this.highlightNextOption(attrs);
} else if (e.key === 'Enter') {
e.preventDefault();
const option = options[selectedOptionIndex];
// Return values from indexing arrays can be undefined.
// We should enable noUncheckedIndexedAccess in
// tsconfig.json.
/* eslint-disable
@typescript-eslint/strict-boolean-expressions */
if (option) {
/* eslint-enable */
closeOnSubmit && this.close(attrs);
const mod = e.metaKey || e.ctrlKey;
const shift = e.shiftKey;
onSubmit(option.key, mod, shift);
}
}
} else {
if (e.key === 'Enter') {
e.preventDefault();
closeOnSubmit && this.close(attrs);
const mod = e.metaKey || e.ctrlKey;
const shift = e.shiftKey;
onSubmit(value, mod, shift);
}
}
},
}),
rightContent,
),
},
options && this.renderDropdown(attrs),
);
}
private renderDropdown(attrs: OmniboxAttrs): m.Children {
const {options} = attrs;
if (!options) return null;
if (options.length === 0) {
return m(EmptyState, {title: 'No matching options...'});
} else {
return m(
'.pf-omnibox-dropdown',
this.renderOptionsContainer(attrs, options),
this.renderFooter(),
);
}
}
private renderFooter() {
return m(
'.pf-omnibox-dropdown-footer',
m(
'section',
m(KeycapGlyph, {keyValue: 'ArrowUp'}),
m(KeycapGlyph, {keyValue: 'ArrowDown'}),
'to navigate',
),
m('section', m(KeycapGlyph, {keyValue: 'Enter'}), 'to use'),
m('section', m(KeycapGlyph, {keyValue: 'Escape'}), 'to dismiss'),
);
}
private renderOptionsContainer(
attrs: OmniboxAttrs,
options: OmniboxOption[],
): m.Children {
const {
onClose = () => {},
onSubmit = () => {},
closeOnSubmit = false,
selectedOptionIndex,
} = attrs;
const opts = options.map(({displayName, key, rightContent, tag}, index) => {
return m(OmniboxOptionRow, {
key,
label: tag,
displayName: displayName,
highlighted: index === selectedOptionIndex,
onclick: () => {
closeOnSubmit && onClose();
onSubmit(key, false, false);
},
rightContent,
});
});
return m('ul.pf-omnibox-options-container', opts);
}
oncreate({attrs, dom}: m.VnodeDOM<OmniboxAttrs, this>) {
this.attrs = attrs;
this.dom = dom;
const {closeOnOutsideClick} = attrs;
if (closeOnOutsideClick) {
document.addEventListener('mousedown', this.onMouseDown);
}
}
onupdate({attrs, dom}: m.VnodeDOM<OmniboxAttrs, this>) {
this.attrs = attrs;
this.dom = dom;
const {closeOnOutsideClick} = attrs;
if (closeOnOutsideClick) {
document.addEventListener('mousedown', this.onMouseDown);
} else {
document.removeEventListener('mousedown', this.onMouseDown);
}
}
onremove(_: m.VnodeDOM<OmniboxAttrs, this>) {
this.attrs = undefined;
this.dom = undefined;
document.removeEventListener('mousedown', this.onMouseDown);
}
private onMouseDown = (e: Event) => {
// Don't close if the click was within ourselves or our popup.
if (e.target instanceof Node) {
if (this.popupElement && this.popupElement.contains(e.target)) {
return;
}
if (this.dom && this.dom.contains(e.target)) return;
}
if (this.attrs) {
this.close(this.attrs);
}
};
private close(attrs: OmniboxAttrs): void {
const {onClose = () => {}} = attrs;
raf.scheduleFullRedraw();
onClose();
}
private highlightPreviousOption(attrs: OmniboxAttrs) {
const {selectedOptionIndex = 0, onSelectedOptionChanged = () => {}} = attrs;
onSelectedOptionChanged(Math.max(0, selectedOptionIndex - 1));
}
private highlightNextOption(attrs: OmniboxAttrs) {
const {
selectedOptionIndex = 0,
onSelectedOptionChanged = () => {},
options = [],
} = attrs;
const max = options.length - 1;
onSelectedOptionChanged(Math.min(max, selectedOptionIndex + 1));
}
}