javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

lint(eslint): migrate to eslint and prettier (#25046)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-04-04 11:12:53 -04:00
committed by GitHub
parent 12fd19dd4d
commit 5676bab316
826 changed files with 56539 additions and 52754 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
core/src/components/picker-internal/picker-internal.tsx
View File

@ -1,8 +1,9 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, h } from '@stencil/core';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, h } from '@stencil/core';
import { getElementRoot } from '../../utils/helpers';
import { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
import type { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@ -12,9 +13,9 @@ import { PickerInternalChangeEventDetail } from './picker-internal-interfaces';
tag: 'ion-picker-internal',
styleUrls: {
ios: 'picker-internal.ios.scss',
md: 'picker-internal.md.scss'
md: 'picker-internal.md.scss',
},
shadow: true
shadow: true,
})
export class PickerInternal implements ComponentInterface {
private inputEl?: HTMLInputElement;
@ -36,19 +37,23 @@ export class PickerInternal implements ComponentInterface {
private isInHighlightBounds = (ev: PointerEvent) => {
const { highlightEl } = this;
if (!highlightEl) { return false; }
if (!highlightEl) {
return false;
}
const bbox = highlightEl.getBoundingClientRect();
/**
* Check to see if the user clicked
* outside the bounds of the highlight.
*/
/**
* 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; }
if (outsideX || outsideY) {
return false;
}
return true;
}
};
/**
* If we are no longer focused
@ -60,13 +65,10 @@ export class PickerInternal implements ComponentInterface {
private onFocusOut = (ev: any) => {
const { relatedTarget } = ev;
if (
!relatedTarget ||
relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl
) {
if (!relatedTarget || (relatedTarget.tagName !== 'ION-PICKER-COLUMN-INTERNAL' && relatedTarget !== this.inputEl)) {
this.exitInputMode();
}
}
};
/**
* When picker columns receive focus
@ -82,7 +84,9 @@ export class PickerInternal implements ComponentInterface {
* make sure that this function only ever runs when
* focusing a picker column.
*/
if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') { return; }
if (target.tagName !== 'ION-PICKER-COLUMN-INTERNAL') {
return;
}
/**
* If we have actionOnClick
@ -106,7 +110,7 @@ export class PickerInternal implements ComponentInterface {
this.exitInputMode();
}
}
}
};
/**
* On click we need to run an actionOnClick
@ -119,7 +123,7 @@ export class PickerInternal implements ComponentInterface {
actionOnClick();
this.actionOnClick = undefined;
}
}
};
/**
* Clicking a column also focuses the column on
@ -159,32 +163,32 @@ export class PickerInternal implements ComponentInterface {
if (inputModeColumn && inputModeColumn === ev.target) {
this.actionOnClick = () => {
this.enterInputMode();
}
};
} else {
this.actionOnClick = () => {
this.enterInputMode(ev.target as HTMLIonPickerColumnInternalElement);
}
};
}
} else {
this.actionOnClick = () => {
this.exitInputMode();
}
};
}
/**
* If we were not already in
* input mode, then we should
* enter input mode for all columns.
*/
/**
* 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-internal.picker-column-numeric-input');
const columnEl = (columns.length === 1) ? ev.target as HTMLIonPickerColumnInternalElement : undefined;
const columnEl = columns.length === 1 ? (ev.target as HTMLIonPickerColumnInternalElement) : undefined;
this.actionOnClick = () => {
this.enterInputMode(columnEl);
}
};
}
return;
@ -192,8 +196,8 @@ export class PickerInternal implements ComponentInterface {
this.actionOnClick = () => {
this.exitInputMode();
}
}
};
};
/**
* Enters input mode to allow
@ -210,14 +214,18 @@ export class PickerInternal implements ComponentInterface {
*/
private enterInputMode = (columnEl?: HTMLIonPickerColumnInternalElement, focusInput = true) => {
const { inputEl, el } = this;
if (!inputEl) { return; }
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-internal.picker-column-numeric-input');
if (!hasInputColumn) { return; }
if (!hasInputColumn) {
return;
}
/**
* If columnEl is undefined then
@ -246,15 +254,17 @@ export class PickerInternal implements ComponentInterface {
el.addEventListener('keypress', this.onKeyPress);
this.destroyKeypressListener = () => {
el.removeEventListener('keypress', this.onKeyPress);
}
};
}
this.emitInputModeChange();
}
};
private exitInputMode = () => {
const { inputEl, useInputMode } = this;
if (!useInputMode || !inputEl) { return; }
if (!useInputMode || !inputEl) {
return;
}
this.useInputMode = false;
this.inputModeColumn = undefined;
@ -267,11 +277,13 @@ export class PickerInternal implements ComponentInterface {
}
this.emitInputModeChange();
}
};
private onKeyPress = (ev: KeyboardEvent) => {
const { inputEl } = this;
if (!inputEl) { return; }
if (!inputEl) {
return;
}
const parsedValue = parseInt(ev.key, 10);
@ -281,13 +293,15 @@ export class PickerInternal implements ComponentInterface {
if (!Number.isNaN(parsedValue)) {
inputEl.value += ev.key;
this.onInputChange()
this.onInputChange();
}
}
};
private selectSingleColumn = () => {
const { inputEl, inputModeColumn, singleColumnSearchTimeout } = this;
if (!inputEl || !inputModeColumn) { return; }
if (!inputEl || !inputModeColumn) {
return;
}
const values = inputModeColumn.items;
@ -346,7 +360,7 @@ export class PickerInternal implements ComponentInterface {
inputEl.value = changedCharacter;
this.selectSingleColumn();
}
}
};
/**
* Searches a list of column items for a particular
@ -354,21 +368,28 @@ export class PickerInternal implements ComponentInterface {
* The zeroBehavior can be set to account for leading
* or trailing zeros when looking at the item text.
*/
private searchColumn = (colEl: HTMLIonPickerColumnInternalElement, value: string, zeroBehavior: 'start' | 'end' = 'start') => {
let item;
private searchColumn = (
colEl: HTMLIonPickerColumnInternalElement,
value: string,
zeroBehavior: 'start' | 'end' = 'start'
) => {
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
item = colEl.items.find(({ text }) => text.replace(behavior, '') === value);
const item = colEl.items.find(({ text }) => text.replace(behavior, '') === value);
if (item) {
colEl.value = item.value;
}
}
};
private selectMultiColumn = () => {
const { inputEl, el } = this;
if (!inputEl) { return; }
if (!inputEl) {
return;
}
const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter(col => col.numericInput);
const numericPickers = Array.from(el.querySelectorAll('ion-picker-column-internal')).filter(
(col) => col.numericInput
);
const firstColumn = numericPickers[0];
const lastColumn = numericPickers[1];
@ -387,7 +408,7 @@ export class PickerInternal implements ComponentInterface {
* at that first.
*/
const firstCharacter = inputEl.value.substring(0, 1);
value = (firstCharacter === '0' || firstCharacter === '1') ? inputEl.value : firstCharacter;
value = firstCharacter === '0' || firstCharacter === '1' ? inputEl.value : firstCharacter;
this.searchColumn(firstColumn, value);
@ -409,7 +430,10 @@ export class PickerInternal implements ComponentInterface {
* at that first.
*/
const firstCharacterAgain = inputEl.value.substring(0, 1);
value = (firstCharacterAgain === '0' || firstCharacterAgain === '1') ? inputEl.value.substring(0, 2) : firstCharacterAgain;
value =
firstCharacterAgain === '0' || firstCharacterAgain === '1'
? inputEl.value.substring(0, 2)
: firstCharacterAgain;
this.searchColumn(firstColumn, value);
@ -418,7 +442,7 @@ export class PickerInternal implements ComponentInterface {
* we can check the second value
* for a match in the minutes column
*/
minuteValue = (value.length === 1) ? inputEl.value.substring(1) : inputEl.value.substring(2);
minuteValue = value.length === 1 ? inputEl.value.substring(1) : inputEl.value.substring(2);
this.searchColumn(lastColumn, minuteValue, 'end');
break;
@ -430,7 +454,10 @@ export class PickerInternal implements ComponentInterface {
* at that first.
*/
const firstCharacterAgainAgain = inputEl.value.substring(0, 1);
value = (firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1') ? inputEl.value.substring(0, 2) : firstCharacterAgainAgain;
value =
firstCharacterAgainAgain === '0' || firstCharacterAgainAgain === '1'
? inputEl.value.substring(0, 2)
: firstCharacterAgainAgain;
this.searchColumn(firstColumn, value);
/**
@ -438,7 +465,10 @@ export class PickerInternal implements ComponentInterface {
* we can check the second value
* for a match in the minutes column
*/
const minuteValueAgain = (value.length === 1) ? inputEl.value.substring(1, inputEl.value.length) : inputEl.value.substring(2, inputEl.value.length);
const minuteValueAgain =
value.length === 1
? inputEl.value.substring(1, inputEl.value.length)
: inputEl.value.substring(2, inputEl.value.length);
this.searchColumn(lastColumn, minuteValueAgain, 'end');
break;
@ -450,7 +480,7 @@ export class PickerInternal implements ComponentInterface {
this.selectMultiColumn();
break;
}
}
};
/**
* Searches the value of the active column
@ -459,14 +489,16 @@ export class PickerInternal implements ComponentInterface {
*/
private onInputChange = () => {
const { useInputMode, inputEl, inputModeColumn } = this;
if (!useInputMode || !inputEl) { return; }
if (!useInputMode || !inputEl) {
return;
}
if (inputModeColumn) {
this.selectSingleColumn();
} else {
this.selectMultiColumn();
}
}
};
/**
* Emit ionInputModeChange. Picker columns
@ -478,28 +510,25 @@ export class PickerInternal implements ComponentInterface {
this.ionInputModeChange.emit({
useInputMode,
inputModeColumn
inputModeColumn,
});
}
};
render() {
return (
<Host
onPointerDown={(ev: PointerEvent) => this.onPointerDown(ev)}
onClick={() => this.onClick()}
>
<Host onPointerDown={(ev: PointerEvent) => this.onPointerDown(ev)} onClick={() => this.onClick()}>
<input
aria-hidden="true"
tabindex={-1}
inputmode="numeric"
type="number"
ref={el => this.inputEl = el}
ref={(el) => (this.inputEl = el)}
onInput={() => this.onInputChange()}
onBlur={() => this.exitInputMode()}
/>
<div class="picker-before"></div>
<div class="picker-after"></div>
<div class="picker-highlight" ref={el => this.highlightEl = el}></div>
<div class="picker-highlight" ref={(el) => (this.highlightEl = el)}></div>
<slot></slot>
</Host>
);