From 7c4109601a60944eba5170e881b1088b43e5f89e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=B9=A4=E4=BB=99?= <guoyunhe.gyh@alibaba-inc.com>
Date: Mon, 30 Dec 2024 17:13:42 +0800
Subject: [PATCH] feat(RangeSelector): add -input-start and -input-end
 className to differ inputs

---
 src/PickerInput/Selector/Input.tsx         | 13 ++++++++----
 src/PickerInput/Selector/RangeSelector.tsx |  6 ++++--
 tests/__snapshots__/range.spec.tsx.snap    | 24 +++++++++++-----------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/PickerInput/Selector/Input.tsx b/src/PickerInput/Selector/Input.tsx
index 9bf9d7edb..fe92e83e3 100644
--- a/src/PickerInput/Selector/Input.tsx
+++ b/src/PickerInput/Selector/Input.tsx
@@ -52,6 +52,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
 
 const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   const {
+    className,
     active,
     showActiveCls = true,
     suffixIcon,
@@ -377,10 +378,14 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
   return (
     <div
       ref={holderRef}
-      className={classNames(inputPrefixCls, {
-        [`${inputPrefixCls}-active`]: active && showActiveCls,
-        [`${inputPrefixCls}-placeholder`]: helped,
-      })}
+      className={classNames(
+        inputPrefixCls,
+        {
+          [`${inputPrefixCls}-active`]: active && showActiveCls,
+          [`${inputPrefixCls}-placeholder`]: helped,
+        },
+        className,
+      )}
     >
       <Component
         ref={inputRef}
diff --git a/src/PickerInput/Selector/RangeSelector.tsx b/src/PickerInput/Selector/RangeSelector.tsx
index 70894a011..ead884a3c 100644
--- a/src/PickerInput/Selector/RangeSelector.tsx
+++ b/src/PickerInput/Selector/RangeSelector.tsx
@@ -186,11 +186,11 @@ function RangeSelector<DateType extends object = any>(
     if (input) {
       const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
       const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
-      const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft;
+      const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft;
       setActiveBarStyle(({ insetInlineStart, insetInlineEnd, ...rest }) => ({
         ...rest,
         width: offsetWidth,
-        [offsetUnit]: activeOffset
+        [offsetUnit]: activeOffset,
       }));
       onActiveOffset(activeOffset);
     }
@@ -243,6 +243,7 @@ function RangeSelector<DateType extends object = any>(
         <Input
           ref={inputStartRef}
           {...getInputProps(0)}
+          className={`${prefixCls}-input-start`}
           autoFocus={startAutoFocus}
           tabIndex={tabIndex}
           date-range="start"
@@ -251,6 +252,7 @@ function RangeSelector<DateType extends object = any>(
         <Input
           ref={inputEndRef}
           {...getInputProps(1)}
+          className={`${prefixCls}-input-end`}
           autoFocus={endAutoFocus}
           tabIndex={tabIndex}
           date-range="end"
diff --git a/tests/__snapshots__/range.spec.tsx.snap b/tests/__snapshots__/range.spec.tsx.snap
index 4e065311b..f723b4174 100644
--- a/tests/__snapshots__/range.spec.tsx.snap
+++ b/tests/__snapshots__/range.spec.tsx.snap
@@ -6,7 +6,7 @@ exports[`Picker.Range icon 1`] = `
     class="rc-picker rc-picker-range"
   >
     <div
-      class="rc-picker-input"
+      class="rc-picker-input rc-picker-input-start"
     >
       <input
         aria-invalid="false"
@@ -22,7 +22,7 @@ exports[`Picker.Range icon 1`] = `
       ~
     </div>
     <div
-      class="rc-picker-input"
+      class="rc-picker-input rc-picker-input-end"
     >
       <input
         aria-invalid="false"
@@ -61,7 +61,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
     class="rc-picker rc-picker-range rc-picker-focused"
   >
     <div
-      class="rc-picker-input rc-picker-input-active"
+      class="rc-picker-input rc-picker-input-active rc-picker-input-start"
     >
       <input
         aria-invalid="false"
@@ -77,7 +77,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
       ~
     </div>
     <div
-      class="rc-picker-input"
+      class="rc-picker-input rc-picker-input-end"
     >
       <input
         aria-invalid="false"
@@ -101,7 +101,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
     class="rc-picker rc-picker-range rc-picker-rtl"
   >
     <div
-      class="rc-picker-input"
+      class="rc-picker-input rc-picker-input-start"
     >
       <input
         aria-invalid="false"
@@ -117,7 +117,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
       ~
     </div>
     <div
-      class="rc-picker-input"
+      class="rc-picker-input rc-picker-input-end"
     >
       <input
         aria-invalid="false"
@@ -142,7 +142,7 @@ exports[`Picker.Range panelRender 1`] = `
       class="rc-picker rc-picker-range"
     >
       <div
-        class="rc-picker-input rc-picker-input-active"
+        class="rc-picker-input rc-picker-input-active rc-picker-input-start"
       >
         <input
           aria-invalid="false"
@@ -158,7 +158,7 @@ exports[`Picker.Range panelRender 1`] = `
         ~
       </div>
       <div
-        class="rc-picker-input"
+        class="rc-picker-input rc-picker-input-end"
       >
         <input
           aria-invalid="false"
@@ -208,7 +208,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
       class="rc-picker rc-picker-range rc-picker-focused"
     >
       <div
-        class="rc-picker-input rc-picker-input-active"
+        class="rc-picker-input rc-picker-input-active rc-picker-input-start"
       >
         <input
           aria-invalid="false"
@@ -224,7 +224,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
         ~
       </div>
       <div
-        class="rc-picker-input"
+        class="rc-picker-input rc-picker-input-end"
       >
         <input
           aria-invalid="false"
@@ -1265,7 +1265,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
       class="rc-picker rc-picker-range rc-picker-focused"
     >
       <div
-        class="rc-picker-input rc-picker-input-active"
+        class="rc-picker-input rc-picker-input-active rc-picker-input-start"
       >
         <input
           aria-invalid="false"
@@ -1281,7 +1281,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
         ~
       </div>
       <div
-        class="rc-picker-input"
+        class="rc-picker-input rc-picker-input-end"
       >
         <input
           aria-invalid="false"