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(toggle): setting dir on ion-toggle to enable rtl mode now supported (#24600)

Browse Source
This commit is contained in:
Sean Perkins
2022-01-19 13:33:47 -05:00
committed by GitHub
parent 5dba4e5ce0
commit 353dbc0537
3 changed files with 55 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/toggle/test/rtl/e2e.ts Normal file
View File

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

41
core/src/components/toggle/test/rtl/index.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Toggle - 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>Toggle - RTL</ion-title>
<ion-buttons slot="primary">
<ion-toggle aria-label="Toggle"></ion-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content id="content">
<ion-list>
<ion-item>
<ion-label>Toggle</ion-label>
<ion-toggle dir="rtl" slot="start" name="item-1" checked></ion-toggle>
</ion-item>
</ion-content>
</ion-app>
</body>
</html>

7
core/src/components/toggle/toggle.tsx
View File

@ -4,6 +4,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface'; import { Color, Gesture, GestureDetail, StyleEventDetail, ToggleChangeEventDetail } from '../../interface';
import { getAriaLabel, renderHiddenInput } from '../../utils/helpers'; import { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
import { hapticSelection } from '../../utils/native/haptic'; import { hapticSelection } from '../../utils/native/haptic';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme'; import { createColorClasses, hostContext } from '../../utils/theme';
/** /**
@ -138,7 +139,7 @@ export class Toggle implements ComponentInterface {
} }
private onMove(detail: GestureDetail) { private onMove(detail: GestureDetail) {
if (shouldToggle(document, this.checked, detail.deltaX, -10)) { if (shouldToggle(isRTL(this.el), this.checked, detail.deltaX, -10)) {
this.checked = !this.checked; this.checked = !this.checked;
hapticSelection(); hapticSelection();
} }
@ -224,9 +225,7 @@ export class Toggle implements ComponentInterface {
} }
} }
const shouldToggle = (doc: HTMLDocument, checked: boolean, deltaX: number, margin: number): boolean => { const shouldToggle = (isRTL: boolean, checked: boolean, deltaX: number, margin: number): boolean => {
const isRTL = doc.dir === 'rtl';
if (checked) { if (checked) {
return (!isRTL && (margin > deltaX)) || return (!isRTL && (margin > deltaX)) ||
(isRTL && (- margin < deltaX)); (isRTL && (- margin < deltaX));