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

feat(range): add knobMoveStart and knobMoveEnd events (#25011)

Browse Source
This commit is contained in:
Amanda Smith
2022-04-01 11:16:01 -05:00
committed by GitHub
parent 3145c76934
commit f5cb1f8444
9 changed files with 126 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
core/src/components/range/range.tsx
View File

@ -1,7 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeValue, StyleEventDetail } from '../../interface';
import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue, StyleEventDetail } from '../../interface';
import { Attributes, clamp, debounceEvent, getAriaLabel, inheritAttributes, renderHiddenInput } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
@ -191,6 +191,18 @@ export class Range implements ComponentInterface {
*/
@Event() ionBlur!: EventEmitter<void>;
/**
* Emitted when the user starts moving the range knob, whether through
* mouse drag, touch gesture, or keyboard interaction.
*/
@Event() ionKnobMoveStart!: EventEmitter<RangeKnobMoveStartEventDetail>;
/**
* Emitted when the user finishes moving the range knob, whether through
* mouse drag, touch gesture, or keyboard interaction.
*/
@Event() ionKnobMoveEnd!: EventEmitter<RangeKnobMoveEndEventDetail>;
private setupGesture = async () => {
const rangeSlider = this.rangeSlider;
if (rangeSlider) {
@ -246,6 +258,8 @@ export class Range implements ComponentInterface {
}
private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {
const { ensureValueInBounds } = this;
let step = this.step;
step = step > 0 ? step : 1;
step = step / (this.max - this.min);
@ -257,7 +271,10 @@ export class Range implements ComponentInterface {
} else {
this.ratioB = clamp(0, this.ratioB + step, 1);
}
this.ionKnobMoveStart.emit({ value: ensureValueInBounds(this.value) });
this.updateValue();
this.ionKnobMoveEnd.emit({ value: ensureValueInBounds(this.value) });
}
private getValue(): RangeValue {
@ -305,6 +322,8 @@ export class Range implements ComponentInterface {
// update the active knob's position
this.update(currentX);
this.ionKnobMoveStart.emit({ value: this.ensureValueInBounds(this.value) });
}
private onMove(detail: GestureDetail) {
@ -314,6 +333,8 @@ export class Range implements ComponentInterface {
private onEnd(detail: GestureDetail) {
this.update(detail.currentX);
this.pressedKnob = undefined;
this.ionKnobMoveEnd.emit({ value: this.ensureValueInBounds(this.value) });
}
private update(currentX: number) {