|
| 1 | +/** |
| 2 | + * @license |
| 3 | + * Copyright Google LLC All Rights Reserved. |
| 4 | + * |
| 5 | + * Use of this source code is governed by an MIT-style license that can be |
| 6 | + * found in the LICENSE file at https://angular.io/license |
| 7 | + */ |
| 8 | + |
| 9 | +import {QueryList} from '@angular/core'; |
| 10 | +import {Observable, Subject} from 'rxjs'; |
| 11 | + |
| 12 | +/** Represents an item within a tree that can be passed to a TreeKeyManager. */ |
| 13 | +export interface TreeKeyManagerItem { |
| 14 | + /** Whether the item is disabled. */ |
| 15 | + isDisabled?: (() => boolean) | boolean; |
| 16 | + |
| 17 | + /** The user-facing label for this item. */ |
| 18 | + getLabel?(): string; |
| 19 | + |
| 20 | + /** Perform the main action (i.e. selection) for this item. */ |
| 21 | + activate(): void; |
| 22 | + |
| 23 | + /** Retrieves the parent for this item. This is `null` if there is no parent. */ |
| 24 | + getParent(): TreeKeyManagerItem | null; |
| 25 | + |
| 26 | + /** Retrieves the children for this item. */ |
| 27 | + getChildren(): TreeKeyManagerItem[] | Observable<TreeKeyManagerItem[]>; |
| 28 | + |
| 29 | + /** Determines if the item is currently expanded. */ |
| 30 | + isExpanded: (() => boolean) | boolean; |
| 31 | + |
| 32 | + /** Collapses the item, hiding its children. */ |
| 33 | + collapse(): void; |
| 34 | + |
| 35 | + /** Expands the item, showing its children. */ |
| 36 | + expand(): void; |
| 37 | + |
| 38 | + /** |
| 39 | + * Focuses the item. This should provide some indication to the user that this item is focused. |
| 40 | + */ |
| 41 | + focus(): void; |
| 42 | +} |
| 43 | + |
| 44 | +/** |
| 45 | + * Configuration for the TreeKeyManager. |
| 46 | + */ |
| 47 | +export interface TreeKeyManagerOptions<T extends TreeKeyManagerItem> { |
| 48 | + /** |
| 49 | + * If true, then the key manager will call `activate` in addition to calling `focus` when a |
| 50 | + * particular item is focused. By default, this is false. |
| 51 | + */ |
| 52 | + activationFollowsFocus?: boolean; |
| 53 | + |
| 54 | + /** |
| 55 | + * The direction in which the tree items are laid out horizontally. This influences which key |
| 56 | + * will be interpreted as expand or collapse. Defaults to 'ltr'. |
| 57 | + */ |
| 58 | + horizontalOrientation?: 'rtl' | 'ltr'; |
| 59 | + |
| 60 | + /** |
| 61 | + * Sets the predicate function that determines which items should be skipped by the tree key |
| 62 | + * manager. By default, disabled items are skipped. |
| 63 | + * |
| 64 | + * If the item is to be skipped, this function should return false. |
| 65 | + */ |
| 66 | + skipPredicate?: (item: T) => boolean; |
| 67 | + |
| 68 | + /** |
| 69 | + * If provided, determines how the key manager determines if two items are equivalent. |
| 70 | + * |
| 71 | + * It should provide a unique key for each unique tree item. If two tree items are equivalent, |
| 72 | + * then this function should return the same value. |
| 73 | + */ |
| 74 | + trackBy?: (treeItem: T) => unknown; |
| 75 | + |
| 76 | + /** |
| 77 | + * If a value is provided, enables typeahead mode, which allows users to set the active item |
| 78 | + * by typing the visible label of the item. |
| 79 | + * |
| 80 | + * If a number is provided, this will be the time to wait after the last keystroke before |
| 81 | + * setting the active item. If `true` is provided, the default interval of 200ms will be used. |
| 82 | + */ |
| 83 | + typeAheadDebounceInterval?: true | number; |
| 84 | +} |
| 85 | + |
| 86 | +export interface TreeKeyManagerStrategy<T extends TreeKeyManagerItem> { |
| 87 | + /** Stream that emits any time the focused item changes. */ |
| 88 | + readonly change: Subject<T | null>; |
| 89 | + |
| 90 | + /** |
| 91 | + * Handles a keyboard event on the tree. |
| 92 | + * |
| 93 | + * @param event Keyboard event that represents the user interaction with the tree. |
| 94 | + */ |
| 95 | + onKeydown(event: KeyboardEvent): void; |
| 96 | + |
| 97 | + /** Index of the currently active item. */ |
| 98 | + getActiveItemIndex(): number | null; |
| 99 | + |
| 100 | + /** The currently active item. */ |
| 101 | + getActiveItem(): T | null; |
| 102 | + |
| 103 | + /** |
| 104 | + * Called the first time the Tree component is focused. This method will only be called once over |
| 105 | + * the lifetime of the Tree component. |
| 106 | + * |
| 107 | + * Intended to be used to focus the first item in the tree. |
| 108 | + */ |
| 109 | + onInitialFocus(): void; |
| 110 | + |
| 111 | + /** |
| 112 | + * Focus the provided item by index. |
| 113 | + * |
| 114 | + * Updates the state of the currently active item. Emits to `change` stream if active item |
| 115 | + * Changes. |
| 116 | + * @param index The index of the item to focus. |
| 117 | + * @param options Additional focusing options. |
| 118 | + */ |
| 119 | + focusItem(index: number, options?: {emitChangeEvent?: boolean}): void; |
| 120 | + /** |
| 121 | + * Focus the provided item. |
| 122 | + * |
| 123 | + * Updates the state of the currently active item. Emits to `change` stream if active item |
| 124 | + * Changes. |
| 125 | + * @param item The item to focus. Equality is determined via the trackBy function. |
| 126 | + * @param options Additional focusing options. |
| 127 | + */ |
| 128 | + focusItem(item: T, options?: {emitChangeEvent?: boolean}): void; |
| 129 | + focusItem(itemOrIndex: number | T, options?: {emitChangeEvent?: boolean}): void; |
| 130 | +} |
| 131 | + |
| 132 | +export type TreeKeyManagerFactory<T extends TreeKeyManagerItem> = ( |
| 133 | + items: Observable<T[]> | QueryList<T> | T[], |
| 134 | + options: TreeKeyManagerOptions<T>, |
| 135 | +) => TreeKeyManagerStrategy<T>; |
0 commit comments