refactor portal

packages/zent/RELEASE_NEXT.md

@@ -63,6 +63,14 @@
 
 导出的组件名字变了，老的写法
 
+#### `Portal`
+
+合并`Portal`和`LayeredPortal`。
+
+去除`Portal.withEscToClose`和`Portal.withNonScrollable`，`Portal`添加两个参数`withEscToClose`和`withNonScrollable`，`PurePortal`添加`withEscToClose`。
+
+去除`onMount`和`onUnmount`，直接使用`componentDidMount`和`componentWillUnmount`即可。
+
 ```js
 import { Layout } from 'zent';
 

packages/zent/__tests__/preview-image.js

@@ -21,7 +21,6 @@ describe('previewImage render', () => {
       showRotateBtn: true,
       index: 0,
     });
-    expect(document.querySelectorAll('.zent-portal').length).toBe(1);
     expect(document.querySelectorAll('.zent-image-p-anchor').length).toBe(1);
     expect(document.querySelectorAll('.zent-show-image').length).toBe(1);
 

packages/zent/src/dialog/Dialog.tsx

@@ -2,20 +2,14 @@ import * as React from 'react';
 import { Component } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
-import Portal, { IPortalProps } from '../portal';
+import Portal from '../portal';
 import isBrowser from '../utils/isBrowser';
-import { DialogElWrapper, DialogInnerEl } from './DialogEl';
+import { DialogElWrapper, DialogInnerEl, IMousePosition } from './DialogEl';
 import { openDialog, closeDialog } from './open';
 
-const { withNonScrollable, withESCToClose } = Portal;
-const DialogPortal = withNonScrollable(Portal as React.ComponentType<
-  IPortalProps
->);
-const DialogPortalESCToClose = withESCToClose(DialogPortal);
-
 const TIMEOUT = 300; // ms
 
-let mousePosition = null;
+let mousePosition: IMousePosition | null = null;
 
 // Inspired by antd and rc-dialog
 if (isBrowser) {
@@ -31,7 +25,7 @@ export interface IDialogProps {
   title?: React.ReactNode;
   children?: React.ReactNode;
   footer?: React.ReactNode;
-  visible?: boolean;
+  visible: boolean;
   closeBtn?: boolean;
   onClose?: (
     e:
@@ -43,7 +37,7 @@ export interface IDialogProps {
   maskClosable?: boolean;
   className?: string;
   prefix?: string;
-  style?: React.CSSProperties;
+  style: React.CSSProperties;
   onOpened?: () => void;
   onClosed?: () => void;
 }
@@ -70,7 +64,7 @@ export class Dialog extends Component<IDialogProps, IDialogState> {
   static openDialog = openDialog;
   static closeDialog = closeDialog;
 
-  lastMousePosition = null;
+  lastMousePosition: IMousePosition | null = null;
 
   constructor(props: IDialogProps) {
     super(props);
@@ -139,14 +133,13 @@ export class Dialog extends Component<IDialogProps, IDialogState> {
       this.lastMousePosition = null;
     }
 
-    // 有关闭按钮的时候同时具有ESC关闭的行为
-    const PortalComponent = closeBtn ? DialogPortalESCToClose : DialogPortal;
-
     return (
-      <PortalComponent
+      <Portal
         visible={visible || exiting}
         onClose={this.onClose}
         className={`${prefix}-dialog-r-anchor`}
+        withEscToClose={closeBtn}
+        withNonScrollable
       >
         <DialogElWrapper
           prefix={prefix}
@@ -176,7 +169,7 @@ export class Dialog extends Component<IDialogProps, IDialogState> {
             </DialogInnerEl>
           </CSSTransition>
         </DialogElWrapper>
-      </PortalComponent>
+      </Portal>
     );
   }
 }

packages/zent/src/dialog/DialogEl.tsx

@@ -3,6 +3,11 @@ import { Component, createRef } from 'react';
 import cx from 'classnames';
 import focusWithoutScroll from '../utils/dom/focusWithoutScroll';
 
+export interface IMousePosition {
+  x: number;
+  y: number;
+}
+
 export interface IDialogInnerElProps {
   prefix?: string;
   title?: React.ReactNode;
@@ -11,10 +16,7 @@ export interface IDialogInnerElProps {
   closeBtn?: boolean;
   style?: React.CSSProperties;
   footer?: React.ReactNode;
-  mousePosition?: {
-    x: number;
-    y: number;
-  } | null;
+  mousePosition?: IMousePosition | null;
 }
 
 export class DialogInnerEl extends Component<IDialogInnerElProps> {
@@ -41,7 +43,7 @@ export class DialogInnerEl extends Component<IDialogInnerElProps> {
       const origin = `${mousePosition.x - x}px ${mousePosition.y - y}px 0`;
       const style = this.dialogEl.style;
       ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
-        style[`${prefix}TransformOrigin`] = origin;
+        style[`${prefix}TransformOrigin` as any] = origin;
       });
       style.transformOrigin = origin;
     }

packages/zent/src/dialog/open.tsx

@@ -29,7 +29,7 @@ export interface ICloseDialogOption {
 }
 
 interface IStandaloneDialogProps {
-  options: IOpenDialogOption & { dialogId: string };
+  options: Partial<IOpenDialogOption> & { dialogId: string };
   container: HTMLDivElement;
 }
 
@@ -112,7 +112,7 @@ export interface IOpenDialogOption extends Omit<IDialogProps, 'onClose'> {
 /*
   打开一个dialog，返回值是一个用来关闭dialog的函数。
 */
-export function openDialog(options: IOpenDialogOption = {}) {
+export function openDialog(options: Partial<IOpenDialogOption> = {}) {
   if (!isBrowser) return noop;
 
   const { dialogId = uniqueId('__zent-dialog__'), parentComponent } = options;

packages/zent/src/loading/FullScreenLoading.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import cx from 'classnames';
-import isUndefined from 'lodash-es/isUndefined';
+import isNumber from 'lodash-es/isNumber';
 
-import PurePortal from '../portal/PurePortal';
-import withNonScrollable from '../portal/withNonScrollable';
 import useDelayed from './hooks/useDelayed';
 import { IFullScreenLoadingProps, FullScreenDefaultProps } from './props';
 import LoadingMask from './components/LoadingMask';
+import { LayeredPortal } from '../portal';
 
-const NO_STYLE = {};
-
-const NonScrollablePurePortal = withNonScrollable(PurePortal);
+const NO_STYLE: Partial<CSSStyleDeclaration> = {};
 
 export function FullScreenLoading(props: IFullScreenLoadingProps) {
   const {
@@ -29,22 +26,21 @@ export function FullScreenLoading(props: IFullScreenLoadingProps) {
     return null;
   }
 
-  const style = isUndefined(zIndex) ? NO_STYLE : { zIndex };
+  const style = isNumber(zIndex) ? NO_STYLE : { zIndex };
 
   return (
-    <NonScrollablePurePortal selector={document.body} append>
-      <div
-        className={cx('zent-loading', 'zent-loading--fullscreen', className)}
-        style={style}
-      >
-        <LoadingMask
-          icon={icon}
-          size={iconSize}
-          text={iconText}
-          textPosition={textPosition}
-        />
-      </div>
-    </NonScrollablePurePortal>
+    <LayeredPortal
+      className={cx('zent-loading', 'zent-loading--fullscreen', className)}
+      style={style}
+      withNonScrollable
+    >
+      <LoadingMask
+        icon={icon}
+        size={iconSize}
+        text={iconText}
+        textPosition={textPosition}
+      />
+    </LayeredPortal>
   );
 }
 

packages/zent/src/loading/props.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 
 export interface ILoadingBaseProps {
-  loading?: boolean;
-  delay?: number;
-  icon?: 'youzan' | 'circle';
+  loading: boolean;
+  delay: number;
+  icon: 'youzan' | 'circle';
   iconSize?: number;
   iconText?: React.ReactNode;
-  textPosition?: 'top' | 'bottom' | 'left' | 'right';
+  textPosition: 'top' | 'bottom' | 'left' | 'right';
   className?: string;
 }
 

packages/zent/src/pop/position.ts

@@ -2,7 +2,6 @@ import capitalize from 'lodash-es/capitalize';
 import isFunction from 'lodash-es/isFunction';
 
 import Popover from '../popover';
-import { CSSProperties } from 'react';
 
 const { Position } = Popover;
 
@@ -12,7 +11,7 @@ const ARROW_OFFSET_V = 9;
 
 const createPosition = (x, y, side) => {
   return {
-    getCSSStyle(): CSSProperties {
+    getCSSStyle(): Partial<CSSStyleDeclaration> {
       return {
         position: 'absolute',
         left: `${Math.round(x)}px`,

packages/zent/src/popover/Content.tsx

@@ -49,7 +49,7 @@ export interface IPopoverContentState {
  */
 export default class PopoverContent extends Component<
   IPopoverContentProps,
-  any
+  IPopoverContentState
 > {
   positionReady: boolean;
   positionedParent: Element | null;
@@ -135,7 +135,6 @@ export default class PopoverContent extends Component<
         containerBoundingBoxViewport: parentBoundingBox,
       }
     );
-
     if (!isEqualPlacement(this.state.position, position)) {
       this.setState(
         {
@@ -162,7 +161,6 @@ export default class PopoverContent extends Component<
 
   componentDidMount() {
     const { visible } = this.props;
-
     if (visible) {
       this.adjustPosition();
     }
@@ -196,12 +194,10 @@ export default class PopoverContent extends Component<
 
     return (
       <Portal
-        prefix={prefix}
         visible={visible}
         selector={containerSelector}
         className={cls}
         style={position.getCSSStyle()}
-        onMount={this.adjustPosition}
       >
         <div className={`${prefix}-popover-content`}>
           {children}

packages/zent/src/popover/placement/invisible.ts

@@ -9,13 +9,13 @@ const locate: PositionFunctionImpl = () => {
   const y = -100000;
 
   return {
-    getCSSStyle() {
+    getCSSStyle(): Partial<CSSStyleDeclaration> {
       return {
         position: 'fixed',
         left: `${x}px`,
         top: `${y}px`,
-        zIndex: -10,
-        opacity: 0,
+        zIndex: '-10',
+        opacity: '0',
       };
     },
 

packages/zent/src/popover/position-function.ts

@@ -1,5 +1,5 @@
 export interface IPopoverPosition {
-  getCSSStyle: () => React.CSSProperties;
+  getCSSStyle: () => Partial<CSSStyleDeclaration>;
   name: string;
 }