@cniot/android-pda-components 0.2.17 → 0.2.21

package/packages/WakeKeyborard/keyborard.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useRef } from "react";
+import "./index.less";
+import Button from '../Button'
+
+const blankFunc = () => { };
+export default function Keyborard(props) {
+  const { label = "查询", onWakeKeyboard = blankFunc, onClick = blankFunc, onHidden = blankFunc, type='tel', placeholder='请输入' } = props;
+  const inputRef = useRef(null);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const handleKeyUp = e => {
+      const { code, keyCode, key } = e;
+      if (code === 'Enter') {
+        e.preventDefault();
+        onClick(inputRef.current.value, e);
+        onHidden(true);
+        setVisible(false);
+        return;
+      }
+    }
+    requestAnimationFrame(() => {
+      inputRef.current.focus();
+      onWakeKeyboard();
+    })
+
+    document.addEventListener('keyup', handleKeyUp);
+    return () => {
+      document.removeEventListener('keyup', handleKeyUp);
+    }
+  }, [])
+
+  if(!visible) return null;
+  return (
+    <div
+      className="wakekeyborard-overlay"
+      onClick={e => {
+        if (e.target.className && e.target.className.includes('wakekeyborard-overlay')) {
+          onHidden(false);
+          setVisible(false);
+        }
+      }}
+    >
+      <div className="wakekeyborard-inputbox">
+        <input
+          ref={inputRef}
+          type={type}
+          placeholder={placeholder}
+        />
+        <Button
+          type="cutout"
+          onClick={ e => {
+            onClick(inputRef.current.value, e);
+            onHidden(true);
+            setVisible(false);
+          }}
+        >{label}</Button>
+      </div>
+    </div>
+  )
+}

package/packages/doc.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+// import Button from "./index";
+export default function () {
+  return (
+    <div>
+      <h1>快速开始</h1>
+
+      <code className="code">{`
+
+tnpm install @cniot/android-pda-components --save
+
+import { Button } from '@cniot/android-pda-components';
+
+import '@cniot/android-pda-components/es/style.css';
+
+      `}</code>
+    </div>
+  );
+}

package/packages/global.less

@@ -0,0 +1,7 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+div {
+    box-sizing: border-box;
+}

package/packages/index.jsx

@@ -0,0 +1,60 @@
+import './global.less';
+
+import Title from "./PdaTitle";
+import Header from "./Header";
+import Button from "./Button";
+import InfoCard from "./InfoCard";
+import TaskCard from "./TaskCard";
+import Confirm from './Confirm';
+import Toast from './Toast';
+import Overlay from "./Overlay";
+import PageFlowSystemPages from './pageflow-system-pages/index.jsx';
+import Presentation from "./Presentation";
+import List from "./List";
+import BaseLayout from "./BaseLayout";
+import WakeKeyborard from "./WakeKeyborard";
+import Keyborard from './WakeKeyborard/keyborard';
+
+import Steps from "./PdaSteps";
+import FinishCard from "./PdaFinishCard";
+import DistanceCard from "./PdaDistanceCard";
+import SubCard from './SubCard';
+import SelectCard from './SelectCard';
+import AppList from './AppList';
+import InfiniteScroll from './PdaInfiniteScroll';
+import ActionSheet from './PdaActionSheet';
+import Tag from './Tag';
+import SimpleCard from './SimpleCard';
+import SimpleCardBlock from './SimpleCardBlock';
+
+// 兼容之前 ListItem 卡片命名逻辑
+const ListItem = TaskCard;
+
+export {
+  Title,
+  Header,
+  Button,
+  InfoCard,
+  Steps,
+  ListItem,
+  TaskCard,
+  Confirm,
+  Toast,
+  Overlay,
+  DistanceCard,
+  PageFlowSystemPages,
+  Presentation,
+  List,
+  WakeKeyborard,
+  Keyborard,
+  SubCard,
+  SelectCard,
+  FinishCard,
+  InfiniteScroll,
+  BaseLayout,
+  ActionSheet,
+  AppList,
+  Tag,
+  SimpleCard,
+  SimpleCardBlock,
+};

package/packages/index.less

@@ -0,0 +1,3 @@
+html{
+  font-size:10px;
+}

package/packages/pageflow-system-pages/alert/doc.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+import SystemAlert from "./index";
+
+import service from '../../../mock/service';
+export default function () {
+  return (
+    <div>
+      <h1>/system/alert</h1>
+      <p>弹出一个警告窗，用户必须点击确认才能继续</p>
+      <h2>示例</h2>
+      <code className="code">
+{
+  `
+    // gs 代码如下
+    pageFlow.alert({
+      title: '111',
+      message: '2222',
+      okText: "确认"
+    })
+  `
+}
+      </code>
+      <h2>页面效果</h2>
+      <div className="light-block light-block-overlay">
+        <SystemAlert service={service} data={{
+          title: '111',
+          message: '2222',
+          okText: "确认"
+        }} ></SystemAlert>
+      </div>
+      <h2>Alert</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>title</td>
+            <td>标题</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>message</td>
+            <td>信息</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>okText</td>
+            <td>确认文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>okDataClick</td>
+            <td>ok 按钮 arms 监控</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/pageflow-system-pages/alert/index.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Confirm from '../../Confirm';
+import Overlay from "../../Overlay";
+// import "./index.less";
+
+export default function Alert(props) {
+  const { service, data = {} } = props;
+  // const { title = "title", message = "message", okText = "okText", cancelText="" } = data;
+  const onClickCallback = React.useCallback(
+    function () {
+      service.onNext(true);
+    },
+    [service]
+  );
+
+  return (
+    <Overlay verticalPosition="bottom">
+      {/* <Confirm title={title} message={message} okText={okText} cancelText={cancelText} onClick={onClickCallback} ></Confirm> */}
+      <Confirm {...data} onClick={onClickCallback} ></Confirm>
+    </Overlay>
+  );
+}

package/packages/pageflow-system-pages/confirm/doc.jsx

@@ -0,0 +1,118 @@
+import React from "react";
+import SystemConfirm from "./index";
+
+import service from '../../../mock/service';
+export default function () {
+  return (
+    <div>
+      <h1>/system/confirm</h1>
+      <p>弹出一个确认框，用户必须点击确认才能继续</p>
+      <h2>示例</h2>
+      <code className="code">
+{
+  `
+    // gs 代码如下
+    pageFlow.confirm({
+      title: '111',
+      message: '2222',
+      okText: "确认",
+      cancelText:"取消"
+    })
+    // 如果 message 需要多行显示，使用 subMessage 方式
+    pageFlow.confirm({
+      title: '111',
+      subMessage: [
+            {label: 'title1', content: 'content1'},
+            {label: 'title2', content: 'content2'},
+            {label: 'title3', content: 'content3'},
+      ],
+      okText: "确认",
+      cancelText:"取消"
+    })
+  `
+}
+      </code>
+      <h2>页面效果</h2>
+      <div className="light-block light-block-overlay">
+        <SystemConfirm  service={service} data={{
+          title: '111',
+          message: <span>栈板码：<span style={{color: '#0091EA'}}>111</span><br/><span>箱码：222</span></span>,
+          okText: "确认",
+          cancelText:"取消"
+        }} ></SystemConfirm>
+      </div>
+      <h2>Confirm</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>title</td>
+            <td>标题</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>message</td>
+            <td>信息</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>subMessage</td>
+            <td>副文本消息</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>okText</td>
+            <td>确认文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>cancelText</td>
+            <td>取消文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>okDataClick</td>
+            <td>ok 按钮 arms 监控</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>cancelDataClick</td>
+            <td>cancel 按钮 arms 监控</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>insertButtons</td>
+            <td>插入在默认按钮上面</td>
+            <td>{JSON.stringify([
+              { label: '查看详情111', value: 'hello', dataClick: '查看详情1234' }
+            ])}</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>appendButtons</td>
+            <td>追加到默认按钮下面</td>
+            <td>{JSON.stringify([
+              { label: '查看详情222', value: 'hello', dataClick: '查看详情1234' }
+            ])}</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+
+    </div>
+  );
+}

package/packages/pageflow-system-pages/confirm/index.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Confirm from '../../Confirm';
+import Overlay from "../../Overlay";
+// import "./index.less";
+
+export default function confirm(props) {
+  const { service, data = {} } = props;
+  // const { title = "title", message, subMessage=[], okText = "okText", cancelText="" } = data;
+  // const { title = "title", message, subMessage=[], okText = "okText", cancelText="" } = data;
+  const onClickCallback = React.useCallback(
+    function (v) {
+      service.onNext(v);
+    },
+    [service]
+  );
+
+  return (
+    <Overlay verticalPosition="bottom">
+      {/* <Confirm
+        title={title}
+        message={message}
+        subMessage={subMessage}
+        okText={okText}
+        cancelText={cancelText}
+        onClick={onClickCallback}
+      >
+      </Confirm> */}
+      <Confirm {...data} onClick={onClickCallback}></Confirm>
+    </Overlay>
+  );
+}

package/packages/pageflow-system-pages/debug/index.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { createHashHistory } from "history";
+import "./index.less";
+// debug
+export default function Debug(props) {
+  const { appManager } = props;
+  const pages = Array.from(appManager.pageManager.keys()).reverse();
+  React.useEffect(function () {
+    const history = createHashHistory();
+    const unListen = history.listen(({ action, location }) => {
+      const pathname = location.pathname;
+      appManager.mockToPage(pathname, {});
+    });
+    return unListen;
+  }, []);
+  return (
+    <div className="local-debug-side">
+      <ul>
+        {pages.map((pathname) => (
+          <li key={pathname}>
+            <a href={`#${pathname}`}>{pathname}</a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/packages/pageflow-system-pages/debug/index.less

@@ -0,0 +1,5 @@
+.local-debug-side {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}

package/packages/pageflow-system-pages/index.jsx

@@ -0,0 +1,38 @@
+import Alert from "./alert";
+import Start from "./start";
+import Confirm from "./confirm";
+import Prompt from "./prompt";
+import Toast from "./toast";
+import NotFound from "./not-found";
+import Debug from "./debug";
+import Loading from "./loading";
+
+function PlaySound({ data, service, action }) {
+  const { sound } = data;
+  if(window.WindVane) {
+    var params = {
+      domain: 'audio',
+      method: 'playSound',
+      params: { sound, }
+    }
+    WindVane.call(
+      'WindvanePlugin',
+      'invoke',
+      JSON.stringify(params),
+    );
+  }
+  service.onNext({});
+  return null
+}
+
+export default {
+  Alert,
+  Start,
+  Toast,
+  Confirm,
+  NotFound,
+  Debug,
+  Prompt,
+  Loading,
+  PlaySound,
+};

package/packages/pageflow-system-pages/loading/index.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+// import "./index.less";
+
+export default function Loading(props) {
+  const [showLoading, setShowLoading] = React.useState(false);
+  const edgeService = props.edgeService;
+  React.useEffect(
+    function () {
+      let currentLoading = false;
+      const throttleSetShowLoading = function(loading){
+        currentLoading = loading;
+        if(loading){
+          setTimeout(function(){
+            if(currentLoading === loading){
+              setShowLoading(true)
+            }
+          }, 350)
+        }else{
+          setTimeout(function(){
+            if(currentLoading === loading){
+              setShowLoading(false)
+            }
+          }, 100)
+        }
+      }
+      edgeService.on("IO_STATUS", throttleSetShowLoading);
+      return function () {
+        edgeService.off("IO_STATUS", throttleSetShowLoading);
+      }
+    },
+    [edgeService]
+  );
+
+  return showLoading ? (
+    <div style={{position:"absolute",left:0,top:0, zIndex: 100}} >LOADING...</div>
+  ) : null;
+}

package/packages/pageflow-system-pages/not-found/index.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import "./index.less";
+export default function NotFound(props) {
+  return (
+    <div style={{ padding: "20%" }}>
+      <h1>
+        404 <small style={{ fontSize: "60%" }}>Not found</small>
+      </h1>
+      <div>{props.action.getPage()}</div>
+    </div>
+  );
+}

package/packages/pageflow-system-pages/not-found/index.less

@@ -0,0 +1,26 @@
+.mini-app-start-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  height: 100vh;
+  button {
+    padding: 0.3em 3em;
+    // height: 3em;
+    border-radius: 6px;
+    border: none;
+    font-size: 36px;
+    background-color: #00bdff;
+    color: #ffffff;
+    margin-top: 20px;
+
+    &:active {
+      transform: scale(0.95);
+    }
+  }
+
+  .desc {
+    opacity: 0.3;
+  }
+}

package/packages/pageflow-system-pages/prompt/doc.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import SystemPrompt from "./index";
+import service from '../../../mock/service';
+
+export default function () {
+  const [display, setDisplay] = React.useState(false);
+  return (
+    <div>
+      <h1>/system/prompt</h1>
+      <p>弹出输入框，用户输入内容然后提交，取消按钮输入返回 'back' 字符串</p>
+      <h2>示例</h2>
+      <code className="code">
+{
+  `
+    // gs 代码如下
+    pageFlow.prompt({
+      defaultValue:"111", //默认值
+      placeholder:"请输入..." //输入占位符
+      type:"text",//控制弹出键盘的类型，可选值 number|text|tel 参考：https://www.w3school.com.cn/tags/att_input_type.asp
+      okText:"确认", //确认按钮文案
+      cancelText:"取消" //取消文案 没有取消文案将不能取消输入
+    })
+  `
+}
+      </code>
+      <h2>页面效果</h2>
+      <div className="light-block">
+        <button onClick={()=> setDisplay(true)}>点击显示</button>
+        {
+          display ? <SystemPrompt 
+          service={service} 
+          data={{
+            defaultValue:"111", //默认值
+            placeholder:"请输入...", //输入占位符
+            type:"text",//控制弹出键盘的类型，可选值 number|text|tel 参考：https://www.w3school.com.cn/tags/att_input_type.asp
+            okText:"确认", //确认按钮文案
+            cancelText:"取消" //取消文案 没有取消文案将不能取消输入
+          }} 
+          onNext={(value)=> {console.log(value); setDisplay(false);}}
+        ></SystemPrompt> :  null
+        }
+        
+      </div>
+      <h2>/system/prompt</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>title</td>
+            <td>标题</td>
+            <td>string</td>
+            <td>请输入</td>
+          </tr>
+          <tr>
+            <td>defaultValue</td>
+            <td>默认值</td>
+            <td>string</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>placeholder</td>
+            <td>input 占位符</td>
+            <td>string</td>
+            <td>请输入...</td>
+          </tr>
+          <tr>
+            <td>type</td>
+            <td>定制键盘类型 参考：https://www.w3school.com.cn/tags/att_input_type.asp</td>
+            <td>string</td>
+            <td>text</td>
+          </tr>
+          <tr>
+            <td>okText</td>
+            <td>确认文案</td>
+            <td>string</td>
+            <td>确认</td>
+          </tr>
+          <tr>
+            <td>cancelText</td>
+            <td>取消文案，取消文案为空，不显示取消按钮</td>
+            <td>string</td>
+            <td>取消</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}