Skip to content

Commit 4d77993

Browse files
aojunhao123aojunhao123
authored
feat: rename dropdown to popup (#1103)
* feat: rename dropdown to popup * chore: adjust some logic * test: add test case * chore: trigger CI build * refactor: remove compatible code
1 parent 4779fb8 commit 4d77993

13 files changed

+92
-84
lines changed

‎docs/examples/auto-adjust-dropdown.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ class Test extends React.Component {
3434
>
3535
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
3636
<div>
37-
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
37+
<Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
3838
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
3939
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
4040
<Option value="3">Jill</Option>
4141
</Select>
4242
</div>
4343
<div>
44-
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
44+
<Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
4545
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
4646
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>{' '}
4747
<Option value="3">Jill</Option>
@@ -50,7 +50,7 @@ class Test extends React.Component {
5050
</div>
5151
<div style={{ display: 'flex', justifyContent: 'center' }}>
5252
<div>
53-
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
53+
<Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
5454
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
5555
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
5656
<Option value="3">Jill</Option>
@@ -64,14 +64,14 @@ class Test extends React.Component {
6464
}}
6565
>
6666
<div>
67-
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
67+
<Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
6868
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
6969
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
7070
<Option value="3">Jill</Option>
7171
</Select>
7272
</div>
7373
<div>
74-
<Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
74+
<Select onChange={this.onChange} popupMatchSelectWidth={500} value={value}>
7575
<Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
7676
<Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
7777
<Option value="3">Jill</Option>

‎docs/examples/controlled.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ class Controlled extends React.Component<{}, ControlledState> {
4343
console.log('onFocus');
4444
};
4545

46-
onDropdownVisibleChange = (open) => {
46+
onPopupVisibleChange = (open) => {
4747
this.setState({ open });
4848
};
4949

@@ -68,7 +68,7 @@ class Controlled extends React.Component<{}, ControlledState> {
6868
optionLabelProp="children"
6969
optionFilterProp="text"
7070
onChange={this.onChange}
71-
onDropdownVisibleChange={this.onDropdownVisibleChange}
71+
onPopupVisibleChange={this.onPopupVisibleChange}
7272
>
7373
<Option value="01" text="jack" title="jack">
7474
<b

‎docs/examples/dropdownRender.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ class Test extends React.Component {
5050
tokenSeparators={[' ', ',']}
5151
onFocus={() => console.log('focus')}
5252
onBlur={() => console.log('blur')}
53-
dropdownRender={(menu) => (
53+
popupRender={(menu) => (
5454
<React.Fragment>
5555
<div
5656
onClick={() => {

‎docs/examples/getPopupContainer.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,9 @@ class Test extends React.Component {
7575
>
7676
<h3 style={{ width: '100%' }}>Transform: 150%</h3>
7777
<MySelect />
78-
<MySelect dropdownMatchSelectWidth />
79-
<MySelect dropdownMatchSelectWidth={false} />
80-
<MySelect dropdownMatchSelectWidth={300} />
78+
<MySelect popupMatchSelectWidth />
79+
<MySelect popupMatchSelectWidth={false} />
80+
<MySelect popupMatchSelectWidth={300} />
8181
</div>
8282
</div>
8383
);

‎docs/examples/single-animation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Test = () => (
2121
animation="slide-up"
2222
showSearch
2323
onChange={onChange}
24-
dropdownStyle={{
24+
popupStyle={{
2525
width: 'auto',
2626
}}
2727
>

‎docs/examples/single.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ class Test extends React.Component {
130130
id="my-select-rtl"
131131
placeholder="rtl"
132132
direction="rtl"
133-
dropdownMatchSelectWidth={300}
134-
dropdownStyle={{ minWidth: 300 }}
133+
popupMatchSelectWidth={300}
134+
popupStyle={{ minWidth: 300 }}
135135
style={{ width: 500 }}
136136
>
137137
<Option value="1">1</Option>

‎src/BaseSelect/index.tsx

+22-20
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
156156
// >>> Open
157157
open?: boolean;
158158
defaultOpen?: boolean;
159-
onDropdownVisibleChange?: (open: boolean) => void;
159+
onPopupVisibleChange?: (open: boolean) => void;
160160

161161
// >>> Customize Input
162162
/** @private Internal usage. Do not use in your production. */
@@ -184,14 +184,16 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
184184
/** Selector remove icon */
185185
removeIcon?: RenderNode;
186186

187-
// >>> Dropdown
187+
// >>> Dropdown/Popup
188188
animation?: string;
189189
transitionName?: string;
190-
dropdownStyle?: React.CSSProperties;
191-
dropdownClassName?: string;
192-
dropdownMatchSelectWidth?: boolean | number;
193-
dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
194-
dropdownAlign?: AlignType;
190+
191+
popupStyle?: React.CSSProperties;
192+
popupClassName?: string;
193+
popupMatchSelectWidth?: boolean | number;
194+
popupRender?: (menu: React.ReactElement) => React.ReactElement;
195+
popupAlign?: AlignType;
196+
195197
placement?: Placement;
196198
builtinPlacements?: BuildInPlacements;
197199
getPopupContainer?: RenderDOMFunc;
@@ -245,7 +247,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
245247
// Open
246248
open,
247249
defaultOpen,
248-
onDropdownVisibleChange,
250+
onPopupVisibleChange,
249251

250252
// Active
251253
activeValue,
@@ -269,11 +271,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
269271
OptionList,
270272
animation,
271273
transitionName,
272-
dropdownStyle,
273-
dropdownClassName,
274-
dropdownMatchSelectWidth,
275-
dropdownRender,
276-
dropdownAlign,
274+
popupStyle,
275+
popupClassName,
276+
popupMatchSelectWidth,
277+
popupRender,
278+
popupAlign,
277279
placement,
278280
builtinPlacements,
279281
getPopupContainer,
@@ -389,11 +391,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
389391
setInnerOpen(nextOpen);
390392

391393
if (mergedOpen !== nextOpen) {
392-
onDropdownVisibleChange?.(nextOpen);
394+
onPopupVisibleChange?.(nextOpen);
393395
}
394396
}
395397
},
396-
[disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange],
398+
[disabled, mergedOpen, setInnerOpen, onPopupVisibleChange],
397399
);
398400

399401
// ============================= Search =============================
@@ -767,12 +769,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
767769
popupElement={optionList}
768770
animation={animation}
769771
transitionName={transitionName}
770-
dropdownStyle={dropdownStyle}
771-
dropdownClassName={dropdownClassName}
772+
popupStyle={popupStyle}
773+
popupClassName={popupClassName}
772774
direction={direction}
773-
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
774-
dropdownRender={dropdownRender}
775-
dropdownAlign={dropdownAlign}
775+
popupMatchSelectWidth={popupMatchSelectWidth}
776+
popupRender={popupRender}
777+
popupAlign={popupAlign}
776778
placement={placement}
777779
builtinPlacements={builtinPlacements}
778780
getPopupContainer={getPopupContainer}

‎src/Select.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
180180
// Select
181181
onSelect,
182182
onDeselect,
183-
dropdownMatchSelectWidth = true,
183+
popupMatchSelectWidth = true,
184184

185185
// Options
186186
filterOption,
@@ -609,7 +609,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
609609

610610
// ========================== Context ===========================
611611
const selectContext = React.useMemo<SelectContextProps>(() => {
612-
const realVirtual = virtual !== false && dropdownMatchSelectWidth !== false;
612+
const realVirtual = virtual !== false && popupMatchSelectWidth !== false;
613613
return {
614614
...parsedOptions,
615615
flattenOptions: displayOptions,
@@ -638,7 +638,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
638638
rawValues,
639639
mergedFieldNames,
640640
virtual,
641-
dropdownMatchSelectWidth,
641+
popupMatchSelectWidth,
642642
direction,
643643
listHeight,
644644
listItemHeight,
@@ -675,7 +675,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
675675
onSearch={onInternalSearch}
676676
autoClearSearchValue={autoClearSearchValue}
677677
onSearchSplit={onInternalSearchSplit}
678-
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
678+
popupMatchSelectWidth={popupMatchSelectWidth}
679679
// >>> OptionList
680680
OptionList={OptionList}
681681
emptyOptions={!displayOptions.length}

‎src/SelectTrigger.tsx

+35-29
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ import * as React from 'react';
55
import type { Placement, RenderDOMFunc } from './BaseSelect';
66

77
const getBuiltInPlacements = (
8-
dropdownMatchSelectWidth: number | boolean,
8+
popupMatchSelectWidth: number | boolean,
99
): Record<string, AlignType> => {
1010
// Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
11-
const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
11+
const adjustX = popupMatchSelectWidth === true ? 0 : 1;
1212
return {
1313
bottomLeft: {
1414
points: ['tl', 'bl'],
@@ -64,13 +64,13 @@ export interface SelectTriggerProps {
6464
transitionName?: string;
6565
placement?: Placement;
6666
builtinPlacements?: BuildInPlacements;
67-
dropdownStyle: React.CSSProperties;
68-
dropdownClassName: string;
67+
popupStyle: React.CSSProperties;
68+
popupClassName: string;
6969
direction: string;
70-
dropdownMatchSelectWidth?: boolean | number;
71-
dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
70+
popupMatchSelectWidth?: boolean | number;
71+
popupRender?: (menu: React.ReactElement) => React.ReactElement;
7272
getPopupContainer?: RenderDOMFunc;
73-
dropdownAlign: AlignType;
73+
popupAlign: AlignType;
7474
empty: boolean;
7575

7676
getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
@@ -91,14 +91,14 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
9191
popupElement,
9292
animation,
9393
transitionName,
94-
dropdownStyle,
95-
dropdownClassName,
94+
popupStyle,
95+
popupClassName,
9696
direction = 'ltr',
9797
placement,
9898
builtinPlacements,
99-
dropdownMatchSelectWidth,
100-
dropdownRender,
101-
dropdownAlign,
99+
popupMatchSelectWidth,
100+
popupRender,
101+
popupAlign,
102102
getPopupContainer,
103103
empty,
104104
getTriggerDOMNode,
@@ -107,38 +107,44 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
107107
...restProps
108108
} = props;
109109

110-
const dropdownPrefixCls = `${prefixCls}-dropdown`;
110+
// We still use `dropdown` className to keep compatibility
111+
// This is used for:
112+
// 1. Styles
113+
// 2. Animation
114+
// 3. Theme customization
115+
// Please do not modify this since it's a breaking change
116+
const popupPrefixCls = `${prefixCls}-dropdown`;
111117

112118
let popupNode = popupElement;
113-
if (dropdownRender) {
114-
popupNode = dropdownRender(popupElement);
119+
if (popupRender) {
120+
popupNode = popupRender(popupElement);
115121
}
116122

117123
const mergedBuiltinPlacements = React.useMemo(
118-
() => builtinPlacements || getBuiltInPlacements(dropdownMatchSelectWidth),
119-
[builtinPlacements, dropdownMatchSelectWidth],
124+
() => builtinPlacements || getBuiltInPlacements(popupMatchSelectWidth),
125+
[builtinPlacements, popupMatchSelectWidth],
120126
);
121127

122128
// ===================== Motion ======================
123-
const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
129+
const mergedTransitionName = animation ? `${popupPrefixCls}-${animation}` : transitionName;
124130

125131
// =================== Popup Width ===================
126-
const isNumberPopupWidth = typeof dropdownMatchSelectWidth === 'number';
132+
const isNumberPopupWidth = typeof popupMatchSelectWidth === 'number';
127133

128134
const stretch = React.useMemo(() => {
129135
if (isNumberPopupWidth) {
130136
return null;
131137
}
132138

133-
return dropdownMatchSelectWidth === false ? 'minWidth' : 'width';
134-
}, [dropdownMatchSelectWidth, isNumberPopupWidth]);
139+
return popupMatchSelectWidth === false ? 'minWidth' : 'width';
140+
}, [popupMatchSelectWidth, isNumberPopupWidth]);
135141

136-
let popupStyle = dropdownStyle;
142+
let mergedPopupStyle = popupStyle;
137143

138144
if (isNumberPopupWidth) {
139-
popupStyle = {
145+
mergedPopupStyle = {
140146
...popupStyle,
141-
width: dropdownMatchSelectWidth,
147+
width: popupMatchSelectWidth,
142148
};
143149
}
144150

@@ -156,18 +162,18 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
156162
hideAction={onPopupVisibleChange ? ['click'] : []}
157163
popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
158164
builtinPlacements={mergedBuiltinPlacements}
159-
prefixCls={dropdownPrefixCls}
165+
prefixCls={popupPrefixCls}
160166
popupTransitionName={mergedTransitionName}
161167
popup={<div onMouseEnter={onPopupMouseEnter}>{popupNode}</div>}
162168
ref={triggerPopupRef}
163169
stretch={stretch}
164-
popupAlign={dropdownAlign}
170+
popupAlign={popupAlign}
165171
popupVisible={visible}
166172
getPopupContainer={getPopupContainer}
167-
popupClassName={classNames(dropdownClassName, {
168-
[`${dropdownPrefixCls}-empty`]: empty,
173+
popupClassName={classNames(popupClassName, {
174+
[`${popupPrefixCls}-empty`]: empty,
169175
})}
170-
popupStyle={popupStyle}
176+
popupStyle={mergedPopupStyle}
171177
getTriggerDOMNode={getTriggerDOMNode}
172178
onPopupVisibleChange={onPopupVisibleChange}
173179
>

‎tests/Combobox.test.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -455,16 +455,16 @@ describe('Select.Combobox', () => {
455455
// https://github.com/ant-design/ant-design/issues/16572
456456
it('close when enter press without active option', () => {
457457
jest.useFakeTimers();
458-
const onDropdownVisibleChange = jest.fn();
458+
const onPopupVisibleChange = jest.fn();
459459
const { container } = render(
460-
<Select mode="combobox" open onDropdownVisibleChange={onDropdownVisibleChange}>
460+
<Select mode="combobox" open onPopupVisibleChange={onPopupVisibleChange}>
461461
<Option value="One">One</Option>
462462
<Option value="Two">Two</Option>
463463
</Select>,
464464
);
465465
keyDown(container.querySelector('input')!, KeyCode.ENTER);
466466
jest.runAllTimers();
467-
expect(onDropdownVisibleChange).toHaveBeenCalledWith(false);
467+
expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
468468
jest.useRealTimers();
469469
});
470470

0 commit comments

Comments
 (0)