feat: picker need to receive the placement aligned by popup

Author: bbb169

src/PickerInput/Popup/index.tsx

@@ -84,7 +84,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
     onSubmit,
   } = props;
 
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, alignedPlacement } = React.useContext(PickerContext);
   const panelPrefixCls = `${prefixCls}-panel`;
 
   const rtl = direction === 'rtl';
@@ -213,7 +213,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
   );
 
   if (range) {
-    const realPlacement = getRealPlacement(placement, rtl);
+    const realPlacement = getRealPlacement(alignedPlacement || placement, rtl);
     const offsetUnit = getoffsetUnit(realPlacement, rtl);
     renderNode = (
       <div

src/PickerInput/RangePicker.tsx

@@ -666,6 +666,9 @@ function RangePicker<DateType extends object = any>(
     onKeyDown?.(event, preventDefault);
   };
 
+  // =======================  popup align =======================
+  const [alignedPlacement, setAlignedPlacement] = React.useState<string>();
+
   // ======================= Context ========================
   const context = React.useMemo(
     () => ({
@@ -674,8 +677,18 @@ function RangePicker<DateType extends object = any>(
       generateConfig,
       button: components.button,
       input: components.input,
+      alignedPlacement,
+      setAlignedPlacement,
     }),
-    [prefixCls, locale, generateConfig, components.button, components.input],
+    [
+      prefixCls,
+      locale,
+      generateConfig,
+      components.button,
+      components.input,
+      alignedPlacement,
+      setAlignedPlacement,
+    ],
   );
 
   // ======================== Effect ========================

src/PickerInput/Selector/RangeSelector.tsx

@@ -120,7 +120,7 @@ function RangeSelector<DateType extends object = any>(
   const rtl = direction === 'rtl';
 
   // ======================== Prefix ========================
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, alignedPlacement } = React.useContext(PickerContext);
 
   // ========================== Id ==========================
   const ids = React.useMemo(() => {
@@ -173,7 +173,7 @@ function RangeSelector<DateType extends object = any>(
   });
 
   // ====================== ActiveBar =======================
-  const realPlacement = getRealPlacement(placement, rtl);
+  const realPlacement = getRealPlacement(alignedPlacement || placement, rtl);
   const offsetUnit = getoffsetUnit(realPlacement, rtl);
   const placementRight = realPlacement?.toLowerCase().endsWith('right');
   const [activeBarStyle, setActiveBarStyle] = React.useState<React.CSSProperties>({
@@ -186,7 +186,7 @@ function RangeSelector<DateType extends object = any>(
     if (input) {
       const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
       const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
-      const activeOffset = placementRight ? (parentWidth - offsetWidth - offsetLeft) : offsetLeft;
+      const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft;
       setActiveBarStyle((ori) => ({
         ...ori,
         width: offsetWidth,

src/PickerInput/context.tsx

@@ -9,7 +9,9 @@ export interface PickerContextProps<DateType = any> {
   /** Customize button component */
   button?: Components['button'];
   input?: Components['input'];
-
+  /** trigger will change placement while aligining */
+  alignedPlacement?: string;
+  setAlignedPlacement?: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const PickerContext = React.createContext<PickerContextProps>(null!);

src/PickerTrigger/index.tsx

@@ -77,7 +77,7 @@ function PickerTrigger({
   visible,
   onClose,
 }: PickerTriggerProps) {
-  const { prefixCls } = React.useContext(PickerContext);
+  const { prefixCls, setAlignedPlacement } = React.useContext(PickerContext);
   const dropdownPrefixCls = `${prefixCls}-dropdown`;
 
   const realPlacement = getRealPlacement(placement, direction === 'rtl');
@@ -100,6 +100,16 @@ function PickerTrigger({
       popupStyle={popupStyle}
       stretch="minWidth"
       getPopupContainer={getPopupContainer}
+      onPopupAlign={(_, align) => {
+        Object.keys(BUILT_IN_PLACEMENTS).forEach((key) => {
+          if (
+            BUILT_IN_PLACEMENTS[key].points[0] === align.points[0] &&
+            BUILT_IN_PLACEMENTS[key].points[1] === align.points[1]
+          ) {
+            setAlignedPlacement?.(key);
+          }
+        });
+      }}
       onPopupVisibleChange={(nextVisible) => {
         if (!nextVisible) {
           onClose();