feat: 添加弹窗组件增强 hook

Author: Wxh16144

config/menus/utils.ts

@@ -5,7 +5,10 @@ const utilsMenu = [
   },
   {
     title: 'React Hooks',
-    children: ['src/use-props-value'],
+    children: [
+      'src/use-props-value',
+      'src/use-modal-enhanced',
+    ],
   },
   // {
   //   title: "Date & Time",

packages/utils/package.json

@@ -20,5 +20,9 @@
   },
   "publishConfig": {
     "registry": "http://nas.wxhboy.cn:98/"
+  },
+  "devDependencies": {
+    "@types/react-transition-group": "^4.4.5",
+    "react-transition-group": "^4.4.5"
   }
 }

packages/utils/src/index.ts

@@ -1,6 +1,13 @@
 export { default as usePropsValue } from './use-props-value'
 export { default as mergeProps } from './with-default-props'
 
+export type {
+  UseModalEnhancedAction,
+  UseModalEnhancedProps,
+  UseModalEnhancedContext,
+} from './use-modal-enhanced'
+export { default as useModalEnhanced } from './use-modal-enhanced'
+
 // RegExp
 export * as anyRule from './any-rule'
 

packages/utils/src/use-modal-enhanced/demo/Basic.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import type { UseModalEnhancedAction, UseModalEnhancedContext, UseModalEnhancedProps } from '@template-pro/utils'
+import { useModalEnhanced } from '@template-pro/utils'
+import type { ModalProps } from './Modal'
+import Modal from './Modal'
+
+type EnhancedModalProps = ModalProps & UseModalEnhancedProps
+
+const EnhancedModal = (props: EnhancedModalProps) => {
+  const [
+    visible,
+    { close },
+    { content, trigger },
+  ] = useModalEnhanced(props)
+
+  return (
+    <>
+      {trigger}
+      <Modal
+        visible={visible}
+        title="EnhancedModal"
+        {...props}
+        onClose={close}
+      >
+        {content}
+      </Modal>
+    </>
+  )
+}
+
+// Final usage
+const Content = ({ enhancedAction }: Partial<UseModalEnhancedContext>) => (
+  <>
+    hello world
+    <p>Content</p>
+    <button onClick={enhancedAction?.close}>Content Close</button>
+  </>
+)
+
+function App() {
+  const actionRef = React.useRef<UseModalEnhancedAction>(null)
+
+  return (
+    <>
+      <EnhancedModal
+        actionRef={actionRef}
+        content={<Content />}
+      >
+        <button>App Trigger</button>
+      </EnhancedModal>
+
+      <button onClick={() => actionRef.current?.open()}>App actionRef.open</button>
+    </>
+  )
+}
+
+export default App

packages/utils/src/use-modal-enhanced/demo/Modal/index.tsx

@@ -0,0 +1,50 @@
+// copy: https://medium.com/tinyso/how-to-create-a-modal-component-in-react-from-basic-to-advanced-a3357a2a716a
+
+import React, { useEffect } from 'react'
+import { CSSTransition } from 'react-transition-group'
+import './modal.css'
+
+export interface ModalProps {
+  visible?: boolean
+  title?: string
+  onClose?: () => void
+  children?: React.ReactNode
+}
+
+const Modal = (props: ModalProps) => {
+  const closeOnEscapeKeyDown = (e: any) => {
+    if ((e.charCode || e.keyCode) === 27)
+      props.onClose?.()
+  }
+
+  useEffect(() => {
+    document.body.addEventListener('keydown', closeOnEscapeKeyDown)
+    return function cleanup() {
+      document.body.removeEventListener('keydown', closeOnEscapeKeyDown)
+    }
+  }, [])
+
+  return (
+    <CSSTransition
+      in={props.visible}
+      unmountOnExit
+      timeout={{ enter: 0, exit: 300 }}
+    >
+      <div className="modal" onClick={props.onClose}>
+        <div className="modal-content" onClick={e => e.stopPropagation()}>
+          <div className="modal-header">
+            <h4 className="modal-title">{props.title}</h4>
+          </div>
+          <div className="modal-body">{props.children}</div>
+          <div className="modal-footer">
+            <button onClick={props.onClose} className="button">
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </CSSTransition>
+  )
+}
+
+export default Modal

packages/utils/src/use-modal-enhanced/demo/Modal/modal.css

@@ -0,0 +1,54 @@
+.modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: all 0.3s ease-in-out;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.modal.enter-done {
+  opacity: 1;
+  pointer-events: visible;
+}
+
+.modal.exit {
+  opacity: 0;
+}
+
+.modal-content {
+  width: 500px;
+  background-color: #fff;
+  transition: all 0.3s ease-in-out;
+  transform: translateY(-200px);
+}
+
+.modal.enter-done .modal-content {
+  transform: translateY(0);
+}
+
+.modal.exit .modal-content {
+  transform: translateY(-200px);
+}
+
+.modal-header,
+.modal-footer {
+  padding: 10px;
+}
+
+.modal-title {
+  margin: 0;
+}
+
+.modal-body {
+  padding: 10px;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}

packages/utils/src/use-modal-enhanced/index.md

@@ -0,0 +1,7 @@
+# useModalEnhanced
+
+对弹窗组件进行增强
+
+## 基础示例
+
+<code hideActions='["CSB", "EXTERNAL"]' src="./demo/Basic.tsx" />

packages/utils/src/use-modal-enhanced/index.tsx

@@ -0,0 +1,61 @@
+import useBoolean from 'ahooks/es/useBoolean'
+import React from 'react'
+import { isDOMTypeElement, isElement } from '../is'
+
+export interface UseModalEnhancedContext {
+  enhancedAction: UseModalEnhancedAction
+}
+
+export interface UseModalEnhancedProps {
+  children?: React.ReactNode
+  content?: React.ReactNode
+  onClick?: (e: React.MouseEvent<HTMLElement>, enhancedAction: UseModalEnhancedAction) => void
+  actionRef?: React.RefObject<UseModalEnhancedAction>
+}
+
+export interface UseModalEnhancedAction {
+  close: () => void
+  open: () => void
+}
+
+function useModalEnhanced(props: UseModalEnhancedProps = {}) {
+  const {
+    children,
+    content,
+    onClick,
+    actionRef: actionRefProp,
+  } = props
+
+  const [visible, { setTrue: open, setFalse: close }] = useBoolean(false)
+
+  const actionRef = React.useRef<UseModalEnhancedAction>({ open, close })
+
+  React.useImperativeHandle(actionRefProp, () => actionRef.current)
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (onClick)
+      return onClick(event, actionRef.current)
+
+    return open()
+  }
+
+  // ======================== Trigger ========================
+  let trigger: React.ReactNode = children
+  if (React.isValidElement(children))
+    trigger = React.cloneElement<any>(children, { onClick: handleClick })
+
+  // ======================== Content ========================
+  let contentNode: React.ReactNode = content
+  if (isElement<UseModalEnhancedContext>(contentNode) && !isDOMTypeElement(contentNode)) {
+    contentNode = React.cloneElement<UseModalEnhancedContext>(contentNode, {
+      enhancedAction: actionRef.current,
+    })
+  }
+
+  const contextHolder = { trigger, content: contentNode }
+  const action = { open, close }
+
+  return [visible, action, contextHolder] as const
+}
+
+export default useModalEnhanced