javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +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

71
core/src/components/picker-column/picker-column.tsx
View File

@ -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! }}>