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

10
core/src/components/range/test/rtl/e2e.ts Normal file
View File

@ -0,0 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';
test('range: RTL', async () => {
const page = await newE2EPage({
url: '/src/components/range/test/rtl?ionic:_testing=true'
});
const compare = await page.compareScreenshot();
expect(compare).toMatchScreenshot();
});

43
core/src/components/range/test/rtl/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Range - RTL</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/ionic.bundle.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>
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Range - RTL</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-list-header>
<ion-label>
Range
</ion-label>
</ion-list-header>
<ion-item>
<ion-range dir="rtl" value="20" aria-label="Default Range"></ion-range>
</ion-item>
</ion-content>
</ion-app>
</body>
</html>