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

scripts/build-taro.mjs

@@ -19,6 +19,10 @@ import { generate } from './build-theme-typings.mjs'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
+const isTypesTaro = (name, type) => {
+  return name.indexOf(type) > -1
+}
+
 // 写文件
 async function dest(file, content) {
   const dir = dirname(file)
@@ -31,7 +35,7 @@ async function dest(file, content) {
   await writeFile(file, content)
 }
 
-const transform = (file, api) => {
+const transform = (file, api, replace) => {
   const j = api.jscodeshift.withParser('ts')
   const ast = j(file.source)
   const imports = ast.find(j.ImportDeclaration)
@@ -45,7 +49,10 @@ const transform = (file, api) => {
         : ''
     if (!path.node.source) return
     if (!alias) {
-      path.node.source.value = path.node.source.value.replace('.taro', '')
+      // 处理这里，文件引入中的相对路径下的types的引入。
+      path.node.source.value = (!replace || replace && !isTypesTaro(path.node.source.value, 'types.taro')) 
+        ? path.node.source.value.replace('.taro', '') 
+        : path.node.source.value
       return
     }
     const dir = join(__dirname, alias.replace('@/', '../src/'))
@@ -170,8 +177,12 @@ async function buildDeclaration() {
         path: join(__dirname, '../', file).replace('/dist/types', ''),
       },
       { jscodeshift: j },
+      true
     )
-    const to = file.replace('dist/types/src', '').replace('.taro', '')
+
+    // 修改文件名，除 types.taro 不改之外，其他都修改。
+    let to = file.replace('dist/types/src', '')
+    to = isTypesTaro(to, 'types.taro') ? to : to.replace('.taro', '')
     await dest(join('dist/es', to), result)
     await dest(join('dist/cjs', to), result)
   }

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/configprovider/types.ts

@@ -6,8 +6,6 @@ export type NutCSSVariables =
   | 'nutuiColorPrimaryDisabled'
   | 'nutuiColorPrimaryDisabledSpecial'
   | 'nutuiColorPrimaryLightPressed'
-  | 'nutuiBrand3'
-  | 'nutuiBrand1'
   | 'nutuiColorPrimaryIcon'
   | 'nutuiColorPrimaryIconDisabled'
   | 'nutuiColorPrimarySpecialdisabled'

src/packages/dialog/confirm.tsx

@@ -1,45 +1,34 @@
 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) {
+type DialogConfirmNativeProps = Partial<DialogConfirmProps>
+function ConfirmDialog(props: DialogConfirmNativeProps) {
   return <Dialog {...props}>{props.content}</Dialog>
 }
 
 // 如果是消息提示型弹出框，那么只有确认按钮
 export const normalizeConfig = (
-  config: DialogConfirmProps
-): DialogConfirmProps => {
-  if (config.isNotice) {
-    let { icon } = config
-    if (!icon && icon !== null) {
-      switch (config.noticeType) {
-        case 'alert':
-          icon = ''
-          break
-        default:
-          break
-      }
-    }
-    config.hideCancelButton = true
-  }
+  config: DialogConfirmNativeProps
+): DialogConfirmNativeProps => {
+  config.hideCancelButton = config.isNotice
   return config
 }
 
 const confirm = (
-  config: DialogConfirmProps,
-  renderFunc?: (props: DialogConfirmProps) => void
+  config: DialogConfirmNativeProps,
+  renderFunc?: (props: DialogConfirmNativeProps) => void
 ): DialogReturnProps => {
   const div = document.createElement('div')
   document.body.appendChild(div)
 
-  let dialogConfig: DialogConfirmProps = {
+  let dialogConfig: DialogConfirmNativeProps = {
     ...config,
     visible: false,
   }
 
-  const render = (props: DialogConfirmProps, callback?: () => any) => {
+  const render = (props: DialogConfirmNativeProps, callback?: () => any) => {
     reactRender(<ConfirmDialog {...props} onCancel={() => onCancel()} />, div)
     callback && callback()
   }
@@ -97,13 +86,11 @@
     })
   }
 
-  const update = (newConfig: DialogConfirmProps) => {
+  const update = (newConfig: DialogConfirmNativeProps) => {
     dialogConfig = {
       ...dialogConfig,
-      title: config.title, // 避免 newConfig 未传递 title 时，icon 出现多个的问题
       ...newConfig,
     }
-
     dialogConfig = normalizeConfig(dialogConfig)
     renderFunction(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 './types.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: '',
+  footer: '',
+  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>