pref: change thing

Signed-off-by: Innei <tukon479@gmail.com>
mx-space · Feb 14, 2023 · 09c1e09 · 09c1e09
1 parent 16bf795
commit 09c1e09
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/packages/kami-design/components/Input/index.tsx b/packages/kami-design/components/Input/index.tsx
@@ -88,6 +88,12 @@ export const Input = memo(
         }
       }, [inputWrapRef])
 
+      const inputContextProviderValue = useRef({
+        setFocus: (state: boolean) => {
+          setFocus(state)
+        },
+      })
+
       return (
         <span
           {...merge(props.wrapperProps, {
@@ -123,13 +129,7 @@ export const Input = memo(
             </div>
           )}
           {props.children ? (
-            <InputContext.Provider
-              value={{
-                setFocus: (state: boolean) => {
-                  setFocus(state)
-                },
-              }}
-            >
+            <InputContext.Provider value={inputContextProviderValue.current}>
               {props.children}
             </InputContext.Provider>
           ) : multi ? (

diff --git a/packages/kami-design/components/Modal/Modal.tsx b/packages/kami-design/components/Modal/Modal.tsx
@@ -1,4 +1,5 @@
 import { clsx } from 'clsx'
+import type { FC } from 'react'
 import React, {
   forwardRef,
   useCallback,
@@ -32,6 +33,26 @@ export type ModalRefObject = {
   getElement: () => HTMLElement
   forceUpdate: () => void
 }
+
+const ModalContent: FC<{
+  title?: string
+  contentClassName?: string
+  children: React.ReactNode
+}> = (props) => {
+  const { children, contentClassName, title } = props
+  return (
+    <div
+      className={clsx(
+        styles['content'],
+        title && styles['has-title'],
+        contentClassName,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
 export const Modal = forwardRef<
   ModalRefObject,
   ModalProps & {
@@ -72,17 +93,7 @@ export const Modal = forwardRef<
 
   const isMounted = useIsMountedState()
 
-  const Content = (
-    <div
-      className={clsx(
-        styles['content'],
-        title && styles['has-title'],
-        props.contentClassName,
-      )}
-    >
-      {props.children}
-    </div>
-  )
+  const portalProviderValue = useRef({ to: $wrapper.current as HTMLElement })
 
   const Children = (
     <div
@@ -108,12 +119,12 @@ export const Modal = forwardRef<
       )}
       {useRootPortal ? (
         isMounted ? (
-          <RootPortalProvider value={{ to: $wrapper.current as HTMLElement }}>
-            {Content}
+          <RootPortalProvider value={portalProviderValue.current}>
+            <ModalContent {...props}>{props.children}</ModalContent>
           </RootPortalProvider>
         ) : null
       ) : (
-        Content
+        <ModalContent {...props}>{props.children}</ModalContent>
       )}
     </div>
   )

diff --git a/packages/kami-design/components/Modal/stack-context.tsx b/packages/kami-design/components/Modal/stack-context.tsx
@@ -243,13 +243,15 @@ export const ModalStackProvider: FC<{
   }).current
 
   const isClient = useIsClient()
+  const modalStackProvideValue = useRef({
+    present,
+    findCurrentByName,
+    getStack,
+    disposeAll,
+  }).current
 
   return (
-    <ModalStackContext.Provider
-      value={
-        useRef({ present, findCurrentByName, getStack, disposeAll }).current
-      }
-    >
+    <ModalStackContext.Provider value={modalStackProvideValue}>
       {children}
 
       {isClient &&