From 88562556a32b4cfef673d66d4371169b2a5beb63 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 18 Jun 2024 12:42:27 +0800 Subject: [PATCH] style: fix arrow position in rtl direction (#831) * style: fix arrow position in rtl direction * fix test snapshot --- assets/index.less | 22 ++++++---------------- src/PickerInput/Popup/index.tsx | 5 +++-- src/PickerInput/Selector/RangeSelector.tsx | 13 +++++++------ src/PickerInput/Selector/util.ts | 2 +- src/PickerTrigger/index.tsx | 10 +++------- src/utils/uiUtil.ts | 17 +++++++++++++++++ tests/__snapshots__/range.spec.tsx.snap | 6 +++--- 7 files changed, 40 insertions(+), 35 deletions(-) diff --git a/assets/index.less b/assets/index.less index 24f5b6e69..5d65eeca2 100644 --- a/assets/index.less +++ b/assets/index.less @@ -404,14 +404,9 @@ &-clear { position: absolute; top: 0; - right: 4px; + inset-inline-end: 4px; cursor: pointer; - .@{prefix-cls}-rtl & { - right: auto; - left: 4px; - } - &-btn::after { content: '×'; } @@ -431,6 +426,10 @@ display: none; } + &-rtl { + direction: rtl; + } + // Panel @arrow-size: 10px; @@ -456,25 +455,16 @@ height: @arrow-size; transition: all 0.3s; - .@{prefix-cls}-dropdown-rtl& { - right: @arrow-size; - left: auto; - margin-right: 10px; - margin-left: 0; - } - &::before, &::after { position: absolute; top: 50%; - left: 50%; + inset-inline-start: 50%; box-sizing: border-box; transform: translate(-50%, -50%); content: ''; .@{prefix-cls}-dropdown-rtl& { - right: 50%; - left: auto; transform: translate(50%, -50%); } } diff --git a/src/PickerInput/Popup/index.tsx b/src/PickerInput/Popup/index.tsx index 4a145643a..adfa19904 100644 --- a/src/PickerInput/Popup/index.tsx +++ b/src/PickerInput/Popup/index.tsx @@ -8,6 +8,7 @@ import type { ValueDate, } from '../../interface'; import { toArray } from '../../utils/miscUtil'; +import { getRealPlacement, getoffsetUnit } from '../../utils/uiUtil'; import PickerContext from '../context'; import Footer, { type FooterProps } from './Footer'; import PopupPanel, { type PopupPanelProps } from './PopupPanel'; @@ -208,8 +209,8 @@ export default function Popup(props: PopupProps( }); // ====================== ActiveBar ======================= - const placementRight = placement?.toLowerCase().endsWith('right'); - const offsetUnit = rtl ? 'insetInlineEnd' : 'insetInlineStart'; - + const realPlacement = getRealPlacement(placement, rtl); + const offsetUnit = getoffsetUnit(realPlacement, rtl); + const placementRight = realPlacement?.toLowerCase().endsWith('right'); const [activeBarStyle, setActiveBarStyle] = React.useState({ position: 'absolute', width: 0, - [offsetUnit]: 0, }); const syncActiveOffset = useEvent(() => { @@ -184,12 +184,13 @@ function RangeSelector( if (input) { const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement; const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0; + const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft; setActiveBarStyle((ori) => ({ ...ori, width: offsetWidth, - [offsetUnit]: offsetLeft, + [offsetUnit]: activeOffset, })); - onActiveOffset(placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft); + onActiveOffset(activeOffset); } }); diff --git a/src/PickerInput/Selector/util.ts b/src/PickerInput/Selector/util.ts index 661b2d01f..245b3dcc8 100644 --- a/src/PickerInput/Selector/util.ts +++ b/src/PickerInput/Selector/util.ts @@ -12,4 +12,4 @@ export function getMaskRange(key: string): [startVal: number, endVal: number, de }; return PresetRange[key]; -} +} \ No newline at end of file diff --git a/src/PickerTrigger/index.tsx b/src/PickerTrigger/index.tsx index 3456d5192..a46011345 100644 --- a/src/PickerTrigger/index.tsx +++ b/src/PickerTrigger/index.tsx @@ -2,6 +2,7 @@ import Trigger from '@rc-component/trigger'; import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface'; import classNames from 'classnames'; import * as React from 'react'; +import { getRealPlacement } from '../utils/uiUtil'; import PickerContext from '../PickerInput/context'; const BUILT_IN_PLACEMENTS = { @@ -79,18 +80,13 @@ function PickerTrigger({ const { prefixCls } = React.useContext(PickerContext); const dropdownPrefixCls = `${prefixCls}-dropdown`; - const mergedPlacement = React.useMemo(() => { - if (placement !== undefined) { - return placement; - } - return direction === 'rtl' ? 'bottomRight' : 'bottomLeft'; - }, [placement, direction]); + const realPlacement = getRealPlacement(placement, direction === 'rtl'); return ( ele && ele.contains(target)); } + +export function getRealPlacement(placement: string, rtl: boolean) { + if (placement !== undefined) { + return placement; + } + return rtl ? 'bottomRight' : 'bottomLeft'; +} + +export function getoffsetUnit(placement: string, rtl: boolean) { + const realPlacement = getRealPlacement(placement, rtl); + const placementRight = realPlacement?.toLowerCase().endsWith('right'); + let offsetUnit = placementRight ? 'insetInlineEnd' : 'insetInlineStart'; + if (rtl) { + offsetUnit = ['insetInlineStart', 'insetInlineEnd'].find(unit => unit !== offsetUnit); + } + return offsetUnit; +} \ No newline at end of file diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap index 32438b387..4e065311b 100644 --- a/tests/__snapshots__/range.spec.tsx.snap +++ b/tests/__snapshots__/range.spec.tsx.snap @@ -34,7 +34,7 @@ exports[`Picker.Range icon 1`] = `
@@ -129,7 +129,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl