Skip to content

Commit db75428

Browse files
zombieJzombieJ
committed
chore: fix logic
1 parent 5e712d1 commit db75428

File tree

6 files changed

+44
-25
lines changed

6 files changed

+44
-25
lines changed

‎src/BaseSelect/index.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -723,13 +723,13 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
723723
// };
724724
// }
725725

726-
// // Close when click on non-select element
727-
// useSelectTriggerControl(
728-
// () => [containerRef.current, triggerRef.current?.getPopupElement()],
729-
// triggerOpen,
730-
// onToggleOpen,
731-
// !!customizeRawInputElement,
732-
// );
726+
// Close when click on non-select element
727+
useSelectTriggerControl(
728+
() => [getDOM(containerRef.current), triggerRef.current?.getPopupElement()],
729+
mergedOpen,
730+
triggerOpen,
731+
!!customizeRawInputElement,
732+
);
733733

734734
// ============================ Context =============================
735735
const baseSelectContext = React.useMemo<BaseSelectContextProps>(

‎src/SelectInput/Affix.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import clsx from 'clsx';
23
import { useSelectInputContext } from './context';
34

45
export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -7,15 +8,15 @@ export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
78
}
89

910
export default function Affix(props: AffixProps) {
10-
const { type, children, ...restProps } = props;
11+
const { type, children, className, ...restProps } = props;
1112
const { prefixCls } = useSelectInputContext();
1213

1314
if (!children) {
1415
return null;
1516
}
1617

1718
return (
18-
<div className={`${prefixCls}-${type}`} {...restProps}>
19+
<div className={clsx(`${prefixCls}-${type}`, className)} {...restProps}>
1920
{children}
2021
</div>
2122
);

‎src/SelectInput/Input.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react';
2+
import clsx from 'clsx';
23
import { useSelectInputContext } from './context';
34
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
5+
import useBaseProps from '../hooks/useBaseProps';
46

57
export interface InputProps {
68
disabled?: boolean;
@@ -19,11 +21,12 @@ export interface InputProps {
1921
}
2022

2123
const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
22-
const { onChange, onKeyDown, onBlur, style, syncWidth, value, ...restProps } = props;
24+
const { onChange, onKeyDown, onBlur, style, syncWidth, value, className, ...restProps } = props;
2325
const { prefixCls, mode, onSearch, onSearchSubmit, onInputBlur, autoFocus } =
2426
useSelectInputContext();
27+
const { classNames, styles } = useBaseProps() || {};
2528

26-
const inputCls = `${prefixCls}-input`;
29+
const inputCls = clsx(`${prefixCls}-input`, classNames?.input, className);
2730

2831
// Used to handle input method composition status
2932
const compositionStatusRef = React.useRef<boolean>(false);
@@ -109,6 +112,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
109112
ref={inputRef}
110113
style={
111114
{
115+
...styles?.input,
112116
...style,
113117
'--select-input-width': widthCssVar,
114118
} as React.CSSProperties

‎src/SelectInput/index.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
9797
...restProps
9898
} = props;
9999

100-
const { triggerOpen, toggleOpen, showSearch, disabled } = useBaseProps();
100+
const { triggerOpen, toggleOpen, showSearch, disabled, classNames, styles } = useBaseProps();
101101

102102
const rootRef = React.useRef<HTMLDivElement>(null);
103103
const inputRef = React.useRef<HTMLInputElement>(null);
@@ -203,17 +203,23 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
203203
onBlur={onInternalBlur}
204204
>
205205
{/* Prefix */}
206-
<Affix type="prefix">{prefix}</Affix>
206+
<Affix type="prefix" className={classNames?.prefix} style={styles?.prefix}>
207+
{prefix}
208+
</Affix>
207209

208210
{/* Content */}
209211
<SelectContent ref={inputRef} />
210212

211213
{/* Suffix */}
212-
<Affix type="suffix">{suffix}</Affix>
214+
<Affix type="suffix" className={classNames?.suffix} style={styles?.suffix}>
215+
{suffix}
216+
</Affix>
213217
{/* Clear Icon */}
214218
{clearIcon && (
215219
<Affix
216220
type="clear"
221+
className={classNames?.suffix}
222+
style={styles?.suffix}
217223
onMouseDown={(e) => {
218224
// Mark to tell not trigger open or focus
219225
(e.nativeEvent as any)._select_lazy = true;

‎src/hooks/useSelectTriggerControl.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22

33
export default function useSelectTriggerControl(
4-
elements: () => (HTMLElement | undefined)[],
4+
elements: () => (HTMLElement | SVGElement | undefined)[],
55
open: boolean,
66
triggerOpen: (open: boolean) => void,
77
customizedTrigger: boolean,

‎tests/Select.test.tsx‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1558,7 +1558,7 @@ describe('Select.Basic', () => {
15581558
<Option value={1}>1</Option>
15591559
</Select>,
15601560
);
1561-
expect(container.querySelector('.rc-select-arrow-loading')).toBeTruthy();
1561+
expect(container.querySelector('.rc-select-suffix-loading')).toBeTruthy();
15621562
});
15631563
it('if loading and multiple which has not arrow, but have loading icon', () => {
15641564
const renderDemo = (loading?: boolean) => (
@@ -1569,11 +1569,11 @@ describe('Select.Basic', () => {
15691569
);
15701570

15711571
const { container, rerender } = render(renderDemo());
1572-
expect(container.querySelector('.rc-select-arrow-icon')).toBeFalsy();
1573-
expect(container.querySelector('.rc-select-arrow-loading')).toBeFalsy();
1572+
expect(container.querySelector('.rc-select-suffix-icon')).toBeFalsy();
1573+
expect(container.querySelector('.rc-select-suffix-loading')).toBeFalsy();
15741574

15751575
rerender(renderDemo(true));
1576-
expect(container.querySelector('.rc-select-arrow-loading')).toBeTruthy();
1576+
expect(container.querySelector('.rc-select-suffix-loading')).toBeTruthy();
15771577
});
15781578

15791579
it('should keep trigger onSelect by select', () => {
@@ -1799,6 +1799,8 @@ describe('Select.Basic', () => {
17991799
});
18001800

18011801
it('click outside to close select', () => {
1802+
jest.useFakeTimers();
1803+
18021804
const { container } = render(
18031805
<Select>
18041806
<Option value="1">One</Option>
@@ -1815,7 +1817,13 @@ describe('Select.Basic', () => {
18151817
window.dispatchEvent(clickEvent);
18161818
});
18171819

1820+
act(() => {
1821+
jest.runAllTimers();
1822+
});
1823+
18181824
expectOpen(container, false);
1825+
1826+
jest.useRealTimers();
18191827
});
18201828

18211829
describe('reset value to undefined should reset display value', () => {
@@ -2452,7 +2460,7 @@ describe('Select.Basic', () => {
24522460
open
24532461
classNames={customClassNames}
24542462
styles={customStyle}
2455-
suffixIcon={<div>arrow</div>}
2463+
suffix={<div>arrow</div>}
24562464
prefix="Foobar"
24572465
value={['bamboo']}
24582466
mode="multiple"
@@ -2464,10 +2472,10 @@ describe('Select.Basic', () => {
24642472
);
24652473

24662474
const prefix = container.querySelector('.rc-select-prefix');
2467-
const suffix = container.querySelector('.rc-select-arrow');
2475+
const suffix = container.querySelector('.rc-select-suffix');
24682476
const item = container.querySelector('.rc-select-item-option');
24692477
const list = container.querySelector('.rc-virtual-list');
2470-
const input = container.querySelector('.rc-select-selection-search-input');
2478+
const input = container.querySelector('input');
24712479
expect(prefix).toHaveClass(customClassNames.prefix);
24722480
expect(prefix).toHaveStyle(customStyle.prefix);
24732481
expect(suffix).toHaveClass(customClassNames.suffix);
@@ -2502,7 +2510,7 @@ describe('Select.Basic', () => {
25022510
open
25032511
classNames={customClassNames}
25042512
styles={customStyle}
2505-
suffixIcon={<div>arrow</div>}
2513+
suffix={<div>arrow</div>}
25062514
prefix="Foobar"
25072515
onDisplayValuesChange={() => {}}
25082516
searchValue=""
@@ -2512,8 +2520,8 @@ describe('Select.Basic', () => {
25122520
/>,
25132521
);
25142522
const prefix = container.querySelector('.rc-select-prefix');
2515-
const suffix = container.querySelector('.rc-select-arrow');
2516-
const input = container.querySelector('.rc-select-selection-search-input');
2523+
const suffix = container.querySelector('.rc-select-suffix');
2524+
const input = container.querySelector('input');
25172525
expect(prefix).toHaveClass(customClassNames.prefix);
25182526
expect(prefix).toHaveStyle(customStyle.prefix);
25192527
expect(suffix).toHaveClass(customClassNames.suffix);

0 commit comments

Comments
 (0)