From 513f22784d131589cd2b92862a64718f22a2aaad Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 30 Dec 2024 13:19:56 +0800 Subject: [PATCH] demo: disable auto adjust placement in DatePicker design panel (#52113) * demo: disable auto adjust placement in DatePicker design panel * demo: disable auto adjust placement in DatePicker design panel * demo: disable auto adjust placement in DatePicker design panel * demo: disable auto adjust placement in DatePicker design panel * fix --------- Co-authored-by: lijianan <574980606@qq.com> --- components/_util/PurePanel.tsx | 16 +++++++++++++--- components/auto-complete/index.tsx | 2 +- components/cascader/index.tsx | 4 +--- components/color-picker/ColorPicker.tsx | 7 ++++--- components/date-picker/index.tsx | 4 ++-- components/dropdown/dropdown.tsx | 14 +------------- components/mentions/index.tsx | 2 +- components/select/index.tsx | 2 +- components/time-picker/index.tsx | 2 +- components/tree-select/index.tsx | 2 +- 10 files changed, 26 insertions(+), 29 deletions(-) diff --git a/components/_util/PurePanel.tsx b/components/_util/PurePanel.tsx index f0b2f81af0..e2463352fa 100644 --- a/components/_util/PurePanel.tsx +++ b/components/_util/PurePanel.tsx @@ -20,9 +20,10 @@ export interface BaseProps { /* istanbul ignore next */ const genPurePanel = ( Component: any, - defaultPrefixCls?: string, - getDropdownCls?: null | ((prefixCls: string) => string), + alignPropName?: 'align' | 'dropdownAlign' | 'popupAlign', postProps?: (props: ComponentProps) => ComponentProps, + defaultPrefixCls?: string, + getDropdownCls?: (prefixCls: string) => string, ) => { type WrapProps = ComponentProps & AnyObject; @@ -55,7 +56,6 @@ const genPurePanel = ( ? `.${getDropdownCls(prefixCls)}` : `.${prefixCls}-dropdown`; const popup = holderRef.current?.querySelector(dropdownCls); - if (popup) { clearInterval(interval); resizeObserver.observe(popup); @@ -83,6 +83,16 @@ const genPurePanel = ( if (postProps) { mergedProps = postProps(mergedProps); } + if (alignPropName) { + Object.assign(mergedProps, { + [alignPropName]: { + overflow: { + adjustX: false, + adjustY: false, + }, + }, + }); + } const mergedStyle: React.CSSProperties = { paddingBottom: popupHeight, position: 'relative', diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 06ae5e6727..a7efcb9e48 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -170,7 +170,7 @@ const RefAutoComplete = React.forwardRef( // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(RefAutoComplete, undefined, undefined, (props: any) => +const PurePanel = genPurePanel(RefAutoComplete, 'dropdownAlign', (props: any) => omit(props, ['visible']), ); diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index a0a55ca381..cc979c882d 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -370,9 +370,7 @@ if (process.env.NODE_ENV !== 'production') { // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(Cascader, undefined, undefined, (props: any) => - omit(props, ['visible']), -); +const PurePanel = genPurePanel(Cascader, 'dropdownAlign', (props: any) => omit(props, ['visible'])); Cascader.SHOW_PARENT = SHOW_PARENT; Cascader.SHOW_CHILD = SHOW_CHILD; diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index dfcaf70f6f..8b6cdf8160 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -280,14 +280,15 @@ if (process.env.NODE_ENV !== 'production') { const PurePanel = genPurePanel( ColorPicker, - 'color-picker', - /* istanbul ignore next */ - (prefixCls) => prefixCls, + undefined, (props: ColorPickerProps) => ({ ...props, placement: 'bottom' as TriggerPlacement, autoAdjustOverflow: false, }), + 'color-picker', + /* istanbul ignore next */ + (prefixCls) => prefixCls, ); ColorPicker._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index f9bb811cf5..3b96bb29bc 100755 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -31,9 +31,9 @@ export type DatePickerType = typeof DatePicker & { // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(DatePicker, 'picker', null); +const PurePanel = genPurePanel(DatePicker, 'popupAlign', undefined, 'picker'); (DatePicker as DatePickerType)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; -const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null); +const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'popupAlign', undefined, 'picker'); (DatePicker as DatePickerType)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel; (DatePicker as DatePickerType).generatePicker = generatePicker; diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index 494b9dec6d..a52251c45d 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -315,20 +315,8 @@ const Dropdown: CompoundedComponent = (props) => { return wrapCSSVar(renderNode); }; -function postPureProps(props: DropdownProps) { - return { - ...props, - align: { - overflow: { - adjustX: false, - adjustY: false, - }, - }, - }; -} - // We don't care debug panel -const PurePanel = genPurePanel(Dropdown, 'dropdown', (prefixCls) => prefixCls, postPureProps); +const PurePanel = genPurePanel(Dropdown, 'align', undefined, 'dropdown', (prefixCls) => prefixCls); /* istanbul ignore next */ const WrapPurePanel: React.FC = (props) => ( diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index b58a81b9a0..7df1a3f961 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -232,7 +232,7 @@ Mentions.Option = Option; // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(Mentions, 'mentions'); +const PurePanel = genPurePanel(Mentions, undefined, undefined, 'mentions'); Mentions._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; Mentions.getMentions = (value = '', config: MentionsConfig = {}): MentionsEntity[] => { diff --git a/components/select/index.tsx b/components/select/index.tsx index 38634e0dc6..0e0301af32 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -331,7 +331,7 @@ const Select = React.forwardRef(InternalSelect) as unknown as (< // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(Select); +const PurePanel = genPurePanel(Select, 'dropdownAlign'); Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE; Select.Option = Option; diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index fc942ecf8c..b0c2fd1469 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -85,7 +85,7 @@ if (process.env.NODE_ENV !== 'production') { // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(TimePicker, 'picker'); +const PurePanel = genPurePanel(TimePicker, 'popupAlign', undefined, 'picker'); (TimePicker as MergedTimePicker)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; type MergedTimePicker = typeof TimePicker & { diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 4a5578ea8b..8189ab7526 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -337,7 +337,7 @@ const TreeSelect = TreeSelectRef as CompoundedComponent; // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(TreeSelect, undefined, undefined, (props: any) => +const PurePanel = genPurePanel(TreeSelect, 'dropdownAlign', (props: any) => omit(props, ['visible']), );