javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Resolves #23978
This commit is contained in:
Sean Perkins
2022-01-19 15:23:14 -05:00
committed by GitHub
parent 3e2d04dcc6
commit 2940e73a45
3 changed files with 60 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/segment/segment.tsx
View File

@ -5,6 +5,7 @@ import { getIonMode } from '../../global/ionic-global';
import { Color, SegmentChangeEventDetail, StyleEventDetail } from '../../interface';
import { Gesture, GestureDetail } from '../../utils/gesture';
import { pointerCoord } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme';
/**
@ -314,7 +315,7 @@ export class Segment implements ComponentInterface {
}
private setNextIndex(detail: GestureDetail, isEnd = false) {
const isRTL = document.dir === 'rtl';
const rtl = isRTL(this.el);
const activated = this.activated;
const buttons = this.getButtons();
const index = buttons.findIndex(button => button.value === this.value);
@ -350,8 +351,8 @@ export class Segment implements ComponentInterface {
const root = this.el.getRootNode() as Document | ShadowRoot;
const nextEl = root.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;
const increaseIndex = isRTL ? currentX < left : currentX > (left + width);
const decreaseIndex = rtl ? currentX > (left + width) : currentX < left;
const increaseIndex = rtl ? currentX < left : currentX > (left + width);
// If the indicator is currently activated then we have started the gesture
// on top of the checked button so we need to slide the indicator
@ -458,17 +459,17 @@ export class Segment implements ComponentInterface {
@Listen('keydown')
onKeyDown(ev: KeyboardEvent) {
const isRTL = document.dir === 'rtl';
const rtl = isRTL(this.el);
let keyDownSelectsButton = this.selectOnFocus;
let current;
switch (ev.key) {
case 'ArrowRight':
ev.preventDefault();
current = isRTL ? this.getSegmentButton('previous') : this.getSegmentButton('next');
current = rtl ? this.getSegmentButton('previous') : this.getSegmentButton('next');
break;
case 'ArrowLeft':
ev.preventDefault();
current = isRTL ? this.getSegmentButton('next') : this.getSegmentButton('previous')
current = rtl ? this.getSegmentButton('next') : this.getSegmentButton('previous')
break;
case 'Home':
ev.preventDefault();

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

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

42
core/src/components/segment/test/rtl/index.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Segment - 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>Segment - RTL</ion-title>
</ion-toolbar>
<ion-content>
<div class="ion-padding">
<ion-segment dir="rtl">
<ion-segment-button>
<ion-label>Seg 1</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>Seg 2</ion-label>
</ion-segment-button>
<ion-segment-button>
<ion-label>Seg 3</ion-label>
</ion-segment-button>
</ion-segment>
</ion-content>
</ion-app>
</body>
</html>