@cniot/android-pda-components 1.1.11 → 2.0.0-beta.1

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;

package/doc/test/flow/index.js

@@ -0,0 +1,46 @@
+import Flow from "@cniot/flow";
+import UI, { alert, confirm, toast, prompt, historyBack } from "./pages";
+
+export const appId = UI.channel.flowId;
+// 流程入口
+export async function onStart() {
+  const flow = new Flow(UI);
+
+  flow.data = {};
+
+  flow.push(test);
+
+  flow.catch(async function (e) {
+    await alert(e.message, "", "Retry");
+    return flow.replay();
+  });
+
+  flow.start({});
+}
+
+async function test(data, flow) {
+  const input = await UI.router("/pages/scan", {});
+  if (flow.isBack(input)) {
+    return historyBack();
+  }
+  if (input === "prompt") {
+    await prompt("title", "placeholder", "defaultValue", "ok", "cancel");
+  }
+  if (input === "alert") {
+    await alert("alert", "message", "ok");
+  }
+  if (input === "confirm") {
+    await confirm("title", "message", "oktext", "cancelText");
+  }
+  if (input === "success") {
+    await toast("title", "message", "success", 2000);
+  }
+  if (input === "error") {
+    await toast("title", "message", "error", 2000);
+  }
+
+  if (input === "popup") {
+    await UI.overlay("/pages/popup", {});
+  }
+  return flow.next({});
+}

package/doc/test/flow/pages/index.js

@@ -0,0 +1,82 @@
+import i18n from "$src/i18n"; // import $i18n from "$i18n";
+import { UserInterface } from "@cniot/pageflow";
+// ---
+const UI = UserInterface.create();
+
+export default UI;
+
+/**
+ * 通用页面 toast
+ * PC 文档: https://page.cainiao.com/lemo/op-components/index.html#/system/toast
+ * RF 文档: https://page.cainiao.com/lemo/android-pda-components/index.html#/system/toast
+ * level: "error", "warning", "success"
+ */
+export function toast(
+  title = "",
+  message = "",
+  level = "error",
+  duration = 5000
+) {
+  return UI.toast("/system/toast", { title, message, level, duration });
+}
+
+/**
+ * 通用页面 alert
+ * PC 文档： https://page.cainiao.com/lemo/op-components/index.html#/system/alert
+ * RF 文档： https://page.cainiao.com/lemo/android-pda-components/index.html#/system/alert
+ */
+export function alert(
+  title = "",
+  message = "",
+  okText = $i18n.get({
+    id: "tempalte.flow.service.pages.Determine",
+    dm: i18n.get("确定"),
+  })
+) {
+  return UI.overlay("/system/alert", { title, message, okText });
+}
+
+/**
+ * 通用页面 confirm
+ * PC 文档： https://page.cainiao.com/lemo/op-components/index.html#/system/confirm
+ * RF 文档： https://page.cainiao.com/lemo/android-pda-components/index.html#/system/confirm
+ */
+export function confirm(
+  title = $i18n.get(i18n.get("请确认")),
+  message = $i18n.get(i18n.get("点击确认完成操作")),
+  okText = $i18n.get(i18n.get("确认")),
+  cancelText = $i18n.get(i18n.get("取消"))
+) {
+  return UI.overlay("/system/confirm", { title, message, okText, cancelText });
+}
+
+/**
+ * 通用页面 prompt
+ * PC 文档： https://page.cainiao.com/lemo/op-components/index.html#/system/prompt
+ * RF 文档： https://page.cainiao.com/lemo/android-pda-components/index.html#/system/prompt
+ */
+export function prompt(
+  title = $i18n.get(i18n.get("请输入")),
+  placeholder = $i18n.get(i18n.get("请输入")),
+  defaultValue = "",
+  okText = $i18n.get(i18n.get("确认")),
+  cancelText = $i18n.get(i18n.get("取消"))
+) {
+  return UI.overlay("/system/prompt", {
+    title,
+    placeholder,
+    defaultValue,
+    okText,
+    cancelText,
+  });
+}
+
+// 调用浏览器back
+export function historyBack() {
+  return UI.logic("/system/historyBack");
+}
+
+// 获取url参数
+export function getSearchQuery() {
+  return UI.logic("/system/getSearchQuery");
+}

package/doc/test/flow/utils/index.js

@@ -0,0 +1,37 @@
+import { cookie } from "@aligov/global-locale";
+
+/**
+ * 程序进入等待状态 delay 秒后执行后面的代码
+ * @param {*} delay
+ * @returns
+ */
+export function sleep(delay = 1000) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      resolve(true);
+    }, delay);
+  });
+}
+
+/**
+ * 判断是否是系统错误
+ */
+export function isSystemError(err) {
+  return (
+    err instanceof EvalError ||
+    err instanceof RangeError ||
+    err instanceof ReferenceError ||
+    err instanceof SyntaxError ||
+    err instanceof TypeError ||
+    err instanceof URIError
+  );
+}
+
+/**
+ * 导出cookie的操作方法
+ * cookie.get(key);
+ * cookie.set(key);
+ */
+export const Cookie = {
+  ...cookie,
+};

package/doc/test/i18n/index.js

@@ -0,0 +1,95 @@
+/*
+ * This file is generated by parrot must
+ * DOCUMENT LIST:
+ * parrot must: http://gitlab.alibaba-inc.com/parrot/parrot-tool-must
+ * @ali/global-locale: http://gitlab.alibaba-inc.com/parrot/global-locale
+ * @ali/global-string-format: http://gitlab.alibaba-inc.com/parrot/global-string-format
+ */
+import i18n from "$i18n";
+import locale from "@aligov/global-locale";
+import stringFormat from "@aligov/global-string-format";
+import strings from "./strings";
+
+let language; // Current language
+let intl; // Instance of intl-universal. Create by provideIntl
+/**
+ * update instance of intl universal
+ */
+function update() {
+  const { lang } = locale.getLocale();
+  language = lang;
+  intl = stringFormat.init(lang, strings);
+}
+
+/**
+ * change current language
+ * @param {string} langTag language tag config above
+ */
+function change(langTag) {
+  locale.setLang(langTag);
+  update();
+}
+/**
+ * Format string by key
+ * For example:
+ * $i18n.get('jsx.home.title'),
+ * $i18n.get({
+ *    id: 'jsx.home.hello',
+ *    defaultMessage: 'Hello {name}' // not required
+ * },{
+ *  name: 'Alice'
+ * })
+ * More syntax: https://formatjs.io/guides/message-syntax/
+ * @param {string|object} id key or object
+ * @param {object} variable variable for id
+ * @return {string} format message
+ */
+function get(id, variable) {
+  if (!intl) update();
+  if (typeof id === "string") {
+    return stringFormat.format(
+      {
+        id: id,
+      },
+      variable
+    );
+  } else if (typeof id === "object" && id.dm) {
+    id.defaultMessage = id.dm;
+  }
+  return stringFormat.format(
+    {
+      id: id.id,
+      defaultString: id.dm,
+    },
+    variable
+  );
+}
+
+function addMessage(strs) {
+  for (let key in strs) {
+    if (!strings[key]) {
+      strings[key] = {};
+    }
+    Object.assign(strings[key], strs[key]);
+  }
+}
+
+/* set the first hng cookie
+ * //! IMPORTANT  remove this after published, only for demo to start up
+ * //! IMPORTANT 项目第一次启动后请删除下边的逻辑，这个逻辑只是为了第一次运行的时候，项目能够切换到英文
+ */
+// Delete start
+// change("en-US");
+// change("zh-CN");
+// Delete end
+
+i18n.addMessage(strings);
+// window.locale = locale;
+export default {
+  get,
+  update,
+  change,
+  language,
+  locale,
+  addMessage,
+};

package/doc/test/i18n/strings/en-US.json

@@ -0,0 +1 @@
+{}

package/doc/test/i18n/strings/index.js

@@ -0,0 +1,8 @@
+
+import enUS from './en-US';
+import zhCN from './zh-CN';
+
+export default {
+  "en-US": enUS,
+  "zh-CN": zhCN,
+};

package/doc/test/i18n/strings/zh-CN.json

@@ -0,0 +1 @@
+{}

package/doc/test/index.jsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { PageFlowApp, WebService, Desktop } from "@cniot/pageflow";
+import { appId, onStart } from "./flow";
+import track from "../../track";
+
+// 使用 PC 组件库，开发基于 pc 的实操流程
+import registerSystemPages from "../../system/index-android-pda";
+// 使用 android 组件库，开发基于 手机浏览器的 的实操流程
+// import registerSystemPages from "../../system/index-pc";
+// import "./index.less";
+
+// 创建链接 GS 的服务程序
+const service = new WebService({
+  // 应用id
+  appId,
+  // 启动函数
+  onStart,
+  debug: true,
+});
+
+const app = new PageFlowApp({
+  service,
+  // 如果下发了没有定义的页面，会显示这个 404
+  notFoundPage: "/system/404",
+  // 如果 gs 中使用 new Error() 抛出错误，会调用 showErrorPagePath 定义的页面
+  showErrorPage: "/system/toast",
+});
+
+// 注册组件库提供的默认界面，用法请参考组件库文档
+registerSystemPages(app);
+
+// 自动监控每个页面第一次渲染时间，同时支持按钮点击统计
+track(app);
+
+// 自动注册的web/pages下 index.jsx 的页面, 注册路径同文件夹保持一致
+const pages = import.meta.globEager("./pages/*/index.jsx");
+Object.keys(pages).forEach(function (key) {
+  const mpath = key.match(/(\/pages\/.+)\//);
+  if (mpath && mpath[1]) {
+    app.registerPage(mpath[1], pages[key].default);
+  }
+});
+
+export default function () {
+  return <Desktop app={app} service={service} />;
+}

package/doc/test/pages/popup/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Button, List } from "antd-mobile";
+import { Layout, Header, Footer, Scan, Popup } from "$src/components";
+/**
+ * 标准 React 组件
+ * @param data any 指令下发的数据
+ * @param onNext 把数据回传给流程控制
+ * @param onCallback 一个特殊的回传值的方法，可以传2个参数，在flow.onCallback里统一接收
+ * @param hasActive() 当前页面是否在激活状态，如果弹出 overlay 的页面 hasActive 会变成 false
+ * @return React.Element
+ */
+export default function (props) {
+  const { data, onNext } = props;
+  return (
+    <Popup visible={true} onClose={() => onNext()}>
+      <div>12312321</div>
+      <Button block color="primary" onClick={() => onNext()}>
+        按钮组
+      </Button>
+    </Popup>
+  );
+}