Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: rename dropdown to popup #1103

Merged
merged 7 commits into from
Jan 13, 2025
Merged

feat: rename dropdown to popup #1103

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e20892c
feat: rename dropdown to popup
aojunhao123 Jan 9, 2025
236853d
chore: adjust some logic
aojunhao123 Jan 9, 2025
dc4a7d4
test: add test case
aojunhao123 Jan 10, 2025
f252168
Merge branch 'master' into dropdown-to-popup
aojunhao123 Jan 10, 2025
06a2dc5
chore: trigger CI build
aojunhao123 Jan 10, 2025
72e4d5c
refactor: remove compatible code
aojunhao123 Jan 10, 2025
fead9e5
Merge branch 'master' into dropdown-to-popup
aojunhao123 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 38 additions & 7 deletions src/BaseSelect/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,9 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
// >>> Open
open?: boolean;
defaultOpen?: boolean;
/** @deprecated Please use `onPopupVisibleChange` instead */
onDropdownVisibleChange?: (open: boolean) => void;
onPopupVisibleChange?: (open: boolean) => void;

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

// >>> Dropdown
// >>> Dropdown/Popup
animation?: string;
transitionName?: string;

/** @deprecated Please use `popupStyle` instead */
dropdownStyle?: React.CSSProperties;
popupStyle?: React.CSSProperties;
aojunhao123 marked this conversation as resolved.
Show resolved Hide resolved

/** @deprecated Please use `popupClassName` instead */
dropdownClassName?: string;
popupClassName?: string;

/** @deprecated Please use `popupMatchSelectWidth` instead */
dropdownMatchSelectWidth?: boolean | number;
popupMatchSelectWidth?: boolean | number;

/** @deprecated Please use `popupRender` instead */
dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
popupRender?: (menu: React.ReactElement) => React.ReactElement;

/** @deprecated Please use `popupAlign` instead */
dropdownAlign?: AlignType;
popupAlign?: AlignType;

placement?: Placement;
builtinPlacements?: BuildInPlacements;
getPopupContainer?: RenderDOMFunc;
Expand Down Expand Up @@ -245,6 +263,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
open,
defaultOpen,
onDropdownVisibleChange,
onPopupVisibleChange,

// Active
activeValue,
Expand All @@ -269,10 +288,15 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
animation,
transitionName,
dropdownStyle,
popupStyle,
dropdownClassName,
popupClassName,
dropdownMatchSelectWidth,
popupMatchSelectWidth,
dropdownRender,
popupRender,
dropdownAlign,
popupAlign,
placement,
builtinPlacements,
getPopupContainer,
Expand Down Expand Up @@ -308,6 +332,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
delete domProps[propName];
});

// ============================= Compitable =============================
const mergedPopupStyle = popupStyle ?? dropdownStyle;
const mergedPopupClassName = popupClassName ?? dropdownClassName;
const mergedPopupRender = popupRender ?? dropdownRender;
const mergedPopupAlign = popupAlign ?? dropdownAlign;
const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth;
// ============================= Mobile =============================
const [mobile, setMobile] = React.useState(false);
React.useEffect(() => {
Expand Down Expand Up @@ -389,10 +419,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)

if (mergedOpen !== nextOpen) {
onDropdownVisibleChange?.(nextOpen);
onPopupVisibleChange?.(nextOpen);
}
}
},
[disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange],
[disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange, onPopupVisibleChange],
);

// ============================= Search =============================
Expand Down Expand Up @@ -766,12 +797,12 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
popupElement={optionList}
animation={animation}
transitionName={transitionName}
dropdownStyle={dropdownStyle}
dropdownClassName={dropdownClassName}
popupStyle={mergedPopupStyle}
popupClassName={mergedPopupClassName}
direction={direction}
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
dropdownRender={dropdownRender}
dropdownAlign={dropdownAlign}
popupMatchSelectWidth={mergedPopupMatchSelectWidth}
popupRender={mergedPopupRender}
popupAlign={mergedPopupAlign}
placement={placement}
builtinPlacements={builtinPlacements}
getPopupContainer={getPopupContainer}
Expand Down
7 changes: 4 additions & 3 deletions src/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
onSelect,
onDeselect,
dropdownMatchSelectWidth = true,
popupMatchSelectWidth = dropdownMatchSelectWidth,

// Options
filterOption,
Expand Down Expand Up @@ -609,7 +610,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp

// ========================== Context ===========================
const selectContext = React.useMemo<SelectContextProps>(() => {
const realVirtual = virtual !== false && dropdownMatchSelectWidth !== false;
const realVirtual = virtual !== false && popupMatchSelectWidth !== false;
return {
...parsedOptions,
flattenOptions: displayOptions,
Expand Down Expand Up @@ -638,7 +639,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
rawValues,
mergedFieldNames,
virtual,
dropdownMatchSelectWidth,
popupMatchSelectWidth,
direction,
listHeight,
listItemHeight,
Expand Down Expand Up @@ -675,7 +676,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
onSearch={onInternalSearch}
autoClearSearchValue={autoClearSearchValue}
onSearchSplit={onInternalSearchSplit}
dropdownMatchSelectWidth={dropdownMatchSelectWidth}
popupMatchSelectWidth={popupMatchSelectWidth}
// >>> OptionList
OptionList={OptionList}
emptyOptions={!displayOptions.length}
Expand Down
58 changes: 29 additions & 29 deletions src/SelectTrigger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import * as React from 'react';
import type { Placement, RenderDOMFunc } from './BaseSelect';

const getBuiltInPlacements = (
dropdownMatchSelectWidth: number | boolean,
popupMatchSelectWidth: number | boolean,
): Record<string, AlignType> => {
// Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
const adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
const adjustX = popupMatchSelectWidth === true ? 0 : 1;
return {
bottomLeft: {
points: ['tl', 'bl'],
Expand Down Expand Up @@ -64,13 +64,13 @@ export interface SelectTriggerProps {
transitionName?: string;
placement?: Placement;
builtinPlacements?: BuildInPlacements;
dropdownStyle: React.CSSProperties;
dropdownClassName: string;
popupStyle: React.CSSProperties;
popupClassName: string;
direction: string;
dropdownMatchSelectWidth?: boolean | number;
dropdownRender?: (menu: React.ReactElement) => React.ReactElement;
popupMatchSelectWidth?: boolean | number;
popupRender?: (menu: React.ReactElement) => React.ReactElement;
getPopupContainer?: RenderDOMFunc;
dropdownAlign: AlignType;
popupAlign: AlignType;
empty: boolean;

getTriggerDOMNode: (node: HTMLElement) => HTMLElement;
Expand All @@ -91,14 +91,14 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
popupElement,
animation,
transitionName,
dropdownStyle,
dropdownClassName,
popupStyle,
popupClassName,
direction = 'ltr',
placement,
builtinPlacements,
dropdownMatchSelectWidth,
dropdownRender,
dropdownAlign,
popupMatchSelectWidth,
popupRender,
popupAlign,
getPopupContainer,
empty,
getTriggerDOMNode,
Expand All @@ -107,38 +107,38 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
...restProps
} = props;

const dropdownPrefixCls = `${prefixCls}-dropdown`;
const popupPrefixCls = `${prefixCls}-dropdown`;
aojunhao123 marked this conversation as resolved.
Show resolved Hide resolved

let popupNode = popupElement;
if (dropdownRender) {
popupNode = dropdownRender(popupElement);
if (popupRender) {
popupNode = popupRender(popupElement);
}

const mergedBuiltinPlacements = React.useMemo(
() => builtinPlacements || getBuiltInPlacements(dropdownMatchSelectWidth),
[builtinPlacements, dropdownMatchSelectWidth],
() => builtinPlacements || getBuiltInPlacements(popupMatchSelectWidth),
[builtinPlacements, popupMatchSelectWidth],
);

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

// =================== Popup Width ===================
const isNumberPopupWidth = typeof dropdownMatchSelectWidth === 'number';
const isNumberPopupWidth = typeof popupMatchSelectWidth === 'number';

const stretch = React.useMemo(() => {
if (isNumberPopupWidth) {
return null;
}

return dropdownMatchSelectWidth === false ? 'minWidth' : 'width';
}, [dropdownMatchSelectWidth, isNumberPopupWidth]);
return popupMatchSelectWidth === false ? 'minWidth' : 'width';
}, [popupMatchSelectWidth, isNumberPopupWidth]);

let popupStyle = dropdownStyle;
let mergedPopupStyle = popupStyle;

if (isNumberPopupWidth) {
popupStyle = {
mergedPopupStyle = {
...popupStyle,
width: dropdownMatchSelectWidth,
width: popupMatchSelectWidth,
};
}

Expand All @@ -156,18 +156,18 @@ const SelectTrigger: React.ForwardRefRenderFunction<RefTriggerProps, SelectTrigg
hideAction={onPopupVisibleChange ? ['click'] : []}
popupPlacement={placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft')}
builtinPlacements={mergedBuiltinPlacements}
prefixCls={dropdownPrefixCls}
prefixCls={popupPrefixCls}
popupTransitionName={mergedTransitionName}
popup={<div onMouseEnter={onPopupMouseEnter}>{popupNode}</div>}
ref={triggerPopupRef}
stretch={stretch}
popupAlign={dropdownAlign}
popupAlign={popupAlign}
popupVisible={visible}
getPopupContainer={getPopupContainer}
popupClassName={classNames(dropdownClassName, {
[`${dropdownPrefixCls}-empty`]: empty,
popupClassName={classNames(popupClassName, {
[`${popupPrefixCls}-empty`]: empty,
})}
popupStyle={popupStyle}
popupStyle={mergedPopupStyle}
getTriggerDOMNode={getTriggerDOMNode}
onPopupVisibleChange={onPopupVisibleChange}
>
Expand Down
22 changes: 22 additions & 0 deletions src/utils/warningPropsUtil.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,28 @@ function warningProps(props: SelectProps) {
);
}
}

// Deprecated API warnings
const deprecatedProps = {
dropdownClassName: 'popupClassName',
dropdownStyle: 'popupStyle',
dropdownAlign: 'popupAlign',
dropdownRender: 'popupRender',
dropdownMatchSelectWidth: 'popupMatchSelectWidth',
};

Object.entries(deprecatedProps).forEach(([deprecatedProp, newProp]) => {
if (deprecatedProp in props) {
warning(false, `'${deprecatedProp}' is deprecated. Please use '${newProp}' instead.`);
}
});

if ('onDropdownVisibleChange' in props) {
warning(
false,
'`onDropdownVisibleChange` is deprecated. Please use `onPopupVisibleChange` instead.',
);
}
}

// value in Select option should not be null
Expand Down
Loading