feat(NavBar): 新增回调Rect相关数据方法

79E · Dec 2, 2022 · 4901fdc · 4901fdc
1 parent 0bcb8be
commit 4901fdc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/src/components/nav-bar/README.md b/src/components/nav-bar/README.md
@@ -58,6 +58,14 @@ import { NavBar } from 'aunt';
 | ------------ | ------------ | -------------------------------- | ------ |
 | onClickLeft | 点击左侧按钮 | `(e: React.MouseEvent) => void;` | `-` |
 | onClickRight | 点击右侧按钮 | `(e: React.MouseEvent) => void;` | `-` |
+| callbackRect | 回调返回导航的相关数据 | `(rect: Rect) => void` | `-` |
+
+```ts
+type RectKey = "top" | "left" | "right" | "bottom" | "width" | "height";
+export type Rect = {
+ [key in RectKey]: number
+}
+```
 
 ## 样式变量
 

diff --git a/src/components/nav-bar/nav-bar.tsx b/src/components/nav-bar/nav-bar.tsx
@@ -13,7 +13,7 @@ export const NavBar: FunctionComponent<NavBarProps> = props => {
 
  const navBarRef = useRef(null);
 
- const navBarHeight = getRect(navBarRef).height;
+ const navBarRect = getRect(navBarRef);
 
  const renderLeft = () => {
  return (
@@ -50,7 +50,7 @@ export const NavBar: FunctionComponent<NavBarProps> = props => {
  return (
  <div
  className={ns.e('placeholder')}
- style={{ height: navBarHeight ? `${navBarHeight}px` : undefined }}
+ style={{ height: navBarRect.height ? `${navBarRect.height}px` : undefined }}
  />
  );
  }
@@ -79,6 +79,10 @@ export const NavBar: FunctionComponent<NavBarProps> = props => {
  };
  }, [props.style, props.statusBarHeight]);
 
+ React.useLayoutEffect(() => {
+ props.callbackRect?.(navBarRect);
+ }, [navBarRect]);
+
  return (
  <>
  {renderPlaceholder()}

diff --git a/src/components/nav-bar/types.ts b/src/components/nav-bar/types.ts
@@ -1,5 +1,6 @@
 import React from 'react';
-import { BaseTypeProps } from '../../utils';
+import type { BaseTypeProps } from '../../utils';
+import type { Rect } from '../../utils/dom/getRect';
 
 export interface NavBarProps extends BaseTypeProps {
  /**
@@ -36,4 +37,9 @@ export interface NavBarProps extends BaseTypeProps {
  placeholder?: boolean;
  onClickLeft?: (e: React.MouseEvent) => void;
  onClickRight?: (e: React.MouseEvent) => void;
+ /**
+ * 回调导航栏的相关数据
+ * @param rect （"top" | "left" | "right" | "bottom" | "width" | "height"）
+ */
+ callbackRect?: (rect: Rect) => void;
 }
diff --git a/src/utils/dom/getRect.ts b/src/utils/dom/getRect.ts
@@ -1,16 +1,10 @@
 import { useEffect, useState } from 'react';
 import { useRect } from '../../hooks';
 
-type Key = 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height';
-
-interface Rect {
- top: number;
- left: number;
- right: number;
- bottom: number;
- width: number;
- height: number;
-}
+type RectKey = 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height';
+export type Rect = {
+ [key in RectKey]: number;
+};
 
 export const getRect = (element: { current: Element | undefined | null }): Rect => {
  const [rect, setRect] = useState({