mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
lint(eslint): migrate to eslint and prettier (#25046)
This commit is contained in:
Liam DeBeasi
@ -1,7 +1,8 @@
|
||||
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';
|
||||
import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import { Gesture, GestureDetail, PickerColumn } from '../../interface';
|
||||
import type { Gesture, GestureDetail, PickerColumn } from '../../interface';
|
||||
import { clamp } from '../../utils/helpers';
|
||||
import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic';
|
||||
|
||||
@ -12,11 +13,10 @@ import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from
|
||||
tag: 'ion-picker-column',
|
||||
styleUrls: {
|
||||
ios: 'picker-column.ios.scss',
|
||||
md: 'picker-column.md.scss'
|
||||
}
|
||||
md: 'picker-column.md.scss',
|
||||
},
|
||||
})
|
||||
export class PickerColumnCmp implements ComponentInterface {
|
||||
|
||||
private bounceFrom!: number;
|
||||
private lastIndex?: number;
|
||||
private minY!: number;
|
||||
@ -67,9 +67,9 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
gesturePriority: 100,
|
||||
threshold: 0,
|
||||
passive: false,
|
||||
onStart: ev => this.onStart(ev),
|
||||
onMove: ev => this.onMove(ev),
|
||||
onEnd: ev => this.onEnd(ev),
|
||||
onStart: (ev) => this.onStart(ev),
|
||||
onMove: (ev) => this.onMove(ev),
|
||||
onEnd: (ev) => this.onEnd(ev),
|
||||
});
|
||||
this.gesture.enable();
|
||||
this.tmrId = setTimeout(() => {
|
||||
@ -83,7 +83,7 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
if (colEl) {
|
||||
// DOM READ
|
||||
// We perfom a DOM read over a rendered item, this needs to happen after the first render
|
||||
this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
|
||||
this.optHeight = colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0;
|
||||
}
|
||||
|
||||
this.refresh();
|
||||
@ -105,7 +105,7 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
private setSelected(selectedIndex: number, duration: number) {
|
||||
// if there is a selected index, then figure out it's y position
|
||||
// if there isn't a selected index, then just use the top y position
|
||||
const y = (selectedIndex > -1) ? -(selectedIndex * this.optHeight) : 0;
|
||||
const y = selectedIndex > -1 ? -(selectedIndex * this.optHeight) : 0;
|
||||
|
||||
this.velocity = 0;
|
||||
|
||||
@ -125,15 +125,15 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
let translateY = 0;
|
||||
let translateZ = 0;
|
||||
const { col, rotateFactor } = this;
|
||||
const selectedIndex = col.selectedIndex = this.indexForY(-y);
|
||||
const durationStr = (duration === 0) ? '' : duration + 'ms';
|
||||
const selectedIndex = (col.selectedIndex = this.indexForY(-y));
|
||||
const durationStr = duration === 0 ? '' : duration + 'ms';
|
||||
const scaleStr = `scale(${this.scaleFactor})`;
|
||||
|
||||
const children = this.optsEl.children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
const button = children[i] as HTMLElement;
|
||||
const opt = col.options[i];
|
||||
const optOffset = (i * this.optHeight) + y;
|
||||
const optOffset = i * this.optHeight + y;
|
||||
let transform = '';
|
||||
|
||||
if (rotateFactor !== 0) {
|
||||
@ -145,7 +145,6 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
} else {
|
||||
translateY = -9999;
|
||||
}
|
||||
|
||||
} else {
|
||||
translateZ = 0;
|
||||
translateY = optOffset;
|
||||
@ -161,7 +160,6 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
if (this.noAnimate) {
|
||||
opt.duration = 0;
|
||||
button.style.transitionDuration = '';
|
||||
|
||||
} else if (duration !== opt.duration) {
|
||||
opt.duration = duration;
|
||||
button.style.transitionDuration = durationStr;
|
||||
@ -201,9 +199,7 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
this.velocity *= DECELERATION_FRICTION;
|
||||
|
||||
// do not let it go slower than a velocity of 1
|
||||
this.velocity = (this.velocity > 0)
|
||||
? Math.max(this.velocity, 1)
|
||||
: Math.min(this.velocity, -1);
|
||||
this.velocity = this.velocity > 0 ? Math.max(this.velocity, 1) : Math.min(this.velocity, -1);
|
||||
|
||||
let y = this.y + this.velocity;
|
||||
|
||||
@ -211,7 +207,6 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
// whoops, it's trying to scroll up farther than the options we have!
|
||||
y = this.minY;
|
||||
this.velocity = 0;
|
||||
|
||||
} else if (y < this.maxY) {
|
||||
// gahh, it's trying to scroll down farther than we can!
|
||||
y = this.maxY;
|
||||
@ -219,7 +214,7 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
}
|
||||
|
||||
this.update(y, 0, true);
|
||||
const notLockedIn = (Math.round(y) % this.optHeight !== 0) || (Math.abs(this.velocity) > 1);
|
||||
const notLockedIn = Math.round(y) % this.optHeight !== 0 || Math.abs(this.velocity) > 1;
|
||||
if (notLockedIn) {
|
||||
// isn't locked in yet, keep decelerating until it is
|
||||
this.rafId = requestAnimationFrame(() => this.decelerate());
|
||||
@ -228,13 +223,12 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
this.emitColChange();
|
||||
hapticSelectionEnd();
|
||||
}
|
||||
|
||||
} else if (this.y % this.optHeight !== 0) {
|
||||
// needs to still get locked into a position so options line up
|
||||
const currentPos = Math.abs(this.y % this.optHeight);
|
||||
|
||||
// create a velocity in the direction it needs to scroll
|
||||
this.velocity = (currentPos > (this.optHeight / 2) ? 1 : -1);
|
||||
this.velocity = currentPos > this.optHeight / 2 ? 1 : -1;
|
||||
|
||||
this.decelerate();
|
||||
}
|
||||
@ -260,7 +254,7 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
// reset everything
|
||||
cancelAnimationFrame(this.rafId);
|
||||
const options = this.col.options;
|
||||
let minY = (options.length - 1);
|
||||
let minY = options.length - 1;
|
||||
let maxY = 0;
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
if (!options[i].disabled) {
|
||||
@ -286,12 +280,10 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
// scrolling up higher than scroll area
|
||||
y = Math.pow(y, 0.8);
|
||||
this.bounceFrom = y;
|
||||
|
||||
} else if (y < this.maxY) {
|
||||
// scrolling down below scroll area
|
||||
y += Math.pow(this.maxY - y, 0.9);
|
||||
this.bounceFrom = y;
|
||||
|
||||
} else {
|
||||
this.bounceFrom = 0;
|
||||
}
|
||||
@ -315,10 +307,9 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
this.velocity = clamp(-MAX_PICKER_SPEED, detail.velocityY * 23, MAX_PICKER_SPEED);
|
||||
if (this.velocity === 0 && detail.deltaY === 0) {
|
||||
const opt = (detail.event.target as Element).closest('.picker-opt');
|
||||
if (opt && opt.hasAttribute('opt-index')) {
|
||||
if (opt?.hasAttribute('opt-index')) {
|
||||
this.setSelected(parseInt(opt.getAttribute('opt-index')!, 10), TRANSITION_DURATION);
|
||||
}
|
||||
|
||||
} else {
|
||||
this.y += detail.deltaY;
|
||||
|
||||
@ -355,11 +346,13 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
* a value different than the value at
|
||||
* selectedIndex
|
||||
*/
|
||||
if (this.velocity !== 0) { return; }
|
||||
if (this.velocity !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedIndex = clamp(min, this.col.selectedIndex || 0, max);
|
||||
if (this.col.prevSelected !== selectedIndex || forceRefresh) {
|
||||
const y = (selectedIndex * this.optHeight) * -1;
|
||||
const y = selectedIndex * this.optHeight * -1;
|
||||
this.velocity = 0;
|
||||
this.update(y, TRANSITION_DURATION, true);
|
||||
}
|
||||
@ -375,10 +368,10 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
[mode]: true,
|
||||
'picker-col': true,
|
||||
'picker-opts-left': this.col.align === 'left',
|
||||
'picker-opts-right': this.col.align === 'right'
|
||||
'picker-opts-right': this.col.align === 'right',
|
||||
}}
|
||||
style={{
|
||||
'max-width': this.col.columnWidth
|
||||
'max-width': this.col.columnWidth,
|
||||
}}
|
||||
>
|
||||
{col.prefix && (
|
||||
@ -386,20 +379,12 @@ export class PickerColumnCmp implements ComponentInterface {
|
||||
{col.prefix}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
class="picker-opts"
|
||||
style={{ maxWidth: col.optionsWidth! }}
|
||||
ref={el => this.optsEl = el}
|
||||
>
|
||||
{ col.options.map((o, index) =>
|
||||
<Button
|
||||
type="button"
|
||||
class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }}
|
||||
opt-index={index}
|
||||
>
|
||||
<div class="picker-opts" style={{ maxWidth: col.optionsWidth! }} ref={(el) => (this.optsEl = el)}>
|
||||
{col.options.map((o, index) => (
|
||||
<Button type="button" class={{ 'picker-opt': true, 'picker-opt-disabled': !!o.disabled }} opt-index={index}>
|
||||
{o.text}
|
||||
</Button>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
{col.suffix && (
|
||||
<div class="picker-suffix" style={{ width: col.suffixWidth! }}>
|
||||
|
||||
@ -1,94 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Picker Column - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/core.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Picker Column - Standalone</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/core.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
</head>
|
||||
<script type="module">
|
||||
import { pickerController } from '../../../../dist/ionic/index.esm.js';
|
||||
window.pickerController = pickerController;
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<ion-button onclick="openPicker()" id="single-column-button">Open Single Column Picker</ion-button>
|
||||
<ion-button onclick="openPicker(2, 5, multiColumnOptions)" id="multiple-column-button">Open Multi Column Picker</ion-button>
|
||||
<script>
|
||||
const defaultColumnOptions = [
|
||||
[
|
||||
'Dog',
|
||||
'Cat',
|
||||
'Bird',
|
||||
'Lizard',
|
||||
'Chinchilla'
|
||||
]
|
||||
]
|
||||
<body>
|
||||
<ion-button onclick="openPicker()" id="single-column-button">Open Single Column Picker</ion-button>
|
||||
<ion-button onclick="openPicker(2, 5, multiColumnOptions)" id="multiple-column-button"
|
||||
>Open Multi Column Picker</ion-button
|
||||
>
|
||||
<script>
|
||||
const defaultColumnOptions = [['Dog', 'Cat', 'Bird', 'Lizard', 'Chinchilla']];
|
||||
|
||||
const multiColumnOptions = [
|
||||
[
|
||||
'Minified',
|
||||
'Responsive',
|
||||
'Full Stack',
|
||||
'Mobile First',
|
||||
'Serverless'
|
||||
],
|
||||
[
|
||||
'Tomato',
|
||||
'Avocado',
|
||||
'Onion',
|
||||
'Potato',
|
||||
'Artichoke'
|
||||
]
|
||||
]
|
||||
const multiColumnOptions = [
|
||||
['Minified', 'Responsive', 'Full Stack', 'Mobile First', 'Serverless'],
|
||||
['Tomato', 'Avocado', 'Onion', 'Potato', 'Artichoke'],
|
||||
];
|
||||
|
||||
async function openPicker(numColumns = 1, numOptions = 5, columnOptions = defaultColumnOptions) {
|
||||
const picker = await pickerController.create({
|
||||
columns: this.getColumns(numColumns, numOptions, columnOptions),
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel'
|
||||
},
|
||||
{
|
||||
text: 'Confirm',
|
||||
handler: (value) => {
|
||||
console.log('Got Value', value);
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
await picker.present();
|
||||
}
|
||||
|
||||
function getColumns(numColumns, numOptions, columnOptions) {
|
||||
let columns = [];
|
||||
for (let i = 0; i < numColumns; i++) {
|
||||
columns.push({
|
||||
name: `col-${i}`,
|
||||
options: this.getColumnOptions(i, numOptions, columnOptions)
|
||||
async function openPicker(numColumns = 1, numOptions = 5, columnOptions = defaultColumnOptions) {
|
||||
const picker = await pickerController.create({
|
||||
columns: this.getColumns(numColumns, numOptions, columnOptions),
|
||||
buttons: [
|
||||
{
|
||||
text: 'Cancel',
|
||||
role: 'cancel',
|
||||
},
|
||||
{
|
||||
text: 'Confirm',
|
||||
handler: (value) => {
|
||||
console.log('Got Value', value);
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
await picker.present();
|
||||
}
|
||||
|
||||
return columns;
|
||||
}
|
||||
function getColumns(numColumns, numOptions, columnOptions) {
|
||||
let columns = [];
|
||||
for (let i = 0; i < numColumns; i++) {
|
||||
columns.push({
|
||||
name: `col-${i}`,
|
||||
options: this.getColumnOptions(i, numOptions, columnOptions),
|
||||
});
|
||||
}
|
||||
|
||||
function getColumnOptions(columnIndex, numOptions, columnOptions) {
|
||||
let options = [];
|
||||
for (let i = 0; i < numOptions; i++) {
|
||||
options.push({
|
||||
text: columnOptions[columnIndex][i % numOptions],
|
||||
value: i
|
||||
})
|
||||
return columns;
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
function getColumnOptions(columnIndex, numOptions, columnOptions) {
|
||||
let options = [];
|
||||
for (let i = 0; i < numOptions; i++) {
|
||||
options.push({
|
||||
text: columnOptions[columnIndex][i % numOptions],
|
||||
value: i,
|
||||
});
|
||||
}
|
||||
|
||||
return options;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,16 +1,12 @@
|
||||
import { newE2EPage } from '@stencil/core/testing';
|
||||
import { dragElementBy, generateE2EUrl, listenForEvent, waitForFunctionTestContext } from '@utils/test';
|
||||
|
||||
export const testPickerColumn = async (
|
||||
type: string,
|
||||
selector: string,
|
||||
rtl = false
|
||||
) => {
|
||||
export const testPickerColumn = async (type: string, selector: string, rtl = false) => {
|
||||
try {
|
||||
const pageUrl = generateE2EUrl('picker-column', type, rtl);
|
||||
|
||||
const page = await newE2EPage({
|
||||
url: pageUrl
|
||||
url: pageUrl,
|
||||
});
|
||||
|
||||
const screenshotCompares = [];
|
||||
@ -41,9 +37,12 @@ export const testPickerColumn = async (
|
||||
await dragElementBy(column, page, 0, 100);
|
||||
|
||||
// Wait for ionPickerColChange event to be emitted once
|
||||
await waitForFunctionTestContext((payload: any) => {
|
||||
return payload.colChangeCounter.count === 1;
|
||||
}, { colChangeCounter });
|
||||
await waitForFunctionTestContext(
|
||||
(payload: any) => {
|
||||
return payload.colChangeCounter.count === 1;
|
||||
},
|
||||
{ colChangeCounter }
|
||||
);
|
||||
}
|
||||
|
||||
for (const screenshotCompare of screenshotCompares) {
|
||||
|
||||
Reference in New Issue
Block a user