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

fix(range): setting dir on ion-range to enable rtl mode now supported (#24597)

Browse Source 
Resolves #20201
This commit is contained in:
Sean Perkins
2022-01-19 12:59:19 -05:00
committed by GitHub
parent bbbe778a8a
commit 5dba4e5ce0
3 changed files with 66 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop
import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, KnobName, RangeChangeEventDetail, RangeValue, StyleEventDetail } from '../../interface';
import { clamp, debounceEvent, getAriaLabel, inheritAttributes, renderHiddenInput } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
import { PinFormatter } from './range-interface';
@ -290,13 +291,13 @@ export class Range implements ComponentInterface {
// figure out which knob they started closer to
let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
if (document.dir === 'rtl') {
if (isRTL(this.el)) {
ratio = 1 - ratio;
}
this.pressedKnob =
!this.dualKnobs ||
Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)
? 'A'
: 'B';
@ -320,7 +321,7 @@ export class Range implements ComponentInterface {
// update the knob being interacted with
const rect = this.rect;
let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);
if (document.dir === 'rtl') {
if (isRTL(this.el)) {
ratio = 1 - ratio;
}
@ -384,9 +385,9 @@ export class Range implements ComponentInterface {
this.value = !this.dualKnobs
? valA
: {
lower: Math.min(valA, valB),
upper: Math.max(valA, valB)
};
lower: Math.min(valA, valB),
upper: Math.max(valA, valB)
};
this.noUpdate = false;
}
@ -432,10 +433,10 @@ export class Range implements ComponentInterface {
const barStart = `${ratioLower * 100}%`;
const barEnd = `${100 - ratioUpper * 100}%`;
const doc = document;
const isRTL = doc.dir === 'rtl';
const start = isRTL ? 'right' : 'left';
const end = isRTL ? 'left' : 'right';
const rtl = isRTL(this.el);
const start = rtl ? 'right' : 'left';
const end = rtl ? 'left' : 'right';
const tickStyle = (tick: any) => {
return {
@ -502,7 +503,7 @@ export class Range implements ComponentInterface {
part="bar-active"
/>
{ renderKnob(isRTL, {
{renderKnob(rtl, {
knob: 'A',
pressed: pressedKnob === 'A',
value: this.valA,
@ -516,7 +517,7 @@ export class Range implements ComponentInterface {
labelText
})}
{ this.dualKnobs && renderKnob(isRTL, {
{this.dualKnobs && renderKnob(rtl, {
knob: 'B',
pressed: pressedKnob === 'B',
value: this.valB,