chore: use useDefaultProps (#489)

* chore: use useDefaultProps * test: update csr and ssr snap
Tencent · Aug 23, 2024 · 487efb3 · 487efb3
1 parent 1050903
commit 487efb3
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 130 deletions.
diff --git a/src/cell/Cell.tsx b/src/cell/Cell.tsx
@@ -6,12 +6,14 @@ import { ChevronRightIcon } from 'tdesign-icons-react';
 import { TdCellProps } from './type';
 import { cellDefaultProps } from './defaultProps';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import useDefaultProps from '../hooks/useDefaultProps';
 import useHover from '../hooks/useHover';
 import useConfig from '../_util/useConfig';
 
 export interface CellProps extends TdCellProps, NativeProps {}
 
-const Cell: React.FC<CellProps> = (props) => {
+const Cell: React.FC<CellProps> = (originProps) => {
+  const props = useDefaultProps(originProps, cellDefaultProps);
   const {
     align,
     arrow,
@@ -102,7 +104,6 @@ const Cell: React.FC<CellProps> = (props) => {
   );
 };
 
-Cell.defaultProps = cellDefaultProps;
 Cell.displayName = 'Cell';
 
 export default Cell;
diff --git a/src/cell/CellGroup.tsx b/src/cell/CellGroup.tsx
@@ -2,16 +2,14 @@ import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import useConfig from '../_util/useConfig';
 import { TdCellGroupProps } from './type';
+import { cellGroupDefaultProps } from './defaultProps';
 import withNativeProps, { NativeProps } from '../_util/withNativeProps';
+import useDefaultProps from '../hooks/useDefaultProps';
 
 export type CellGroupProps = TdCellGroupProps & NativeProps;
 
-const defaultProps = {
-  bordered: false,
-  title: '',
-};
-
-const CellGroup: React.FC<CellGroupProps> = (props) => {
+const CellGroup: React.FC<CellGroupProps> = (originProps) => {
+  const props = useDefaultProps(originProps, cellGroupDefaultProps);
   const { children, bordered, title, theme } = props;
   const { classPrefix } = useConfig();
   const name = `${classPrefix}-cell-group`;
@@ -36,7 +34,6 @@ const CellGroup: React.FC<CellGroupProps> = (props) => {
   );
 };
 
-CellGroup.defaultProps = defaultProps;
 CellGroup.displayName = 'CellGroup';
 
 export default CellGroup;
diff --git a/src/navbar/Navbar.tsx b/src/navbar/Navbar.tsx
@@ -7,10 +7,12 @@ import { StyledProps } from '../common';
 import { TdNavbarProps } from './type';
 import { navbarDefaultProps } from './defaultProps';
 import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
 
 export interface NavbarProps extends TdNavbarProps, StyledProps {}
 
-export const Navbar: React.FC<NavbarProps> = (props) => {
+const Navbar: React.FC<NavbarProps> = (originProps) => {
+  const props = useDefaultProps(originProps, navbarDefaultProps);
   const {
     visible,
     title,
@@ -100,6 +102,6 @@ export const Navbar: React.FC<NavbarProps> = (props) => {
   );
 };
 
-Navbar.defaultProps = navbarDefaultProps;
+Navbar.displayName = 'Navbar';
 
 export default Navbar;
diff --git a/src/sticky/Sticky.tsx b/src/sticky/Sticky.tsx
@@ -1,112 +1,108 @@
-import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import useConfig from "../_util/useConfig";
-import { TdStickyProps } from "./type";
+import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import useConfig from '../_util/useConfig';
+import { TdStickyProps } from './type';
 import { stickyDefaultProps } from './defaultProps';
-import { resolveContainer } from '../_util/getContainer'
-
-const Sticky: FC<TdStickyProps> = (prop) => {
-    const {
-        children,
-        container,
-        disabled,
-        offsetTop,
-        zIndex,
-        onScroll,
-    } = prop;
-
-
-    const { classPrefix } = useConfig();
-    const name = `${classPrefix}-sticky`;
-
-    const boxRef = useRef<HTMLDivElement>(null);
-    const contentRef = useRef<HTMLDivElement>(null);
-
-    const boxElement = boxRef?.current;
-    const contentElement = contentRef?.current;
-
-    const [boxStyles, seBoxStyles] = useState({});
-    const [contentStyles, setContentStyles] = useState({});
-
-    const [contentTop, setContentTop] = useState(0);
-    const [contentHeight, setContentHeight] = useState(0);
-
-    const [boxTop ,setBoxTop] = useState(undefined);
-
-    const containerRef = useRef(null);
-
-    // 滚动监听器
-    const scrollhandler = useCallback(() => {
-        const boxTop = boxElement?.getBoundingClientRect()?.top;
-        const contentTop = contentElement?.getBoundingClientRect()?.top;
-        const contentHeight = contentElement?.getBoundingClientRect()?.height;
-        setBoxTop(boxTop);
-        setContentTop(contentTop);
-        setContentHeight(contentHeight);
-    }, [boxElement, contentElement])
-
-    /**
-     * 用于处理content变成fixed定位脱离文档流，导致父级box高度为0
-     */
-    useLayoutEffect(() => {
-        seBoxStyles({
-            height: contentElement?.getBoundingClientRect()?.height,
-        });
-    }, [contentElement]);
-
-    useEffect(() => {
-        containerRef.current = resolveContainer(container);
-    }, [container])
-
-    useLayoutEffect(() => {
-        const style: any = {
-            zIndex,
-        };
-
-        let isFixed = false;
-        if (disabled) return style;
-        const offsetTopNum = Number(offsetTop);
-
-        if (containerRef.current) {
-            const containerTop = containerRef.current?.getBoundingClientRect()?.top;
-            const containerHeight = containerRef.current?.getBoundingClientRect()?.height;
-
-            if (containerHeight + containerTop < offsetTopNum + contentHeight) {
-                style.transform = `translate3d(0, ${containerHeight - contentHeight}px, 0)`
-            } else if (boxTop <= offsetTopNum) {
-                style.position = 'fixed';
-                style.top = `${offsetTopNum}px`;
-                isFixed = true;
-            }
-        } else if (boxTop <= offsetTopNum) {
-            style.position = 'fixed';
-            style.top = `${offsetTopNum}px`;
-            isFixed = true;
-        }
-
-        onScroll && onScroll({scrollTop: contentTop, isFixed});
-        setContentStyles(style);
-
+import { resolveContainer } from '../_util/getContainer';
+import useDefaultProps from '../hooks/useDefaultProps';
+
+const Sticky: FC<TdStickyProps> = (originProps) => {
+  const props = useDefaultProps(originProps, stickyDefaultProps);
+
+  const { children, container, disabled, offsetTop, zIndex, onScroll } = props;
+
+  const { classPrefix } = useConfig();
+  const name = `${classPrefix}-sticky`;
+
+  const boxRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const boxElement = boxRef?.current;
+  const contentElement = contentRef?.current;
+
+  const [boxStyles, seBoxStyles] = useState({});
+  const [contentStyles, setContentStyles] = useState({});
+
+  const [contentTop, setContentTop] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const [boxTop, setBoxTop] = useState(undefined);
+
+  const containerRef = useRef(null);
+
+  // 滚动监听器
+  const scrollhandler = useCallback(() => {
+    const boxTop = boxElement?.getBoundingClientRect()?.top;
+    const contentTop = contentElement?.getBoundingClientRect()?.top;
+    const contentHeight = contentElement?.getBoundingClientRect()?.height;
+    setBoxTop(boxTop);
+    setContentTop(contentTop);
+    setContentHeight(contentHeight);
+  }, [boxElement, contentElement]);
+
+  /**
+   * 用于处理content变成fixed定位脱离文档流，导致父级box高度为0
+   */
+  useLayoutEffect(() => {
+    seBoxStyles({
+      height: contentElement?.getBoundingClientRect()?.height,
+    });
+  }, [contentElement]);
+
+  useEffect(() => {
+    containerRef.current = resolveContainer(container);
+  }, [container]);
+
+  useLayoutEffect(() => {
+    const style: any = {
+      zIndex,
+    };
+
+    let isFixed = false;
+    if (disabled) return style;
+    const offsetTopNum = Number(offsetTop);
+
+    if (containerRef.current) {
+      const containerTop = containerRef.current?.getBoundingClientRect()?.top;
+      const containerHeight = containerRef.current?.getBoundingClientRect()?.height;
+
+      if (containerHeight + containerTop < offsetTopNum + contentHeight) {
+        style.transform = `translate3d(0, ${containerHeight - contentHeight}px, 0)`;
+      } else if (boxTop <= offsetTopNum) {
+        style.position = 'fixed';
+        style.top = `${offsetTopNum}px`;
+        isFixed = true;
+      }
+    } else if (boxTop <= offsetTopNum) {
+      style.position = 'fixed';
+      style.top = `${offsetTopNum}px`;
+      isFixed = true;
+    }
+
+    onScroll && onScroll({ scrollTop: contentTop, isFixed });
+    setContentStyles(style);
+
     // 这里只需要监听boxTop，不需要全部监听
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [boxTop])
-
-    useEffect(() => {
-        addEventListener('scroll', scrollhandler);
-        return () => {
-            removeEventListener('scroll', scrollhandler)
-        }
-    }, [boxTop, contentTop, contentHeight, scrollhandler])
-       
-    return <>
-        <div ref={boxRef} className={name} style={boxStyles}>
-            <div ref={contentRef} className={`${name}__content`} style={contentStyles}>
-                {children}
-            </div>
+  }, [boxTop]);
+
+  useEffect(() => {
+    addEventListener('scroll', scrollhandler);
+    return () => {
+      removeEventListener('scroll', scrollhandler);
+    };
+  }, [boxTop, contentTop, contentHeight, scrollhandler]);
+
+  return (
+    <>
+      <div ref={boxRef} className={name} style={boxStyles}>
+        <div ref={contentRef} className={`${name}__content`} style={contentStyles}>
+          {children}
         </div>
+      </div>
     </>
-}
+  );
+};
 
 Sticky.displayName = 'Sticky';
-Sticky.defaultProps = stickyDefaultProps;
 
 export default Sticky;