chore: add keepalive

Author: imcuttle

README.md

@@ -52,10 +52,10 @@ should be named as `use.{{lowerCase}}`, eg. `@rp/use.i18n`.
 
 ## Packages
 
-- [@rcp/c.loadingwrapper](packages/c.loadingwrapper) - A component for easy create loading mask  
-- [@rcp/hoc.mount](packages/hoc.mount) - The high order component for mounting component  
 - [@rcp/c.keepalive](packages/c.keepalive) - Keep react component view / store when switched view.  
+- [@rcp/c.loadingwrapper](packages/c.loadingwrapper) - A component for easy create loading mask  
 - [@rcp/hoc.i18n](packages/hoc.i18n) - React Component's high order component about internationalization  
+- [@rcp/hoc.mount](packages/hoc.mount) - The high order component for mounting component  
 - [@rcp/hoc.uncontrolled](packages/hoc.uncontrolled) - The high order component for creating uncontrolled component  
 - [@rcp/use.i18n](packages/use.i18n) - A react hook for using i18n  
 - [@rcp/util.createlogger](packages/util.createlogger) - Create namespace isomorphic logger  

packages/c.keepalive/README.md

@@ -15,11 +15,57 @@ yarn add @rcp/c.keepalive
 
 ## Usage
 
-```javascript
-import cKeepalive from '@rcp/c.keepalive'
+```jsx
+import KeepAlive, { bindKeepAliveLifeCycle } from '@rcp/c.keepalive'
+import '@rcp/c.keepalive/style.less'
+
+@bindKeepAliveLifeCycle
+class Content extends React.Component {
+    // 新增的生命周期
+    componentWillActive({newValue, oldValue}) {}
+    componentDidActive({newValue, oldValue}) {}
+    componentWillUnactive({newValue, oldValue}) {}
+    componentDidUnactive({newValue, oldValue}) {}
+}
+
+<KeepAlive uniqKey="/home" >
+    <Content>Home</Content>
+<KeepAlive>
+// LifeCycle
+// componentWillActive => {newValue: '/home'}
+// componentDidActive => {newValue: '/home'}
+
+// Components
+// <>
+//   <Content>Home</Content>
+// </>
+
+// Update
+<KeepAlive uniqKey="/detail" >
+    <Content>Detail</Content>
+<KeepAlive>
+// LifeCycle
+// componentWillUnactive => {newValue: '/detail', oldValue: '/home'} (Home)
+// componentWillActive => {newValue: '/detail', oldValue: '/home'} (Detail)
+// componentDidUnactive => {newValue: '/detail', oldValue: '/home'} (Home)
+// componentDidActive => {newValue: '/detail', oldValue: '/home'} (Detail)
+
+// Components
+// <>
+//   <Content (display: none)>Home</Content>
+//   <Content>Detail</Content>
+// </>
 ```
 
-## API
+## Props
+
+### `uniqKey`
+
+- **Type:** `string`
+
+### `disabled`
+
+- **Type:** `boolean`
 
 ## Related
 

packages/c.keepalive/__tests__/spec.test.tsx

@@ -21,6 +21,7 @@ describe('KeepAlive', function() {
 
   const KeepAliveLifeCycle = bindKeepAliveLifeCycle(
     class extends React.Component {
+      componentWillMount() {}
       componentDidUnactive(input: InputType) {
         list.push('componentDidUnactive', input)
       }
@@ -92,10 +93,7 @@ describe('KeepAlive', function() {
   })
 
   it('normal lifecycle', () => {
-    // jest.spyOn(KeepAliveLifeCycle.prototype, 'componentWillActive')
-    // jest.spyOn(KeepAliveLifeCycle.prototype, 'componentDidActive')
-    // jest.spyOn(KeepAliveLifeCycle.prototype, 'componentWillUnactive')
-    // jest.spyOn(KeepAliveLifeCycle.prototype, 'componentDidUnactive')
+    jest.spyOn(KeepAliveLifeCycle.prototype, 'componentWillMount')
     const wrp = mount(<Page name={'bHome'} />)
     expect(list).toMatchInlineSnapshot(`
 Array [
@@ -238,5 +236,8 @@ Array [
       name: 'detail'
     })
     expect(list).toMatchInlineSnapshot(`Array []`)
+
+    // bHome & bDetail
+    expect(KeepAliveLifeCycle.prototype.componentWillMount).toHaveBeenCalledTimes(2)
   })
 })

packages/c.keepalive/example/index.html

@@ -15,15 +15,47 @@ yarn add @rcp/c.loadingwrapper
 
 ## Usage
 
-```javascript
-import cLoadingwrapper from '@rcp/c.loadingwrapper'
+```jsx
+import LoadingWrapper from '@rcp/c.loadingwrapper'
+import '@rcp/c.loadingwrapper/style.less'
+
+<LoadingWrapper isLoading>
+    <div>some content</div>
+</LoadingWrapper>
 ```
 
-## API
+## Props
+
+### `className`
+
+- **Type:** `string`
+- **Default:** `null`
+
+### `isLoading`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+### `renderLoadingDelayMs`
+
+渲染 Loading 延迟毫秒数，为了减少不必要的视觉跳跃
+
+- **Type:** `number`
+- **Default:** `1000`
+
+### `withDelayRenderFirstly`
+
+是否首次的时候 Delay 渲染 Loading
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+### `LoadingComponent`
 
-<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+自定义 LoadingComponent
 
-## Related
+- **Type:** `Component|Function|string`
+- **Default:** `null`
 
 ## Authors