feat(RangeSelector): add -input-start and -input-end className to differ inputs (#901)

Author: guoyunhe

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}

src/PickerInput/Selector/RangeSelector.tsx

@@ -242,6 +242,7 @@ function RangeSelector<DateType extends object = any>(
         <Input
           ref={inputStartRef}
           {...getInputProps(0)}
+          className={`${prefixCls}-input-start`}
           autoFocus={startAutoFocus}
           tabIndex={tabIndex}
           date-range="start"
@@ -250,6 +251,7 @@ function RangeSelector<DateType extends object = any>(
         <Input
           ref={inputEndRef}
           {...getInputProps(1)}
+          className={`${prefixCls}-input-end`}
           autoFocus={endAutoFocus}
           tabIndex={tabIndex}
           date-range="end"

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"