fix(DatePicker2): Fix the arrow direction issue when popupAlign is set to br tr or tr br

泊淞 · 泊淞 · commit 17668754164f · 2025-01-21T12:04:27.000+08:00
diff --git a/components/date-picker2/__tests__/index-spec.js b/components/date-picker2/__tests__/index-spec.js
@@ -861,6 +861,94 @@ describe('Picker', () => {
         });
     });
 
+    describe('RangePicker arrow', () => {
+        it('align tl bl', () => {
+            return co(function* () {
+                wrapper = render(<RangePicker popupAlign="tl bl" />);
+                const inputBegin = wrapper.find('.next-input')[0];
+                ReactTestUtils.Simulate.click(inputBegin);
+                yield delay(300);
+                assert.equal(findArrowDom().offsetTop, 13);
+                assert.equal(findArrowDom().style.left, `${getArrowLeft()}px`);
+                wrapper.unmount();
+            });
+        });
+        it('align tr br', () => {
+            return co(function* () {
+                wrapper = render(
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                        }}
+                    >
+                        <div style={{ flex: 1 }}></div>
+                        <div style={{ width: 300 }}>
+                            <RangePicker dev={true} popupAlign="tr br" />
+                        </div>
+                    </div>
+                );
+                const inputBegin = wrapper.find('.next-input')[0];
+                ReactTestUtils.Simulate.click(inputBegin);
+                yield delay(300);
+                assert.equal(findArrowDom().offsetTop, 13);
+                assert.equal(findArrowDom().style.left, `${getArrowLeft()}px`);
+                wrapper.unmount();
+            });
+        });
+
+        it('align br tr', () => {
+            return co(function* () {
+                wrapper = render(
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            height: 400,
+                            alignItems: 'end',
+                        }}
+                    >
+                        <div style={{ flex: 1 }}></div>
+                        <div style={{ width: 300 }}>
+                            <RangePicker popupAlign="br tr" />
+                        </div>
+                    </div>
+                );
+                const inputBegin = wrapper.find('.next-input')[0];
+                ReactTestUtils.Simulate.click(inputBegin);
+                yield delay(300);
+                const count = findOverlayDom().offsetHeight - findArrowDom().offsetTop;
+                assert.equal(count, 25);
+                assert.equal(findArrowDom().style.left, `${getArrowLeft()}px`);
+                wrapper.unmount();
+            });
+        });
+
+        it('align bl tl', () => {
+            return co(function* () {
+                wrapper = render(
+                    <div
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            height: 400,
+                            alignItems: 'end',
+                        }}
+                    >
+                        <RangePicker popupAlign="bl tl" />
+                    </div>
+                );
+                const inputBegin = wrapper.find('.next-input')[0];
+                ReactTestUtils.Simulate.click(inputBegin);
+                yield delay(300);
+                const count = findOverlayDom().offsetHeight - findArrowDom().offsetTop;
+                assert.equal(count, 25);
+                assert.equal(findArrowDom().style.left, `${getArrowLeft()}px`);
+                wrapper.unmount();
+            });
+        });
+    });
+
     describe('event', () => {
         it('onChange', () => {
             let changeCount = 0;
@@ -1360,3 +1448,20 @@ function hasClassNames(node, classNames) {
 function showTimePanel() {
     return !!wrapper.find('.next-time-picker2-panel').length;
 }
+
+function findArrowDom() {
+    return document.querySelector('.next-range-picker2-arrow');
+}
+
+function findOverlayDom() {
+    return document.querySelector('.next-date-picker2-overlay');
+}
+
+function getArrowLeft() {
+    const inputBegin = wrapper.find('.next-input')[0];
+    const { left: arrowLeft } = inputBegin.getBoundingClientRect();
+    const { left: panelLeft } = findOverlayDom().getBoundingClientRect();
+    const offset = Math.round(Math.abs(arrowLeft - panelLeft));
+    const inputOffsetLeft = inputBegin.offsetLeft;
+    return offset + inputOffsetLeft;
+}
diff --git a/components/date-picker2/main.scss b/components/date-picker2/main.scss
@@ -192,6 +192,17 @@
         transform: translate(0, 50%) rotate(135deg);
     }
 }
+#{$date-picker2-prefix}-tr-br {
+    #{$range-picker2-prefix}-arrow {
+        top: 12.5px;
+    }
+}
+#{$date-picker2-prefix}-br-tr {
+    #{$range-picker2-prefix}-arrow {
+        bottom: 13px;
+        transform: translate(0, 50%) rotate(135deg);
+    }
+}
 
 .#{$css-prefix}date-time-picker-wrapper {
     border-left: 1px solid $color-line1-1;
diff --git a/components/date-picker2/picker.jsx b/components/date-picker2/picker.jsx
@@ -425,11 +425,11 @@ class Picker extends React.Component {
                 if (isRange) {
                     const updatedInputValue = [...inputValue];
                     updatedInputValue[inputType] = updatedInputValue[inputType] + ' ';
-                    this.setState({ inputValue: updatedInputValue })
+                    this.setState({ inputValue: updatedInputValue });
                 } else {
                     this.setState({
-                        inputValue: inputValue + ' '
-                    })
+                        inputValue: inputValue + ' ',
+                    });
                 }
                 break;
             }
@@ -441,7 +441,13 @@ class Picker extends React.Component {
     handleChange = (v, eventType) => {
         const { format } = this.props;
         const { isRange, showOk, value, preValue } = this.state;
-        const forceEvents = ['KEYDOWN_ENTER', 'CLICK_PRESET', 'CLICK_OK', 'INPUT_CLEAR', 'VISIBLE_CHANGE'];
+        const forceEvents = [
+            'KEYDOWN_ENTER',
+            'CLICK_PRESET',
+            'CLICK_OK',
+            'INPUT_CLEAR',
+            'VISIBLE_CHANGE',
+        ];
         const isTemporary = showOk && !forceEvents.includes(eventType);
 
         // 面板收起时候，将值设置为确认值
@@ -566,15 +572,37 @@ class Picker extends React.Component {
         return left;
     };
 
+    getRangeInputStartClientRect = () => {
+        const rect =
+            this.dateInput &&
+            this.dateInput.input &&
+            this.dateInput.input[DATE_INPUT_TYPE.BEGIN] &&
+            this.dateInput.input &&
+            this.dateInput.input[DATE_INPUT_TYPE.BEGIN].getInputNode().getBoundingClientRect();
+        return rect || {};
+    };
+
     getPopupOffsetLeft = () => {
         const inputOffsetLeft = this.getRangeInputOffsetLeft();
         const popupElement = this.popupRef.current;
         const popupElementWidth = popupElement ? popupElement.offsetWidth : 0;
+        // 计算弹层相对于输入框的偏移量
+        let { left: inputLeft = 0 } = this.getRangeInputStartClientRect();
+        const popupElementLeft = popupElement ? popupElement.getBoundingClientRect().left || 0 : 0;
+        const offset = popupElementWidth ? Math.round(Math.abs(popupElementLeft - inputLeft)) : 0;
+
+        // 没有的时候，默认不偏移，要不然会因为 css 中的 transform 属性导致会有偏移动画
+        if (!popupElementWidth || (!inputOffsetLeft && inputOffsetLeft !== 0)) {
+            return {
+                arrowLeft: 0,
+                panelLeft: 0,
+            };
+        }
 
         // 弹层宽度大于输入元素长度，只偏移 arrow
         if (popupElementWidth > 1.2 * inputOffsetLeft) {
             return {
-                arrowLeft: inputOffsetLeft,
+                arrowLeft: inputOffsetLeft + offset,
                 panelLeft: 0,
             };
         } else {
@@ -587,7 +615,13 @@ class Picker extends React.Component {
     };
 
     renderArrow = left => {
-        return <div key="arrow" className={`${this.props.prefix}range-picker2-arrow`} style={{ left }} />;
+        return (
+            <div
+                key="arrow"
+                className={`${this.props.prefix}range-picker2-arrow`}
+                style={{ left }}
+            />
+        );
     };
 
     render() {
@@ -641,7 +675,10 @@ class Picker extends React.Component {
 
             return (
                 <div className={previewCls}>
-                    {renderNode(renderPreview, isRange ? inputValue.join('-') : inputValue, [curValue, this.props])}
+                    {renderNode(renderPreview, isRange ? inputValue.join('-') : inputValue, [
+                        curValue,
+                        this.props,
+                    ])}
                 </div>
             );
         }
@@ -698,13 +735,20 @@ class Picker extends React.Component {
         };
 
         const DateNode = isRange ? (
-            <RangePanel justBeginInput={justBeginInput} onCalendarChange={onCalendarChange} {...panelProps} />
+            <RangePanel
+                justBeginInput={justBeginInput}
+                onCalendarChange={onCalendarChange}
+                {...panelProps}
+            />
         ) : (
             <DatePanel {...panelProps} />
         );
 
         // 底部节点
-        const oKable = !!(!this.checkValueDisabled(inputValue) && (isRange ? inputValue && inputValue[inputType] : inputValue));
+        const oKable = !!(
+            !this.checkValueDisabled(inputValue) &&
+            (isRange ? inputValue && inputValue[inputType] : inputValue)
+        );
         const shouldShowFooter = showOk || preset || extraFooterRender;
 
         const footerNode = shouldShowFooter ? (
@@ -774,7 +818,11 @@ class Picker extends React.Component {
                 >
                     {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                     <div onMouseDown={handleMouseDown} style={{ marginLeft: panelLeft }}>
-                        <div dir={rtl ? 'rtl' : undefined} className={`${prefixCls}-wrapper`} ref={this.popupRef}>
+                        <div
+                            dir={rtl ? 'rtl' : undefined}
+                            className={`${prefixCls}-wrapper`}
+                            ref={this.popupRef}
+                        >
                             {isRange ? this.renderArrow(arrowLeft) : null}
                             {DateNode}
                             {this.state.panelMode !== this.props.mode ? null : footerNode}
