@ionic/core
Version:
Base components for Ionic
547 lines (546 loc) • 22.6 kB
JavaScript
/*!
* (C) Ionic http://ionicframework.com - MIT License
*/
import { Host, h } from "@stencil/core";
import { getElementRoot } from "../../utils/helpers";
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
export class Picker {
constructor() {
this.useInputMode = false;
this.isInHighlightBounds = (ev) => {
const { highlightEl } = this;
if (!highlightEl) {
return false;
}
const bbox = highlightEl.getBoundingClientRect();
/**
* Check to see if the user clicked
* outside the bounds of the highlight.
*/
const outsideX = ev.clientX < bbox.left || ev.clientX > bbox.right;
const outsideY = ev.clientY < bbox.top || ev.clientY > bbox.bottom;
if (outsideX || outsideY) {
return false;
}
return true;
};
/**
* If we are no longer focused
* on a picker column, then we should
* exit input mode. An exception is made
* for the input in the picker since having
* that focused means we are still in input mode.
*/
this.onFocusOut = (ev) => {
// TODO(FW-2832): type
const { relatedTarget } = ev;
if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN' && relatedTarget !== this.inputEl)) {
this.exitInputMode();
}
};
/**
* When picker columns receive focus
* the parent picker needs to determine
* whether to enter/exit input mode.
*/
this.onFocusIn = (ev) => {
// TODO(FW-2832): type
const { target } = ev;
/**
* Due to browser differences in how/when focus
* is dispatched on certain elements, we need to
* make sure that this function only ever runs when
* focusing a picker column.
*/
if (target.tagName !== 'ION-PICKER-COLUMN') {
return;
}
/**
* If we have actionOnClick
* then this means the user focused
* a picker column via mouse or
* touch (i.e. a PointerEvent). As a result,
* we should not enter/exit input mode
* until the click event has fired, which happens
* after the `focusin` event.
*
* Otherwise, the user likely focused
* the column using their keyboard and
* we should enter/exit input mode automatically.
*/
if (!this.actionOnClick) {
const columnEl = target;
const allowInput = columnEl.numericInput;
if (allowInput) {
this.enterInputMode(columnEl, false);
}
else {
this.exitInputMode();
}
}
};
/**
* On click we need to run an actionOnClick
* function that has been set in onPointerDown
* so that we enter/exit input mode correctly.
*/
this.onClick = () => {
const { actionOnClick } = this;
if (actionOnClick) {
actionOnClick();
this.actionOnClick = undefined;
}
};
/**
* Clicking a column also focuses the column on
* certain browsers, so we use onPointerDown
* to tell the onFocusIn function that users
* are trying to click the column rather than
* focus the column using the keyboard. When the
* user completes the click, the onClick function
* runs and runs the actionOnClick callback.
*/
this.onPointerDown = (ev) => {
const { useInputMode, inputModeColumn, el } = this;
if (this.isInHighlightBounds(ev)) {
/**
* If we were already in
* input mode, then we should determine
* if we tapped a particular column and
* should switch to input mode for
* that specific column.
*/
if (useInputMode) {
/**
* If we tapped a picker column
* then we should either switch to input
* mode for that column or all columns.
* Otherwise we should exit input mode
* since we just tapped the highlight and
* not a column.
*/
if (ev.target.tagName === 'ION-PICKER-COLUMN') {
/**
* If user taps 2 different columns
* then we should just switch to input mode
* for the new column rather than switching to
* input mode for all columns.
*/
if (inputModeColumn && inputModeColumn === ev.target) {
this.actionOnClick = () => {
this.enterInputMode();
};
}
else {
this.actionOnClick = () => {
this.enterInputMode(ev.target);
};
}
}
else {
this.actionOnClick = () => {
this.exitInputMode();
};
}
/**
* If we were not already in
* input mode, then we should
* enter input mode for all columns.
*/
}
else {
/**
* If there is only 1 numeric input column
* then we should skip multi column input.
*/
const columns = el.querySelectorAll('ion-picker-column.picker-column-numeric-input');
const columnEl = columns.length === 1 ? ev.target : undefined;
this.actionOnClick = () => {
this.enterInputMode(columnEl);
};
}
return;
}
this.actionOnClick = () => {
this.exitInputMode();
};
};
/**
* Enters input mode to allow
* for text entry of numeric values.
* If on mobile, we focus a hidden input
* field so that the on screen keyboard
* is brought up. When tabbing using a
* keyboard, picker columns receive an outline
* to indicate they are focused. As a result,
* we should not focus the hidden input as it
* would cause the outline to go away, preventing
* users from having any visual indication of which
* column is focused.
*/
this.enterInputMode = (columnEl, focusInput = true) => {
const { inputEl, el } = this;
if (!inputEl) {
return;
}
/**
* Only active input mode if there is at
* least one column that accepts numeric input.
*/
const hasInputColumn = el.querySelector('ion-picker-column.picker-column-numeric-input');
if (!hasInputColumn) {
return;
}
/**
* If columnEl is undefined then
* it is assumed that all numeric pickers
* are eligible for text entry.
* (i.e. hour and minute columns)
*/
this.useInputMode = true;
this.inputModeColumn = columnEl;
/**
* Users with a keyboard and mouse can
* activate input mode where the input is
* focused as well as when it is not focused,
* so we need to make sure we clean up any
* old listeners.
*/
if (focusInput) {
if (this.destroyKeypressListener) {
this.destroyKeypressListener();
this.destroyKeypressListener = undefined;
}
inputEl.focus();
}
else {
// TODO FW-5900 Use keydown instead
el.addEventListener('keypress', this.onKeyPress);
this.destroyKeypressListener = () => {
el.removeEventListener('keypress', this.onKeyPress);
};
}
this.emitInputModeChange();
};
this.onKeyPress = (ev) => {
const { inputEl } = this;
if (!inputEl) {
return;
}
const parsedValue = parseInt(ev.key, 10);
/**
* Only numbers should be allowed
*/
if (!Number.isNaN(parsedValue)) {
inputEl.value += ev.key;
this.onInputChange();
}
};
this.selectSingleColumn = () => {
const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
if (!inputEl || !inputModeColumn) {
return;
}
const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter((el) => el.disabled !== true);
/**
* If users pause for a bit, the search
* value should be reset similar to how a
* <select> behaves. So typing "34", waiting,
* then typing "5" should select "05".
*/
if (singleColumnSearchTimeout) {
clearTimeout(singleColumnSearchTimeout);
}
this.singleColumnSearchTimeout = setTimeout(() => {
inputEl.value = '';
this.singleColumnSearchTimeout = undefined;
}, 1000);
/**
* For values that are longer than 2 digits long
* we should shift the value over 1 character
* to the left. So typing "456" would result in "56".
* TODO: If we want to support more than just
* time entry, we should update this value to be
* the max length of all of the picker items.
*/
if (inputEl.value.length >= 3) {
const startIndex = inputEl.value.length - 2;
const newString = inputEl.value.substring(startIndex);
inputEl.value = newString;
this.selectSingleColumn();
return;
}
/**
* Checking the value of the input gets priority
* first. For example, if the value of the input
* is "1" and we entered "2", then the complete value
* is "12" and we should select hour 12.
*
* Regex removes any leading zeros from values like "02",
* but it keeps a single zero if there are only zeros in the string.
* 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
* 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
*/
const findItemFromCompleteValue = options.find(({ textContent }) => {
/**
* Keyboard entry is currently only used inside of Datetime
* where we guarantee textContent is set.
* If we end up exposing this feature publicly we should revisit this assumption.
*/
const parsedText = textContent.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
return parsedText === inputEl.value;
});
if (findItemFromCompleteValue) {
inputModeColumn.setValue(findItemFromCompleteValue.value);
return;
}
/**
* If we typed "56" to get minute 56, then typed "7",
* we should select "07" as "567" is not a valid minute.
*/
if (inputEl.value.length === 2) {
const changedCharacter = inputEl.value.substring(inputEl.value.length - 1);
inputEl.value = changedCharacter;
this.selectSingleColumn();
}
};
/**
* Searches a list of column items for a particular
* value. This is currently used for numeric values.
* The zeroBehavior can be set to account for leading
* or trailing zeros when looking at the item text.
*/
this.searchColumn = (colEl, value, zeroBehavior = 'start') => {
if (!value) {
return false;
}
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
value = value.replace(behavior, '');
const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
return el.disabled !== true && el.textContent.replace(behavior, '') === value;
});
if (option) {
colEl.setValue(option.value);
}
return !!option;
};
/**
* Attempts to intelligently search the first and second
* column as if they're number columns for the provided numbers
* where the first two numbers are the first column
* and the last 2 are the last column. Tries to allow for the first
* number to be ignored for situations where typos occurred.
*/
this.multiColumnSearch = (firstColumn, secondColumn, input) => {
if (input.length === 0) {
return;
}
const inputArray = input.split('');
const hourValue = inputArray.slice(0, 2).join('');
// Try to find a match for the first two digits in the first column
const foundHour = this.searchColumn(firstColumn, hourValue);
// If we have more than 2 digits and found a match for hours,
// use the remaining digits for the second column (minutes)
if (inputArray.length > 2 && foundHour) {
const minuteValue = inputArray.slice(2, 4).join('');
this.searchColumn(secondColumn, minuteValue);
}
// If we couldn't find a match for the two-digit hour, try single digit approaches
else if (!foundHour && inputArray.length >= 1) {
// First try the first digit as a single-digit hour
let singleDigitHour = inputArray[0];
let singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
// If that didn't work, try the second digit as a single-digit hour
// (handles case where user made a typo in the first digit, or they typed over themselves)
if (!singleDigitFound) {
inputArray.shift();
singleDigitHour = inputArray[0];
singleDigitFound = this.searchColumn(firstColumn, singleDigitHour);
}
// If we found a single-digit hour and have remaining digits,
// use up to 2 of the remaining digits for the second column
if (singleDigitFound && inputArray.length > 1) {
const remainingDigits = inputArray.slice(1, 3).join('');
this.searchColumn(secondColumn, remainingDigits);
}
}
};
this.selectMultiColumn = () => {
const { inputEl, el } = this;
if (!inputEl) {
return;
}
const numericPickers = Array.from(el.querySelectorAll('ion-picker-column')).filter((col) => col.numericInput);
const firstColumn = numericPickers[0];
const lastColumn = numericPickers[1];
let value = inputEl.value;
if (value.length > 4) {
const startIndex = inputEl.value.length - 4;
const newString = inputEl.value.substring(startIndex);
inputEl.value = newString;
value = newString;
}
this.multiColumnSearch(firstColumn, lastColumn, value);
};
/**
* Searches the value of the active column
* to determine which value users are trying
* to select
*/
this.onInputChange = () => {
const { useInputMode, inputEl, inputModeColumn } = this;
if (!useInputMode || !inputEl) {
return;
}
if (inputModeColumn) {
this.selectSingleColumn();
}
else {
this.selectMultiColumn();
}
};
/**
* Emit ionInputModeChange. Picker columns
* listen for this event to determine whether
* or not their column is "active" for text input.
*/
this.emitInputModeChange = () => {
const { useInputMode, inputModeColumn } = this;
this.ionInputModeChange.emit({
useInputMode,
inputModeColumn,
});
};
}
/**
* When the picker is interacted with
* we need to prevent touchstart so other
* gestures do not fire. For example,
* scrolling on the wheel picker
* in ion-datetime should not cause
* a card modal to swipe to close.
*/
preventTouchStartPropagation(ev) {
ev.stopPropagation();
}
componentWillLoad() {
getElementRoot(this.el).addEventListener('focusin', this.onFocusIn);
getElementRoot(this.el).addEventListener('focusout', this.onFocusOut);
}
/**
* @internal
* Exits text entry mode for the picker
* This method blurs the hidden input
* and cause the keyboard to dismiss.
*/
async exitInputMode() {
const { inputEl, useInputMode } = this;
if (!useInputMode || !inputEl) {
return;
}
this.useInputMode = false;
this.inputModeColumn = undefined;
inputEl.blur();
inputEl.value = '';
if (this.destroyKeypressListener) {
this.destroyKeypressListener();
this.destroyKeypressListener = undefined;
}
this.emitInputModeChange();
}
render() {
return (h(Host, { key: '28f81e4ed44a633178561757c5199c2c98f94b74', onPointerDown: (ev) => this.onPointerDown(ev), onClick: () => this.onClick() }, h("input", { key: 'abb3d1ad25ef63856af7804111175a4d50008bc0', "aria-hidden": "true", tabindex: -1, inputmode: "numeric", type: "number", onKeyDown: (ev) => {
var _a;
/**
* The "Enter" key represents
* the user submitting their time
* selection, so we should blur the
* input (and therefore close the keyboard)
*
* Updating the picker's state to no longer
* be in input mode is handled in the onBlur
* callback below.
*/
if (ev.key === 'Enter') {
(_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
}
}, ref: (el) => (this.inputEl = el), onInput: () => this.onInputChange(), onBlur: () => this.exitInputMode() }), h("div", { key: '334a5abdc02e6b127c57177f626d7e4ff5526183', class: "picker-before" }), h("div", { key: 'ffd6271931129e88fc7c820e919d684899e420c5', class: "picker-after" }), h("div", { key: '78d1d95fd09e04f154ea59f24a1cece72c47ed7b', class: "picker-highlight", ref: (el) => (this.highlightEl = el) }), h("slot", { key: '0bd5b9f875d3c71f6cbbde2054baeb1b0a2e8cd5' })));
}
static get is() { return "ion-picker"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"ios": ["picker.ios.scss"],
"md": ["picker.md.scss"]
};
}
static get styleUrls() {
return {
"ios": ["picker.ios.css"],
"md": ["picker.md.css"]
};
}
static get events() {
return [{
"method": "ionInputModeChange",
"name": "ionInputModeChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": ""
},
"complexType": {
"original": "PickerChangeEventDetail",
"resolved": "PickerChangeEventDetail",
"references": {
"PickerChangeEventDetail": {
"location": "import",
"path": "./picker-interfaces",
"id": "src/components/picker/picker-interfaces.ts::PickerChangeEventDetail"
}
}
}
}];
}
static get methods() {
return {
"exitInputMode": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": [{
"name": "internal",
"text": "Exits text entry mode for the picker\nThis method blurs the hidden input\nand cause the keyboard to dismiss."
}]
}
}
};
}
static get elementRef() { return "el"; }
static get listeners() {
return [{
"name": "touchstart",
"method": "preventTouchStartPropagation",
"target": undefined,
"capture": false,
"passive": true
}];
}
}