feat: update SearchResult & BaseModal (#3)

* feat(utils): 添加元素类型判断

* chore: updaed

* chore: update SearchResult

Author: Wxh16144

packages/desktop-ui/src/_utils/is.ts

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export function isElement<P>(element: any): element is React.ReactElement<P> {
+  return React.isValidElement(element)
+}
+
+export function isDOMTypeElement<
+  P extends React.HTMLAttributes<T> | React.SVGAttributes<T>,
+  T extends Element,
+>(element: any): element is React.DOMElement<P, T> {
+  return isElement(element) && typeof element.type === 'string'
+}

packages/desktop-ui/src/base-modal/demo/Event.tsx

@@ -5,7 +5,7 @@ import { Button, message } from 'antd'
 function BaseModalBaseDemo() {
   return (
     <BaseModal
-      modalContent={<>这是弹窗内容</>}
+      modalContent="这是弹窗内容"
       onClick={(event, modalAction) => {
         window.console.log({ event, modalAction })
         message.info({

packages/desktop-ui/src/base-modal/index.tsx

@@ -3,15 +3,16 @@ import { useBoolean } from 'ahooks'
 import classNames from 'classnames'
 import React, { useImperativeHandle, useRef } from 'react'
 import { defaultPrefixCls } from '../constants'
+import { isDOMTypeElement, isElement } from '../_utils/is'
 
 export interface BaseModalAction {
   close: () => void
   open: () => void
 }
 
 export interface BaseModalProps {
-  children?: React.ReactElement
-  modalContent?: React.ReactElement
+  children?: React.ReactNode
+  modalContent?: React.ReactNode
   onClick?: (
     e: React.MouseEvent<HTMLElement>,
     modalAction: BaseModalAction
@@ -36,32 +37,39 @@ const BaseModal: React.ForwardRefRenderFunction<unknown, BaseModalProps> = (prop
 
   useImperativeHandle(ref, () => modalActionRef.current, [modalActionRef])
 
-  const handleButtonClick = (e: React.MouseEvent<HTMLElement>) => {
+  const handleButtonClick = (event: React.MouseEvent<HTMLElement>) => {
     if (onClick)
-      return onClick(e, modalActionRef.current)
+      return onClick(event, modalActionRef.current)
 
     return open()
   }
 
-  const handleModalOk = (e: React.MouseEvent<HTMLElement>) => {
+  const handleModalOk = (event: React.MouseEvent<HTMLElement>) => {
     if (onOk)
-      return onOk(e)
+      return onOk(event)
 
     return close()
   }
 
-  const handleModalCancel = (e: React.MouseEvent<HTMLElement>) => {
+  const handleModalCancel = (event: React.MouseEvent<HTMLElement>) => {
     if (onCancel)
-      onCancel(e)
+      onCancel(event)
 
     return close()
   }
 
-  const buttonNode
-    = children && React.cloneElement(children, { onClick: handleButtonClick })
-
-  const childrenNode
-    = modalContent && React.cloneElement(modalContent, { modalAction: modalActionRef.current })
+  // ======================== buttonNode ========================
+  let buttonNode: React.ReactNode = children
+  if (React.isValidElement(children))
+    buttonNode = React.cloneElement<any>(children, { onClick: handleButtonClick })
+
+  // ======================== modalContent ========================
+  let childrenNode: React.ReactNode = modalContent
+  if (isElement(childrenNode) && !isDOMTypeElement(childrenNode)) {
+    childrenNode = React.cloneElement<any>(childrenNode, {
+      modalAction: modalActionRef.current,
+    })
+  }
 
   return (
     <>

packages/desktop-ui/src/search-result/style/index.less

@@ -16,5 +16,6 @@
     overflow: overlay;
     background-color: #fff;
     box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
+    z-index: @base-z-index;
   }
 }

packages/desktop-ui/src/styles/themes/default.less

@@ -17,3 +17,7 @@
 // border
 @border-color: #ebebeb;
 @border-radius: 4px;
+
+
+// z-index
+@base-z-index: 1;