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

78
core/src/components/segment/segment.tsx
View File

@ -1,9 +1,10 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
import { Gesture, GestureDetail } from '../../utils/gesture';
import type { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
import type { Gesture, GestureDetail } from '../../utils/gesture';
import { pointerCoord } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
@ -15,9 +16,9 @@ import { createColorClasses, hostContext } from '../../utils/theme';
tag: 'ion-segment',
styleUrls: {
ios: 'segment.ios.scss',
md: 'segment.md.scss'
md: 'segment.md.scss',
},
shadow: true
shadow: true,
})
export class Segment implements ComponentInterface {
private gesture?: Gesture;
@ -39,17 +40,13 @@ export class Segment implements ComponentInterface {
@Prop({ reflect: true }) color?: Color;
@Watch('color')
protected colorChanged(value?: Color, oldValue?: Color) {
/**
* If color is set after not having
* previously been set (or vice versa),
* we need to emit style so the segment-buttons
* can apply their color classes properly.
*/
if (
(oldValue === undefined && value !== undefined) ||
(oldValue !== undefined && value === undefined)
) {
if ((oldValue === undefined && value !== undefined) || (oldValue !== undefined && value === undefined)) {
this.emitStyle();
}
}
@ -151,9 +148,9 @@ export class Segment 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.gestureChanged();
@ -200,19 +197,23 @@ export class Segment implements ComponentInterface {
*/
private addRipple(detail: GestureDetail) {
const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
if (!useRippleEffect) { return; }
if (!useRippleEffect) {
return;
}
const buttons = this.getButtons();
const checked = buttons.find(button => button.value === this.value)!;
const checked = buttons.find((button) => button.value === this.value)!;
const root = checked.shadowRoot || checked;
const ripple = root.querySelector('ion-ripple-effect');
if (!ripple) { return; }
if (!ripple) {
return;
}
const { x, y } = pointerCoord(detail.event);
ripple.addRipple(x, y).then(remove => remove());
ripple.addRipple(x, y).then((remove) => remove());
}
/*
@ -222,7 +223,7 @@ export class Segment implements ComponentInterface {
private setActivated(activated: boolean) {
const buttons = this.getButtons();
buttons.forEach(button => {
buttons.forEach((button) => {
if (activated) {
button.classList.add('segment-button-activated');
} else {
@ -235,7 +236,7 @@ export class Segment implements ComponentInterface {
private activate(detail: GestureDetail) {
const clicked = detail.event.target as HTMLIonSegmentButtonElement;
const buttons = this.getButtons();
const checked = buttons.find(button => button.value === this.value);
const checked = buttons.find((button) => button.value === this.value);
// Make sure we are only checking for activation on a segment button
// since disabled buttons will get the click on the segment
@ -300,11 +301,11 @@ export class Segment implements ComponentInterface {
private setCheckedClasses() {
const buttons = this.getButtons();
const index = buttons.findIndex(button => button.value === this.value);
const index = buttons.findIndex((button) => button.value === this.value);
const next = index + 1;
// Keep track of the currently checked button
this.checked = buttons.find(button => button.value === this.value);
this.checked = buttons.find((button) => button.value === this.value);
for (const button of buttons) {
button.classList.remove('segment-button-after-checked');
@ -318,7 +319,7 @@ export class Segment implements ComponentInterface {
const rtl = isRTL(this.el);
const activated = this.activated;
const buttons = this.getButtons();
const index = buttons.findIndex(button => button.value === this.value);
const index = buttons.findIndex((button) => button.value === this.value);
const previous = buttons[index];
let current;
let nextIndex;
@ -338,7 +339,7 @@ export class Segment implements ComponentInterface {
// can move up and down off of the segment
const currentX = detail.currentX;
const previousY = rect.top + (rect.height / 2);
const previousY = rect.top + rect.height / 2;
/**
* Segment can be used inside the shadow dom
@ -351,8 +352,8 @@ export class Segment implements ComponentInterface {
const root = this.el.getRootNode() as Document | ShadowRoot;
const nextEl = root.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
const decreaseIndex = rtl ? currentX > (left + width) : currentX < left;
const increaseIndex = rtl ? currentX < left : currentX > (left + width);
const decreaseIndex = rtl ? currentX > left + width : currentX < left;
const increaseIndex = rtl ? currentX < left : currentX > left + width;
// If the indicator is currently activated then we have started the gesture
// on top of the checked button so we need to slide the indicator
@ -368,7 +369,6 @@ export class Segment implements ComponentInterface {
// Increase index, moves right in LTR & left in RTL
} else if (increaseIndex) {
if (activated && !isEnd) {
const newIndex = index + 1;
if (newIndex < buttons.length) {
@ -388,9 +388,7 @@ export class Segment implements ComponentInterface {
current = nextEl;
}
/* tslint:disable-next-line */
if (current != null) {
/**
* If current element is ion-segment then that means
* user tried to select a disabled ion-segment-button,
@ -410,7 +408,7 @@ export class Segment implements ComponentInterface {
private emitStyle() {
this.ionStyle.emit({
'segment': true
segment: true,
});
}
@ -437,11 +435,11 @@ export class Segment implements ComponentInterface {
}
this.checked = current;
}
};
private getSegmentButton = (selector: 'first' | 'last' | 'next' | 'previous'): HTMLIonSegmentButtonElement | null => {
const buttons = this.getButtons().filter(button => !button.disabled);
const currIndex = buttons.findIndex(button => button === document.activeElement);
const buttons = this.getButtons().filter((button) => !button.disabled);
const currIndex = buttons.findIndex((button) => button === document.activeElement);
switch (selector) {
case 'first':
@ -455,7 +453,7 @@ export class Segment implements ComponentInterface {
default:
return null;
}
}
};
@Listen('keydown')
onKeyDown(ev: KeyboardEvent) {
@ -469,7 +467,7 @@ export class Segment implements ComponentInterface {
break;
case 'ArrowLeft':
ev.preventDefault();
current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous')
current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous');
break;
case 'Home':
ev.preventDefault();
@ -488,7 +486,9 @@ export class Segment implements ComponentInterface {
break;
}
if (!current) { return; }
if (!current) {
return;
}
if (keyDownSelectsButton) {
const previous = this.checked || current;
@ -499,9 +499,11 @@ export class Segment implements ComponentInterface {
/* By default, focus is delegated to the selected `ion-segment-button`.
* If there is no selected button, focus will instead pass to the first child button.
**/
**/
private ensureFocusable() {
if (this.value !== undefined) { return };
if (this.value !== undefined) {
return;
}
const buttons = this.getButtons();
buttons[0]?.setAttribute('tabindex', '0');
@ -519,7 +521,7 @@ export class Segment implements ComponentInterface {
'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
'segment-activated': this.activated,
'segment-disabled': this.disabled,
'segment-scrollable': this.scrollable
'segment-scrollable': this.scrollable,
})}
>
<slot></slot>