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

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 { getAriaLabel, renderHiddenInput } from '../../utils/helpers';
import { hapticSelection } from '../../utils/native/haptic';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
@ -138,7 +139,7 @@ export class Toggle implements ComponentInterface {
}
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;
hapticSelection();
}
@ -224,9 +225,7 @@ export class Toggle implements ComponentInterface {
}
}
const shouldToggle = (doc: HTMLDocument, checked: boolean, deltaX: number, margin: number): boolean => {
const isRTL = doc.dir === 'rtl';
const shouldToggle = (isRTL: boolean, checked: boolean, deltaX: number, margin: number): boolean => {
if (checked) {
return (!isRTL && (margin > deltaX)) ||
(isRTL && (- margin < deltaX));