Skip to content

Commit 2b14e52

Browse files
zombieJzombieJ
committed
chore: more and more
1 parent 83cd06f commit 2b14e52

File tree

5 files changed

+98
-93
lines changed

5 files changed

+98
-93
lines changed

‎src/BaseSelect/index.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import { getSeparatedContent, isValidCount } from '../utils/valueUtil';
3232
import Polite from './Polite';
3333
import useOpen from '../hooks/useOpen';
3434
import { useEvent } from '@rc-component/util';
35-
export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
35+
export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
3636

3737
/**
3838
* ZombieJ:
@@ -582,16 +582,16 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
582582
onKeyDown?.(event);
583583
};
584584

585-
// // KeyUp
586-
// const onInternalKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event, ...rest) => {
587-
// if (mergedOpen) {
588-
// listRef.current?.onKeyUp(event, ...rest);
589-
// }
590-
// if (event.key === 'Enter') {
591-
// keyLockRef.current = false;
592-
// }
593-
// onKeyUp?.(event, ...rest);
594-
// };
585+
// KeyUp
586+
const onInternalKeyUp: React.KeyboardEventHandler<HTMLDivElement> = (event, ...rest) => {
587+
if (mergedOpen) {
588+
listRef.current?.onKeyUp(event, ...rest);
589+
}
590+
if (event.key === 'Enter') {
591+
keyLockRef.current = false;
592+
}
593+
onKeyUp?.(event, ...rest);
594+
};
595595

596596
// ============================ Selector ============================
597597
const onSelectorRemove = useEvent((val: DisplayValueType) => {
@@ -937,6 +937,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
937937
onBlur={onInternalBlur}
938938
onClearMouseDown={onClearMouseDown}
939939
onKeyDown={onInternalKeyDown}
940+
onKeyUp={onInternalKeyUp}
940941
onSelectorRemove={onSelectorRemove}
941942
// Open
942943
onMouseDown={onInternalMouseDown}

‎src/SelectInput/Affix.tsx‎

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

53
export interface AffixProps extends React.HTMLAttributes<HTMLDivElement> {
6-
type: 'prefix' | 'suffix' | 'clear';
74
children?: React.ReactNode;
85
}
96

7+
// Affix is a simple wrapper which should not read context or logical props
108
export default function Affix(props: AffixProps) {
11-
const { type, children, className, ...restProps } = props;
12-
const { prefixCls } = useSelectInputContext();
9+
const { children, ...restProps } = props;
1310

1411
if (!children) {
1512
return null;
1613
}
1714

18-
return (
19-
<div className={clsx(`${prefixCls}-${type}`, className)} {...restProps}>
20-
{children}
21-
</div>
22-
);
15+
return <div {...restProps}>{children}</div>;
2316
}

‎src/SelectInput/Content/SingleContent.tsx‎

Lines changed: 65 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -7,78 +7,79 @@ import Placeholder from './Placeholder';
77
import type { SharedContentProps } from '.';
88
import SelectContext from '../../SelectContext';
99

10-
export default React.forwardRef<HTMLInputElement, SharedContentProps>(function SingleContent(
11-
{ inputProps },
12-
ref,
13-
) {
14-
const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode } =
15-
useSelectInputContext();
16-
const { triggerOpen } = useBaseProps();
17-
const selectContext = React.useContext(SelectContext);
10+
const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
11+
({ inputProps }, ref) => {
12+
const { prefixCls, searchValue, activeValue, displayValues, maxLength, mode } =
13+
useSelectInputContext();
14+
const { triggerOpen } = useBaseProps();
15+
const selectContext = React.useContext(SelectContext);
1816

19-
const [inputChanged, setInputChanged] = React.useState(false);
17+
const [inputChanged, setInputChanged] = React.useState(false);
2018

21-
const combobox = mode === 'combobox';
22-
const displayValue = displayValues[0];
19+
const combobox = mode === 'combobox';
20+
const displayValue = displayValues[0];
2321

24-
// Implement the same logic as the old SingleSelector
25-
const mergedSearchValue = React.useMemo(() => {
26-
if (combobox && activeValue && !inputChanged && triggerOpen) {
27-
return activeValue;
28-
}
22+
// Implement the same logic as the old SingleSelector
23+
const mergedSearchValue = React.useMemo(() => {
24+
if (combobox && activeValue && !inputChanged && triggerOpen) {
25+
return activeValue;
26+
}
2927

30-
return searchValue || '';
31-
}, [combobox, activeValue, inputChanged, triggerOpen, searchValue]);
28+
return searchValue || '';
29+
}, [combobox, activeValue, inputChanged, triggerOpen, searchValue]);
3230

33-
// Extract option props, excluding label and value, and handle className/style merging
34-
const optionProps = React.useMemo(() => {
35-
let restProps: React.HTMLAttributes<HTMLDivElement> = {
36-
className: `${prefixCls}-content-value`,
37-
style: {
38-
visibility: mergedSearchValue ? 'hidden' : 'visible',
39-
},
40-
};
31+
// Extract option props, excluding label and value, and handle className/style merging
32+
const optionProps = React.useMemo(() => {
33+
let restProps: React.HTMLAttributes<HTMLDivElement> = {
34+
className: `${prefixCls}-content-value`,
35+
style: {
36+
visibility: mergedSearchValue ? 'hidden' : 'visible',
37+
},
38+
};
4139

42-
if (displayValue && selectContext?.flattenOptions) {
43-
const option = selectContext.flattenOptions.find((opt) => opt.value === displayValue.value);
44-
if (option?.data) {
45-
const { label, value, className, style, ...rest } = option.data;
40+
if (displayValue && selectContext?.flattenOptions) {
41+
const option = selectContext.flattenOptions.find((opt) => opt.value === displayValue.value);
42+
if (option?.data) {
43+
const { label, value, className, style, key, ...rest } = option.data;
4644

47-
restProps = {
48-
...restProps,
49-
...rest,
50-
className: clsx(restProps.className, className),
51-
style: { ...restProps.style, ...style },
52-
};
45+
restProps = {
46+
...restProps,
47+
...rest,
48+
className: clsx(restProps.className, className),
49+
style: { ...restProps.style, ...style },
50+
};
51+
}
5352
}
54-
}
5553

56-
return restProps;
57-
}, [displayValue, selectContext?.flattenOptions, prefixCls, mergedSearchValue]);
54+
return restProps;
55+
}, [displayValue, selectContext?.flattenOptions, prefixCls, mergedSearchValue]);
56+
57+
React.useEffect(() => {
58+
if (combobox) {
59+
setInputChanged(false);
60+
}
61+
}, [combobox, activeValue]);
5862

59-
React.useEffect(() => {
60-
if (combobox) {
61-
setInputChanged(false);
62-
}
63-
}, [combobox, activeValue]);
63+
return (
64+
<div className={`${prefixCls}-content`}>
65+
{displayValue ? (
66+
<div {...optionProps}>{displayValue.label}</div>
67+
) : (
68+
<Placeholder hasSearchValue={!!mergedSearchValue} />
69+
)}
70+
<Input
71+
ref={ref}
72+
{...inputProps}
73+
value={mergedSearchValue}
74+
maxLength={mode === 'combobox' ? maxLength : undefined}
75+
onChange={(e) => {
76+
setInputChanged(true);
77+
inputProps.onChange?.(e);
78+
}}
79+
/>
80+
</div>
81+
);
82+
},
83+
);
6484

65-
return (
66-
<div className={`${prefixCls}-content`}>
67-
{displayValue ? (
68-
<div {...optionProps}>{displayValue.label}</div>
69-
) : (
70-
<Placeholder hasSearchValue={!!mergedSearchValue} />
71-
)}
72-
<Input
73-
ref={ref}
74-
{...inputProps}
75-
value={mergedSearchValue}
76-
maxLength={mode === 'combobox' ? maxLength : undefined}
77-
onChange={(e) => {
78-
setInputChanged(true);
79-
inputProps.onChange?.(e);
80-
}}
81-
/>
82-
</div>
83-
);
84-
});
85+
export default SingleContent;

‎src/SelectInput/index.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import useBaseProps from '../hooks/useBaseProps';
3939
import { omit, useEvent } from '@rc-component/util';
4040
import KeyCode from '@rc-component/util/lib/KeyCode';
4141
import { isValidateOpenKey } from '../utils/keyUtil';
42+
import clsx from 'clsx';
4243

4344
const DEFAULT_OMIT_PROPS = [
4445
'value',
@@ -98,7 +99,8 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
9899
...restProps
99100
} = props;
100101

101-
const { triggerOpen, toggleOpen, showSearch, disabled, classNames, styles } = useBaseProps();
102+
const { triggerOpen, toggleOpen, showSearch, disabled, loading, classNames, styles } =
103+
useBaseProps();
102104

103105
const rootRef = React.useRef<HTMLDivElement>(null);
104106
const inputRef = React.useRef<HTMLInputElement>(null);
@@ -204,23 +206,31 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
204206
onBlur={onInternalBlur}
205207
>
206208
{/* Prefix */}
207-
<Affix type="prefix" className={classNames?.prefix} style={styles?.prefix}>
209+
<Affix className={clsx(`${prefixCls}-prefix`, classNames?.prefix)} style={styles?.prefix}>
208210
{prefix}
209211
</Affix>
210212

211213
{/* Content */}
212214
<SelectContent ref={inputRef} />
213215

214216
{/* Suffix */}
215-
<Affix type="suffix" className={classNames?.suffix} style={styles?.suffix}>
217+
<Affix
218+
className={clsx(
219+
`${prefixCls}-suffix`,
220+
{
221+
[`${prefixCls}-suffix-loading`]: loading,
222+
},
223+
classNames?.suffix,
224+
)}
225+
style={styles?.suffix}
226+
>
216227
{suffix}
217228
</Affix>
218229
{/* Clear Icon */}
219230
{clearIcon && (
220231
<Affix
221-
type="clear"
222-
className={classNames?.suffix}
223-
style={styles?.suffix}
232+
className={clsx(`${prefixCls}-clear`, classNames?.clear)}
233+
style={styles?.clear}
224234
onMouseDown={(e) => {
225235
// Mark to tell not trigger open or focus
226236
(e.nativeEvent as any)._select_lazy = true;

‎tests/Select.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1572,7 +1572,7 @@ describe('Select.Basic', () => {
15721572

15731573
it('if loading, arrow should show loading icon', () => {
15741574
const { container } = render(
1575-
<Select style={{ width: 1000 }} loading>
1575+
<Select style={{ width: 1000 }} loading suffix="Bamboo">
15761576
<Option value={0}>0</Option>
15771577
<Option value={1}>1</Option>
15781578
</Select>,
@@ -1581,7 +1581,7 @@ describe('Select.Basic', () => {
15811581
});
15821582
it('if loading and multiple which has not arrow, but have loading icon', () => {
15831583
const renderDemo = (loading?: boolean) => (
1584-
<Select style={{ width: 1000 }} mode="multiple" loading={loading}>
1584+
<Select style={{ width: 1000 }} mode="multiple" loading={loading} suffix="Bamboo">
15851585
<Option value={0}>0</Option>
15861586
<Option value={1}>1</Option>
15871587
</Select>

0 commit comments

Comments
 (0)