refactor: fixed overlay zIndex is not effective, and extract types of dialog, overlay, fixednav, popup, toast

src/config.json

@@ -314,7 +314,7 @@
           "dd": true
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "FixedNav",
           "type": "component",
           "cName": "悬浮导航",
@@ -323,7 +323,7 @@
           "show": true,
           "taro": true,
           "author": "Ymm0008",
-          "dd": false
+          "dd": true
         },
         {
           "version": "3.0.0",

src/packages/cascader/cascader.taro.tsx

@@ -10,7 +10,7 @@ import React, {
 import classNames from 'classnames'
 import { Loading, Check } from '@nutui/icons-react-taro'
 import { ScrollView, View } from '@tarojs/components'
-import { Popup, PopupProps } from '@/packages/popup/popup.taro'
+import Popup, { PopupProps } from '@/packages/popup/index.taro'
 import { Tabs } from '@/packages/tabs/tabs.taro'
 import Tree, { convertListToOptions } from './utils'
 import {

src/packages/cascader/cascader.tsx

@@ -9,7 +9,7 @@
 } from 'react'
 import classNames from 'classnames'
 import { Loading, Check } from '@nutui/icons-react'
-import { Popup, PopupProps } from '@/packages/popup/popup'
+import Popup, { PopupProps } from '@/packages/popup/index'
 import { Tabs } from '@/packages/tabs/tabs'
 import Tree, { convertListToOptions } from './utils'
 import {
@@ -476,7 +476,7 @@
   return (
     <>
       {popup ? (
         <Popup
           {...popupProps}
           visible={innerVisible}
           position="bottom"

src/packages/dialog/confirm.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Dialog } from './dialog'
-import { destroyList, DialogConfirmProps, DialogReturnProps } from './config'
+import { destroyList, DialogConfirmProps, DialogReturnProps } from './types'
 import { render as reactRender, unmount } from '@/utils/render'
 
 function ConfirmDialog(props: DialogConfirmProps) {
@@ -100,7 +100,7 @@
   const update = (newConfig: DialogConfirmProps) => {
     dialogConfig = {
       ...dialogConfig,
       title: config.title, // 避免 newConfig 未传递 title 时，icon 出现多个的问题
       ...newConfig,
     }
 

src/packages/dialog/content.taro.tsx

@@ -1,16 +1,16 @@
-import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'
+import React, { FunctionComponent, HTMLAttributes } from 'react'
 import classNames from 'classnames'
-import { ITouchEvent, View } from '@tarojs/components'
-import { BasicComponent } from '@/utils/typings'
+import { View } from '@tarojs/components'
+import { ContentProps } from './types'
 
-interface ContentProps extends BasicComponent {
-  visible: boolean
-  title: ReactNode
-  header: ReactNode
-  footer: ReactNode
-  close: ReactNode
-  footerDirection: string
-  onClick: (event: ITouchEvent) => void
+export const defaultContentProps: ContentProps = {
+  visible: false,
+  title: '',
+  header: null,
+  footer: null,
+  close: '',
+  footerDirection: '',
+  onClick: () => {},
 }
 
 export const Content: FunctionComponent<
@@ -24,28 +24,28 @@ export const Content: FunctionComponent<
     footer,
     close,
     footerDirection,
-    onClick,
     children,
-  } = props
+    onClick,
+  } = { ...defaultContentProps, ...props }
 
   const classPrefix = 'nut-dialog'
 
   const renderHeader = () => {
-    return title ? (
-      <View className={`${classPrefix}-header`}>{title}</View>
-    ) : null
+    return title && <View className={`${classPrefix}-header`}>{title}</View>
   }
 
   const renderFooter = () => {
-    return footer ? (
-      <View
-        className={classNames(`${classPrefix}-footer`, {
-          [footerDirection as any]: footerDirection,
-        })}
-      >
-        {footer}
-      </View>
-    ) : null
+    return (
+      footer && (
+        <View
+          className={classNames(`${classPrefix}-footer`, {
+            [footerDirection as any]: footerDirection,
+          })}
+        >
+          {footer}
+        </View>
+      )
+    )
   }
 
   const handleClick = (e: any) => {

src/packages/dialog/content.tsx

@@ -1,17 +1,20 @@
-import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react'
+import React, { FunctionComponent, HTMLAttributes } from 'react'
 import classNames from 'classnames'
+import { ContentProps } from './types'
 
-interface ContentProps {
-  visible: boolean
-  title: ReactNode
-  header: ReactNode
-  footer: ReactNode
-  close: ReactNode
-  footerDirection: string
+export const defaultContentProps: ContentProps = {
+  visible: false,
+  title: '',
+  header: null,
+  footer: null,
+  close: '',
+  footerDirection: '',
+  onClick: () => {},
 }
 
 export const Content: FunctionComponent<
-  Partial<ContentProps> & HTMLAttributes<HTMLDivElement>
+  Partial<ContentProps> &
+    Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'>
 > = (props) => {
   const {
     visible,
@@ -22,7 +25,9 @@ export const Content: FunctionComponent<
     footerDirection,
     onClick,
     children,
-  } = props
+    style,
+    className,
+  } = { ...defaultContentProps, ...props }
 
   const classPrefix = 'nut-dialog'
 
@@ -31,15 +36,17 @@ export const Content: FunctionComponent<
   }
 
   const renderFooter = () => {
-    return footer ? (
-      <div
-        className={classNames(`${classPrefix}-footer`, {
-          [footerDirection as any]: footerDirection,
-        })}
-      >
-        {footer}
-      </div>
-    ) : null
+    return (
+      footer && (
+        <div
+          className={classNames(`${classPrefix}-footer`, {
+            [footerDirection as any]: footerDirection,
+          })}
+        >
+          {footer}
+        </div>
+      )
+    )
   }
 
   const handleClick = (e: any) => {
@@ -48,8 +55,8 @@ export const Content: FunctionComponent<
 
   return (
     <div
-      className={classNames(`${classPrefix}-outer`, props.className)}
-      style={props.style}
+      className={classNames(`${classPrefix}-outer`, className)}
+      style={style}
       onClick={(e) => handleClick(e)}
     >
       {close}

src/packages/dialog/dialog.scss

@@ -13,10 +13,6 @@
   padding: $dialog-padding;
   box-sizing: border-box;
 
-  &-overlay {
-    --nutui-overlay-zIndex: 1200;
-  }
-
   &-outer {
     position: fixed;
     max-height: 100%;

src/packages/dialog/dialog.taro.tsx

@@ -5,8 +5,8 @@ import { CSSTransition } from 'react-transition-group'
 import { View } from '@tarojs/components'
 import { Failure, Close } from '@nutui/icons-react-taro'
 import Button from '@/packages/button/index.taro'
-import { DialogBasicProps } from './config'
-import { Content } from './content.taro'
+import { DialogBasicProps } from './types'
+import { Content, defaultContentProps } from './content.taro'
 import { useConfig } from '@/packages/configprovider/configprovider.taro'
 import Overlay from '@/packages/overlay/index.taro'
 import {
@@ -15,33 +15,37 @@ import {
   useCustomEventsPath,
   useParams,
 } from '@/utils/use-custom-event'
-import { BasicComponent } from '@/utils/typings'
 import { useLockScrollTaro } from '@/utils/use-lock-scoll-taro'
 import { mergeProps } from '@/utils/merge-props'
+import { defaultOverlayProps } from '@/packages/overlay/overlay.taro'
 
-export type DialogProps = DialogBasicProps & BasicComponent
-const defaultProps = {
+const defaultProps: DialogBasicProps = {
+  ...defaultOverlayProps,
+  ...defaultContentProps,
   title: '',
   content: '',
   header: '',
   footer: '',
   confirmText: '',
   cancelText: '',
   overlay: true,
-  closeOnOverlayClick: true,
+  overlayStyle: {},
+  overlayClassName: 'nut-dialog-overlay',
   hideConfirmButton: false,
   hideCancelButton: false,
   disableConfirmButton: false,
   footerDirection: 'horizontal',
-  lockScroll: true,
   closeIconPosition: 'bottom',
   closeIcon: false,
+  zIndex: 1200,
   beforeCancel: () => true,
   beforeClose: () => true,
+  onCancel: () => {},
+  onClose: () => {},
   onOverlayClick: () => true,
-} as DialogProps
+}
 
-export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
+export const BaseDialog: FunctionComponent<Partial<DialogBasicProps>> & {
   open: typeof open
   close: typeof close
 } = (props) => {
@@ -70,8 +74,11 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       confirmText,
       cancelText,
       overlay,
+      overlayStyle,
+      overlayClassName,
       closeIconPosition,
       closeIcon,
+      zIndex,
       onClose,
       onCancel,
       onConfirm,
@@ -84,11 +91,7 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
   useCustomEvent(
     id as string,
     ({ status, options }: { status: boolean; options: any }) => {
-      if (status) {
-        setParams({ ...options, visible: true })
-      } else {
-        setParams({ ...options, visible: false })
-      }
+      setParams({ ...options, visible: status })
     }
   )
   const refObject = useLockScrollTaro(!!(visible && lockScroll))
@@ -181,9 +184,9 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
 
   const onHandleClickOverlay = (e: any) => {
     if (closeOnOverlayClick && visible && e.target === e.currentTarget) {
-      const closed = onOverlayClick && onOverlayClick()
-      closed && onClose?.()
-      closed && onCancel?.()
+      const closed = onOverlayClick && onOverlayClick(e)
+      closed && onClose && onClose()
+      closed && onCancel && onCancel()
     }
   }
 
@@ -194,15 +197,17 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       catchMove={lockScroll}
     >
       <>
-        {overlay ? (
+        {overlay && (
           <Overlay
+            zIndex={zIndex}
             visible={visible}
+            style={overlayStyle}
+            className={overlayClassName}
             closeOnOverlayClick={closeOnOverlayClick}
             lockScroll={lockScroll}
             onClick={onHandleClickOverlay}
-            className={classNames('nut-dialog-overlay')}
           />
-        ) : null}
+        )}
 
         <CSSTransition
           in={visible}