feat: add wrapperProps & contentProps

CJY0208 · Nov 21, 2024 · 9e0d4f6 · 9e0d4f6
1 parent 091dd61
commit 9e0d4f6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 15 deletions.
diff --git a/index.d.ts b/index.d.ts
@@ -1,6 +1,14 @@
-import { ReactNode, ReactNodeArray, Context, Component, ComponentType } from 'react'
+import {
+  ReactNode,
+  ReactNodeArray,
+  Context,
+  Component,
+  ComponentType,
+} from 'react'
 
-export declare type GetProps<C> = C extends ComponentType<infer P> ? P : never;
+export declare type GetProps<C> = C extends ComponentType<infer P> ? P : never
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>
 
 export interface KeepAliveProps {
   children: ReactNode | ReactNodeArray
@@ -10,6 +18,8 @@ export interface KeepAliveProps {
   when?: boolean | Array<boolean> | (() => boolean | Array<boolean>)
   saveScrollPosition?: boolean | string
   autoFreeze?: boolean
+  wrapperProps?: DivProps
+  contentProps?: DivProps
   [key: string]: any
 }
 
@@ -53,5 +63,9 @@ export interface AliveController {
 }
 export function useAliveController(): AliveController
 
-export declare function withActivation<C extends ComponentType<GetProps<C>>>(component: C): C
-export declare function withAliveScope<C extends ComponentType<GetProps<C>>>(component: C): C
+export declare function withActivation<C extends ComponentType<GetProps<C>>>(
+  component: C
+): C
+export declare function withAliveScope<C extends ComponentType<GetProps<C>>>(
+  component: C
+): C
diff --git a/src/core/KeepAlive.js b/src/core/KeepAlive.js
@@ -244,11 +244,13 @@ class KeepAlive extends Component {
   }
 
   render() {
+    const { wrapperProps = {} } = this.props || {}
     return (
       <div
-        key="keep-alive-placeholder"
+        {...wrapperProps}
+        key='keep-alive-placeholder'
         nodeKeyIgnore
-        className="ka-wrapper"
+        className={`ka-wrapper ${wrapperProps.className || ''}`}
         ref={(node) => {
           this.placeholder = node
         }}
@@ -259,9 +261,20 @@ class KeepAlive extends Component {
 
 // 兼容 SSR 服务端渲染
 function SSRKeepAlive({ children }) {
+  const { wrapperProps = {}, contentProps = {} } = this.props || {}
   return (
-    <div key="keep-alive-placeholder" nodeKeyIgnore className="ka-wrapper">
-      <div key="keeper-container" nodeKeyIgnore className="ka-content">
+    <div
+      {...wrapperProps}
+      key='keep-alive-placeholder'
+      nodeKeyIgnore
+      className={`ka-wrapper ${wrapperProps.className || ''}`}
+    >
+      <div
+        {...contentProps}
+        key='keeper-container'
+        nodeKeyIgnore
+        className={`ka-content ${contentProps.className || ''}`}
+      >
         {children}
       </div>
     </div>

diff --git a/src/core/Keeper.js b/src/core/Keeper.js
@@ -57,7 +57,6 @@ export default class Keeper extends PureComponent {
     store.set(id, this.cache)
   }
 
-
   unmounted = false
   safeSetState = (nextState, callback) => {
     // fix #170
@@ -82,9 +81,8 @@ export default class Keeper extends PureComponent {
     this.unmounted = true
   }
 
-  freezeTimeout = null
-
-  ;[LIFECYCLE_ACTIVATE]() {
+  freezeTimeout = null;
+  [LIFECYCLE_ACTIVATE]() {
     clearTimeout(this.freezeTimeout)
     // 激活后，立即解冻
     this.safeSetState({
@@ -94,7 +92,7 @@ export default class Keeper extends PureComponent {
     this.listeners.forEach((listener) => run(listener, [LIFECYCLE_ACTIVATE]))
   }
 
-  ;[LIFECYCLE_UNACTIVATE]() {
+  [LIFECYCLE_UNACTIVATE]() {
     this.eventBus.emit(LIFECYCLE_UNACTIVATE)
     const listeners = [...this.listeners]
 
@@ -202,7 +200,7 @@ export default class Keeper extends PureComponent {
     })
 
   render() {
-    const { id, autoFreeze = true, ...props } = this.props
+    const { id, autoFreeze = true, contentProps = {}, ...props } = this.props
     const { children, bridgeProps, key, freeze } = this.state
 
     return (
@@ -212,7 +210,12 @@ export default class Keeper extends PureComponent {
             this.wrapper = node
           }}
         >
-          <div key="keeper-container" nodeKeyIgnore className="ka-content">
+          <div
+            {...contentProps}
+            key='keeper-container'
+            nodeKeyIgnore
+            className={`ka-content ${contentProps.className || ''}`}
+          >
             <Bridge id={id} bridgeProps={bridgeProps}>
               <AliveNodeProvider value={this.contextValue}>
                 {React.Children.map(children, (child, idx) =>