github/simple-keyboard
github/simple-keyboard
3
0
Fork 0
mirror of https://github.com/hodgef/simple-keyboard.git synced 2025-02-22 01:29:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Escape regex input for layoutCandidates check. Fixes #1645

Browse Source
This commit is contained in:
Francisco Hodge 2022-07-31 16:42:01 -07:00
parent 5c574e8226
commit f82f2c342f
11 changed files with 20362 additions and 789 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
build/components/CandidateBox.d.ts vendored
View File

@ -1,14 +1,14 @@
import "./css/CandidateBox.css"; import "./css/CandidateBox.css";
import Utilities from "../services/Utilities"; import Utilities from "../services/Utilities";
import { CandidateBoxParams, CandidateBoxRenderParams, CandidateBoxShowParams } from "./../interfaces"; import { CandidateBoxParams, CandidateBoxRenderParams, CandidateBoxShowParams } from "./../interfaces";
declare class CandidateBox { declare class CandidateBox {
utilities: Utilities; utilities: Utilities;
candidateBoxElement: HTMLDivElement; candidateBoxElement: HTMLDivElement;
pageIndex: number; pageIndex: number;
pageSize: number; pageSize: number;
constructor({ utilities }: CandidateBoxParams); constructor({ utilities }: CandidateBoxParams);
destroy(): void; destroy(): void;
show({ candidateValue, targetElement, onSelect, }: CandidateBoxShowParams): void; show({ candidateValue, targetElement, onSelect, }: CandidateBoxShowParams): void;
renderPage({ candidateListPages, targetElement, pageIndex, nbPages, onItemSelected, }: CandidateBoxRenderParams): void; renderPage({ candidateListPages, targetElement, pageIndex, nbPages, onItemSelected, }: CandidateBoxRenderParams): void;
} }
export default CandidateBox; export default CandidateBox;

582
build/components/Keyboard.d.ts vendored
View File

@ -1,291 +1,291 @@
import "./css/Keyboard.css"; import "./css/Keyboard.css";
import PhysicalKeyboard from "../services/PhysicalKeyboard"; import PhysicalKeyboard from "../services/PhysicalKeyboard";
import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement } from "../interfaces"; import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement } from "../interfaces";
import CandidateBox from "./CandidateBox"; import CandidateBox from "./CandidateBox";
/** /**
* Root class for simple-keyboard. * Root class for simple-keyboard.
* This class: * This class:
* - Parses the options * - Parses the options
* - Renders the rows and buttons * - Renders the rows and buttons
* - Handles button functionality * - Handles button functionality
*/ */
declare class SimpleKeyboard { declare class SimpleKeyboard {
input: KeyboardInput; input: KeyboardInput;
options: KeyboardOptions; options: KeyboardOptions;
utilities: any; utilities: any;
caretPosition: number | null; caretPosition: number | null;
caretPositionEnd: number | null; caretPositionEnd: number | null;
keyboardDOM: KeyboardElement; keyboardDOM: KeyboardElement;
keyboardPluginClasses: string; keyboardPluginClasses: string;
keyboardDOMClass: string; keyboardDOMClass: string;
buttonElements: KeyboardButtonElements; buttonElements: KeyboardButtonElements;
currentInstanceName: string; currentInstanceName: string;
allKeyboardInstances: { allKeyboardInstances: {
[key: string]: SimpleKeyboard; [key: string]: SimpleKeyboard;
}; };
keyboardInstanceNames: string[]; keyboardInstanceNames: string[];
isFirstKeyboardInstance: boolean; isFirstKeyboardInstance: boolean;
physicalKeyboard: PhysicalKeyboard; physicalKeyboard: PhysicalKeyboard;
modules: { modules: {
[key: string]: any; [key: string]: any;
}; };
activeButtonClass: string; activeButtonClass: string;
holdInteractionTimeout: number; holdInteractionTimeout: number;
holdTimeout: number; holdTimeout: number;
isMouseHold: boolean; isMouseHold: boolean;
initialized: boolean; initialized: boolean;
candidateBox: CandidateBox | null; candidateBox: CandidateBox | null;
keyboardRowsDOM: KeyboardElement; keyboardRowsDOM: KeyboardElement;
defaultName: string; defaultName: string;
activeInputElement: HTMLInputElement | HTMLTextAreaElement | null; activeInputElement: HTMLInputElement | HTMLTextAreaElement | null;
/** /**
* Creates an instance of SimpleKeyboard * Creates an instance of SimpleKeyboard
* @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object. * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
*/ */
constructor(selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions); constructor(selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions);
/** /**
* parseParams * parseParams
*/ */
handleParams: (selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions) => { handleParams: (selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions) => {
keyboardDOMClass: string; keyboardDOMClass: string;
keyboardDOM: KeyboardElement; keyboardDOM: KeyboardElement;
options: Partial<KeyboardOptions | undefined>; options: Partial<KeyboardOptions | undefined>;
}; };
/** /**
* Getters * Getters
*/ */
getOptions: () => KeyboardOptions; getOptions: () => KeyboardOptions;
getCaretPosition: () => number | null; getCaretPosition: () => number | null;
getCaretPositionEnd: () => number | null; getCaretPositionEnd: () => number | null;
/** /**
* Changes the internal caret position * Changes the internal caret position
* @param {number} position The caret's start position * @param {number} position The caret's start position
* @param {number} positionEnd The caret's end position * @param {number} positionEnd The caret's end position
*/ */
setCaretPosition(position: number | null, endPosition?: number | null): void; setCaretPosition(position: number | null, endPosition?: number | null): void;
/** /**
* Retrieve the candidates for a given input * Retrieve the candidates for a given input
* @param input The input string to check * @param input The input string to check
*/ */
getInputCandidates(input: string): { getInputCandidates(input: string): {
candidateKey: string; candidateKey: string;
candidateValue: string; candidateValue: string;
} | Record<string, never>; } | Record<string, never>;
/** /**
* Shows a suggestion box with a list of candidate words * Shows a suggestion box with a list of candidate words
* @param candidates The chosen candidates string as defined in the layoutCandidates option * @param candidates The chosen candidates string as defined in the layoutCandidates option
* @param targetElement The element next to which the candidates box will be shown * @param targetElement The element next to which the candidates box will be shown
*/ */
showCandidatesBox(candidateKey: string, candidateValue: string, targetElement: KeyboardElement): void; showCandidatesBox(candidateKey: string, candidateValue: string, targetElement: KeyboardElement): void;
/** /**
* Handles clicks made to keyboard buttons * Handles clicks made to keyboard buttons
* @param {string} button The button's layout name. * @param {string} button The button's layout name.
*/ */
handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void; handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void;
/** /**
* Get mouse hold state * Get mouse hold state
*/ */
getMouseHold(): boolean; getMouseHold(): boolean;
/** /**
* Mark mouse hold state as set * Mark mouse hold state as set
*/ */
setMouseHold(value: boolean): void; setMouseHold(value: boolean): void;
/** /**
* Handles button mousedown * Handles button mousedown
*/ */
handleButtonMouseDown(button: string, e: KeyboardHandlerEvent): void; handleButtonMouseDown(button: string, e: KeyboardHandlerEvent): void;
/** /**
* Handles button mouseup * Handles button mouseup
*/ */
handleButtonMouseUp(button?: string, e?: KeyboardHandlerEvent): void; handleButtonMouseUp(button?: string, e?: KeyboardHandlerEvent): void;
/** /**
* Handles container mousedown * Handles container mousedown
*/ */
handleKeyboardContainerMouseDown(e: KeyboardHandlerEvent): void; handleKeyboardContainerMouseDown(e: KeyboardHandlerEvent): void;
/** /**
* Handles button hold * Handles button hold
*/ */
handleButtonHold(button: string): void; handleButtonHold(button: string): void;
/** /**
* Send a command to all simple-keyboard instances (if you have several instances). * Send a command to all simple-keyboard instances (if you have several instances).
*/ */
syncInstanceInputs(): void; syncInstanceInputs(): void;
/** /**
* Clear the keyboard’s input. * Clear the keyboard’s input.
* @param {string} [inputName] optional - the internal input to select * @param {string} [inputName] optional - the internal input to select
*/ */
clearInput(inputName?: string): void; clearInput(inputName?: string): void;
/** /**
* Get the keyboard’s input (You can also get it from the onChange prop). * Get the keyboard’s input (You can also get it from the onChange prop).
* @param {string} [inputName] optional - the internal input to select * @param {string} [inputName] optional - the internal input to select
*/ */
getInput(inputName?: string, skipSync?: boolean): string; getInput(inputName?: string, skipSync?: boolean): string;
/** /**
* Get all simple-keyboard inputs * Get all simple-keyboard inputs
*/ */
getAllInputs(): KeyboardInput; getAllInputs(): KeyboardInput;
/** /**
* Set the keyboard’s input. * Set the keyboard’s input.
* @param {string} input the input value * @param {string} input the input value
* @param {string} inputName optional - the internal input to select * @param {string} inputName optional - the internal input to select
*/ */
setInput(input: string, inputName?: string, skipSync?: boolean): void; setInput(input: string, inputName?: string, skipSync?: boolean): void;
/** /**
* Replace the input object (`keyboard.input`) * Replace the input object (`keyboard.input`)
* @param {object} inputObj The input object * @param {object} inputObj The input object
*/ */
replaceInput(inputObj: KeyboardInput): void; replaceInput(inputObj: KeyboardInput): void;
/** /**
* Set new option or modify existing ones after initialization. * Set new option or modify existing ones after initialization.
* @param {object} options The options to set * @param {object} options The options to set
*/ */
setOptions(options?: {}): void; setOptions(options?: {}): void;
/** /**
* Detecting changes to non-function options * Detecting changes to non-function options
* This allows us to ascertain whether a button re-render is needed * This allows us to ascertain whether a button re-render is needed
*/ */
changedOptions(newOptions: Partial<KeyboardOptions>): string[]; changedOptions(newOptions: Partial<KeyboardOptions>): string[];
/** /**
* Executing actions depending on changed options * Executing actions depending on changed options
* @param {object} options The options to set * @param {object} options The options to set
*/ */
onSetOptions(changedOptions?: string[]): void; onSetOptions(changedOptions?: string[]): void;
/** /**
* Remove all keyboard rows and reset keyboard values. * Remove all keyboard rows and reset keyboard values.
* Used internally between re-renders. * Used internally between re-renders.
*/ */
resetRows(): void; resetRows(): void;
/** /**
* Send a command to all simple-keyboard instances at once (if you have multiple instances). * Send a command to all simple-keyboard instances at once (if you have multiple instances).
* @param {function(instance: object, key: string)} callback Function to run on every instance * @param {function(instance: object, key: string)} callback Function to run on every instance
*/ */
dispatch(callback: (instance: SimpleKeyboard, key?: string) => void): void; dispatch(callback: (instance: SimpleKeyboard, key?: string) => void): void;
/** /**
* Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button. * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
* @param {string} buttons List of buttons to select (separated by a space). * @param {string} buttons List of buttons to select (separated by a space).
* @param {string} className Classes to give to the selected buttons (separated by space). * @param {string} className Classes to give to the selected buttons (separated by space).
*/ */
addButtonTheme(buttons: string, className: string): void; addButtonTheme(buttons: string, className: string): void;
/** /**
* Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme. * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
* @param {string} buttons List of buttons to select (separated by a space). * @param {string} buttons List of buttons to select (separated by a space).
* @param {string} className Classes to give to the selected buttons (separated by space). * @param {string} className Classes to give to the selected buttons (separated by space).
*/ */
removeButtonTheme(buttons: string, className: string): void; removeButtonTheme(buttons: string, className: string): void;
/** /**
* Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned. * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
* @param {string} button The button layout name to select * @param {string} button The button layout name to select
*/ */
getButtonElement(button: string): KeyboardElement | KeyboardElement[] | undefined; getButtonElement(button: string): KeyboardElement | KeyboardElement[] | undefined;
/** /**
* This handles the "inputPattern" option * This handles the "inputPattern" option
* by checking if the provided inputPattern passes * by checking if the provided inputPattern passes
*/ */
inputPatternIsValid(inputVal: string): boolean; inputPatternIsValid(inputVal: string): boolean;
/** /**
* Handles simple-keyboard event listeners * Handles simple-keyboard event listeners
*/ */
setEventListeners(): void; setEventListeners(): void;
/** /**
* Event Handler: KeyUp * Event Handler: KeyUp
*/ */
handleKeyUp(event: KeyboardHandlerEvent): void; handleKeyUp(event: KeyboardHandlerEvent): void;
/** /**
* Event Handler: KeyDown * Event Handler: KeyDown
*/ */
handleKeyDown(event: KeyboardHandlerEvent): void; handleKeyDown(event: KeyboardHandlerEvent): void;
/** /**
* Event Handler: MouseUp * Event Handler: MouseUp
*/ */
handleMouseUp(event: KeyboardHandlerEvent): void; handleMouseUp(event: KeyboardHandlerEvent): void;
/** /**
* Event Handler: TouchEnd * Event Handler: TouchEnd
*/ */
handleTouchEnd(event: KeyboardHandlerEvent): void; handleTouchEnd(event: KeyboardHandlerEvent): void;
/** /**
* Event Handler: Select * Event Handler: Select
*/ */
handleSelect(event: KeyboardHandlerEvent): void; handleSelect(event: KeyboardHandlerEvent): void;
/** /**
* Event Handler: SelectionChange * Event Handler: SelectionChange
*/ */
handleSelectionChange(event: KeyboardHandlerEvent): void; handleSelectionChange(event: KeyboardHandlerEvent): void;
/** /**
* Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
*/ */
caretEventHandler(event: KeyboardHandlerEvent): void; caretEventHandler(event: KeyboardHandlerEvent): void;
/** /**
* Execute an operation on each button * Execute an operation on each button
*/ */
recurseButtons(fn: any): void; recurseButtons(fn: any): void;
/** /**
* Destroy keyboard listeners and DOM elements * Destroy keyboard listeners and DOM elements
*/ */
destroy(): void; destroy(): void;
/** /**
* Process buttonTheme option * Process buttonTheme option
*/ */
getButtonThemeClasses(button: string): string[]; getButtonThemeClasses(button: string): string[];
/** /**
* Process buttonAttributes option * Process buttonAttributes option
*/ */
setDOMButtonAttributes(button: string, callback: any): void; setDOMButtonAttributes(button: string, callback: any): void;
onTouchDeviceDetected(): void; onTouchDeviceDetected(): void;
/** /**
* Disabling contextual window for hg-button * Disabling contextual window for hg-button
*/ */
disableContextualWindow(): void; disableContextualWindow(): void;
/** /**
* Process autoTouchEvents option * Process autoTouchEvents option
*/ */
processAutoTouchEvents(): void; processAutoTouchEvents(): void;
/** /**
* Executes the callback function once simple-keyboard is rendered for the first time (on initialization). * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
*/ */
onInit(): void; onInit(): void;
/** /**
* Executes the callback function before a simple-keyboard render. * Executes the callback function before a simple-keyboard render.
*/ */
beforeFirstRender(): void; beforeFirstRender(): void;
/** /**
* Executes the callback function before a simple-keyboard render. * Executes the callback function before a simple-keyboard render.
*/ */
beforeRender(): void; beforeRender(): void;
/** /**
* Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
*/ */
onRender(): void; onRender(): void;
/** /**
* Executes the callback function once all modules have been loaded * Executes the callback function once all modules have been loaded
*/ */
onModulesLoaded(): void; onModulesLoaded(): void;
/** /**
* Register module * Register module
*/ */
registerModule: (name: string, initCallback: any) => void; registerModule: (name: string, initCallback: any) => void;
/** /**
* Load modules * Load modules
*/ */
loadModules(): void; loadModules(): void;
/** /**
* Get module prop * Get module prop
*/ */
getModuleProp(name: string, prop: string): any; getModuleProp(name: string, prop: string): any;
/** /**
* getModulesList * getModulesList
*/ */
getModulesList(): string[]; getModulesList(): string[];
/** /**
* Parse Row DOM containers * Parse Row DOM containers
*/ */
parseRowDOMContainers(rowDOM: HTMLDivElement, rowIndex: number, containerStartIndexes: number[], containerEndIndexes: number[]): HTMLDivElement; parseRowDOMContainers(rowDOM: HTMLDivElement, rowIndex: number, containerStartIndexes: number[], containerEndIndexes: number[]): HTMLDivElement;
/** /**
* getKeyboardClassString * getKeyboardClassString
*/ */
getKeyboardClassString: (...baseDOMClasses: any[]) => string; getKeyboardClassString: (...baseDOMClasses: any[]) => string;
/** /**
* Renders rows and buttons as per options * Renders rows and buttons as per options
*/ */
render(): void; render(): void;
} }
export default SimpleKeyboard; export default SimpleKeyboard;

6
build/index.d.ts vendored
View File

@ -1,3 +1,3 @@
import "./polyfills"; import "./polyfills";
import SimpleKeyboard from "./components/Keyboard"; import SimpleKeyboard from "./components/Keyboard";
export default SimpleKeyboard; export default SimpleKeyboard;

4
build/index.modern.d.ts vendored
View File

@ -1,2 +1,2 @@
import SimpleKeyboard from "./components/Keyboard"; import SimpleKeyboard from "./components/Keyboard";
export default SimpleKeyboard; export default SimpleKeyboard;

446
build/interfaces.d.ts vendored
View File

@ -1,223 +1,223 @@
import SimpleKeyboard from "./components/Keyboard"; import SimpleKeyboard from "./components/Keyboard";
import Utilities from "./services/Utilities"; import Utilities from "./services/Utilities";
export interface KeyboardLayoutObject { export interface KeyboardLayoutObject {
[key: string]: string[]; [key: string]: string[];
} }
export declare type KeyboardButtonTheme = { export declare type KeyboardButtonTheme = {
class: string; class: string;
buttons: string; buttons: string;
} | null; } | null;
export interface KeyboardButtonAttributes { export interface KeyboardButtonAttributes {
attribute: string; attribute: string;
value: string; value: string;
buttons: string; buttons: string;
} }
export interface KeyboardInput { export interface KeyboardInput {
[key: string]: string; [key: string]: string;
} }
export declare type CandidateBoxParams = { export declare type CandidateBoxParams = {
utilities: Utilities; utilities: Utilities;
}; };
export declare type CandidateBoxShowParams = { export declare type CandidateBoxShowParams = {
candidateValue: string; candidateValue: string;
targetElement: KeyboardElement; targetElement: KeyboardElement;
onSelect: (selectedCandidate: string, e: MouseEvent) => void; onSelect: (selectedCandidate: string, e: MouseEvent) => void;
}; };
export declare type CandidateBoxRenderParams = { export declare type CandidateBoxRenderParams = {
candidateListPages: string[][]; candidateListPages: string[][];
targetElement: KeyboardElement; targetElement: KeyboardElement;
pageIndex: number; pageIndex: number;
nbPages: number; nbPages: number;
onItemSelected: (selectedCandidate: string, e: MouseEvent) => void; onItemSelected: (selectedCandidate: string, e: MouseEvent) => void;
}; };
export declare type KeyboardElement = HTMLDivElement | HTMLButtonElement; export declare type KeyboardElement = HTMLDivElement | HTMLButtonElement;
export declare type KeyboardHandlerEvent = any; export declare type KeyboardHandlerEvent = any;
export interface KeyboardButtonElements { export interface KeyboardButtonElements {
[key: string]: KeyboardElement[]; [key: string]: KeyboardElement[];
} }
export interface UtilitiesParams { export interface UtilitiesParams {
getOptions: () => KeyboardOptions; getOptions: () => KeyboardOptions;
getCaretPosition: () => number | null; getCaretPosition: () => number | null;
getCaretPositionEnd: () => number | null; getCaretPositionEnd: () => number | null;
dispatch: any; dispatch: any;
} }
export interface PhysicalKeyboardParams { export interface PhysicalKeyboardParams {
getOptions: () => KeyboardOptions; getOptions: () => KeyboardOptions;
dispatch: any; dispatch: any;
} }
export interface KeyboardOptions { export interface KeyboardOptions {
/** /**
* Modify the keyboard layout. * Modify the keyboard layout.
*/ */
layout?: KeyboardLayoutObject; layout?: KeyboardLayoutObject;
/** /**
* Specifies which layout should be used. * Specifies which layout should be used.
*/ */
layoutName?: string; layoutName?: string;
/** /**
* Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`). * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`).
*/ */
display?: { display?: {
[button: string]: string; [button: string]: string;
}; };
/** /**
* By default, when you set the display property, you replace the default one. This setting merges them instead. * By default, when you set the display property, you replace the default one. This setting merges them instead.
*/ */
mergeDisplay?: boolean; mergeDisplay?: boolean;
/** /**
* A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space. * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
*/ */
theme?: string; theme?: string;
/** /**
* A prop to add your own css classes to one or several buttons. * A prop to add your own css classes to one or several buttons.
*/ */
buttonTheme?: KeyboardButtonTheme[]; buttonTheme?: KeyboardButtonTheme[];
/** /**
* A prop to add your own attributes to one or several buttons. * A prop to add your own attributes to one or several buttons.
*/ */
buttonAttributes?: KeyboardButtonAttributes[]; buttonAttributes?: KeyboardButtonAttributes[];
/** /**
* Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input. * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
*/ */
debug?: boolean; debug?: boolean;
/** /**
* Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not. * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
*/ */
newLineOnEnter?: boolean; newLineOnEnter?: boolean;
/** /**
* Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not. * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not.
*/ */
tabCharOnTab?: boolean; tabCharOnTab?: boolean;
/** /**
* Allows you to use a single simple-keyboard instance for several inputs. * Allows you to use a single simple-keyboard instance for several inputs.
*/ */
inputName?: string; inputName?: string;
/** /**
* `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
* *
* `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute. * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
*/ */
maxLength?: any; maxLength?: any;
/** /**
* When set to true, this option synchronizes the internal input of every simple-keyboard instance. * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
*/ */
syncInstanceInputs?: boolean; syncInstanceInputs?: boolean;
/** /**
* Enable highlighting of keys pressed on physical keyboard. * Enable highlighting of keys pressed on physical keyboard.
*/ */
physicalKeyboardHighlight?: boolean; physicalKeyboardHighlight?: boolean;
/** /**
* Calls handler for a button highlighted by physicalKeyboardHighlight * Calls handler for a button highlighted by physicalKeyboardHighlight
* In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
*/ */
physicalKeyboardHighlightPress?: boolean; physicalKeyboardHighlightPress?: boolean;
/** /**
* Trigger click on a button's element when using physicalKeyboardHighlightPress * Trigger click on a button's element when using physicalKeyboardHighlightPress
* In other words, this calls button.click() on the highlighted button * In other words, this calls button.click() on the highlighted button
*/ */
physicalKeyboardHighlightPressUseClick?: boolean; physicalKeyboardHighlightPressUseClick?: boolean;
/** /**
* Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons. * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
*/ */
physicalKeyboardHighlightPressUsePointerEvents?: boolean; physicalKeyboardHighlightPressUsePointerEvents?: boolean;
/** /**
* Define the text color that the physical keyboard highlighted key should have. * Define the text color that the physical keyboard highlighted key should have.
*/ */
physicalKeyboardHighlightTextColor?: string; physicalKeyboardHighlightTextColor?: string;
/** /**
* Define the background color that the physical keyboard highlighted key should have. * Define the background color that the physical keyboard highlighted key should have.
*/ */
physicalKeyboardHighlightBgColor?: string; physicalKeyboardHighlightBgColor?: string;
/** /**
* Calling preventDefault for the mousedown events keeps the focus on the input. * Calling preventDefault for the mousedown events keeps the focus on the input.
*/ */
preventMouseDownDefault?: boolean; preventMouseDownDefault?: boolean;
/** /**
* Calling preventDefault for the mouseup events. * Calling preventDefault for the mouseup events.
*/ */
preventMouseUpDefault?: boolean; preventMouseUpDefault?: boolean;
/** /**
* Stops pointer down events on simple-keyboard buttons from bubbling to parent elements. * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
*/ */
stopMouseDownPropagation?: boolean; stopMouseDownPropagation?: boolean;
/** /**
* Stops pointer up events on simple-keyboard buttons from bubbling to parent elements. * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
*/ */
stopMouseUpPropagation?: boolean; stopMouseUpPropagation?: boolean;
/** /**
* Render buttons as a button element instead of a div element. * Render buttons as a button element instead of a div element.
*/ */
useButtonTag?: boolean; useButtonTag?: boolean;
/** /**
* A prop to ensure characters are always be added/removed at the end of the string. * A prop to ensure characters are always be added/removed at the end of the string.
*/ */
disableCaretPositioning?: boolean; disableCaretPositioning?: boolean;
/** /**
* Restrains input(s) change to the defined regular expression pattern. * Restrains input(s) change to the defined regular expression pattern.
*/ */
inputPattern?: any; inputPattern?: any;
/** /**
* Instructs simple-keyboard to use touch events instead of click events. * Instructs simple-keyboard to use touch events instead of click events.
*/ */
useTouchEvents?: boolean; useTouchEvents?: boolean;
/** /**
* Enable useTouchEvents automatically when touch device is detected. * Enable useTouchEvents automatically when touch device is detected.
*/ */
autoUseTouchEvents?: boolean; autoUseTouchEvents?: boolean;
/** /**
* Opt out of PointerEvents handling, falling back to the prior mouse event logic. * Opt out of PointerEvents handling, falling back to the prior mouse event logic.
*/ */
useMouseEvents?: boolean; useMouseEvents?: boolean;
/** /**
* Disable button hold action. * Disable button hold action.
*/ */
disableButtonHold?: boolean; disableButtonHold?: boolean;
/** /**
* Adds unicode right-to-left control characters to input return values. * Adds unicode right-to-left control characters to input return values.
*/ */
rtl?: boolean; rtl?: boolean;
/** /**
* Enable input method editor candidate list support. * Enable input method editor candidate list support.
*/ */
enableLayoutCandidates?: boolean; enableLayoutCandidates?: boolean;
/** /**
* Character suggestions to be shown on certain key presses * Character suggestions to be shown on certain key presses
*/ */
layoutCandidates?: { layoutCandidates?: {
[key: string]: string; [key: string]: string;
}; };
/** /**
* Exclude buttons from layout * Exclude buttons from layout
*/ */
excludeFromLayout?: { excludeFromLayout?: {
[key: string]: string[]; [key: string]: string[];
}; };
/** /**
* Determines size of layout candidate list * Determines size of layout candidate list
*/ */
layoutCandidatesPageSize?: number; layoutCandidatesPageSize?: number;
/** /**
* Determines whether layout candidate match should be case sensitive. * Determines whether layout candidate match should be case sensitive.
*/ */
layoutCandidatesCaseSensitiveMatch?: boolean; layoutCandidatesCaseSensitiveMatch?: boolean;
/** /**
* Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts). * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
*/ */
onRender?: (instance?: SimpleKeyboard) => void; onRender?: (instance?: SimpleKeyboard) => void;
/** /**
* Executes the callback function once simple-keyboard is rendered for the first time (on initialization). * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
*/ */
onInit?: (instance?: SimpleKeyboard) => void; onInit?: (instance?: SimpleKeyboard) => void;
/** /**
* Retrieves the current input * Retrieves the current input
*/ */
onChange?: (input: string, e?: MouseEvent) => any; onChange?: (input: string, e?: MouseEvent) => any;
/** /**
* Retrieves all inputs * Retrieves all inputs
*/ */
onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any; onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
/** /**
* Module options can have any format * Module options can have any format
*/ */
[name: string]: any; [name: string]: any;
} }

8
build/services/KeyboardLayout.d.ts vendored
View File

@ -1,4 +1,4 @@
export declare const getDefaultLayout: () => { export declare const getDefaultLayout: () => {
default: string[]; default: string[];
shift: string[]; shift: string[];
}; };

48
build/services/PhysicalKeyboard.d.ts vendored
View File

@ -1,24 +1,24 @@
import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces"; import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces";
/** /**
* Physical Keyboard Service * Physical Keyboard Service
*/ */
declare class PhysicalKeyboard { declare class PhysicalKeyboard {
getOptions: () => KeyboardOptions; getOptions: () => KeyboardOptions;
dispatch: any; dispatch: any;
/** /**
* Creates an instance of the PhysicalKeyboard service * Creates an instance of the PhysicalKeyboard service
*/ */
constructor({ dispatch, getOptions }: PhysicalKeyboardParams); constructor({ dispatch, getOptions }: PhysicalKeyboardParams);
handleHighlightKeyDown(event: KeyboardEvent): void; handleHighlightKeyDown(event: KeyboardEvent): void;
handleHighlightKeyUp(event: KeyboardEvent): void; handleHighlightKeyUp(event: KeyboardEvent): void;
/** /**
* Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
* @param {object} event The KeyboardEvent * @param {object} event The KeyboardEvent
*/ */
getSimpleKeyboardLayoutKey(event: KeyboardEvent): string; getSimpleKeyboardLayoutKey(event: KeyboardEvent): string;
/** /**
* Retrieve key from keyCode * Retrieve key from keyCode
*/ */
keyCodeToKey(keyCode: number): string | undefined; keyCodeToKey(keyCode: number): string | undefined;
} }
export default PhysicalKeyboard; export default PhysicalKeyboard;

386
build/services/Utilities.d.ts vendored
View File

@ -1,193 +1,193 @@
import { KeyboardInput } from "./../interfaces"; import { KeyboardInput } from "./../interfaces";
import { KeyboardOptions, UtilitiesParams } from "../interfaces"; import { KeyboardOptions, UtilitiesParams } from "../interfaces";
/** /**
* Utility Service * Utility Service
*/ */
declare class Utilities { declare class Utilities {
getOptions: () => KeyboardOptions; getOptions: () => KeyboardOptions;
getCaretPosition: () => number | null; getCaretPosition: () => number | null;
getCaretPositionEnd: () => number | null; getCaretPositionEnd: () => number | null;
dispatch: any; dispatch: any;
maxLengthReached: boolean; maxLengthReached: boolean;
/** /**
* Creates an instance of the Utility service * Creates an instance of the Utility service
*/ */
constructor({ getOptions, getCaretPosition, getCaretPositionEnd, dispatch, }: UtilitiesParams); constructor({ getOptions, getCaretPosition, getCaretPositionEnd, dispatch, }: UtilitiesParams);
/** /**
* Retrieve button type * Retrieve button type
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @return {string} The button type * @return {string} The button type
*/ */
getButtonType(button: string): string; getButtonType(button: string): string;
/** /**
* Adds default classes to a given button * Adds default classes to a given button
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @return {string} The classes to be added to the button * @return {string} The classes to be added to the button
*/ */
getButtonClass(button: string): string; getButtonClass(button: string): string;
/** /**
* Default button display labels * Default button display labels
*/ */
getDefaultDiplay(): { getDefaultDiplay(): {
"{bksp}": string; "{bksp}": string;
"{backspace}": string; "{backspace}": string;
"{enter}": string; "{enter}": string;
"{shift}": string; "{shift}": string;
"{shiftleft}": string; "{shiftleft}": string;
"{shiftright}": string; "{shiftright}": string;
"{alt}": string; "{alt}": string;
"{s}": string; "{s}": string;
"{tab}": string; "{tab}": string;
"{lock}": string; "{lock}": string;
"{capslock}": string; "{capslock}": string;
"{accept}": string; "{accept}": string;
"{space}": string; "{space}": string;
"{//}": string; "{//}": string;
"{esc}": string; "{esc}": string;
"{escape}": string; "{escape}": string;
"{f1}": string; "{f1}": string;
"{f2}": string; "{f2}": string;
"{f3}": string; "{f3}": string;
"{f4}": string; "{f4}": string;
"{f5}": string; "{f5}": string;
"{f6}": string; "{f6}": string;
"{f7}": string; "{f7}": string;
"{f8}": string; "{f8}": string;
"{f9}": string; "{f9}": string;
"{f10}": string; "{f10}": string;
"{f11}": string; "{f11}": string;
"{f12}": string; "{f12}": string;
"{numpaddivide}": string; "{numpaddivide}": string;
"{numlock}": string; "{numlock}": string;
"{arrowup}": string; "{arrowup}": string;
"{arrowleft}": string; "{arrowleft}": string;
"{arrowdown}": string; "{arrowdown}": string;
"{arrowright}": string; "{arrowright}": string;
"{prtscr}": string; "{prtscr}": string;
"{scrolllock}": string; "{scrolllock}": string;
"{pause}": string; "{pause}": string;
"{insert}": string; "{insert}": string;
"{home}": string; "{home}": string;
"{pageup}": string; "{pageup}": string;
"{delete}": string; "{delete}": string;
"{forwarddelete}": string; "{forwarddelete}": string;
"{end}": string; "{end}": string;
"{pagedown}": string; "{pagedown}": string;
"{numpadmultiply}": string; "{numpadmultiply}": string;
"{numpadsubtract}": string; "{numpadsubtract}": string;
"{numpadadd}": string; "{numpadadd}": string;
"{numpadenter}": string; "{numpadenter}": string;
"{period}": string; "{period}": string;
"{numpaddecimal}": string; "{numpaddecimal}": string;
"{numpad0}": string; "{numpad0}": string;
"{numpad1}": string; "{numpad1}": string;
"{numpad2}": string; "{numpad2}": string;
"{numpad3}": string; "{numpad3}": string;
"{numpad4}": string; "{numpad4}": string;
"{numpad5}": string; "{numpad5}": string;
"{numpad6}": string; "{numpad6}": string;
"{numpad7}": string; "{numpad7}": string;
"{numpad8}": string; "{numpad8}": string;
"{numpad9}": string; "{numpad9}": string;
}; };
/** /**
* Returns the display (label) name for a given button * Returns the display (label) name for a given button
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @param {object} display The provided display option * @param {object} display The provided display option
* @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one. * @param {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
*/ */
getButtonDisplayName(button: string, display: KeyboardOptions["display"], mergeDisplay: boolean): string; getButtonDisplayName(button: string, display: KeyboardOptions["display"], mergeDisplay: boolean): string;
/** /**
* Returns the updated input resulting from clicking a given button * Returns the updated input resulting from clicking a given button
* *
* @param {string} button The button's layout name * @param {string} button The button's layout name
* @param {string} input The input string * @param {string} input The input string
* @param {number} caretPos The cursor's current position * @param {number} caretPos The cursor's current position
* @param {number} caretPosEnd The cursor's current end position * @param {number} caretPosEnd The cursor's current end position
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor * @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/ */
getUpdatedInput(button: string, input: string, caretPos: number, caretPosEnd?: number, moveCaret?: boolean): string; getUpdatedInput(button: string, input: string, caretPos: number, caretPosEnd?: number, moveCaret?: boolean): string;
/** /**
* Moves the cursor position by a given amount * Moves the cursor position by a given amount
* *
* @param {number} length Represents by how many characters the input should be moved * @param {number} length Represents by how many characters the input should be moved
* @param {boolean} minus Whether the cursor should be moved to the left or not. * @param {boolean} minus Whether the cursor should be moved to the left or not.
*/ */
updateCaretPos(length: number, minus?: boolean): void; updateCaretPos(length: number, minus?: boolean): void;
/** /**
* Action method of updateCaretPos * Action method of updateCaretPos
* *
* @param {number} length Represents by how many characters the input should be moved * @param {number} length Represents by how many characters the input should be moved
* @param {boolean} minus Whether the cursor should be moved to the left or not. * @param {boolean} minus Whether the cursor should be moved to the left or not.
*/ */
updateCaretPosAction(length: number, minus?: boolean): number | null; updateCaretPosAction(length: number, minus?: boolean): number | null;
/** /**
* Adds a string to the input at a given position * Adds a string to the input at a given position
* *
* @param {string} source The source input * @param {string} source The source input
* @param {string} str The string to add * @param {string} str The string to add
* @param {number} position The (cursor) position where the string should be added * @param {number} position The (cursor) position where the string should be added
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor * @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/ */
addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string; addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
/** /**
* Check whether the button is a standard button * Check whether the button is a standard button
*/ */
isStandardButton: (button: string) => boolean | ""; isStandardButton: (button: string) => boolean | "";
/** /**
* Removes an amount of characters before a given position * Removes an amount of characters before a given position
* *
* @param {string} source The source input * @param {string} source The source input
* @param {number} position The (cursor) position from where the characters should be removed * @param {number} position The (cursor) position from where the characters should be removed
* @param {boolean} moveCaret Whether to update simple-keyboard's cursor * @param {boolean} moveCaret Whether to update simple-keyboard's cursor
*/ */
removeAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string; removeAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
/** /**
* Removes an amount of characters after a given position * Removes an amount of characters after a given position
* *
* @param {string} source The source input * @param {string} source The source input
* @param {number} position The (cursor) position from where the characters should be removed * @param {number} position The (cursor) position from where the characters should be removed
*/ */
removeForwardsAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string; removeForwardsAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
/** /**
* Determines whether the maxLength has been reached. This function is called when the maxLength option it set. * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
* *
* @param {object} inputObj * @param {object} inputObj
* @param {string} updatedInput * @param {string} updatedInput
*/ */
handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean | undefined; handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean | undefined;
/** /**
* Gets the current value of maxLengthReached * Gets the current value of maxLengthReached
*/ */
isMaxLengthReached(): boolean; isMaxLengthReached(): boolean;
/** /**
* Determines whether a touch device is being used * Determines whether a touch device is being used
*/ */
isTouchDevice(): number | true; isTouchDevice(): number | true;
/** /**
* Determines whether pointer events are supported * Determines whether pointer events are supported
*/ */
pointerEventsSupported(): boolean; pointerEventsSupported(): boolean;
/** /**
* Bind all methods in a given class * Bind all methods in a given class
*/ */
static bindMethods(myClass: any, instance: any): void; static bindMethods(myClass: any, instance: any): void;
/** /**
* Transforms an arbitrary string to camelCase * Transforms an arbitrary string to camelCase
* *
* @param {string} str The string to transform. * @param {string} str The string to transform.
*/ */
camelCase(str: string): string; camelCase(str: string): string;
/** /**
* Split array into chunks * Split array into chunks
*/ */
chunkArray<T>(arr: T[], size: number): T[][]; chunkArray<T>(arr: T[], size: number): T[][];
/** /**
* Reusable empty function * Reusable empty function
*/ */
static noop: () => void; static noop: () => void;
} }
export default Utilities; export default Utilities;

19632
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
src/lib/components/Keyboard.ts
View File

@ -332,7 +332,7 @@ class SimpleKeyboard {
const inputSubstr = const inputSubstr =
input.substring(0, this.getCaretPositionEnd() || 0) || input; input.substring(0, this.getCaretPositionEnd() || 0) || input;
const regexp = new RegExp( const regexp = new RegExp(
`${layoutCandidate}$`, `${this.utilities.escapeRegex(layoutCandidate)}$`,
layoutCandidatesCaseSensitiveMatch ? "g" : "gi" layoutCandidatesCaseSensitiveMatch ? "g" : "gi"
); );
const matches = [...inputSubstr.matchAll(regexp)]; const matches = [...inputSubstr.matchAll(regexp)];
@ -387,7 +387,7 @@ class SimpleKeyboard {
currentInput; currentInput;
const regexp = new RegExp( const regexp = new RegExp(
`${candidateKey}$`, `${this.utilities.escapeRegex(candidateKey)}$`,
layoutCandidatesCaseSensitiveMatch ? "g" : "gi" layoutCandidatesCaseSensitiveMatch ? "g" : "gi"
); );
const newInputSubstr = inputSubstr.replace( const newInputSubstr = inputSubstr.replace(

7
src/lib/services/Utilities.ts
View File

@ -532,6 +532,13 @@ class Utilities {
); );
} }
/**
* Escape regex input
*/
escapeRegex(str: string) {
return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
/** /**
* Reusable empty function * Reusable empty function
*/ */