web-ui-pack
Version:
Web package with UI elements
126 lines (125 loc) • 6.74 kB
TypeScript
import WUPPopupElement from "../popup/popupElement";
import { SetValueReasons } from "./baseControl";
import WUPTextControl from "./text";
export declare const enum MenuOpenCases {
/** When $openMenu() called programmatically; Don't use it for $options (it's for nested cycle) */
onManualCall = 0,
/** When control got focus via user interaction; ignores case when user changed value by click on item on clearButton
* to change such behavior update WUPBaseComboControl.prototype.canOpenMenu */
onFocus = 2,
/** When control got focus programmatically (via option `autofocus` or when called method 'focus()') */
onFocusAuto = 4,
/** When user clicks on control (beside editable not-empty input) */
onClick = 8,
/** When user clicks on input (by default it's disabled rule to allow user to work with input without popup close/open blinks) */
onClickInput = 16,
/** When user types text */
onInput = 32,
/** When user presses arrowUp/arrowDown */
onPressArrowKey = 64
}
export declare const enum MenuCloseCases {
/** When $closeMenu() called programmatically; Don't use it for $options (it's for nested cycle) */
onManualCall = 0,
/** When user clicks on control but not menu (beside editable not-empty input) */
onClick = 1,
/** When user clicks on menu item and it's selected */
onSelect = 2,
/** When control loses focus */
onFocusLost = 3,
/** When user presses Escape key */
OnPressEsc = 4,
/** When user presses Enter key */
OnPressEnter = 5,
/** When options are changed and need to re-render */
OnOptionsChange = 6
}
declare global {
namespace WUP.BaseCombo {
interface EventMap extends WUP.Text.EventMap {
/** Fires after popup-menu is opened (after animation finishes) */
$openMenu: Event;
/** Fires after popup is closed (after animation finishes) */
$closeMenu: Event;
}
interface ValidityMap extends Omit<WUP.Text.ValidityMap, "min" | "max" | "email"> {
}
interface NewOptions {
/** Case when menu-popup to open; WARN MenuOpenCases.inputClick doesn't work without MenuOpenCases.click
* @defaultValue onPressArrowKey | onClick | onFocus */
openCase: MenuOpenCases;
/** Set true to make input not editable but allow select items via popup-menu (ordinary dropdown mode) */
readOnlyInput: boolean | number;
}
interface Options<T = any, VM = ValidityMap> extends WUP.Text.Options<T, VM>, NewOptions {
}
interface JSXProps<C = WUPBaseComboControl> extends WUP.Text.JSXProps<C>, WUP.Base.OnlyNames<NewOptions> {
"w-openCase"?: MenuOpenCases | number;
"w-readOnlyInput"?: boolean | number;
}
}
}
/** Base abstract form-control for any control with popup-menu (Dropdown, Datepicker etc.) */
export default abstract class WUPBaseComboControl<ValueType = any, TOptions extends WUP.BaseCombo.Options = WUP.BaseCombo.Options, EventMap extends WUP.BaseCombo.EventMap = WUP.BaseCombo.EventMap> extends WUPTextControl<ValueType, TOptions, EventMap> {
static get $style(): string;
static $defaults: WUP.BaseCombo.Options<any>;
/** Fires after popup-menu is opened (after animation finishes) */
$onOpenMenu?: (e: Event) => void;
/** Fires after popup is closed (after animation finishes) */
$onCloseMenu?: (e: Event) => void;
/** Returns if popup-menu is opened */
get $isOpened(): boolean;
/** Close popup-menu
* @returns Promise resolved by animation time */
$closeMenu(): Promise<void>;
/** Open popup-menu
* @returns Promise resolved resolved by animation time */
$openMenu(): Promise<void>;
/** Reference to popupMenu */
$refPopup?: WUPPopupElement;
protected renderControl(): void;
protected gotChanges(propsChanged: Array<keyof WUP.BaseCombo.Options> | null): void;
gotFormChanges(propsChanged: Array<keyof WUP.Form.Options | keyof WUP.BaseCombo.Options> | null): void;
setupInputReadonly(): void;
/** Called when need to create menu in opened popup */
protected abstract renderMenu(popup: WUPPopupElement, menuId: string): HTMLElement;
/** Called when need to transfer current value to text-input (or string-value) */
protected abstract valueToInput(v: ValueType | undefined): string;
/** Called on user's keyDown to apply focus on popup-menu items */
protected abstract focusMenuItemByKeydown(e: KeyboardEvent): void;
/** Returns whether possible to use input-click as dropdown behavior */
isLockInputDropdown(e: Event): boolean;
/** Override to change open-behavior */
canOpenMenu(openCase: MenuOpenCases, e?: MouseEvent | FocusEvent | KeyboardEvent | null): boolean;
/** Called when need to create new popup for menu */
protected renderPopup(menuId: string): WUPPopupElement;
protected goOpenMenu(openCase: MenuOpenCases, e?: MouseEvent | FocusEvent | KeyboardEvent | null): Promise<WUPPopupElement | null>;
/** Override to change close-behavior */
canCloseMenu(closeCase: MenuCloseCases, e?: MouseEvent | FocusEvent | null): boolean;
protected _isClosing?: true;
protected goCloseMenu(closeCase: MenuCloseCases, e?: MouseEvent | FocusEvent | null): Promise<boolean>;
/** Current focused menu-item (via aria-activedescendant) */
_focusedMenuItem?: HTMLElement | null;
/** Focus/resetFocus for item (via aria-activedescendant) */
protected focusMenuItem(next: HTMLElement | null): void;
/** Scroll to element if previous scroll is not in processing (debounce by empty timeout) */
tryScrollTo(el: HTMLElement): void;
_selectedMenuItem?: HTMLElement | null;
/** Select item (set aria-selected and scroll to) */
protected selectMenuItem(next: HTMLElement | null): void;
protected gotKeyDown(e: KeyboardEvent): void;
protected gotInput(e: WUP.Text.GotInputEvent, preventValueChange?: boolean): void;
protected gotFocus(ev: FocusEvent): Array<() => void>;
protected gotFocusLost(): void;
/** Called when user selected new value from menu and need to close menu */
protected selectValue(v: ValueType, canCloseMenu?: boolean): void;
/** Reset input to currentValue; called on pressing Escape or Enter */
protected resetInputValue(): void;
protected setInputValue(v: ValueType | undefined, reason: SetValueReasons): void;
protected setInputValueDirect(v: string, reason: SetValueReasons): void;
/** Called when popup must be removed (by focus out OR if control removed) */
protected removePopup(): void;
protected gotRemoved(): void;
private inputFocus;
}