Skip to content

Commit e20892c

Browse files
aojunhao123aojunhao123
committed
feat: rename dropdown to popup
1 parent 1a56cfe commit e20892c

File tree

4 files changed

+95
-39
lines changed

4 files changed

+95
-39
lines changed

‎src/BaseSelect/index.tsx

Lines changed: 38 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,9 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
155155
// >>> Open
156156
open?: boolean;
157157
defaultOpen?: boolean;
158+
/** @deprecated Please use `onPopupVisibleChange` instead */
158159
onDropdownVisibleChange?: (open: boolean) => void;
160+
onPopupVisibleChange?: (open: boolean) => void;
159161

160162
// >>> Customize Input
161163
/** @private Internal usage. Do not use in your production. */
@@ -183,14 +185,30 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
183185
/** Selector remove icon */
184186
removeIcon?: RenderNode;
185187

186-
// >>> Dropdown
188+
// >>> Dropdown/Popup
187189
animation?: string;
188190
transitionName?: string;
191+
192+
/** @deprecated Please use `popupStyle` instead */
189193
dropdownStyle?: React.CSSProperties;
194+
popupStyle?: React.CSSProperties;
195+
196+
/** @deprecated Please use `popupClassName` instead */
190197
dropdownClassName?: string;
198+
popupClassName?: string;
199+
200+
/** @deprecated Please use `popupMatchSelectWidth` instead */
191201
dropdownMatchSelectWidth?: boolean | number;
202+
popupMatchSelectWidth?: boolean | number;
203+
204+
/** @deprecated Please use `popupRender` instead */
192205
dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
206+
popupRender?: (menu: React.ReactElement) => React.ReactElement;
207+
208+
/** @deprecated Please use `popupAlign` instead */
193209
dropdownAlign?: AlignType;
210+
popupAlign?: AlignType;
211+
194212
placement?: Placement;
195213
builtinPlacements?: BuildInPlacements;
196214
getPopupContainer?: RenderDOMFunc;
@@ -245,6 +263,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
245263
open,
246264
defaultOpen,
247265
onDropdownVisibleChange,
266+
onPopupVisibleChange,
248267

249268
// Active
250269
activeValue,
@@ -269,10 +288,15 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
269288
animation,
270289
transitionName,
271290
dropdownStyle,
291+
popupStyle,
272292
dropdownClassName,
293+
popupClassName,
273294
dropdownMatchSelectWidth,
295+
popupMatchSelectWidth,
274296
dropdownRender,
297+
popupRender,
275298
dropdownAlign,
299+
popupAlign,
276300
placement,
277301
builtinPlacements,
278302
getPopupContainer,
@@ -308,6 +332,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
308332
delete domProps[propName];
309333
});
310334

335+
// ============================= Compitable =============================
336+
const mergedPopupStyle = popupStyle ?? dropdownStyle;
337+
const mergedPopupClassName = popupClassName ?? dropdownClassName;
338+
const mergedPopupRender = popupRender ?? dropdownRender;
339+
const mergedPopupAlign = popupAlign ?? dropdownAlign;
340+
311341
// ============================= Mobile =============================
312342
const [mobile, setMobile] = React.useState(false);
313343
React.useEffect(() => {
@@ -389,10 +419,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
389419

390420
if (mergedOpen !== nextOpen) {
391421
onDropdownVisibleChange?.(nextOpen);
422+
onPopupVisibleChange?.(nextOpen);
392423
}
393424
}
394425
},
395-
[disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange],
426+
[disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange, onPopupVisibleChange],
396427
);
397428

398429
// ============================= Search =============================
@@ -766,12 +797,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
766797
popupElement={optionList}
767798
animation={animation}
768799
transitionName={transitionName}
769-
dropdownStyle={dropdownStyle}
770-
dropdownClassName={dropdownClassName}
800+
popupStyle={mergedPopupStyle}
801+
popupClassName={mergedPopupClassName}
771802
direction={direction}
772-
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
773-
dropdownRender={dropdownRender}
774-
dropdownAlign={dropdownAlign}
803+
popupMatchSelectWidth={popupMatchSelectWidth}
804+
popupRender={mergedPopupRender}
805+
popupAlign={mergedPopupAlign}
775806
placement={placement}
776807
builtinPlacements={builtinPlacements}
777808
getPopupContainer={getPopupContainer}

‎src/Select.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
181181
onSelect,
182182
onDeselect,
183183
dropdownMatchSelectWidth = true,
184+
popupMatchSelectWidth = dropdownMatchSelectWidth,
184185

185186
// Options
186187
filterOption,
@@ -608,8 +609,10 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
608609
};
609610

610611
// ========================== Context ===========================
612+
const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth;
613+
611614
const selectContext = React.useMemo<SelectContextProps>(() => {
612-
const realVirtual = virtual !== false && dropdownMatchSelectWidth !== false;
615+
const realVirtual = virtual !== false && mergedPopupMatchSelectWidth !== false;
613616
return {
614617
...parsedOptions,
615618
flattenOptions: displayOptions,
@@ -638,7 +641,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
638641
rawValues,
639642
mergedFieldNames,
640643
virtual,
641-
dropdownMatchSelectWidth,
644+
mergedPopupMatchSelectWidth,
642645
direction,
643646
listHeight,
644647
listItemHeight,
@@ -675,7 +678,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
675678
onSearch={onInternalSearch}
676679
autoClearSearchValue={autoClearSearchValue}
677680
onSearchSplit={onInternalSearchSplit}
678-
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
681+
popupMatchSelectWidth={mergedPopupMatchSelectWidth}
679682
// >>> OptionList
680683
OptionList={OptionList}
681684
emptyOptions={!displayOptions.length}

‎src/SelectTrigger.tsx

Lines changed: 29 additions & 29 deletions
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,38 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
107107
...restProps
108108
} = props;
109109

110-
const dropdownPrefixCls = `${prefixCls}-dropdown`;
110+
const popupPrefixCls = `${prefixCls}-dropdown`;
111111

112112
let popupNode = popupElement;
113-
if (dropdownRender) {
114-
popupNode = dropdownRender(popupElement);
113+
if (popupRender) {
114+
popupNode = popupRender(popupElement);
115115
}
116116

117117
const mergedBuiltinPlacements = React.useMemo(
118-
() => builtinPlacements || getBuiltInPlacements(dropdownMatchSelectWidth),
119-
[builtinPlacements, dropdownMatchSelectWidth],
118+
() => builtinPlacements || getBuiltInPlacements(popupMatchSelectWidth),
119+
[builtinPlacements, popupMatchSelectWidth],
120120
);
121121

122122
// ===================== Motion ======================
123-
const mergedTransitionName = animation ? `${dropdownPrefixCls}-${animation}` : transitionName;
123+
const mergedTransitionName = animation ? `${popupPrefixCls}-${animation}` : transitionName;
124124

125125
// =================== Popup Width ===================
126-
const isNumberPopupWidth = typeof dropdownMatchSelectWidth === 'number';
126+
const isNumberPopupWidth = typeof popupMatchSelectWidth === 'number';
127127

128128
const stretch = React.useMemo(() => {
129129
if (isNumberPopupWidth) {
130130
return null;
131131
}
132132

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

136-
let popupStyle = dropdownStyle;
136+
let mergedPopupStyle = popupStyle;
137137

138138
if (isNumberPopupWidth) {
139-
popupStyle = {
139+
mergedPopupStyle = {
140140
...popupStyle,
141-
width: dropdownMatchSelectWidth,
141+
width: popupMatchSelectWidth,
142142
};
143143
}
144144

@@ -156,18 +156,18 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
156156
hideAction={onPopupVisibleChange ? ['click'] : []}
157157
popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
158158
builtinPlacements={mergedBuiltinPlacements}
159-
prefixCls={dropdownPrefixCls}
159+
prefixCls={popupPrefixCls}
160160
popupTransitionName={mergedTransitionName}
161161
popup={<div onMouseEnter={onPopupMouseEnter}>{popupNode}</div>}
162162
ref={triggerPopupRef}
163163
stretch={stretch}
164-
popupAlign={dropdownAlign}
164+
popupAlign={popupAlign}
165165
popupVisible={visible}
166166
getPopupContainer={getPopupContainer}
167-
popupClassName={classNames(dropdownClassName, {
168-
[`${dropdownPrefixCls}-empty`]: empty,
167+
popupClassName={classNames(popupClassName, {
168+
[`${popupPrefixCls}-empty`]: empty,
169169
})}
170-
popupStyle={popupStyle}
170+
popupStyle={mergedPopupStyle}
171171
getTriggerDOMNode={getTriggerDOMNode}
172172
onPopupVisibleChange={onPopupVisibleChange}
173173
>

‎src/utils/warningPropsUtil.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,28 @@ 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+
}
152174
}
153175

154176
// value in Select option should not be null

0 commit comments

Comments
 (0)