@antv/dumi-theme-antv 0.6.3 → 0.6.4-alpha.1

package/dist/{slots → pages/Index/components}/Detail/News.js

@@ -1,6 +1,6 @@
 import { Link, useLocale } from 'dumi';
 import React from 'react';
-import { ic } from "../hooks";
+import { ic } from "../../../../slots/hooks";
 import styles from "./News.module.less";
 var numberImages = ['https://gw.alipayobjects.com/zos/antfincdn/IqREAm36K7/1.png', 'https://gw.alipayobjects.com/zos/antfincdn/3fG1Iqjfnz/2.png'];
 export var News = function News(_ref) {

package/dist/{slots → pages/Index/components}/Detail/index.js

@@ -19,8 +19,8 @@ import { useLocale } from 'dumi/dist/client/theme-api';
 import gh from 'parse-github-url';
 import React, { useEffect, useState } from 'react';
 import GitHubButton from 'react-github-button';
-import { ic } from "../hooks";
 import { News } from "./News";
+import { ic } from "../../../../slots/hooks";
 import styles from "./index.module.less";
 /**
  * Index.技术栈的描述区域！

package/dist/{slots → pages/Index/components}/Features/FeatureCard.js

@@ -1,6 +1,6 @@
 import cx from 'classnames';
 import React from 'react';
-import { ic } from "../hooks";
+import { ic } from "../../../../slots/hooks";
 import styles from "./FeatureCard.module.less";
 var FeatureCard = function FeatureCard(_ref) {
   var icon = _ref.icon,

package/dist/{slots → pages/Index/components}/Features/index.js

@@ -1,7 +1,7 @@
 import { Col, Row } from 'antd';
 import cx from 'classnames';
 import React from 'react';
-import { ic } from "../hooks";
+import { ic } from "../../../../slots/hooks";
 import FeatureCard from "./FeatureCard";
 import styles from "./index.module.less";
 export var Features = function Features(_ref) {

package/dist/pages/Index/components/_.less

@@ -0,0 +1,119 @@
+@import '~antd/dist/antd.less';
+
+@primary-color: #873bf4;
+
+.ant-btn,
+.ant-input,
+.ant-notification-notice,
+.ant-select-selector {
+  border-radius: 8px !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  > a[aria-hidden]:first-child {
+    float: left;
+    width: 20px;
+    font-size: 0;
+    line-height: inherit;
+    text-align: right;
+    padding-inline-end: 6px;
+    margin-inline-start: -20px;
+
+    &:hover {
+      border: 0;
+    }
+
+    > .icon-link::before {
+      font-size: 20px;
+      content: '#';
+    }
+  }
+
+  &:not(:hover) > a[aria-hidden]:first-child > .icon-link {
+    visibility: hidden;
+  }
+}
+
+.container1440() {
+  width: 1440px;
+  max-width: calc(100% - 80px);
+  margin-right: auto;
+  margin-left: auto;
+
+  @media only screen and (max-width: 931.99px) {
+    & {
+      max-width: calc(100% - 80px);
+    }
+  }
+
+  @media only screen and (max-width: 767.99px) {
+    & {
+      max-width: calc(100% - 32px);
+    }
+  }
+}
+
+// 非常关键，用于 react-split-pane 的样式，如果没有，会没有办法鼠标拖拽
+// 参考：https://codesandbox.io/s/mow7x4zyqx
+:global {
+  .Pane1,
+  .Pane2 {
+    overflow: auto;
+  }
+
+  .Resizer {
+    z-index: 1;
+    box-sizing: border-box;
+    background: #000;
+    background-clip: padding-box;
+    opacity: 0.1;
+
+    &:hover {
+      transition: all 2s ease;
+    }
+
+    &.horizontal {
+      width: 100%;
+      height: 11px;
+      margin: -5px 0;
+      border-top: 5px solid rgba(255, 255, 255, 0);
+      border-bottom: 5px solid rgba(255, 255, 255, 0);
+      cursor: row-resize;
+
+      &:hover {
+        border-top: 5px solid rgba(0, 0, 0, 0.5);
+        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+      }
+    }
+
+    &.vertical {
+      width: 11px;
+      margin: 0 -5px;
+      border-right: 5px solid rgba(255, 255, 255, 0);
+      border-left: 5px solid rgba(255, 255, 255, 0);
+      cursor: col-resize;
+
+      Pane2 {
+        border-left: 1px solid #e6e6e6;
+      }
+
+      &:hover {
+        border-right: 5px solid rgba(0, 0, 0, 0.5);
+        border-left: 5px solid rgba(0, 0, 0, 0.5);
+      }
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: transparent;
+      }
+    }
+  }
+}

package/dist/{layouts/entry/Index.js → pages/Index/index.js}

@@ -4,23 +4,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { FormattedMessage, useSiteData } from 'dumi';
+import { useIntl, useSiteData } from 'dumi';
 import { get, isArray, size } from 'lodash-es';
 import React from 'react';
-import SEO from "../../common/SEO";
-import { Cases } from "dumi/theme/slots/Cases";
-import { Companies } from "dumi/theme/slots/Companies";
-import { Detail } from "dumi/theme/slots/Detail";
-import { Features } from "dumi/theme/slots/Features";
-import { Footer } from "dumi/theme/slots/Footer";
-import { Header } from "dumi/theme/slots/Header";
-
-/**
- * Index 路由下的入口
- * - 获取数据
- * - 组合 slots 下的木偶组件
- */
-export var Index = function Index() {
+import CommonHelmet from "../../common/CommonHelmet";
+import { ic } from "../../slots/hooks";
+import { Cases } from "./components/Cases";
+import { Companies } from "./components/Companies";
+import { Detail } from "./components/Detail";
+import { Features } from "./components/Features";
+var Index = function Index() {
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
   var title = themeConfig.title,
@@ -35,6 +28,8 @@ export var Index = function Index() {
     className = themeConfig.className,
     style = themeConfig.style,
     id = themeConfig.id;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var detailProps = _objectSpread({
     githubUrl: githubUrl,
     showGithubStars: showGithubStars,
@@ -52,13 +47,14 @@ export var Index = function Index() {
     style: style,
     className: className
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SEO, {
-    title: title,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonHelmet, {
+    title: ic(title),
     titleSuffix: "AntV"
-  }), /*#__PURE__*/React.createElement(Header, null), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
-    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+  }), size(detail) ? /*#__PURE__*/React.createElement(Detail, detailProps) : null, size(featuresProps.features) ? /*#__PURE__*/React.createElement(Features, featuresProps) : null, size(cases) ? /*#__PURE__*/React.createElement(Cases, casesProps) : null, size(companies) ? /*#__PURE__*/React.createElement(Companies, {
+    title: formatMessage({
       id: isAntVSite ? '2000+ 公司正在使用' : '感谢信赖'
     }),
     companies: companies
-  }) : null, /*#__PURE__*/React.createElement(Footer, null));
-};
+  }) : null);
+};
+export default Index;

package/dist/plugin/index.js

@@ -61,42 +61,6 @@ var plugin_default = (api) => {
     memo.extraRehypePlugins = [import_rehypeObservable.default];
     return memo;
   });
-  const pages = [
-    {
-      id: "dumi-theme-antv-homepage",
-      absPath: "/"
-    },
-    {
-      id: "dumi-theme-antv-en-homepage",
-      absPath: "/en/"
-    },
-    {
-      id: "dumi-theme-antv-zh-homepage",
-      absPath: "/zh/"
-    },
-    // Examples gallery page.
-    {
-      id: "dumi-theme-antv-example-list-zh",
-      absPath: "/examples",
-      file: `${PAGES_DIR}/Examples`
-    },
-    {
-      id: "dumi-theme-antv-example-list-lang",
-      absPath: "/:language/examples",
-      file: `${PAGES_DIR}/Examples`
-    },
-    // single example preview page.
-    {
-      id: "dumi-theme-antv-single-example-zh",
-      absPath: "/examples/:topic/:example",
-      file: `${PAGES_DIR}/Example`
-    },
-    {
-      id: "dumi-theme-antv-single-example-lang",
-      absPath: "/:language/examples/:topic/:example",
-      file: `${PAGES_DIR}/Example`
-    }
-  ];
   api.modifyConfig((memo) => {
     memo.extraRemarkPlugins = memo.themeConfig.feedback ? [import_remarkFeedback.default] : [];
     return memo;
@@ -136,18 +100,63 @@ export default function ThemeAntVContextWrapper() {
     file: `${api.paths.absTmpPath}/theme-antv/ContextWrapper.tsx`
   }));
   api.modifyRoutes((routes) => {
-    pages.forEach((page) => {
-      routes[page.id] = {
-        id: page.id,
-        path: page.absPath.slice(1),
-        absPath: page.absPath,
-        file: page.file,
+    const extraRoutesList = [
+      {
+        id: "dumi-theme-antv-homepage",
+        absPath: "/",
+        path: "",
+        file: `${PAGES_DIR}/Index`
+      },
+      {
+        id: "dumi-theme-antv-homepage-en",
+        absPath: "/en/",
+        path: "en",
+        file: `${PAGES_DIR}/Index`
+      },
+      {
+        id: "dumi-theme-antv-homepage-zh",
+        absPath: "/zh/",
+        path: "zh",
+        file: `${PAGES_DIR}/Index`
+      },
+      // Examples gallery page.
+      {
+        id: "dumi-theme-antv-example-list-zh",
+        absPath: "/examples",
+        path: "examples",
+        file: `${PAGES_DIR}/Examples`
+      },
+      {
+        id: "dumi-theme-antv-example-list-lang",
+        absPath: "/:language/examples",
+        path: ":language/examples",
+        file: `${PAGES_DIR}/Examples`
+      },
+      // single example preview page.
+      {
+        id: "dumi-theme-antv-single-example-zh",
+        absPath: "/examples/:topic/:example",
+        path: "examples/:topic/:example",
+        file: `${PAGES_DIR}/Example`
+      },
+      {
+        id: "dumi-theme-antv-single-example-lang",
+        absPath: "/:language/examples/:topic/:example",
+        path: ":language/examples/:topic/:example",
+        file: `${PAGES_DIR}/Example`
+      }
+    ];
+    extraRoutesList.forEach((itemRoute) => {
+      routes[itemRoute.id] = {
+        id: itemRoute.id,
+        path: itemRoute.path,
+        absPath: itemRoute.absPath,
+        file: itemRoute.file,
         parentId: "DocLayout",
         meta: MOCK_META
       };
     });
     routes["404"].file = `${PAGES_DIR}/404`;
-    routes["404"].meta = MOCK_META;
     return routes;
   });
   api.addTmpGenerateWatcherPaths(() => [path.resolve(process.cwd(), "examples")]);

package/dist/slots/CodeEditor/index.js

@@ -22,8 +22,8 @@ import parserBabel from 'prettier/parser-babel';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { bind, clear } from 'size-sensor';
 import Loading from "dumi/theme/slots/Loading";
-import { EDITOR_TABS, Toolbar } from "./Toolbar";
 import styles from "./index.module.less";
+import { EDITOR_TABS, Toolbar } from "./Toolbar";
 import { compile, execute, replaceInsertCss } from "./utils";
 loader.config({
   'vs/nls': {
@@ -38,7 +38,7 @@ loader.config({
 /**
  * 代码编辑器
  */
-export var CodeEditor = function CodeEditor(_ref) {
+var CodeEditor = function CodeEditor(_ref) {
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     source = _ref.source,
@@ -432,4 +432,5 @@ export var CodeEditor = function CodeEditor(_ref) {
       }
     }));
   }));
-};
+};
+export default CodeEditor;

package/dist/slots/CodePreview/CodeHeader.js

@@ -3,7 +3,7 @@ import React from 'react';
 /**
  * 组件的 header
  */
-export var CodeHeader = function CodeHeader(_ref) {
+var CodeHeader = function CodeHeader(_ref) {
   var title = _ref.title,
     relativePath = _ref.relativePath,
     githubUrl = _ref.githubUrl;
@@ -30,4 +30,5 @@ export var CodeHeader = function CodeHeader(_ref) {
       })
     })
   });
-};
+};
+export default CodeHeader;

package/dist/slots/CodePreview/index.js

@@ -11,7 +11,7 @@ function getErrorMessage(e) {
  * 1. 一些 header 菜单
  * 2. 错误预览
  */
-export var CodePreview = function CodePreview(_ref) {
+var CodePreview = function CodePreview(_ref) {
   var isPlayground = _ref.isPlayground,
     exampleId = _ref.exampleId,
     header = _ref.header,
@@ -33,4 +33,5 @@ export var CodePreview = function CodePreview(_ref) {
     }),
     subTitle: /*#__PURE__*/React.createElement("pre", null, getErrorMessage(error))
   }) : null));
-};
+};
+export default CodePreview;

package/dist/slots/CodeRunner/index.js

@@ -8,16 +8,22 @@ import { useLocale, useSiteData } from 'dumi';
 import { noop } from 'lodash-es';
 import React, { useState } from 'react';
 import SplitPane from 'react-split-pane';
+import ClientOnly from "../../common/ClientOnly";
+import InViewSuspense from "../../common/InViewSuspense";
 import { NotFound } from "dumi/theme/slots/404";
-import { CodeEditor } from "dumi/theme/slots/CodeEditor";
-import { CodePreview } from "dumi/theme/slots/CodePreview";
-import { CodeHeader } from "../CodePreview/CodeHeader";
+import CodeHeader from "../CodePreview/CodeHeader";
 import { ic } from "../hooks";
 import { getDemoInfo } from "./utils";
+var CodeEditor = /*#__PURE__*/React.lazy(function () {
+  return import("dumi/theme/slots/CodeEditor");
+});
+var CodePreview = /*#__PURE__*/React.lazy(function () {
+  return import("dumi/theme/slots/CodePreview");
+});
 /**
  * 代码编辑器 + 代码预览区域
  */
-export var CodeRunner = function CodeRunner(_ref) {
+var CodeRunner = function CodeRunner(_ref) {
   var exampleTopics = _ref.exampleTopics,
     topic = _ref.topic,
     example = _ref.example,
@@ -53,28 +59,27 @@ export var CodeRunner = function CodeRunner(_ref) {
     githubUrl: githubUrl
   });
   var exampleId = "".concat(topic, "_").concat(example, "_").concat(demo);
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(SplitPane, {
-      split: "vertical",
-      defaultSize: "".concat((1 - size) * 100, "%"),
-      minSize: 100
-    }, /*#__PURE__*/React.createElement(CodePreview, {
-      exampleId: exampleId,
-      error: error,
-      header: header,
-      isPlayground: isPlayground
-    }), /*#__PURE__*/React.createElement(CodeEditor, {
-      exampleId: exampleId,
-      source: source,
-      relativePath: relativePath,
-      replaceId: replaceId,
-      onError: setError,
-      onFullscreen: setFullscreen,
-      onDestroy: noop,
-      onReady: noop,
-      playground: playground
-    }))
-  );
-};
+  return /*#__PURE__*/React.createElement(InViewSuspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(SplitPane, {
+    split: "vertical",
+    defaultSize: "".concat((1 - size) * 100, "%"),
+    minSize: 100
+  }, /*#__PURE__*/React.createElement(CodePreview, {
+    exampleId: exampleId,
+    error: error,
+    header: header,
+    isPlayground: isPlayground
+  }), /*#__PURE__*/React.createElement(ClientOnly, null, /*#__PURE__*/React.createElement(CodeEditor, {
+    exampleId: exampleId,
+    source: source,
+    relativePath: relativePath,
+    replaceId: replaceId,
+    onError: setError,
+    onFullscreen: setFullscreen,
+    onDestroy: noop,
+    onReady: noop,
+    playground: playground
+  }))));
+};
+export default CodeRunner;

package/dist/slots/ExampleSider/index.js

@@ -26,7 +26,7 @@ var MenuIcon = createFromIconfontCN({
 /**
  * DEMO 预览页面的菜单
  */
-export var ExampleSider = function ExampleSider(props) {
+var ExampleSider = function ExampleSider(props) {
   var currentDemo = props.currentDemo,
     onDemoClicked = props.onDemoClicked,
     exampleTopics = props.exampleTopics;
@@ -187,4 +187,5 @@ export var ExampleSider = function ExampleSider(props) {
       setOpenKeys(keys);
     }
   }, renderSubMenu()));
-};
+};
+export default ExampleSider;

package/dist/slots/Feedback/Contributors.js

@@ -9,7 +9,7 @@ var StyledContributorsWrapper = styled.div.withConfig({
   displayName: "StyledContributorsWrapper",
   componentId: "dumi-theme-antv-c7ef__sc-11d631u-0"
 })(["margin-top:80px;.title{margin-bottom:14px;color:#bfbfbf;}.list{display:flex;flex-wrap:wrap;clear:both;li{height:24px;transition:all 0.3s;margin-inline-end:-8px;}&:hover{li{margin-inline-end:0;}}}"]);
-export var Contributors = function Contributors() {
+var Contributors = function Contributors() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSiteData$themeCon = useSiteData().themeConfig.sitePackagePath,
@@ -42,4 +42,5 @@ export var Contributors = function Contributors() {
     },
     branch: defaultBranch
   }));
-};
+};
+export default Contributors;

package/dist/slots/Feedback/EditButton.js

@@ -2,7 +2,7 @@ import { FormOutlined } from '@ant-design/icons';
 import { useIntl, useRouteMeta, useSiteData } from 'dumi';
 import React from 'react';
 import { useGithubRepo } from "../../utils/github";
-export var EditButton = function EditButton() {
+var EditButton = function EditButton() {
   var meta = useRouteMeta();
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -33,4 +33,5 @@ export var EditButton = function EditButton() {
   }, formatMessage({
     id: '在 GitHub 上编辑此页'
   })));
-};
+};
+export default EditButton;

package/dist/slots/Feedback/PageFeedback.js

@@ -5,7 +5,8 @@ import { PageFeedbackVoteButtons } from "./PageFeedbackVoteButtons";
 var StyledWrapper = styled.div.withConfig({
   displayName: "StyledWrapper",
   componentId: "dumi-theme-antv-c7ef__sc-1vamzhw-0"
-})(["margin:2px 4px 8px 4px;box-shadow:0 2px 6px 0 rgba(0,0,0,.08);border-radius:8px;padding:10px 12px;width:fit-content;background-color:#fff;font-size:14px;}"]);
-export var PageFeedback = function PageFeedback() {
+})(["margin:2px 4px 8px 4px;box-shadow:0 2px 6px 0 rgba(0,0,0,0.08);border-radius:8px;padding:10px 12px;width:fit-content;background-color:#fff;font-size:14px;"]);
+var PageFeedback = function PageFeedback() {
   return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(PageFeedbackVoteButtons, null), /*#__PURE__*/React.createElement(PageFeedbackReasonForm, null));
-};
+};
+export default PageFeedback;

package/dist/slots/Feedback/SectionFeedback.js

@@ -14,7 +14,7 @@ var StyledWrapper = styled.div.withConfig({
   displayName: "StyledWrapper",
   componentId: "dumi-theme-antv-c7ef__sc-vcamqv-0"
 })(["background-color:#fff;border-radius:12px;box-shadow:0 0.5rem 1.2rem #f0f1f2;transition:height 0.3s ease-in-out;width:262px;position:fixed;z-index:1001;padding:10px 18px;border-radius:8px;transition:top 0.3s ease-in-out,right 0.3s ease-in-out;"]);
-export var SectionFeedback = function SectionFeedback() {
+var SectionFeedback = function SectionFeedback() {
   var feedbackState = useSnapshot(feedbackStore);
   var location = useLocation();
   useEffect(function () {
@@ -94,4 +94,5 @@ var findClosetElement = function findClosetElement(e, elements) {
     }
   });
   return closestElement;
-};
+};
+export default SectionFeedback;

package/dist/slots/Feedback/index.js

@@ -1,13 +1,15 @@
 import { useSiteData } from 'dumi';
-import React from 'react';
-import { styled } from 'styled-components';
-import { Contributors } from "./Contributors";
-import { EditButton } from "./EditButton";
-import { SectionFeedback } from "./SectionFeedback";
-var StyledWrapper = styled.div.withConfig({
-  displayName: "StyledWrapper",
-  componentId: "dumi-theme-antv-c7ef__sc-yubwx0-0"
-})(["margin-top:40px;"]);
+import React, { lazy } from 'react';
+import InViewSuspense from "../../common/InViewSuspense";
+var EditButton = /*#__PURE__*/lazy(function () {
+  return import("./EditButton");
+});
+var Contributors = /*#__PURE__*/lazy(function () {
+  return import("./Contributors");
+});
+var SectionFeedback = /*#__PURE__*/lazy(function () {
+  return import("./SectionFeedback");
+});
 export var Feedback = function Feedback() {
   var _useSiteData = useSiteData(),
     themeConfig = _useSiteData.themeConfig;
@@ -15,5 +17,5 @@ export var Feedback = function Feedback() {
   if (!feedback) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(EditButton, null), /*#__PURE__*/React.createElement(Contributors, null), /*#__PURE__*/React.createElement(SectionFeedback, null));
+  return /*#__PURE__*/React.createElement(InViewSuspense, null, /*#__PURE__*/React.createElement(EditButton, null), /*#__PURE__*/React.createElement(Contributors, null), /*#__PURE__*/React.createElement(SectionFeedback, null));
 };

package/dist/slots/Footer/index.js

@@ -18,7 +18,7 @@ import styles from "./index.module.less";
  * 底部菜单
  * @returns
  */
-export var Footer = function Footer(props) {
+var Footer = function Footer(props) {
   var columns = props.columns,
     bottom = props.bottom,
     language = props.language,
@@ -222,4 +222,5 @@ export var Footer = function Footer(props) {
       href: "https://xtech.antfin.com/"
     }, "AntV")))))
   }, omit(restProps, ['githubUrl'])));
-};
+};
+export default Footer;

package/dist/slots/Header/Search/index.js

@@ -8,9 +8,9 @@ import { SearchOutlined } from '@ant-design/icons';
 import { Popover } from 'antd';
 import { useIntl, useSiteData, useSiteSearch } from 'dumi';
 import React, { useEffect, useMemo, useState } from 'react';
-import { SearchResult } from "./SearchResult";
 import { getSearchResults } from "./helper";
 import styles from "./index.module.less";
+import { SearchResult } from "./SearchResult";
 export var Search = function Search() {
   var intl = useIntl();
   var _useState = useState(false),