fix: react default (#1961)

* fix: image show

* chore: Upgraded ant to latest

* fix: defaultProps

Author: Chasen-Zhang

src/components/BaseComponents/Card/index.tsx

@@ -13,10 +13,10 @@ interface IProps extends ICommonProps {
 }
 const Card: FC<IProps> = ({
   children,
-  padding,
+  padding = [28, 24],
   className,
   href,
-  isDownload,
+  isDownload = false,
   style,
   onClick,
 }): ReactElement => {
@@ -39,8 +39,4 @@ const Card: FC<IProps> = ({
     </>
   );
 };
-Card.defaultProps = {
-  padding: [28, 24],
-  isDownload: false,
-};
 export default Card;

src/components/BaseComponents/ImgLazyLoad/index.tsx

@@ -1,33 +1,37 @@
 // Copyright 2023 DatabendLabs.
-import React, { FC, ReactElement, useState } from 'react';
+import React, { FC, ReactElement, useState } from "react";
 // refs: https://databendcloud.github.io/databend-logos/
-import { LightDatabendSingleSvg } from 'databend-logos';
+import { LightDatabendSingleSvg } from "databend-logos";
 // @ts-ignore
-import { LazyLoadImage } from 'react-lazy-load-image-component';
-import clsx from 'clsx';
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import clsx from "clsx";
 interface IProps {
   src: string;
   width?: number | string;
   className?: string;
 }
-const LoadLazyImg: FC<IProps> = ({src, width, className}): ReactElement=> {
+const LoadLazyImg: FC<IProps> = ({
+  src,
+  width = "100%",
+  className,
+}): ReactElement => {
   const [isLoaded, setIsLoaded] = useState(false);
   const handleImageLoad = () => {
     setIsLoaded(true);
   };
   return (
     <>
-    {!isLoaded && <LightDatabendSingleSvg width={width}></LightDatabendSingleSvg>}
-    <LazyLoadImage
-      placeholder={<div></div>}
-      onLoad={()=> handleImageLoad()}
-      className={clsx('g-w100', className, isLoaded ? 'g-db' :'g-dn')}
-      src={src} />
+      {!isLoaded && (
+        <LightDatabendSingleSvg width={width}></LightDatabendSingleSvg>
+      )}
+      <LazyLoadImage
+        placeholder={<div></div>}
+        onLoad={() => handleImageLoad()}
+        className={clsx("g-w100", className, isLoaded ? "g-db" : "g-dn")}
+        src={src}
+      />
     </>
-    
   );
 };
-LoadLazyImg.defaultProps = {
-  width: "100%"
-}
-export default LoadLazyImg;
+
+export default LoadLazyImg;

src/components/BaseComponents/Logo/index.tsx

@@ -1,16 +1,48 @@
 // Copyright 2023 DatabendLabs.
-import { FC, ReactElement } from 'react';
-import React from 'react';
+import { FC, ReactElement } from "react";
+import React from "react";
 interface IProps {
   width?: number;
   style?: React.CSSProperties;
 }
-const LogoSvg: FC<IProps> = ({width, style}): ReactElement=> {
+const LogoSvg: FC<IProps> = ({ width = 30, style }): ReactElement => {
   return (
-    <svg width={width} id="图层_1" style={style} data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.481 62.109"><title>Databend LOGO</title><path d="M118.8,52.156c-.732.733-3.571-1.776-4.536-3.23.174,1.772-.469,5.307-1.344,5.273-1.655-.064-2.721-4.841-2.1-8.047C100.447,40.2,89.9,45.4,89.9,45.4l.044.013c1.3.165,4.354.5,4.271,1.86-.055.9-4,3.6-16.377,2.59-3.891,3.288-19.6,10.347-33.5,8.03-10.087-2.361-15.489-7.034-18.308-11.884,2.577,1.809,13.382,7.9,34.6,1.181,24.479-7.758,32.3-12.017,52.583-6.729.006.019.012.032.019.051a17.022,17.022,0,0,1,1.117,3.529v.007C117.72,46.186,119.779,51.181,118.8,52.156Z" style={{"fill":"#b7e3ff"}}/><path d="M108.763,32.909a33.238,33.238,0,0,1,4.444,7.555c-20.283-5.288-28.1-1.029-52.583,6.729-21.216,6.723-32.021.628-34.6-1.181-.006-.012-.019-.031-.025-.044s-.013-.019-.013-.019a23.371,23.371,0,0,1-2.406-15.966c.444-.464.971-.965,1.562-1.486,2.323,2.1,13.686,10.888,35.81,5.346C60.954,33.843,95.635,25.057,108.763,32.909Z" style={{fill:"#52aaff"}}/><path d="M97.184,22.784a41.256,41.256,0,0,1,11.579,10.125c-13.128-7.852-47.809.934-47.809.934C38.83,39.385,27.467,30.6,25.144,28.5A56.869,56.869,0,0,1,45.007,17.616h.013A30.361,30.361,0,0,0,62.11,19.94C72.445,18.473,84.621,18.245,97.184,22.784Z" style={{fill:"#0175f2"}}/><path d="M92.315,20.213a51.143,51.143,0,0,1,4.869,2.571C84.621,18.245,72.445,18.473,62.11,19.94a30.416,30.416,0,0,1-17.1-2.324,67.405,67.405,0,0,1,39.106-.476A60.067,60.067,0,0,1,92.315,20.213Z" style={{fill:"#015bcb"}}/><path d="M61.062,2.5a2.516,2.516,0,0,1-1.53,2.3v.007A10.668,10.668,0,0,0,54.7,9.637a10.679,10.679,0,0,1,1.739-8.45c.089-.133.184-.254.286-.381A2.461,2.461,0,0,1,58.555,0,2.5,2.5,0,0,1,61.062,2.5Z" style={{fill:"#015bcb"}}/><path d="M52.428,12.17c0,.393-.025.78-.063,1.161a10.494,10.494,0,0,0-4.393-2.679.365.365,0,0,0-.121-.031,2.655,2.655,0,1,1,3.13-3.8A10.542,10.542,0,0,1,52.428,12.17Z" style={{fill:"#015bcb"}}/><circle cx="62.872" cy="46.714" r="2.28" style={{fill:"#0175f2"}}/></svg>
+    <svg
+      width={width}
+      id="图层_1"
+      style={style}
+      data-name="图层 1"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 142.481 62.109"
+    >
+      <title>Databend LOGO</title>
+      <path
+        d="M118.8,52.156c-.732.733-3.571-1.776-4.536-3.23.174,1.772-.469,5.307-1.344,5.273-1.655-.064-2.721-4.841-2.1-8.047C100.447,40.2,89.9,45.4,89.9,45.4l.044.013c1.3.165,4.354.5,4.271,1.86-.055.9-4,3.6-16.377,2.59-3.891,3.288-19.6,10.347-33.5,8.03-10.087-2.361-15.489-7.034-18.308-11.884,2.577,1.809,13.382,7.9,34.6,1.181,24.479-7.758,32.3-12.017,52.583-6.729.006.019.012.032.019.051a17.022,17.022,0,0,1,1.117,3.529v.007C117.72,46.186,119.779,51.181,118.8,52.156Z"
+        style={{ fill: "#b7e3ff" }}
+      />
+      <path
+        d="M108.763,32.909a33.238,33.238,0,0,1,4.444,7.555c-20.283-5.288-28.1-1.029-52.583,6.729-21.216,6.723-32.021.628-34.6-1.181-.006-.012-.019-.031-.025-.044s-.013-.019-.013-.019a23.371,23.371,0,0,1-2.406-15.966c.444-.464.971-.965,1.562-1.486,2.323,2.1,13.686,10.888,35.81,5.346C60.954,33.843,95.635,25.057,108.763,32.909Z"
+        style={{ fill: "#52aaff" }}
+      />
+      <path
+        d="M97.184,22.784a41.256,41.256,0,0,1,11.579,10.125c-13.128-7.852-47.809.934-47.809.934C38.83,39.385,27.467,30.6,25.144,28.5A56.869,56.869,0,0,1,45.007,17.616h.013A30.361,30.361,0,0,0,62.11,19.94C72.445,18.473,84.621,18.245,97.184,22.784Z"
+        style={{ fill: "#0175f2" }}
+      />
+      <path
+        d="M92.315,20.213a51.143,51.143,0,0,1,4.869,2.571C84.621,18.245,72.445,18.473,62.11,19.94a30.416,30.416,0,0,1-17.1-2.324,67.405,67.405,0,0,1,39.106-.476A60.067,60.067,0,0,1,92.315,20.213Z"
+        style={{ fill: "#015bcb" }}
+      />
+      <path
+        d="M61.062,2.5a2.516,2.516,0,0,1-1.53,2.3v.007A10.668,10.668,0,0,0,54.7,9.637a10.679,10.679,0,0,1,1.739-8.45c.089-.133.184-.254.286-.381A2.461,2.461,0,0,1,58.555,0,2.5,2.5,0,0,1,61.062,2.5Z"
+        style={{ fill: "#015bcb" }}
+      />
+      <path
+        d="M52.428,12.17c0,.393-.025.78-.063,1.161a10.494,10.494,0,0,0-4.393-2.679.365.365,0,0,0-.121-.031,2.655,2.655,0,1,1,3.13-3.8A10.542,10.542,0,0,1,52.428,12.17Z"
+        style={{ fill: "#015bcb" }}
+      />
+      <circle cx="62.872" cy="46.714" r="2.28" style={{ fill: "#0175f2" }} />
+    </svg>
   );
 };
-LogoSvg.defaultProps = {
-  width: 30
-}
-export default LogoSvg;
+
+export default LogoSvg;

src/components/CustomerVoiceCard/index.tsx

@@ -1,8 +1,8 @@
 // Copyright 2023 DatabendLabs.
-import React, { FC, ReactElement } from 'react';
-import styles from './styles.module.scss';
-import Avatar from '@site/static/img/avatar/default-avatar.jpeg';
-import clsx from 'clsx';
+import React, { FC, ReactElement } from "react";
+import styles from "./styles.module.scss";
+import Avatar from "@site/static/img/avatar/default-avatar.jpeg";
+import clsx from "clsx";
 interface IProps {
   name: string;
   position: string;
@@ -11,29 +11,39 @@ interface IProps {
   avatar?: string;
   linkForDate?: string;
 }
-const CustomerVoiceCard: FC<IProps> = ({ name, position, description, date, avatar, linkForDate }): ReactElement=> {
+const CustomerVoiceCard: FC<IProps> = ({
+  name,
+  position,
+  description,
+  date,
+  avatar = Avatar,
+  linkForDate,
+}): ReactElement => {
   return (
     <div className={styles.card}>
       <div className={styles.top}>
-        <a><img className={styles.avatar} src={avatar}/></a>
-        <div style={{flex: 1}}>
+        <a>
+          <img className={styles.avatar} src={avatar} />
+        </a>
+        <div style={{ flex: 1 }}>
           <div className={styles.name}>{name}</div>
           <div className={styles.position}>{position}</div>
         </div>
       </div>
-      <div className={styles.description}>
-        {description}
-      </div>
-      {
-        linkForDate
-        ? <a className={clsx(styles.date, styles.linkDate)} target='_blank' href={linkForDate}>{date}</a>
-        : <div className={styles.date}>{date}</div>
-      }
-      
+      <div className={styles.description}>{description}</div>
+      {linkForDate ? (
+        <a
+          className={clsx(styles.date, styles.linkDate)}
+          target="_blank"
+          href={linkForDate}
+        >
+          {date}
+        </a>
+      ) : (
+        <div className={styles.date}>{date}</div>
+      )}
     </div>
   );
 };
-CustomerVoiceCard.defaultProps = {
-  avatar: Avatar
-}
-export default CustomerVoiceCard;
+
+export default CustomerVoiceCard;

src/components/EEFeature/index.tsx

@@ -1,58 +1,82 @@
-
 // Copyright 2023 DatabendLabs.
-import clsx from 'clsx';
-import React, { FC, ReactElement, useEffect } from 'react';
-import styles from './styles.module.scss';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import clsx from "clsx";
+import React, { FC, ReactElement, useEffect } from "react";
+import styles from "./styles.module.scss";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 interface IProps {
   featureTitle?: string;
   featureName: string;
   wholeDesc?: string;
-
 }
-const EEFeature: FC<IProps> = ({ featureName, wholeDesc, featureTitle }): ReactElement => {
-  const {siteConfig: {customFields: { isChina } } } = useDocusaurusContext() as any;
+const EEFeature: FC<IProps> = ({
+  featureName,
+  wholeDesc,
+  featureTitle = "ENTERPRISE EDITION FEATURE",
+}): ReactElement => {
+  const {
+    siteConfig: {
+      customFields: { isChina },
+    },
+  } = useDocusaurusContext() as any;
   function A() {
     return (
       <>
-        {
-          isChina
-          ? <>如需获取许可证，请<a target='_blank' href={'https://www.databend.cn/contact-us'}>联系 Databend 支持团队</a>。</>
-          : <>Contact <a target='_blank' href={'https://www.databend.com/contact-us'}>Databend Support</a> for a license.</>
-        }
+        {isChina ? (
+          <>
+            如需获取许可证，请
+            <a target="_blank" href={"https://www.databend.cn/contact-us"}>
+              联系 Databend 支持团队
+            </a>
+            。
+          </>
+        ) : (
+          <>
+            Contact{" "}
+            <a target="_blank" href={"https://www.databend.com/contact-us"}>
+              Databend Support
+            </a>{" "}
+            for a license.
+          </>
+        )}
       </>
-    )
+    );
   }
   useEffect(() => {
-    const h1 = document?.querySelector('.theme-doc-markdown')?.querySelector('header')?.firstChild as HTMLElement;
+    const h1 = document
+      ?.querySelector(".theme-doc-markdown")
+      ?.querySelector("header")?.firstChild as HTMLElement;
     if (h1) {
-      h1?.classList?.add('DOCITEM-PAGE-EE-TIPS-BEFORE-DOM');
+      h1?.classList?.add("DOCITEM-PAGE-EE-TIPS-BEFORE-DOM");
     }
-  }, [])
+  }, []);
   return (
-    <div className='DOCITEM-PAGE-EE-TIPS'>
+    <div className="DOCITEM-PAGE-EE-TIPS">
       <div className={clsx(styles.wrap)}>
-        <div className={styles.button}>{ isChina ? '企业版功能' : featureTitle }</div>
+        <div className={styles.button}>
+          {isChina ? "企业版功能" : featureTitle}
+        </div>
         <div className={styles.desc}>
-          {
-            wholeDesc
-              ? <>
-                {wholeDesc} <A />
-              </>
-              : <>
-                {
-                  isChina
-                  ? <>{featureName}是企业版功能。 <A /></>
-                  : <>{featureName} is an Enterprise Edition feature. <A /></>
-                }
-              </>
-          }
+          {wholeDesc ? (
+            <>
+              {wholeDesc} <A />
+            </>
+          ) : (
+            <>
+              {isChina ? (
+                <>
+                  {featureName}是企业版功能。 <A />
+                </>
+              ) : (
+                <>
+                  {featureName} is an Enterprise Edition feature. <A />
+                </>
+              )}
+            </>
+          )}
         </div>
       </div>
     </div>
   );
 };
-EEFeature.defaultProps = {
-  featureTitle: 'ENTERPRISE EDITION FEATURE'
-}
-export default EEFeature;
+
+export default EEFeature;

src/components/FunctionDescription/index.tsx

@@ -1,28 +1,34 @@
 // Copyright 2023 DatabendLabs.
-import React, { FC, ReactElement, useEffect } from 'react';
-import styles from './styles.module.scss';
-import clsx from 'clsx';
-import Tag from '@site/src/components/BaseComponents/Tag';
+import React, { FC, ReactElement, useEffect } from "react";
+import styles from "./styles.module.scss";
+import clsx from "clsx";
+import Tag from "@site/src/components/BaseComponents/Tag";
 interface IProps {
   description: string;
   includesEETip?: boolean;
 }
 
-const FunctionDescription: FC<IProps> = ({ description, includesEETip }): ReactElement=> {
+const FunctionDescription: FC<IProps> = ({
+  description,
+  includesEETip = false,
+}): ReactElement => {
   useEffect(() => {
-    const h1 = document?.querySelector('.theme-doc-markdown')?.querySelector('header')?.firstChild as HTMLElement;
+    const h1 = document
+      ?.querySelector(".theme-doc-markdown")
+      ?.querySelector("header")?.firstChild as HTMLElement;
     if (h1) {
-      h1?.classList?.add('DOCITEM-PAGE-FUNCTION-DESCRIPTION-DOM');
+      h1?.classList?.add("DOCITEM-PAGE-FUNCTION-DESCRIPTION-DOM");
     }
-  }, [])
+  }, []);
   return (
-    <div className={clsx(styles.description, includesEETip && styles.descriptionIncludesEE)}>
+    <div
+      className={clsx(
+        styles.description,
+        includesEETip && styles.descriptionIncludesEE
+      )}
+    >
       <Tag>{description}</Tag>
     </div>
   );
 };
-FunctionDescription.defaultProps = {
-  includesEETip: false
-}
-
-export default FunctionDescription;
+export default FunctionDescription;

src/components/Tags/index.tsx

@@ -6,7 +6,7 @@ import EnterPriseSvg from "@site/static/icons/enterprise";
 interface IProps {
   list?: string[];
 }
-const DatabendTags: FC<IProps> = ({ list }): ReactElement => {
+const DatabendTags: FC<IProps> = ({ list = ["Enterprise"] }): ReactElement => {
   return (
     <div className={styles.wrap}>
       {list?.map((item) => {
@@ -24,7 +24,5 @@ const DatabendTags: FC<IProps> = ({ list }): ReactElement => {
     </div>
   );
 };
-DatabendTags.defaultProps = {
-  list: ["Enterprise"],
-};
+
 export default DatabendTags;