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/__tests__/__snapshots__/cascader.spec.tsx.snap

@@ -12,7 +12,7 @@ exports[`Cascader > visible true 1`] = `
 <div>
   <div
     class="nut-overlay"
-    style="--nutui-overlay-zIndex: 1000;"
+    style="z-index: 1000;"
   />
   <div
     class="nut-popup nut-popup-round nut-popup-bottom"

src/packages/cascader/cascader.taro.tsx

@@ -10,7 +10,10 @@ 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,
+  CloseIconPosition,
+} from '@/packages/popup/index.taro'
 import { Tabs } from '@/packages/tabs/tabs.taro'
 import Tree, { convertListToOptions } from './utils'
 import {
@@ -57,7 +60,7 @@ export interface CascaderProps
   optionKey: CascaderOptionKey
   format: Record<string, string | number | null>
   closeable: boolean
-  closeIconPosition: string
+  closeIconPosition: CloseIconPosition
   closeIcon: ReactNode
   lazy: boolean
   onLoad: (node: any, resolve: any) => void

src/packages/cascader/cascader.tsx

@@ -9,7 +9,7 @@ import React, {
 } from 'react'
 import classNames from 'classnames'
 import { Loading, Check } from '@nutui/icons-react'
-import { Popup, PopupProps } from '@/packages/popup/popup'
+import Popup, { PopupProps, CloseIconPosition } from '@/packages/popup/index'
 import { Tabs } from '@/packages/tabs/tabs'
 import Tree, { convertListToOptions } from './utils'
 import {
@@ -56,7 +56,7 @@ export interface CascaderProps
   optionKey: CascaderOptionKey
   format: Record<string, string | number | null>
   closeable: boolean
-  closeIconPosition: string
+  closeIconPosition: CloseIconPosition
   closeIcon: ReactNode
   lazy: boolean
   onLoad: (node: any, resolve: any) => void

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,8 +100,8 @@ const confirm = (
   const update = (newConfig: DialogConfirmProps) => {
     dialogConfig = {
       ...dialogConfig,
-      title: config.title, // 避免 newConfig 未传递 title 时，icon 出现多个的问题
       ...newConfig,
+      title: config.title, // 避免 newConfig 未传递 title 时，icon 出现多个的问题
     }
 
     dialogConfig = normalizeConfig(dialogConfig)

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, ITouchEvent } from '@tarojs/components'
+import { ContentProps } from './index.taro'
 
-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: 'horizontal',
+  onClick: () => {},
 }
 
 export const Content: FunctionComponent<
@@ -24,39 +24,39 @@ 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]: footerDirection,
+          })}
+        >
+          {footer}
+        </View>
+      )
+    )
   }
 
-  const handleClick = (e: any) => {
+  const handleClick = (e: ITouchEvent) => {
     onClick && onClick(e)
   }
 
   return (
     <View
       className={classNames(`${classPrefix}-outer`, props.className)}
       style={props.style}
-      onClick={(e) => handleClick(e)}
+      onClick={(e: ITouchEvent) => handleClick(e)}
     >
       {close}
       {header}
@@ -65,9 +65,7 @@ export const Content: FunctionComponent<
         style={{ display: visible ? 'flex' : 'none' }}
       >
         {renderHeader()}
-        <View className={`${classPrefix}-content`}>
-          <>{children}</>
-        </View>
+        <View className={`${classPrefix}-content`}>{children}</View>
         {renderFooter()}
       </View>
     </View>

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: '',
+  footer: '',
+  close: '',
+  footerDirection: 'horizontal',
+  onClick: () => {},
 }
 
 export const Content: FunctionComponent<
-  Partial<ContentProps> & HTMLAttributes<HTMLDivElement>
+  Partial<ContentProps> &
+    Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'>
 > = (props) => {
   const {
     visible,
@@ -20,26 +23,30 @@ export const Content: FunctionComponent<
     footer,
     close,
     footerDirection,
-    onClick,
     children,
-  } = props
+    style,
+    className,
+    onClick,
+  } = { ...defaultContentProps, ...props }
 
   const classPrefix = 'nut-dialog'
 
   const renderHeader = () => {
-    return title ? <div className={`${classPrefix}-header`}>{title}</div> : null
+    return title && <div className={`${classPrefix}-header`}>{title}</div>
   }
 
   const renderFooter = () => {
-    return footer ? (
-      <div
-        className={classNames(`${classPrefix}-footer`, {
-          [footerDirection as any]: footerDirection,
-        })}
-      >
-        {footer}
-      </div>
-    ) : null
+    return (
+      footer && (
+        <div
+          className={classNames(`${classPrefix}-footer`, {
+            [footerDirection]: 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}
@@ -59,9 +66,7 @@ export const Content: FunctionComponent<
         style={{ display: visible ? 'flex' : 'none' }}
       >
         {renderHeader()}
-        <div className={`${classPrefix}-content`}>
-          <>{children}</>
-        </div>
+        <div className={`${classPrefix}-content`}>{children}</div>
         {renderFooter()}
       </div>
     </div>

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%;