@cniot/android-pda-components 0.2.20 → 0.2.21

package/packages/WakeKeyborard/index.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useRef } from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+// import classNames from "classnames";
+import Button from '../Button'
+import Keyborard from "./keyborard";
+
+const blankFunc = () => { };
+export default function WakeKeyborard(props) {
+  const [inputVisible, setInputVisible] = useState(props.autoWakeup || false);
+  // const inputRef = useRef(null);
+
+  // const { label = "查询", onWakeKeyboard = blankFunc, onClick = blankFunc, onHidden = blankFunc } = props;
+  const { onClick = blankFunc, onHidden = blankFunc, ...keyborardProps } = props;
+
+  return (
+    <div className="wakekeyborard">
+      {
+        inputVisible ? (
+          <Keyborard
+            // label={label}
+            onClick={
+              (v, e) => {
+                onClick(v);
+                setInputVisible(!inputVisible);
+                // onHidden(true);
+              }
+            }
+            onHidden={
+              s => {
+                setInputVisible(false);
+                onHidden(s);
+              }
+            }
+            {...keyborardProps}
+          />
+        ) : null
+      }
+      {
+        !inputVisible ? (
+          <div
+            className="wakekeyborard-icon"
+            onClick={
+              e => {
+                // this.setState({ inputVisible: !inputVisible });
+                setInputVisible(!inputVisible);
+                // requestAnimationFrame(() => {
+                //   onWakeKeyboard();
+                // })
+              }
+            }
+          ></div>
+        ) : null
+      }
+
+    </div>
+  )
+}
+
+
+WakeKeyborard.Keyborard = Keyborard;

package/packages/WakeKeyborard/index.less

@@ -0,0 +1,55 @@
+.wakekeyborard {
+  .wakekeyborard-icon {
+    width: 80px;
+    height: 80px;
+    background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01kxYh3U25Xzr9nAcYp_!!6000000007537-2-tps-240-240.png);
+    background-size: 100%;
+
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+  }
+}
+
+.wakekeyborard-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(222, 222, 222, 0.2);
+}
+.wakekeyborard-inputbox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  height: 85px;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  input {
+    // width: 330px;
+    width:100%;
+    border-radius: 16px 0 0 0 ;
+    border: 0;
+    font-size: 42px;
+    background-color: white;
+    padding-left: 20px;
+    &:focus {
+      outline: none;
+    }
+    &::-webkit-input-placeholder {
+      color: rgb(209, 209, 214);
+      font-size: 32px;
+    }
+  }
+  button {
+    width: 150px;
+    border: 0;
+    border-radius: 0 16px 0 0;
+    background-color: white;
+  }
+}

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;
+  }
+}