docs: useSize docs

package.json

@@ -46,7 +46,7 @@
     "docz-theme-umi-hooks": "^0.0.6",
     "enzyme": "^3.10.0",
     "father": "^2.13.3",
-    "jackbox": "^0.0.5",
+    "jackbox": "^0.0.7",
     "now": "^16.2.0",
     "raw-loader": "^3.1.0",
     "react": "^16.8.6",

src/useDynamicList/demo/demo1.jsx

@@ -50,9 +50,7 @@ export default Form.create()(props => {
 
   return (
     <>
-      <Form>
-        {list.map((ele, index) => Row(index, ele))}
-      </Form>
+      <Form>{list.map((ele, index) => Row(index, ele))}</Form>
       <Button
         style={{
           marginTop: 8,

src/useDynamicList/demo/demo3.jsx

@@ -25,72 +25,72 @@ export default Form.create()(props => {
       dataIndex: 'name',
       key: 'name',
       render: (text, row, index) => (
-          <>
-            <Icon
+        <>
+          <Icon
+            style={{
+              cursor: 'move',
+              marginRight: 8,
+            }}
+            type="drag"
+          />
+          {getFieldDecorator(`params[${getKey(index)}].name`, {
+            initialValue: text,
+          })(
+            <Input
               style={{
-                cursor: 'move',
-                marginRight: 8,
+                width: 120,
+                marginRight: 16,
               }}
-              type="drag"
-            />
-            {getFieldDecorator(`params[${getKey(index)}].name`, {
-              initialValue: text,
-            })(
-              <Input
-                style={{
-                  width: 120,
-                  marginRight: 16,
-                }}
-                placeholder="name"
-              />,
-            )}
-          </>
-        ),
+              placeholder="name"
+            />,
+          )}
+        </>
+      ),
     },
     {
       title: 'Age',
       dataIndex: 'age',
       key: 'age',
       render: (text, row, index) => (
-          <>
-            {getFieldDecorator(`params[${getKey(index)}].age`, {
-              initialValue: text,
-            })(
-              <Input
-                style={{
-                  width: 120,
-                  marginRight: 16,
-                }}
-                placeholder="age"
-              />,
-            )}
-          </>
-        ),
+        <>
+          {getFieldDecorator(`params[${getKey(index)}].age`, {
+            initialValue: text,
+          })(
+            <Input
+              style={{
+                width: 120,
+                marginRight: 16,
+              }}
+              placeholder="age"
+            />,
+          )}
+        </>
+      ),
     },
     {
       key: 'memo',
       title: 'Memo',
       dataIndex: 'memo',
       render: (text, row, index) => (
-          <>
-            {getFieldDecorator(`params[${getKey(index)}].memo`, {
-              initialValue: text,
-            })(
-              <Input
-                style={{
-                  width: 300,
-                  marginRight: 16,
-                }}
-                placeholder="please input the memo"
-              />,
-            )}
-            <Button.Group>
-              <Button type="danger" onClick={() => remove(index)}>
-                Delete
-              </Button>
-            </Button.Group>
-          </>
-        ),
+        <>
+          {getFieldDecorator(`params[${getKey(index)}].memo`, {
+            initialValue: text,
+          })(
+            <Input
+              style={{
+                width: 300,
+                marginRight: 16,
+              }}
+              placeholder="please input the memo"
+            />,
+          )}
+          <Button.Group>
+            <Button type="danger" onClick={() => remove(index)}>
+              Delete
+            </Button>
+          </Button.Group>
+        </>
+      ),
     },
   ];
   return (

src/useSize/demo/demo1.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useSize from '..';
+
+export default () => {
+  const [state, ref] = useSize();
+  return (
+    <div ref={ref}>
+      try to resize the preview window <br />
+      dimensions -- width: {state.width} px, height: {state.height} px
+    </div>
+  );
+};

src/useSize/demo/demo1.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useSize from '..';
+
+export default () => {
+  const [state, ref] = useSize<HTMLDivElement>();
+  return (
+    <div ref={ref}>
+      try to resize the preview window <br />
+      dimensions -- width: {state.width} px, height: {state.height} px
+    </div>
+  );
+};

src/useSize/demo/demo2.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useSize from '..';
+
+export default () => {
+  const [state] = useSize(() => document.querySelector('#demo2'));
+  return (
+    <div id="demo2">
+      try to resize the preview window <br />
+      dimensions -- width: {state.width} px, height: {state.height} px
+    </div>
+  );
+};

src/useSize/demo/demo2.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useSize from '..';
+
+export default () => {
+  const [state] = useSize(() => document.querySelector('#demo2'));
+  return (
+    <div id="demo2">
+      try to resize the preview window <br />
+      dimensions -- width: {state.width} px, height: {state.height} px
+    </div>
+  );
+};

src/useSize/demo/demo3.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useSize from '..';
+
+export default () => {
+  const [state] = useSize(document.querySelector('body'));
+  return (
+    <div>
+      this demo is listening to body size change, try to resize the window instead <br />
+      dimensions -- width: {state.width} px, height: {state.height} px
+    </div>
+  );
+};

src/useSize/demo/demo3.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import useSize from '..';
+
+export default () => {
+  const [state] = useSize(document.querySelector('body'));
+  return (
+    <div>
+      this demo is listening to body size change, try to resize the window instead <br />
+      dimensions -- width: {state.width} px, height: {state.height} px
+    </div>
+  );
+};

src/useSize/index_cn.mdx

@@ -0,0 +1,65 @@
+---
+name: useSize
+route: /useSize
+menu: '基础 hooks'
+edit: false
+sidebar: true
+---
+
+import JackBox from 'jackbox';
+
+import Demo1 from './demo/demo1';
+import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
+import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';
+
+import Demo2 from './demo/demo2';
+import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
+import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';
+
+import Demo3 from './demo/demo3';
+import Demo3Tsx from '!raw-loader!./demo/demo3.tsx';
+import Demo3Jsx from '!raw-loader!./demo/demo3.jsx';
+
+# useSize
+
+一个用于监听 dom 节点尺寸变化的 Hook
+
+## 代码演示
+
+### 基本用法
+
+<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='基本用法' description='使用 ref 监听节点尺寸变化'>
+  <Demo1 />
+</JackBox>
+
+### 懒加载（用于监听同一组件内后渲染节点）
+
+<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='懒加载（用于监听同一组件内后渲染节点）' description='传入 function 来监听 dom 节点'>
+  <Demo2 />
+</JackBox>
+
+### 监听提前渲染节点
+
+<JackBox tsCode={Demo3Tsx} jsCode={Demo3Jsx} demoName='监听提前渲染节点' description='直接传入 dom 节点'>
+  <Demo3 />
+</JackBox>
+
+## API
+
+```
+const [ state, ref? ] = useSize(dom);
+dom?: HTMLElement | (() => HTMLElement)
+```
+
+### 结果
+
+| 参数     | 说明                                     | 类型       |
+|----------|------------------------------------------|------------|
+| state  | dom 节点的尺寸                             | { width: number, height: number }    |
+| ref     | 当未传入任何参数时，将 ref 绑定给需监听的节点      | -        |
+
+### 参数
+
+| 参数    | 说明                                         | 类型                   | 默认值 |
+|---------|----------------------------------------------|------------------------|--------|
+| dom? | 可选项，如果未传入则会监听返回结果中的 ref，否则会监听传入的节点  | HTMLElement \| (() => HTMLElement) \| undefined | -      |

src/useSize/index_en.mdx

@@ -0,0 +1,65 @@
+---
+name: useSize
+route: /useSize
+menu: 'Basic Hooks'
+edit: false
+sidebar: true
+---
+
+import JackBox from 'jackbox';
+
+import Demo1 from './demo/demo1';
+import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
+import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';
+
+import Demo2 from './demo/demo2';
+import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
+import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';
+
+import Demo3 from './demo/demo3';
+import Demo3Tsx from '!raw-loader!./demo/demo3.tsx';
+import Demo3Jsx from '!raw-loader!./demo/demo3.jsx';
+
+# useSize
+
+A hook to subscribe DOM element size change
+
+## Examples
+
+### Default usage
+
+<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='Default usage' description='using ref to listen to size change'>
+  <Demo1 />
+</JackBox>
+
+### Lazy load DOM element（used to subscibe to DOM element renders after the hook）
+
+<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='Lazy load DOM element（used to subscibe to dom element renders after the hook）' description='pass in a function that returns the DOM element'>
+  <Demo2 />
+</JackBox>
+
+### Listen to pre-rendered DOM
+
+<JackBox tsCode={Demo3Tsx} jsCode={Demo3Jsx} demoName='Listen to pre-rendered DOM' description='pass in the DOM element itself'>
+  <Demo3 />
+</JackBox>
+
+## API
+
+```
+const [ state, ref? ] = useSize(dom);
+dom?: HTMLElement | (() => HTMLElement)
+```
+
+### Result
+
+| Property | Description                                         | Type                 |
+|----------|------------------------------------------|------------|
+| state  | size of the DOM                             | { width: number, height: number }    |
+| ref     | when no param is passed, this ref will be listened      | -        |
+
+### Params
+
+| Property | Description                                                        | Type                   | Default |
+|---------|----------------------------------------------|------------------------|--------|
+| dom? | optional, if none is passed, this hook will subscibe to the ref that it returns  | HTMLElement \| (() => HTMLElement) \| undefined | -      |