feat: useSize

qiaoyuwen · qiaoyuwen · commit 137e3f264a4c · 2021-07-11T23:39:30.000+08:00
diff --git a/packages/react-hooks/src/size/demo/useSize.tsx b/packages/react-hooks/src/size/demo/useSize.tsx
@@ -0,0 +1,29 @@
+/**
+ * title: 将 state 持久化在 localStorage 中
+ * desc: 刷新页面后，可以看到输入框中的内容被从 localStorage 中恢复了。
+ */
+
+import type { FunctionComponent } from 'react';
+import { useRef } from 'react';
+import { Space, Input } from 'antd';
+import 'antd/dist/antd.css';
+import { useSize } from '..';
+
+const Component: FunctionComponent = () => {
+  const elRef = useRef(null);
+  const size = useSize(elRef);
+
+  return (
+    <>
+      <Space direction="vertical">
+        <Space>
+          <span>宽：{size.width}</span>
+          <span>高：{size.height}</span>
+        </Space>
+        <Input.TextArea ref={elRef} />
+      </Space>
+    </>
+  );
+};
+
+export default Component;
diff --git a/packages/react-hooks/src/size/index.ts b/packages/react-hooks/src/size/index.ts
@@ -0,0 +1,40 @@
+import { useLayoutEffect, useState } from 'react';
+import type { BasicTarget } from '../utils/dom';
+import { getTargetElement } from '../utils/dom';
+
+type Size = {
+  width?: number;
+  height?: number;
+};
+
+export function useSize(target: BasicTarget) {
+  const [size, setSize] = useState<Size>(() => {
+    const el = (getTargetElement(target) || {}) as HTMLElement;
+    return {
+      width: el.clientWidth,
+      height: el.clientHeight,
+    };
+  });
+
+  useLayoutEffect(() => {
+    const el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        setSize({
+          width: entry.target.clientWidth,
+          height: entry.target.clientHeight,
+        });
+      });
+    });
+    resizeObserver.observe(el as Element);
+
+    // eslint-disable-next-line consistent-return
+    return () => resizeObserver.disconnect();
+  }, [target]);
+
+  return size;
+}
diff --git a/packages/react-hooks/src/size/useSize.md b/packages/react-hooks/src/size/useSize.md
@@ -0,0 +1,25 @@
+---
+title: useSize
+nav:
+  title: Hooks
+  path: /hook
+order: 2
+---
+
+# useSize
+
+监听 dom 元素尺寸变化的 hook
+
+<code src="./demo/useSize.tsx">
+
+# API
+
+```typescript
+const size = useSize(dom);
+```
+
+# 返回值
+
+| 参数 | 说明   | 类型                              |
+| ---- | ------ | --------------------------------- |
+| size | 尺寸值 | {width?: number, height?: number} |
diff --git a/packages/react-hooks/src/utils/dom.ts b/packages/react-hooks/src/utils/dom.ts
@@ -0,0 +1,29 @@
+import type { MutableRefObject } from 'react';
+
+type TargetElement = HTMLElement | Element | Document | Window;
+
+export type BasicTarget<T = HTMLElement> =
+  | T
+  | null
+  | (() => T | null)
+  | MutableRefObject<T | null | undefined>;
+
+export function getTargetElement(
+  target?: BasicTarget<TargetElement>,
+  defaultTarget?: TargetElement,
+): TargetElement | undefined | null {
+  if (!target) {
+    return defaultTarget;
+  }
+
+  let targetElement: TargetElement | undefined | null;
+  if (typeof target === 'function') {
+    targetElement = target();
+  } else if ('current' in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
+  }
+
+  return targetElement;
+}
