-
Notifications
You must be signed in to change notification settings - Fork 208
/
TextBox.ts
98 lines (81 loc) · 2.81 KB
/
TextBox.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module Controls
*/
/** Wraps an HTML text input field.
* @beta
*/
export interface TextBox {
/** The label, if the text box has one. */
label?: HTMLLabelElement;
/** The text input element. */
textbox: HTMLInputElement;
/** The div containing the text box. */
div: HTMLDivElement;
}
/** @alpha */
export type TextBoxHandler = (textbox: HTMLInputElement) => void;
/** @alpha */
export type TextBoxKeyPressHandler = (textbox: HTMLInputElement, ev: KeyboardEvent) => void;
/** @alpha */
export interface TextBoxProps {
label?: string;
id?: string;
parent?: HTMLElement;
handler?: TextBoxHandler;
keypresshandler?: TextBoxKeyPressHandler;
focushandler?: TextBoxHandler;
tooltip?: string;
inline?: boolean;
list?: string; // if defined, contains the id of a datalist to bind to this textbox for autocompletion
}
/** @alpha */
export function createTextBox(props: TextBoxProps): TextBox {
const div = document.createElement("div");
if (true === props.inline)
div.style.display = "inline";
let label;
if (undefined !== props.label) {
label = document.createElement("label");
label.innerText = props.label;
if (undefined !== props.id)
label.htmlFor = props.id;
div.appendChild(label);
}
const textbox = document.createElement("input");
textbox.type = "text";
if (undefined !== props.id)
textbox.id = props.id;
div.appendChild(textbox);
if (undefined !== props.parent)
props.parent.appendChild(div);
const handler = props.handler;
if (undefined !== handler) {
textbox.onchange = () => handler(textbox);
}
// Don't want the document's listeners intepreting keypresses as keyboard shortcuts...
const stopPropagation = (ev: KeyboardEvent) => ev.stopPropagation();
textbox.onkeydown = textbox.onkeyup = stopPropagation;
const keypresshandler = props.keypresshandler;
if (undefined !== keypresshandler) {
textbox.onkeypress = (ev: KeyboardEvent) => { // eslint-disable-line deprecation/deprecation
keypresshandler(textbox, ev);
ev.stopPropagation();
};
} else {
textbox.onkeypress = stopPropagation; // eslint-disable-line deprecation/deprecation
}
const focushandler = props.focushandler;
if (undefined !== focushandler) {
textbox.onfocus = () => focushandler(textbox);
}
if (undefined !== props.list) {
textbox.setAttribute("list", props.list);
}
if (undefined !== props.tooltip)
div.title = props.tooltip;
return { label, textbox, div };
}