@cniot/android-pda-components 1.1.10 → 2.0.0-beta.0

package/doc/index.jsx

@@ -42,6 +42,7 @@ import systemloading from "../packages/pageflow-system-pages/loading/doc";
 import BaseLayout from "../packages/BaseLayout/doc.jsx";
 import useFiled from "../packages/useFiled/doc.jsx";
 
+import AllV2Components from './all-v2-components/index.jsx'
 // 系统界面
 // import PageFlowSystemPages from "../packages/pageflow-system-pages";
 
@@ -49,7 +50,74 @@ import "./index.less";
 
 const docs = [
   {
-    title: "组件列表",
+    title: '快速开始',
+    group: 'start',
+    pages: [
+      {
+        key: "First",
+        title: "快速开始",
+        doc: First,
+      },
+    ]
+  },
+  {
+    title: "V2 组件",
+    group: 'V2',
+    pages: [
+      {
+        key: "debug",
+        title: "debug",
+        doc: AllV2Components,
+      },
+      {
+        key: "Header",
+        title: "Header",
+        doc: Header,
+      },
+    ],
+  },
+  {
+    title: "内置界面预览",
+    pages: [
+      {
+        key: "/system/alert",
+        title: "/system/alert",
+        doc: systemAlert,
+      },
+      {
+        key: "/system/confirm",
+        title: "/system/confirm",
+        doc: systemConfirm,
+      },
+      {
+        key: "/system/toast",
+        title: "/system/toast",
+        doc: systemToast,
+      },
+      {
+        key: "/system/prompt",
+        title: "/system/prompt",
+        doc: systemprompt,
+      },
+      {
+        key: "/system/loading",
+        title: "/system/loading",
+        doc: systemloading,
+      },
+    ],
+  },
+  {
+    title: "布局容器",
+    pages: [
+      {
+        key: "BaseLayout",
+        title: "BaseLayout",
+        doc: BaseLayout,
+      },
+    ],
+  },
+  {
+    title: "组件列表-V1",
     pages: [
       {
         key: "First",
@@ -224,46 +292,6 @@ const docs = [
       },
     ],
   },
-  {
-    title: "内置界面预览",
-    pages: [
-      {
-        key: "/system/alert",
-        title: "/system/alert",
-        doc: systemAlert,
-      },
-      {
-        key: "/system/confirm",
-        title: "/system/confirm",
-        doc: systemConfirm,
-      },
-      {
-        key: "/system/toast",
-        title: "/system/toast",
-        doc: systemToast,
-      },
-      {
-        key: "/system/prompt",
-        title: "/system/prompt",
-        doc: systemprompt,
-      },
-      {
-        key: "/system/loading",
-        title: "/system/loading",
-        doc: systemloading,
-      },
-    ],
-  },
-  {
-    title: "布局容器",
-    pages: [
-      {
-        key: "BaseLayout",
-        title: "BaseLayout",
-        doc: BaseLayout,
-      },
-    ],
-  },
 ];
 
 function getDoc(key) {
@@ -282,6 +310,7 @@ function getHashKey() {
 
 function App() {
   const [currentIndex, setCurrentIndex] = React.useState(getHashKey);
+  const [groupTitleHeight, setGroupTitleHeight] = React.useState(46);
   const onClickComponentItem = React.useCallback(function (key) {
     location.hash = key;
     // setCurrentIndex(key);
@@ -290,6 +319,8 @@ function App() {
     window.addEventListener("hashchange", function () {
       setCurrentIndex(getHashKey());
     });
+
+    setGroupTitleHeight(document.getElementsByClassName('doc-group-title')?.[0]?.offsetHeight)
   }, []);
 
   const currentDoc = getDoc(currentIndex);
@@ -307,27 +338,39 @@ function App() {
         {docs.map(function (item, index) {
           return (
             <React.Fragment key={index}>
-              <h2>{item.title}</h2>
-              {item.pages.map(function (item) {
-                return (
-                  <div
-                    className={
-                      currentIndex === item.key
-                        ? "components-item active"
-                        : "components-item"
-                    }
-                    onClick={onClickComponentItem.bind(null, item.key)}
-                    data-index={item.key}
-                    key={item.key}
-                  >
-                    {item.abandon ? (
-                      <s>{item.title}</s>
-                    ) : (
-                      <span>{item.title}</span>
-                    )}
-                  </div>
-                );
-              })}
+              <div className='doc-group-title' style={{ top: -20 + index * groupTitleHeight }}
+                onClick={(e) => {
+                  const div1 = document.querySelector(`div[data-group="${index}"]`)
+                  div1?.setAttribute?.('style', `display:${div1.offsetHeight === 0 ? 'block' : 'none'}`);
+
+                  const div2 = document.querySelector(`div[data-group-fold="${index}"]`);
+                  div2.innerHTML && (div2.innerHTML = div2.innerHTML === '点击收起' ? '点击展开' : '点击收起');
+                }}>
+                <h2 >{item.title}</h2>
+                <div data-group-fold={index} className="doc-group-fold">{['V2', 'start'].includes(item.group) ? '点击收起' : '点击展开'}</div>
+              </div>
+              <div data-group={index} style={{ display: `${['V2', 'start'].includes(item.group) ? 'block' : 'none'}` }}>
+                {item.pages.map(function (item) {
+                  return (
+                    <div
+                      className={
+                        currentIndex === item.key
+                          ? "components-item active"
+                          : "components-item"
+                      }
+                      onClick={onClickComponentItem.bind(null, item.key)}
+                      data-index={item.key}
+                      key={item.key}
+                    >
+                      {item.abandon ? (
+                        <s>{item.title}</s>
+                      ) : (
+                        <span>{item.title}</span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
             </React.Fragment>
           );
         })}

package/doc/index.less

@@ -1,50 +1,78 @@
 .components-container {
   display: flex;
+  height: 100vh;
 }
+
 .components-example {
   flex-direction: column;
   border-right: 1px solid #d8d8d8;
   min-height: 100vh;
   padding-right: 10px;
+  overflow-y: scroll;
+  width: 260px;
+  padding: 16px;
+  background-color: #ffffff;
+
+  .doc-group-title {
+    display: flex;
+    align-items: flex-end;
+    border-bottom: 1px solid #d8d8d8;
+    cursor: pointer;
+    position: sticky;
+    top: -20px;
+    background-color: #fff;
+
+
+  .doc-group-fold {
+    padding-bottom: 5px;
+    color: #6d67f1;
+  }
+
   h1 {
     margin-top: 20px;
   }
+
   h2 {
+    flex: 1;
     color: #00000073;
     font-size: 14px;
     margin-top: 20px;
-    border-bottom: 1px solid #d8d8d8;
+    // border-bottom: 1px solid #d8d8d8;
     padding-bottom: 5px;
   }
+}
+
+.components-item {
+  color: #000000d9;
+  font-size: 16px;
+  padding: 10px 0;
+  margin-left: 20px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover,
+  &.active {
+    color: #4f10fd73;
+  }
 
-  .components-item {
-    color: #000000d9;
-    font-size: 16px;
-    padding: 10px 0;
-    margin-left: 20px;
-    align-items: center;
-    cursor: pointer;
-    &:hover,
-    &.active {
-      color: #4f10fd73;
-    }
-
-    > small {
-      margin-left: 1em;
-    }
+  >small {
+    margin-left: 1em;
   }
 }
+}
 
 .show-case {
   display: flex;
   flex-direction: column;
   padding: 50px;
   flex: 1;
+  overflow: auto;
 
   h2 {
     // font-size: 80%;
     margin: 20px 0;
   }
+
   .code {
     white-space: pre;
     border: 1px solid #e8e8e8;
@@ -53,6 +81,7 @@
     padding: 5px 10px;
     display: block;
     margin: 20px 0;
+    text-wrap: wrap
   }
 }
 
@@ -106,7 +135,7 @@ th {
   border-bottom: 1px solid #cbcbcb;
 }
 
-.pure-table-bordered tbody > tr:last-child > td {
+.pure-table-bordered tbody>tr:last-child>td {
   border-bottom-width: 0;
 }
 
@@ -117,6 +146,7 @@ th {
   border: 1px solid #e9e9e9;
   border-radius: 6px;
   flex-direction: column;
+
   &:not(:last-child) {
     margin-bottom: 20px;
   }
@@ -131,9 +161,11 @@ th {
   background-color: black;
   padding: 24px;
 }
+
 .light-block {
   background-color: #ddd;
   padding: 24px;
+
   &.pda {
     width: 50%;
   }
@@ -142,9 +174,11 @@ th {
 .light-block-overlay {
   position: relative;
   height: 300px;
+
   .op-overlay {
     position: absolute !important;
   }
+
   .op-overlay::before {
     position: absolute !important;
     width: 100% !important;