Popup 使用 functional 重构

compiled/alipay/src/Popup/index.sjs

@@ -4,12 +4,12 @@ function getContentStyle(position, animation, duration, width, height) {
     style += "-webkit-animation-duration:".concat(duration, "ms; animation-duration:").concat(duration, "ms;");
   }
   if (position === 'top' || position === 'bottom') {
-    if (typeof height !== 'undefined') {
+    if (typeof height !== 'undefined' && height !== null) {
       style += "height:".concat(height, "px");
     }
   }
   if (position === 'left' || position === 'right') {
-    if (typeof width !== 'undefined') {
+    if (typeof width !== 'undefined' && width !== null) {
       style += "width:".concat(width, "px");
     }
   }

compiled/alipay/src/Popup/index.ts

@@ -1,52 +1,66 @@
-import { PopupDefaultProps } from './props';
-import { compareVersion } from '../_util/compareVersion';
+import { useState, useEvent } from 'functional-mini/component';
 import '../_util/assert-component2';
+import { mountComponent } from '../_util/component';
+import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { useLayoutUpdateEffect } from '../_util/hooks/useLayoutEffect';
+import { isOldSDKVersion } from '../_util/platform';
+import { IPopupProps } from './props';
 
-const SDKVersion = my.SDKVersion;
-const isOldVersion = compareVersion(SDKVersion, '2.0.0') < 0;
-const component2 = my.canIUse('component2');
+const isOldVersion = isOldSDKVersion();
 
-Component({
-  props: PopupDefaultProps,
-  data: {
-    closing: false,
-    isOldVersion,
-  },
-  didUpdate(prevProps) {
-    if (component2) {
-      return;
-    }
-    const { visible, duration, animation } = this.props;
-    if (prevProps.visible && !visible) {
-      if (animation && duration > 0) {
-        this.setData({ closing: true });
-      }
-    }
-  },
-  deriveDataFromProps(nextProps) {
-    const { visible, duration, animation } = nextProps;
-    if (this.props.visible && !visible) {
-      if (animation && duration > 0) {
-        this.setData({ closing: true });
-      }
+const Popup = (props: IPopupProps) => {
+  const enableAnimation = props.animation && props.duration > 0;
+  const [closing, setClosing] = useState(false);
+
+  const { triggerEventOnly } = useComponentEvent(props);
+
+  useLayoutUpdateEffect(() => {
+    if (!props.visible && enableAnimation) {
+      setClosing(true);
     }
-  },
-  methods: {
-    onTapMask() {
-      const { closing } = this.data;
+  }, [props.visible]);
+
+  useEvent(
+    'onAnimationEnd',
+    () => {
       if (closing) {
-        return;
-      }
-      const { onClose } = this.props;
-      if (onClose) {
-        onClose();
+        setClosing(false);
       }
     },
-    onAnimationEnd() {
-      const { closing } = this.data;
+    [closing]
+  );
+
+  useEvent(
+    'onTapMask',
+    () => {
       if (closing) {
-        this.setData({ closing: false });
+        return;
       }
+      triggerEventOnly('close');
     },
-  },
+    [closing]
+  );
+
+  return {
+    closing,
+    isOldVersion,
+  };
+};
+
+mountComponent(Popup, {
+  visible: false,
+  destroyOnClose: false,
+  showMask: true,
+  position: 'bottom',
+  // 是否开启动画
+  animation: true,
+  animationType: 'transform',
+  // 动画持续时间
+  duration: 300,
+  height: null,
+  width: null,
+  maskClassName: '',
+  maskStyle: '',
+  // 弹窗层级
+  zIndex: 998,
 });

compiled/alipay/src/Popup/props.ts

@@ -18,21 +18,18 @@ export interface IPopupProps extends IBaseProps {
    * @default true
    */
   showMask: boolean;
-  /**
-   * @description 关闭时回调
-   */
-  onClose: () => void;
+
   /**
    * @description 弹窗布局
-   * @default "center"
+   * @default "bottom"
    */
   position: 'center' | 'top' | 'bottom' | 'left' | 'right';
   /**
-   * @desciption 是否开启过渡动画
+   * @description 是否开启过渡动画
    */
   animation: boolean;
   /**
-   * @desciption  动画类型
+   * @description  动画类型
    * @default "transform"
    */
   animationType: 'transform' | 'position';
@@ -56,7 +53,12 @@ export interface IPopupProps extends IBaseProps {
    * @description 遮罩层样式
    */
   maskStyle: string;
+
   zIndex: number;
+  /**
+   * @description 关闭时回调
+   */
+  onClose?: () => void;
 }
 
 export const PopupDefaultProps: Partial<IPopupProps> = {

compiled/alipay/src/_util/platform.ts

@@ -1,3 +1,5 @@
+import { compareVersion } from './compareVersion';
+
 export function supportUndefinedProperty(): boolean {
   let support = true;
 
@@ -18,3 +20,12 @@ export function resolveEventValue(value) {
 
   return value;
 }
+
+export function isOldSDKVersion() {
+  if (platform() === 'wechat') {
+    return false;
+  }
+  const SDKVersion = my.SDKVersion;
+  const isOldVersion = compareVersion(SDKVersion, '2.0.0') < 0;
+  return isOldVersion;
+}

compiled/wechat/src/_util/platform.js

@@ -1,3 +1,4 @@
+import { compareVersion } from './compareVersion';
 export function supportUndefinedProperty() {
     var support = true;
     support = false;
@@ -14,3 +15,11 @@ export function resolveEventValue(value) {
     }
     return value;
 }
+export function isOldSDKVersion() {
+    if (platform() === 'wechat') {
+        return false;
+    }
+    var SDKVersion = my.SDKVersion;
+    var isOldVersion = compareVersion(SDKVersion, '2.0.0') < 0;
+    return isOldVersion;
+}

src/Popup/index.sjs.ts

@@ -4,12 +4,12 @@ function getContentStyle(position, animation, duration, width, height) {
     style += `-webkit-animation-duration:${duration}ms; animation-duration:${duration}ms;`;
   }
   if (position === 'top' || position === 'bottom') {
-    if (typeof height !== 'undefined') {
+    if (typeof height !== 'undefined' && height !== null) {
       style += `height:${height}px`;
     }
   }
   if (position === 'left' || position === 'right') {
-    if (typeof width !== 'undefined') {
+    if (typeof width !== 'undefined' && width !== null) {
       style += `width:${width}px`;
     }
   }

src/Popup/index.ts

@@ -1,52 +1,66 @@
-import { PopupDefaultProps } from './props';
-import { compareVersion } from '../_util/compareVersion';
+import { useState, useEvent } from 'functional-mini/component';
 import '../_util/assert-component2';
+import { mountComponent } from '../_util/component';
+import { useComponentEvent } from '../_util/hooks/useComponentEvent';
+import { useLayoutUpdateEffect } from '../_util/hooks/useLayoutEffect';
+import { isOldSDKVersion } from '../_util/platform';
+import { IPopupProps } from './props';
 
-const SDKVersion = my.SDKVersion;
-const isOldVersion = compareVersion(SDKVersion, '2.0.0') < 0;
-const component2 = my.canIUse('component2');
+const isOldVersion = isOldSDKVersion();
 
-Component({
-  props: PopupDefaultProps,
-  data: {
-    closing: false,
-    isOldVersion,
-  },
-  didUpdate(prevProps) {
-    if (component2) {
-      return;
-    }
-    const { visible, duration, animation } = this.props;
-    if (prevProps.visible && !visible) {
-      if (animation && duration > 0) {
-        this.setData({ closing: true });
-      }
-    }
-  },
-  deriveDataFromProps(nextProps) {
-    const { visible, duration, animation } = nextProps;
-    if (this.props.visible && !visible) {
-      if (animation && duration > 0) {
-        this.setData({ closing: true });
-      }
+const Popup = (props: IPopupProps) => {
+  const enableAnimation = props.animation && props.duration > 0;
+  const [closing, setClosing] = useState(false);
+
+  const { triggerEventOnly } = useComponentEvent(props);
+
+  useLayoutUpdateEffect(() => {
+    if (!props.visible && enableAnimation) {
+      setClosing(true);
     }
-  },
-  methods: {
-    onTapMask() {
-      const { closing } = this.data;
+  }, [props.visible]);
+
+  useEvent(
+    'onAnimationEnd',
+    () => {
       if (closing) {
-        return;
-      }
-      const { onClose } = this.props;
-      if (onClose) {
-        onClose();
+        setClosing(false);
       }
     },
-    onAnimationEnd() {
-      const { closing } = this.data;
+    [closing]
+  );
+
+  useEvent(
+    'onTapMask',
+    () => {
       if (closing) {
-        this.setData({ closing: false });
+        return;
       }
+      triggerEventOnly('close');
     },
-  },
+    [closing]
+  );
+
+  return {
+    closing,
+    isOldVersion,
+  };
+};
+
+mountComponent(Popup, {
+  visible: false,
+  destroyOnClose: false,
+  showMask: true,
+  position: 'bottom',
+  // 是否开启动画
+  animation: true,
+  animationType: 'transform',
+  // 动画持续时间
+  duration: 300,
+  height: null,
+  width: null,
+  maskClassName: '',
+  maskStyle: '',
+  // 弹窗层级
+  zIndex: 998,
 });

src/Popup/props.ts

@@ -18,21 +18,18 @@ export interface IPopupProps extends IBaseProps {
    * @default true
    */
   showMask: boolean;
-  /**
-   * @description 关闭时回调
-   */
-  onClose: () => void;
+
   /**
    * @description 弹窗布局
-   * @default "center"
+   * @default "bottom"
    */
   position: 'center' | 'top' | 'bottom' | 'left' | 'right';
   /**
-   * @desciption 是否开启过渡动画
+   * @description 是否开启过渡动画
    */
   animation: boolean;
   /**
-   * @desciption  动画类型
+   * @description  动画类型
    * @default "transform"
    */
   animationType: 'transform' | 'position';
@@ -56,7 +53,12 @@ export interface IPopupProps extends IBaseProps {
    * @description 遮罩层样式
    */
   maskStyle: string;
+
   zIndex: number;
+  /**
+   * @description 关闭时回调
+   */
+  onClose?: () => void;
 }
 
 export const PopupDefaultProps: Partial<IPopupProps> = {

src/_util/platform.ts

@@ -1,3 +1,5 @@
+import { compareVersion } from './compareVersion';
+
 export function supportUndefinedProperty(): boolean {
   let support = true;
 
@@ -32,3 +34,12 @@ export function resolveEventValue(value) {
 
   return value;
 }
+
+export function isOldSDKVersion() {
+  if (platform() === 'wechat') {
+    return false;
+  }
+  const SDKVersion = my.SDKVersion;
+  const isOldVersion = compareVersion(SDKVersion, '2.0.0') < 0;
+  return isOldVersion;
+}