docs: usePrevious

alibaba · Feb 6, 2020 · 94510d0 · 94510d0
1 parent a6249a8
commit 94510d0
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 202 deletions.
diff --git a/packages/hooks/src/usePrevious/demo/demo1.jsx b/packages/hooks/src/usePrevious/demo/demo1.jsx
diff --git a/packages/hooks/src/usePrevious/demo/demo1.tsx b/packages/hooks/src/usePrevious/demo/demo1.tsx
@@ -1,6 +1,14 @@
+/**
+ * title: Default usage
+ * desc: Store the previous value.
+ * 
+ * title.zh-CN: 基本用法
+ * desc.zh-CN: 记录上次的 count 值
+ */
+
 import React, { useState } from 'react';
 import { Button } from 'antd';
-import usePrevious from '..';
+import { usePrevious } from '@umijs/hooks';
 
 export default () => {
   const [count, setCount] = useState(0);

diff --git a/packages/hooks/src/usePrevious/demo/demo2.jsx b/packages/hooks/src/usePrevious/demo/demo2.jsx
diff --git a/packages/hooks/src/usePrevious/demo/demo2.tsx b/packages/hooks/src/usePrevious/demo/demo2.tsx
@@ -1,6 +1,14 @@
+/**
+ * title: Using compare function
+ * desc: The stored previous value update only when the compare function returns true.
+ * 
+ * title.zh-CN: 使用 compare function
+ * desc.zh-CN: 只有 compare function 返回 true 时，才会记录值的变化
+ */
+
 import React, { useState } from 'react';
 import { Button, Input } from 'antd';
-import usePrevious from '..';
+import { usePrevious } from '@umijs/hooks';
 
 interface Person {
   name: string;

diff --git a/packages/hooks/src/usePrevious/index_en.mdx → ...ages/hooks/src/usePrevious/index.en-US.md b/packages/hooks/src/usePrevious/index_en.mdx → ...ages/hooks/src/usePrevious/index.en-US.md
@@ -1,22 +1,11 @@
 ---
-name: usePrevious
-route: /usePrevious
-menu: 'State'
-edit: false
-sidebar: true
+title: usePrevious
+group:
+  title: State
+  path: /state
+  order: 600
 ---
 
-import JackBox from 'jackbox';
-
-import Demo1 from './demo/demo1';
-import Demo1CodeTsx from '!raw-loader!./demo/demo1.tsx';
-import Demo1CodeJsx from '!raw-loader!./demo/demo1.jsx';
-
-import Demo2 from './demo/demo2';
-import Demo2CodeJsx from '!raw-loader!./demo/demo2.jsx';
-import Demo2CodeTsx from '!raw-loader!./demo/demo2.tsx';
-
-
 # usePrevious
 
 A Hook to store the previous value
@@ -26,15 +15,11 @@ A Hook to store the previous value
 
 ### Default usage
 
-<JackBox jsCode={Demo1CodeJsx} tsCode={Demo1CodeTsx} demoName='Default usage' description='Store the previous value'>
-  <Demo1 />
-</JackBox>
+<code src="./demo/demo1.tsx" />
 
 ### Using compare function
 
-<JackBox jsCode={Demo2CodeJsx} tsCode={Demo2CodeTsx} demoName=' Using compare function' description='The stored previous value update only when the compare function returns true'>
-  <Demo2 />
-</JackBox>
+<code src="./demo/demo2.tsx" />
 
 ## API
 ```

diff --git a/packages/hooks/src/usePrevious/index.zh-CN.md b/packages/hooks/src/usePrevious/index.zh-CN.md
@@ -0,0 +1,43 @@
+---
+title: usePrevious
+group:
+  title: State
+  path: /state
+  order: 600
+---
+
+# usePrevious
+
+保存上一次渲染时状态的 Hook
+
+
+## 代码演示
+
+### 基本用法
+
+<code src="./demo/demo1.tsx" />
+
+### 使用 compare function
+
+<code src="./demo/demo2.tsx" />
+
+## API
+```
+const previousState: T = usePrevious<T>(
+  state: T,
+  compareFunction: (prev: T | undefined, next: T) => boolean
+);
+```
+
+### Result
+
+| 参数 | 说明     | 类型 |
+|------|----------|------|
+| previousState | 上次 state 的值 | T  |
+
+### Params
+
+| 参数    | 说明     | 类型                   | 默认值 |
+|---------|----------|------------------------|--------|
+| state | 需要记录变化的值 | T | -      |
+| compareFunction | 可选，自定义值变化的规则 | (prev: T \| undefined, next: T) => boolean | -      |
diff --git a/packages/hooks/src/usePrevious/index_cn.mdx b/packages/hooks/src/usePrevious/index_cn.mdx