Skip to content

Commit 72e4d5c

Browse files
committed
refactor: remove compatible code
1 parent 06a2dc5 commit 72e4d5c

14 files changed

+44
-178
lines changed

docs/examples/auto-adjust-dropdown.tsx

Lines changed: 5 additions & 5 deletions
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 3 additions & 3 deletions
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

Lines changed: 1 addition & 1 deletion
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

Lines changed: 2 additions & 2 deletions
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

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -156,8 +156,6 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
156156
// >>> Open
157157
open?: boolean;
158158
defaultOpen?: boolean;
159-
/** @deprecated Please use `onPopupVisibleChange` instead */
160-
onDropdownVisibleChange?: (open: boolean) => void;
161159
onPopupVisibleChange?: (open: boolean) => void;
162160

163161
// >>> Customize Input
@@ -190,24 +188,10 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
190188
animation?: string;
191189
transitionName?: string;
192190

193-
/** @deprecated Please use `popupStyle` instead */
194-
dropdownStyle?: React.CSSProperties;
195191
popupStyle?: React.CSSProperties;
196-
197-
/** @deprecated Please use `popupClassName` instead */
198-
dropdownClassName?: string;
199192
popupClassName?: string;
200-
201-
/** @deprecated Please use `popupMatchSelectWidth` instead */
202-
dropdownMatchSelectWidth?: boolean | number;
203193
popupMatchSelectWidth?: boolean | number;
204-
205-
/** @deprecated Please use `popupRender` instead */
206-
dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
207194
popupRender?: (menu: React.ReactElement) => React.ReactElement;
208-
209-
/** @deprecated Please use `popupAlign` instead */
210-
dropdownAlign?: AlignType;
211195
popupAlign?: AlignType;
212196

213197
placement?: Placement;
@@ -263,7 +247,6 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
263247
// Open
264248
open,
265249
defaultOpen,
266-
onDropdownVisibleChange,
267250
onPopupVisibleChange,
268251

269252
// Active
@@ -288,15 +271,10 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
288271
OptionList,
289272
animation,
290273
transitionName,
291-
dropdownStyle,
292274
popupStyle,
293-
dropdownClassName,
294275
popupClassName,
295-
dropdownMatchSelectWidth,
296276
popupMatchSelectWidth,
297-
dropdownRender,
298277
popupRender,
299-
dropdownAlign,
300278
popupAlign,
301279
placement,
302280
builtinPlacements,
@@ -333,12 +311,6 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
333311
delete domProps[propName];
334312
});
335313

336-
// ============================= Compitable =============================
337-
const mergedPopupStyle = popupStyle ?? dropdownStyle;
338-
const mergedPopupClassName = popupClassName ?? dropdownClassName;
339-
const mergedPopupRender = popupRender ?? dropdownRender;
340-
const mergedPopupAlign = popupAlign ?? dropdownAlign;
341-
const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth;
342314
// ============================= Mobile =============================
343315
const [mobile, setMobile] = React.useState(false);
344316
React.useEffect(() => {
@@ -419,12 +391,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
419391
setInnerOpen(nextOpen);
420392

421393
if (mergedOpen !== nextOpen) {
422-
onDropdownVisibleChange?.(nextOpen);
423394
onPopupVisibleChange?.(nextOpen);
424395
}
425396
}
426397
},
427-
[disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange, onPopupVisibleChange],
398+
[disabled, mergedOpen, setInnerOpen, onPopupVisibleChange],
428399
);
429400

430401
// ============================= Search =============================
@@ -798,12 +769,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
798769
popupElement={optionList}
799770
animation={animation}
800771
transitionName={transitionName}
801-
popupStyle={mergedPopupStyle}
802-
popupClassName={mergedPopupClassName}
772+
popupStyle={popupStyle}
773+
popupClassName={popupClassName}
803774
direction={direction}
804-
popupMatchSelectWidth={mergedPopupMatchSelectWidth}
805-
popupRender={mergedPopupRender}
806-
popupAlign={mergedPopupAlign}
775+
popupMatchSelectWidth={popupMatchSelectWidth}
776+
popupRender={popupRender}
777+
popupAlign={popupAlign}
807778
placement={placement}
808779
builtinPlacements={builtinPlacements}
809780
getPopupContainer={getPopupContainer}

src/Select.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,8 +180,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
180180
// Select
181181
onSelect,
182182
onDeselect,
183-
dropdownMatchSelectWidth = true,
184-
popupMatchSelectWidth = dropdownMatchSelectWidth,
183+
popupMatchSelectWidth = true,
185184

186185
// Options
187186
filterOption,

src/SelectTrigger.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,12 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
107107
...restProps
108108
} = props;
109109

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
110116
const popupPrefixCls = `${prefixCls}-dropdown`;
111117

112118
let popupNode = popupElement;

src/utils/warningPropsUtil.ts

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -149,28 +149,6 @@ function warningProps(props: SelectProps) {
149149
);
150150
}
151151
}
152-
153-
// Deprecated API warnings
154-
const deprecatedProps = {
155-
dropdownClassName: 'popupClassName',
156-
dropdownStyle: 'popupStyle',
157-
dropdownAlign: 'popupAlign',
158-
dropdownRender: 'popupRender',
159-
dropdownMatchSelectWidth: 'popupMatchSelectWidth',
160-
};
161-
162-
Object.entries(deprecatedProps).forEach(([deprecatedProp, newProp]) => {
163-
if (deprecatedProp in props) {
164-
warning(false, `\`${deprecatedProp}\` is deprecated. Please use \`${newProp}\` instead.`);
165-
}
166-
});
167-
168-
if ('onDropdownVisibleChange' in props) {
169-
warning(
170-
false,
171-
'`onDropdownVisibleChange` is deprecated. Please use `onPopupVisibleChange` instead.',
172-
);
173-
}
174152
}
175153

176154
// value in Select option should not be null

tests/Combobox.test.tsx

Lines changed: 3 additions & 3 deletions
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

tests/Custom.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@ describe('Select.Custom', () => {
1515
});
1616

1717
it('getRawInputElement', () => {
18-
const onDropdownVisibleChange = jest.fn();
18+
const onPopupVisibleChange = jest.fn();
1919
const { container } = render(
2020
<Select
2121
getRawInputElement={() => <span className="custom" />}
22-
onDropdownVisibleChange={onDropdownVisibleChange}
22+
onPopupVisibleChange={onPopupVisibleChange}
2323
/>,
2424
);
2525
fireEvent.click(container.querySelector('.custom'));
2626

27-
expect(onDropdownVisibleChange).toHaveBeenCalledWith(true);
27+
expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
2828
});
2929
});

tests/Popup.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@ describe('Select.Popup', () => {
1313
injectRunAllTimers(jest);
1414

1515
it('click popup should not trigger close', () => {
16-
const onDropdownVisibleChange = jest.fn();
16+
const onPopupVisibleChange = jest.fn();
1717
render(
1818
<Select
1919
open
2020
options={[{ value: 'bamboo' }]}
21-
onDropdownVisibleChange={onDropdownVisibleChange}
21+
onPopupVisibleChange={onPopupVisibleChange}
2222
getPopupContainer={() => document.body}
2323
/>,
2424
);
2525

2626
fireEvent.mouseDown(document.querySelector('.rc-select-dropdown'));
27-
expect(onDropdownVisibleChange).not.toHaveBeenCalled();
27+
expect(onPopupVisibleChange).not.toHaveBeenCalled();
2828
});
2929
});

0 commit comments

Comments
 (0)