feat: Support mobile config (#216)

* chore: feature merge master

* feat: Support mobile interactive

* tests: Add test case

* tests: Add coverage

* docs: Update example

* refactor: More comments

* chore: Warning info

Author: zombieJ

assets/index.less

@@ -64,4 +64,5 @@
   }
 }
 
-@import "./index/Mask";
+@import "./index/Mask";
+@import "./index/Mobile";

assets/index/Mobile.less

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

examples/simple.js renamed to examples/simple.tsx

@@ -58,13 +58,33 @@ const RefTarget = React.forwardRef((props, ref) => {
   return <InnerTarget {...props} />;
 });
 
-class Test extends React.Component {
-  state = {
+interface TestState {
+  mask: boolean;
+  maskClosable: boolean;
+  placement: 'right';
+  trigger: {
+    click?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    contextMenu?: boolean;
+  };
+  offsetX: number;
+  offsetY: number;
+  stretch: string;
+  transitionName: string;
+  destroyed?: boolean;
+  destroyPopupOnHide?: boolean;
+  autoDestroy?: boolean;
+  mobile?: boolean;
+}
+
+class Test extends React.Component<{}, TestState> {
+  state: TestState = {
     mask: true,
     maskClosable: true,
     placement: 'right',
     trigger: {
-      click: 1,
+      click: true,
     },
     offsetX: undefined,
     offsetY: undefined,
@@ -281,6 +301,19 @@ class Test extends React.Component {
             />
             maskClosable
           </label>
+          &nbsp;&nbsp;&nbsp;&nbsp;
+          <label>
+            <input
+              checked={!!this.state.mobile}
+              type="checkbox"
+              onChange={() => {
+                this.setState(({ mobile }) => ({
+                  mobile: !mobile,
+                }));
+              }}
+            />
+            mobile
+          </label>
           <br />
           <label>
             offsetX:
@@ -328,6 +361,33 @@ class Test extends React.Component {
             }}
             popup={<div>i am a popup</div>}
             popupTransitionName={state.transitionName}
+            mobile={
+              state.mobile
+                ? {
+                    popupMotion: {
+                      motionName: 'rc-trigger-popup-mobile-fade',
+                    },
+                    popupClassName: 'rc-trigger-popup-mobile',
+                    popupStyle: {
+                      padding: 16,
+                      borderTop: '1px solid red',
+                      background: '#FFF',
+                      textAlign: 'center',
+                    },
+                    popupRender: node => (
+                      <>
+                        <div>
+                          <input
+                            style={{ width: '100%' }}
+                            placeholder="additional content"
+                          />
+                        </div>
+                        {node}
+                      </>
+                    ),
+                  }
+                : null
+            }
           >
             <RefTarget />
           </Trigger>

package.json

@@ -41,7 +41,8 @@
   },
   "devDependencies": {
     "@types/classnames": "^2.2.10",
-    "@types/jest": "^26.0.13",
+    "@types/enzyme": "^3.10.8",
+    "@types/jest": "^26.0.15",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",
     "cross-env": "^7.0.1",
@@ -61,6 +62,6 @@
     "classnames": "^2.2.6",
     "rc-align": "^4.0.0",
     "rc-motion": "^2.0.0",
-    "rc-util": "^5.3.4"
+    "rc-util": "^5.5.0"
   }
 }

src/Popup/MobilePopupInner.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import CSSMotion from 'rc-motion';
+import classNames from 'classnames';
+import { PopupInnerProps, PopupInnerRef } from './PopupInner';
+import { MobileConfig } from '../interface';
+
+interface MobilePopupInnerProps extends PopupInnerProps {
+  mobile?: MobileConfig;
+}
+
+const MobilePopupInner = React.forwardRef<PopupInnerRef, MobilePopupInnerProps>(
+  (props, ref) => {
+    const {
+      prefixCls,
+      visible,
+      zIndex,
+      children,
+      mobile: {
+        popupClassName,
+        popupStyle,
+        popupMotion = {},
+        popupRender,
+      } = {},
+    } = props;
+    const elementRef = React.useRef<HTMLDivElement>();
+
+    // ========================= Refs =========================
+    React.useImperativeHandle(ref, () => ({
+      forceAlign: () => {},
+      getElement: () => elementRef.current,
+    }));
+
+    // ======================== Render ========================
+    const mergedStyle: React.CSSProperties = {
+      zIndex,
+
+      ...popupStyle,
+    };
+
+    let childNode = children;
+
+    // Wrapper when multiple children
+    if (React.Children.count(children) > 1) {
+      childNode = <div className={`${prefixCls}-content`}>{children}</div>;
+    }
+
+    // Mobile support additional render
+    if (popupRender) {
+      childNode = popupRender(childNode);
+    }
+
+    return (
+      <CSSMotion
+        visible={visible}
+        ref={elementRef}
+        removeOnLeave
+        {...popupMotion}
+      >
+        {({ className: motionClassName, style: motionStyle }, motionRef) => {
+          const mergedClassName = classNames(
+            prefixCls,
+            popupClassName,
+            motionClassName,
+          );
+
+          return (
+            <div
+              ref={motionRef}
+              className={mergedClassName}
+              style={{
+                ...motionStyle,
+                ...mergedStyle,
+              }}
+            >
+              {childNode}
+            </div>
+          );
+        }}
+      </CSSMotion>
+    );
+  },
+);
+
+MobilePopupInner.displayName = 'MobilePopupInner';
+
+export default MobilePopupInner;

src/Popup/PopupInner.tsx

@@ -134,7 +134,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
 
     // ======================== Motion ========================
     const motion = { ...getMotion(props) };
-    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach(eventName => {
+    ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd'].forEach((eventName) => {
       const originHandler: MotionEndEventHandler = motion[eventName];
       motion[eventName] = (element, event) => {
         goNextStatus();
@@ -143,7 +143,7 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
     });
 
     function onShowPrepare() {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
         prepareResolveRef.current = resolve;
       });
     }
@@ -166,7 +166,8 @@ const PopupInner = React.forwardRef<PopupInnerRef, PopupInnerProps>(
       ...stretchStyle,
       zIndex,
       ...style,
-      opacity: status === 'motion' || status === 'stable' || !visible ? undefined : 0,
+      opacity:
+        status === 'motion' || status === 'stable' || !visible ? undefined : 0,
       pointerEvents: status === 'stable' ? undefined : 'none',
     };
 

src/Popup/index.tsx

@@ -1,14 +1,18 @@
 import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { CSSMotionProps } from 'rc-motion';
+import isMobile from 'rc-util/lib/isMobile';
 import {
   StretchType,
   AlignType,
   TransitionNameType,
   AnimationType,
   Point,
+  MobileConfig,
 } from '../interface';
 import Mask from './Mask';
 import PopupInner, { PopupInnerRef } from './PopupInner';
+import MobilePopupInner from './MobilePopupInner';
 
 export interface PopupProps {
   visible?: boolean;
@@ -39,19 +43,41 @@ export interface PopupProps {
   transitionName: TransitionNameType;
   maskAnimation: AnimationType;
   maskTransitionName: TransitionNameType;
+
+  // Mobile
+  mobile?: MobileConfig;
 }
 
-const Popup = React.forwardRef<PopupInnerRef, PopupProps>((props, ref) => {
-  const { ...cloneProps } = props;
+const Popup = React.forwardRef<PopupInnerRef, PopupProps>(
+  ({ visible, mobile, ...props }, ref) => {
+    const [innerVisible, serInnerVisible] = useState(visible);
+    const [inMobile, setInMobile] = useState(false);
+    const cloneProps = { ...props, visible: innerVisible };
+
+    // We check mobile in visible changed here.
+    // And this also delay set `innerVisible` to avoid popup component render flash
+    useEffect(() => {
+      serInnerVisible(visible);
+      if (visible && mobile) {
+        setInMobile(isMobile());
+      }
+    }, [visible, !!mobile]);
 
-  // We can use fragment directly but this may failed some selector usage. Keep as origin logic
-  return (
-    <div>
-      <Mask {...cloneProps} />
+    const popupNode: React.ReactNode = inMobile ? (
+      <MobilePopupInner {...cloneProps} mobile={mobile} ref={ref} />
+    ) : (
       <PopupInner {...cloneProps} ref={ref} />
-    </div>
-  );
-});
+    );
+
+    // We can use fragment directly but this may failed some selector usage. Keep as origin logic
+    return (
+      <div>
+        <Mask {...cloneProps} />
+        {popupNode}
+      </div>
+    );
+  },
+);
 
 Popup.displayName = 'Popup';