Skip to content

Commit bb96acb

Browse files
MadCccMadCcc
authored
feat: support classNames and styles (#38)
1 parent d17633e commit bb96acb

File tree

7 files changed

+116
-108
lines changed

7 files changed

+116
-108
lines changed

‎src/BaseInput.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import clsx from 'classnames';
22
import type { FC, ReactElement } from 'react';
33
import React, { cloneElement, useRef } from 'react';
44
import type { BaseInputProps } from './interface';
@@ -14,9 +14,6 @@ const BaseInput: FC<BaseInputProps> = (props) => {
1414
addonAfter,
1515
className,
1616
style,
17-
affixWrapperClassName,
18-
groupClassName,
19-
wrapperClassName,
2017
disabled,
2118
readOnly,
2219
focused,
@@ -25,9 +22,10 @@ const BaseInput: FC<BaseInputProps> = (props) => {
2522
value,
2623
handleReset,
2724
hidden,
28-
inputStyle,
2925
classes,
26+
classNames,
3027
dataAttrs,
28+
styles,
3129
} = props;
3230

3331
const containerRef = useRef<HTMLSpanElement>(null);
@@ -56,7 +54,7 @@ const BaseInput: FC<BaseInputProps> = (props) => {
5654
// Do not trigger onBlur when clear input
5755
// https://github.com/ant-design/ant-design/issues/31200
5856
onMouseDown={(e) => e.preventDefault()}
59-
className={classNames(clearIconCls, {
57+
className={clsx(clearIconCls, {
6058
[`${clearIconCls}-hidden`]: !needClear,
6159
[`${clearIconCls}-has-suffix`]: !!suffix,
6260
})}
@@ -72,20 +70,19 @@ const BaseInput: FC<BaseInputProps> = (props) => {
7270
value,
7371
hidden,
7472
className:
75-
classNames(
73+
clsx(
7674
inputElement.props?.className,
7775
!hasPrefixSuffix(props) && !hasAddon(props) && className,
7876
) || null,
7977
style: {
8078
...inputElement.props?.style,
81-
...inputStyle,
8279
},
8380
});
8481

8582
// ================== Prefix & Suffix ================== //
8683
if (hasPrefixSuffix(props)) {
8784
const affixWrapperPrefixCls = `${prefixCls}-affix-wrapper`;
88-
const affixWrapperCls = classNames(
85+
const affixWrapperCls = clsx(
8986
affixWrapperPrefixCls,
9087
{
9188
[`${affixWrapperPrefixCls}-disabled`]: disabled,
@@ -95,12 +92,14 @@ const BaseInput: FC<BaseInputProps> = (props) => {
9592
suffix && allowClear && value,
9693
},
9794
!hasAddon(props) && className,
98-
affixWrapperClassName,
9995
classes?.affixWrapper,
10096
);
10197

10298
const suffixNode = (suffix || allowClear) && (
103-
<span className={`${prefixCls}-suffix`}>
99+
<span
100+
className={clsx(`${prefixCls}-suffix`, classNames?.suffix)}
101+
style={styles?.suffix}
102+
>
104103
{getClearIcon()}
105104
{suffix}
106105
</span>
@@ -115,9 +114,15 @@ const BaseInput: FC<BaseInputProps> = (props) => {
115114
{...dataAttrs?.affixWrapper}
116115
ref={containerRef}
117116
>
118-
{prefix && <span className={`${prefixCls}-prefix`}>{prefix}</span>}
117+
{prefix && (
118+
<span
119+
className={clsx(`${prefixCls}-prefix`, classNames?.prefix)}
120+
style={styles?.prefix}
121+
>
122+
{prefix}
123+
</span>
124+
)}
119125
{cloneElement(inputElement, {
120-
style: inputStyle ?? null,
121126
value,
122127
hidden: null,
123128
})}
@@ -131,17 +136,15 @@ const BaseInput: FC<BaseInputProps> = (props) => {
131136
const wrapperCls = `${prefixCls}-group`;
132137
const addonCls = `${wrapperCls}-addon`;
133138

134-
const mergedWrapperClassName = classNames(
139+
const mergedWrapperClassName = clsx(
135140
`${prefixCls}-wrapper`,
136141
wrapperCls,
137-
wrapperClassName,
138142
classes?.wrapper,
139143
);
140144

141-
const mergedGroupClassName = classNames(
145+
const mergedGroupClassName = clsx(
142146
`${prefixCls}-group-wrapper`,
143147
className,
144-
groupClassName,
145148
classes?.group,
146149
);
147150

@@ -152,7 +155,6 @@ const BaseInput: FC<BaseInputProps> = (props) => {
152155
<span className={mergedWrapperClassName}>
153156
{addonBefore && <span className={addonCls}>{addonBefore}</span>}
154157
{cloneElement(element, {
155-
style: inputStyle ?? null,
156158
hidden: null,
157159
})}
158160
{addonAfter && <span className={addonCls}>{addonAfter}</span>}

‎src/Input.tsx‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import clsx from 'classnames';
22
import useMergedState from 'rc-util/lib/hooks/useMergedState';
33
import omit from 'rc-util/lib/omit';
44
import React, {
@@ -33,8 +33,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
3333
suffix,
3434
showCount,
3535
type = 'text',
36-
inputClassName,
3736
classes,
37+
classNames,
38+
styles,
3839
...rest
3940
} = props;
4041

@@ -121,12 +122,10 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
121122
// specify either the value prop, or the defaultValue prop, but not both.
122123
'defaultValue',
123124
'showCount',
124-
'affixWrapperClassName',
125-
'groupClassName',
126-
'inputClassName',
127125
'classes',
128-
'wrapperClassName',
129126
'htmlSize',
127+
'styles',
128+
'classNames',
130129
]);
131130
return (
132131
<input
@@ -136,14 +135,14 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
136135
onFocus={handleFocus}
137136
onBlur={handleBlur}
138137
onKeyDown={handleKeyDown}
139-
className={classNames(
138+
className={clsx(
140139
prefixCls,
141140
{
142141
[`${prefixCls}-disabled`]: disabled,
143142
},
144-
inputClassName,
145-
classes?.input,
143+
classNames?.input,
146144
)}
145+
style={styles?.input}
147146
ref={inputRef}
148147
size={htmlSize}
149148
type={type}
@@ -167,9 +166,16 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
167166
<>
168167
{!!showCount && (
169168
<span
170-
className={classNames(`${prefixCls}-show-count-suffix`, {
171-
[`${prefixCls}-show-count-has-suffix`]: !!suffix,
172-
})}
169+
className={clsx(
170+
`${prefixCls}-show-count-suffix`,
171+
{
172+
[`${prefixCls}-show-count-has-suffix`]: !!suffix,
173+
},
174+
classNames?.count,
175+
)}
176+
style={{
177+
...styles?.count,
178+
}}
173179
>
174180
{dataCount}
175181
</span>
@@ -194,6 +200,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
194200
suffix={getSuffix()}
195201
disabled={disabled}
196202
classes={classes}
203+
classNames={classNames}
204+
styles={styles}
197205
/>
198206
);
199207
});

‎src/interface.ts‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import type {
66
ReactElement,
77
ReactNode,
88
} from 'react';
9-
import type { LiteralUnion } from './utils/types';
109
import type { InputFocusOptions } from './utils/commonUtils';
10+
import type { LiteralUnion } from './utils/types';
1111

1212
export interface CommonInputProps {
1313
prefix?: ReactNode;
@@ -19,12 +19,14 @@ export interface CommonInputProps {
1919
group?: string;
2020
wrapper?: string;
2121
};
22-
/** @deprecated Use classes instead */
23-
affixWrapperClassName?: string;
24-
/** @deprecated Use classes instead */
25-
groupClassName?: string;
26-
/** @deprecated Use classes instead */
27-
wrapperClassName?: string;
22+
classNames?: {
23+
prefix?: string;
24+
suffix?: string;
25+
};
26+
styles?: {
27+
prefix?: CSSProperties;
28+
suffix?: CSSProperties;
29+
};
2830
allowClear?: boolean | { clearIcon?: ReactNode };
2931
}
3032

@@ -42,7 +44,6 @@ export interface BaseInputProps extends CommonInputProps {
4244
readOnly?: boolean;
4345
handleReset?: MouseEventHandler;
4446
hidden?: boolean;
45-
inputStyle?: CSSProperties;
4647
dataAttrs?: {
4748
affixWrapper?: DataAttr;
4849
};
@@ -90,10 +91,13 @@ export interface InputProps
9091
showCount?: boolean | ShowCountProps;
9192
autoComplete?: string;
9293
htmlSize?: number;
93-
/** @deprecated Use classes instead */
94-
inputClassName?: string;
95-
classes?: CommonInputProps['classes'] & {
94+
classNames?: CommonInputProps['classNames'] & {
9695
input?: string;
96+
count?: string;
97+
};
98+
styles?: CommonInputProps['styles'] & {
99+
input?: CSSProperties;
100+
count?: CSSProperties;
97101
};
98102
}
99103

‎tests/BaseInput.test.tsx‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -130,31 +130,6 @@ describe('BaseInput', () => {
130130
expect(document.activeElement).toBe(container.querySelector('input'));
131131
});
132132

133-
it('should support inputStyle', () => {
134-
const { container } = render(
135-
<>
136-
<BaseInput
137-
prefixCls="rc-input"
138-
inputStyle={{ marginTop: 200 }}
139-
inputElement={<input style={{ marginLeft: 100 }} />}
140-
/>
141-
<BaseInput
142-
prefixCls="rc-input"
143-
prefix="prefix"
144-
inputStyle={{ marginTop: 200 }}
145-
inputElement={<input style={{ marginLeft: 100 }} />}
146-
/>
147-
<BaseInput
148-
prefixCls="rc-input"
149-
addonBefore="addon"
150-
inputStyle={{ marginTop: 200 }}
151-
inputElement={<input style={{ marginLeft: 100 }} />}
152-
/>
153-
</>,
154-
);
155-
expect(container).toMatchSnapshot();
156-
});
157-
158133
it('should support data-*', () => {
159134
const { container } = render(
160135
<BaseInput

‎tests/__snapshots__/BaseInput.test.tsx.snap‎

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -111,42 +111,3 @@ exports[`BaseInput should render perfectly 1`] = `
111111
/>
112112
</div>
113113
`;
114-
115-
exports[`BaseInput should support inputStyle 1`] = `
116-
<div>
117-
<input
118-
style="margin-left: 100px; margin-top: 200px;"
119-
value=""
120-
/>
121-
<span
122-
class="rc-input-affix-wrapper"
123-
>
124-
<span
125-
class="rc-input-prefix"
126-
>
127-
prefix
128-
</span>
129-
<input
130-
style="margin-top: 200px;"
131-
value=""
132-
/>
133-
</span>
134-
<span
135-
class="rc-input-group-wrapper"
136-
>
137-
<span
138-
class="rc-input-wrapper rc-input-group"
139-
>
140-
<span
141-
class="rc-input-group-addon"
142-
>
143-
addon
144-
</span>
145-
<input
146-
style="margin-top: 200px;"
147-
value=""
148-
/>
149-
</span>
150-
</span>
151-
</div>
152-
`;

‎tests/__snapshots__/index.test.tsx.snap‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,38 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Input allowClear classNames and styles should work 1`] = `
4+
<div>
5+
<span
6+
class="rc-input-affix-wrapper"
7+
>
8+
<span
9+
class="rc-input-prefix custom-prefix"
10+
style="color: blue;"
11+
>
12+
prefix
13+
</span>
14+
<input
15+
class="rc-input custom-input"
16+
style="color: red;"
17+
type="text"
18+
value="123"
19+
/>
20+
<span
21+
class="rc-input-suffix custom-suffix"
22+
style="color: yellow;"
23+
>
24+
<span
25+
class="rc-input-show-count-suffix rc-input-show-count-has-suffix custom-count"
26+
style="color: green;"
27+
>
28+
3
29+
</span>
30+
suffix
31+
</span>
32+
</span>
33+
</div>
34+
`;
35+
336
exports[`Input allowClear should change type when click 1`] = `
437
<div>
538
<span

0 commit comments

Comments
 (0)