chore: mobile support

Author: zombieJ

assets/index/Mobile.less

@@ -1,25 +1,55 @@
 .@{triggerPrefixCls} {
   &-mobile {
-    transition: all 0.3s;
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     top: auto;
 
-    &-fade {
-      &-appear,
-      &-enter {
-        &-start {
-          transform: translateY(100%);
+    // Motion
+    &.raise {
+      &-enter,
+      &-appear {
+        transform: translateY(100%);
+
+        &-active {
+          transition: all 0.3s;
+          transform: translateY(0);
         }
       }
 
       &-leave {
+        transform: translateY(0);
+
         &-active {
+          transition: all 0.3s;
           transform: translateY(100%);
         }
       }
     }
+
+    // Mask
+    &-mask {
+      &.fade {
+        &-enter,
+        &-appear {
+          opacity: 0;
+
+          &-active {
+            transition: all 0.3s;
+            opacity: 1;
+          }
+        }
+
+        &-leave {
+          opacity: 1;
+
+          &-active {
+            transition: all 0.3s;
+            opacity: 0;
+          }
+        }
+      }
+    }
   }
 }

docs/examples/mobile.tsx

@@ -42,11 +42,15 @@ const Test = () => {
           popupVisible={open1}
           onOpenChange={setOpen1}
           popup={
-            <div>
+            <div style={{ background: '#FFF', padding: 12 }}>
               <h2>Hello World</h2>
             </div>
           }
-          mobile
+          mobile={{
+            mask: true,
+            motion: { motionName: 'raise' },
+            maskMotion: { motionName: 'fade' },
+          }}
         >
           <span>Click Me</span>
         </Trigger>

src/Popup/Mask.tsx

@@ -11,6 +11,8 @@ export interface MaskProps {
 
   // Motion
   motion?: CSSMotionProps;
+
+  mobile?: boolean;
 }
 
 export default function Mask(props: MaskProps) {
@@ -21,6 +23,8 @@ export default function Mask(props: MaskProps) {
 
     mask,
     motion,
+
+    mobile,
   } = props;
 
   if (!mask) {
@@ -32,7 +36,11 @@ export default function Mask(props: MaskProps) {
       {({ className }) => (
         <div
           style={{ zIndex }}
-          className={classNames(`${prefixCls}-mask`, className)}
+          className={classNames(
+            `${prefixCls}-mask`,
+            mobile && `${prefixCls}-mobile-mask`,
+            className,
+          )}
         />
       )}
     </CSSMotion>

src/Popup/index.tsx

@@ -11,6 +11,14 @@ import Arrow from './Arrow';
 import Mask from './Mask';
 import PopupContent from './PopupContent';
 
+export interface MobileConfig {
+  mask?: boolean;
+  /** Set popup motion. You can ref `rc-motion` for more info. */
+  motion?: CSSMotionProps;
+  /** Set mask motion. You can ref `rc-motion` for more info. */
+  maskMotion?: CSSMotionProps;
+}
+
 export interface PopupProps {
   prefixCls: string;
   className?: string;
@@ -63,6 +71,9 @@ export interface PopupProps {
   stretch?: string;
   targetWidth?: number;
   targetHeight?: number;
+
+  // Mobile
+  mobile?: MobileConfig;
 }
 
 const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
@@ -95,6 +106,9 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
     motion,
     maskMotion,
 
+    // Mobile
+    mobile,
+
     // Portal
     forceRender,
     getPopupContainer,
@@ -126,6 +140,24 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   // We can not remove holder only when motion finished.
   const isNodeVisible = open || keepDom;
 
+  // ========================= Mobile =========================
+  const isMobile = !!mobile;
+
+  // ========================== Mask ==========================
+  const [mergedMask, mergedMaskMotion, mergedPopupMotion] = React.useMemo<
+    [
+      mask: boolean,
+      maskMotion: CSSMotionProps | undefined,
+      popupMotion: CSSMotionProps | undefined,
+    ]
+  >(() => {
+    if (mobile) {
+      return [mobile.mask, mobile.maskMotion, mobile.motion];
+    }
+
+    return [mask, maskMotion, motion];
+  }, [mobile]);
+
   // ======================= Container ========================
   const getPopupContainerNeedParams = getPopupContainer?.length > 0;
 
@@ -148,15 +180,17 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
   // >>>>> Offset
   const AUTO = 'auto' as const;
 
-  const offsetStyle: React.CSSProperties = {
-    left: '-1000vw',
-    top: '-1000vh',
-    right: AUTO,
-    bottom: AUTO,
-  };
+  const offsetStyle: React.CSSProperties = isMobile
+    ? {}
+    : {
+        left: '-1000vw',
+        top: '-1000vh',
+        right: AUTO,
+        bottom: AUTO,
+      };
 
   // Set align style
-  if (ready || !open) {
+  if (!isMobile && (ready || !open)) {
     const { points } = align;
     const dynamicInset =
       align.dynamicInset || (align as any)._experimental?.dynamicInset;
@@ -209,8 +243,9 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
         prefixCls={prefixCls}
         open={open}
         zIndex={zIndex}
-        mask={mask}
-        motion={maskMotion}
+        mask={mergedMask}
+        motion={mergedMaskMotion}
+        mobile={isMobile}
       />
       <ResizeObserver onResize={onAlign} disabled={!open}>
         {(resizeObserverRef) => {
@@ -222,7 +257,7 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
               removeOnLeave={false}
               forceRender={forceRender}
               leavedClassName={`${prefixCls}-hidden`}
-              {...motion}
+              {...mergedPopupMotion}
               onAppearPrepare={onPrepare}
               onEnterPrepare={onPrepare}
               visible={open}
@@ -235,7 +270,9 @@ const Popup = React.forwardRef<HTMLDivElement, PopupProps>((props, ref) => {
                 { className: motionClassName, style: motionStyle },
                 motionRef,
               ) => {
-                const cls = classNames(prefixCls, motionClassName, className);
+                const cls = classNames(prefixCls, motionClassName, className, {
+                  [`${prefixCls}-mobile`]: isMobile,
+                });
 
                 return (
                   <div

src/hooks/useAlign.ts

@@ -95,6 +95,7 @@ export default function useAlign(
   builtinPlacements: any,
   popupAlign?: AlignType,
   onPopupAlign?: TriggerProps['onPopupAlign'],
+  mobile?: boolean,
 ): [
   ready: boolean,
   offsetX: number,
@@ -109,15 +110,25 @@ export default function useAlign(
   onAlign: VoidFunction,
 ] {
   const [offsetInfo, setOffsetInfo] = React.useState<{
+    /** Align finished */
     ready: boolean;
+    /** Offset Left of current Left */
     offsetX: number;
+    /** Offset Top of current Top */
     offsetY: number;
+    /** Offset Right of current Left */
     offsetR: number;
+    /** Offset Bottom of current Top */
     offsetB: number;
+    /** Arrow X offset related with popup */
     arrowX: number;
+    /** Arrow Y offset related with popup */
     arrowY: number;
+    /** Scale X of popup */
     scaleX: number;
+    /** Scale Y of popup */
     scaleY: number;
+    /** Calculated align info */
     align: AlignType;
   }>({
     ready: false,
@@ -134,7 +145,7 @@ export default function useAlign(
   const alignCountRef = React.useRef(0);
 
   const scrollerList = React.useMemo(() => {
-    if (!popupEle) {
+    if (!popupEle || mobile) {
       return [];
     }
 
@@ -161,7 +172,7 @@ export default function useAlign(
 
   // ========================= Align =========================
   const onAlign = useEvent(() => {
-    if (popupEle && target && open) {
+    if (popupEle && target && open && !mobile) {
       const popupElement = popupEle;
 
       const doc = popupElement.ownerDocument;
@@ -659,10 +670,14 @@ export default function useAlign(
       const targetTop = targetRect.y;
       const targetBottom = targetTop + targetHeight;
 
+      /** Max left of the popup and target element */
       const maxLeft = Math.max(popupLeft, targetLeft);
+      /** Min right of the popup and target element */
       const minRight = Math.min(popupRight, targetRight);
 
+      /** The center X of popup & target cross area */
       const xCenter = (maxLeft + minRight) / 2;
+      /** Arrow X of popup offset */
       const nextArrowX = xCenter - popupLeft;
 
       const maxTop = Math.max(popupTop, targetTop);

src/index.tsx

@@ -7,9 +7,8 @@ import { getShadowRoot } from '@rc-component/util/lib/Dom/shadow';
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import useId from '@rc-component/util/lib/hooks/useId';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
-import isMobile from '@rc-component/util/lib/isMobile';
 import * as React from 'react';
-import Popup from './Popup';
+import Popup, { MobileConfig } from './Popup';
 import TriggerWrapper from './TriggerWrapper';
 import type { TriggerContextProps } from './context';
 import TriggerContext from './context';
@@ -121,9 +120,12 @@ export interface TriggerProps {
   getTriggerDOMNode?: (node: React.ReactInstance) => HTMLElement;
 
   // // ========================== Mobile ==========================
-  // /** @private Bump fixed position at bottom in mobile.
-  //  * This is internal usage currently, do not use in your prod */
-  // mobile?: MobileConfig;
+  /**
+   * @private Bump fixed position at bottom in mobile.
+   * Will replace the config of root props.
+   * This is internal usage currently, do not use in your prod.
+   */
+  mobile?: MobileConfig;
 }
 
 export function generateTrigger(
@@ -190,17 +192,15 @@ export function generateTrigger(
 
       // Private
       getTriggerDOMNode,
+      mobile,
 
       ...restProps
     } = props;
 
     const mergedAutoDestroy = autoDestroy || false;
 
     // =========================== Mobile ===========================
-    const [mobile, setMobile] = React.useState(false);
-    useLayoutEffect(() => {
-      setMobile(isMobile());
-    }, []);
+    const isMobile = !!mobile;
 
     // ========================== Context ===========================
     const subPopupElements = React.useRef<Record<string, HTMLElement>>({});
@@ -377,10 +377,11 @@ export function generateTrigger(
       builtinPlacements,
       popupAlign,
       onPopupAlign,
+      isMobile,
     );
 
     const [showActions, hideActions] = useAction(
-      mobile,
+      isMobile,
       action,
       showAction,
       hideAction,
@@ -670,7 +671,10 @@ export function generateTrigger(
             ref={setPopupRef}
             prefixCls={prefixCls}
             popup={popup}
-            className={classNames(popupClassName, alignedClassName)}
+            className={classNames(
+              popupClassName,
+              !isMobile && alignedClassName,
+            )}
             style={popupStyle}
             target={targetEle}
             onMouseEnter={onPopupMouseEnter}
@@ -711,6 +715,8 @@ export function generateTrigger(
             stretch={stretch}
             targetWidth={targetWidth / scaleX}
             targetHeight={targetHeight / scaleY}
+            // Mobile
+            mobile={mobile}
           />
         </TriggerContext.Provider>
       </>

src/interface.ts

@@ -118,11 +118,3 @@ export interface Point {
 export interface CommonEventHandler {
   remove: () => void;
 }
-
-export interface MobileConfig {
-  /** Set popup motion. You can ref `rc-motion` for more info. */
-  popupMotion?: CSSMotionProps;
-  popupClassName?: string;
-  popupStyle?: React.CSSProperties;
-  popupRender?: (originNode: React.ReactNode) => React.ReactNode;
-}