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

@@ -20,9 +20,10 @@ export interface BaseProps {
 /* istanbul ignore next */
 const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
   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 = <ComponentProps extends BaseProps = BaseProps>(
             ? `.${getDropdownCls(prefixCls)}`
             : `.${prefixCls}-dropdown`;
           const popup = holderRef.current?.querySelector(dropdownCls);
-
           if (popup) {
             clearInterval(interval);
             resizeObserver.observe(popup);
@@ -83,6 +83,16 @@ const genPurePanel = <ComponentProps extends BaseProps = BaseProps>(
     if (postProps) {
       mergedProps = postProps(mergedProps);
     }
+    if (alignPropName) {
+      Object.assign(mergedProps, {
+        [alignPropName]: {
+          overflow: {
+            adjustX: false,
+            adjustY: false,
+          },
+        },
+      });
+    }
     const mergedStyle: React.CSSProperties = {
       paddingBottom: popupHeight,
       position: 'relative',

components/auto-complete/index.tsx

@@ -170,7 +170,7 @@ const RefAutoComplete = React.forwardRef<RefSelectProps, AutoCompleteProps>(
 
 // 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']),
 );
 

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;

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;

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;
 

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<DropdownProps> = (props) => (

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[] => {

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;

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 & {

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']),
 );