Skip to content

Commit 7c41096

Browse files
guoyunheguoyunhe
committed
feat(RangeSelector): add -input-start and -input-end className to differ inputs
1 parent ad3a1f7 commit 7c41096

File tree

3 files changed

+25
-18
lines changed

3 files changed

+25
-18
lines changed

‎src/PickerInput/Selector/Input.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
5252

5353
const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
5454
const {
55+
className,
5556
active,
5657
showActiveCls = true,
5758
suffixIcon,
@@ -377,10 +378,14 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
377378
return (
378379
<div
379380
ref={holderRef}
380-
className={classNames(inputPrefixCls, {
381-
[`${inputPrefixCls}-active`]: active && showActiveCls,
382-
[`${inputPrefixCls}-placeholder`]: helped,
383-
})}
381+
className={classNames(
382+
inputPrefixCls,
383+
{
384+
[`${inputPrefixCls}-active`]: active && showActiveCls,
385+
[`${inputPrefixCls}-placeholder`]: helped,
386+
},
387+
className,
388+
)}
384389
>
385390
<Component
386391
ref={inputRef}

‎src/PickerInput/Selector/RangeSelector.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -186,11 +186,11 @@ function RangeSelector<DateType extends object = any>(
186186
if (input) {
187187
const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
188188
const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
189-
const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft;
189+
const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft;
190190
setActiveBarStyle(({ insetInlineStart, insetInlineEnd, ...rest }) => ({
191191
...rest,
192192
width: offsetWidth,
193-
[offsetUnit]: activeOffset
193+
[offsetUnit]: activeOffset,
194194
}));
195195
onActiveOffset(activeOffset);
196196
}
@@ -243,6 +243,7 @@ function RangeSelector<DateType extends object = any>(
243243
<Input
244244
ref={inputStartRef}
245245
{...getInputProps(0)}
246+
className={`${prefixCls}-input-start`}
246247
autoFocus={startAutoFocus}
247248
tabIndex={tabIndex}
248249
date-range="start"
@@ -251,6 +252,7 @@ function RangeSelector<DateType extends object = any>(
251252
<Input
252253
ref={inputEndRef}
253254
{...getInputProps(1)}
255+
className={`${prefixCls}-input-end`}
254256
autoFocus={endAutoFocus}
255257
tabIndex={tabIndex}
256258
date-range="end"

‎tests/__snapshots__/range.spec.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Picker.Range icon 1`] = `
66
class="rc-picker rc-picker-range"
77
>
88
<div
9-
class="rc-picker-input"
9+
class="rc-picker-input rc-picker-input-start"
1010
>
1111
<input
1212
aria-invalid="false"
@@ -22,7 +22,7 @@ exports[`Picker.Range icon 1`] = `
2222
~
2323
</div>
2424
<div
25-
class="rc-picker-input"
25+
class="rc-picker-input rc-picker-input-end"
2626
>
2727
<input
2828
aria-invalid="false"
@@ -61,7 +61,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
6161
class="rc-picker rc-picker-range rc-picker-focused"
6262
>
6363
<div
64-
class="rc-picker-input rc-picker-input-active"
64+
class="rc-picker-input rc-picker-input-active rc-picker-input-start"
6565
>
6666
<input
6767
aria-invalid="false"
@@ -77,7 +77,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in pla
7777
~
7878
</div>
7979
<div
80-
class="rc-picker-input"
80+
class="rc-picker-input rc-picker-input-end"
8181
>
8282
<input
8383
aria-invalid="false"
@@ -101,7 +101,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
101101
class="rc-picker rc-picker-range rc-picker-rtl"
102102
>
103103
<div
104-
class="rc-picker-input"
104+
class="rc-picker-input rc-picker-input-start"
105105
>
106106
<input
107107
aria-invalid="false"
@@ -117,7 +117,7 @@ exports[`Picker.Range onPanelChange is array args should render correctly in rtl
117117
~
118118
</div>
119119
<div
120-
class="rc-picker-input"
120+
class="rc-picker-input rc-picker-input-end"
121121
>
122122
<input
123123
aria-invalid="false"
@@ -142,7 +142,7 @@ exports[`Picker.Range panelRender 1`] = `
142142
class="rc-picker rc-picker-range"
143143
>
144144
<div
145-
class="rc-picker-input rc-picker-input-active"
145+
class="rc-picker-input rc-picker-input-active rc-picker-input-start"
146146
>
147147
<input
148148
aria-invalid="false"
@@ -158,7 +158,7 @@ exports[`Picker.Range panelRender 1`] = `
158158
~
159159
</div>
160160
<div
161-
class="rc-picker-input"
161+
class="rc-picker-input rc-picker-input-end"
162162
>
163163
<input
164164
aria-invalid="false"
@@ -208,7 +208,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
208208
class="rc-picker rc-picker-range rc-picker-focused"
209209
>
210210
<div
211-
class="rc-picker-input rc-picker-input-active"
211+
class="rc-picker-input rc-picker-input-active rc-picker-input-start"
212212
>
213213
<input
214214
aria-invalid="false"
@@ -224,7 +224,7 @@ exports[`Picker.Range use dateRender and monthCellRender in date range picker 1`
224224
~
225225
</div>
226226
<div
227-
class="rc-picker-input"
227+
class="rc-picker-input rc-picker-input-end"
228228
>
229229
<input
230230
aria-invalid="false"
@@ -1265,7 +1265,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
12651265
class="rc-picker rc-picker-range rc-picker-focused"
12661266
>
12671267
<div
1268-
class="rc-picker-input rc-picker-input-active"
1268+
class="rc-picker-input rc-picker-input-active rc-picker-input-start"
12691269
>
12701270
<input
12711271
aria-invalid="false"
@@ -1281,7 +1281,7 @@ exports[`Picker.Range use dateRender and monthCellRender in month range picker 1
12811281
~
12821282
</div>
12831283
<div
1284-
class="rc-picker-input"
1284+
class="rc-picker-input rc-picker-input-end"
12851285
>
12861286
<input
12871287
aria-invalid="false"

0 commit comments

Comments
 (0)