@cniot/android-pda-components 0.2.17 → 0.2.21

package/packages/Confirm/index.less

@@ -0,0 +1,55 @@
+@import '../variable.less';
+
+.confirm-wrap{
+  background:#ffffff;
+  border-radius:6px 6px 0 0;
+  // padding:24px 20px;
+  padding-top: 24px;
+  width:100%;
+  .confirm-content {
+    padding: 0 24px;
+  }
+  .confirm-title{
+    font-size:24 * @change2rem;
+    font-weight:700;
+  }
+
+  .confirm-message{
+    font-size:22 * @change2rem;
+    margin-bottom:10 * @change2rem;
+  }
+  .confirm-sub-message {
+    font-size:22 * @change2rem;
+    margin-bottom:10 * @change2rem;
+    // word-wrap: break-word;
+    // word-break: break-all;
+  }
+  .confirm-sub-block {
+    display: flex;
+    flex-direction: row;
+    .confirm-sub-label {
+      white-space: nowrap;
+    }
+    .confirm-sub-content {
+      margin-left: 12px;
+      word-wrap:break-word;
+      word-break: break-all;
+    }
+  }
+
+  .confirm-btns{
+    &>*:not(:first-child) {
+      padding-top: 0;
+    }
+  }
+
+  &.confirm-warning {
+    background-color: red;
+    .pda-button {
+      background-color: transparent;
+      color: black;
+      border: 2px solid black;
+      border-radius: 40px;
+    }
+  }
+}

package/packages/Header/doc.jsx

@@ -0,0 +1,171 @@
+import React from "react";
+import Header from "./index";
+export default function () {
+  return (
+    <div>
+      <h1>Header</h1>
+      <p>头部指引， 在 iData PDA 中 fn 的键值为 0，已做特殊处理，可以直接写fn。</p>
+      <br/>
+      <div>
+        注意：通过以下代码禁用实体 back 键的默认动作后，Header 组件的 onBack 可以响应实体back键
+        <code className="code">
+          {
+            `
+WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'disableBackKey', 'params': {}}", function(e) {
+  console.log('disable back key succeed');
+}, function(e) {
+  console.log('disable back key failed');
+});
+            `
+          }
+        </code>
+      </div>
+      <h2>示例</h2>
+      <div className="dark-block">
+      {/* const { className, goBack = true, icon="scan", title="任务", more=false } = this.props; */}
+        <Header
+          title='hello world'
+          onBack={console.log}
+          backShortcutKey="a"
+        />
+        <Header
+          icon='read'
+          title='hello world'
+          configIconClick = {
+            e => {
+              console.log('config icon click');
+            }
+          }
+        ></Header>
+        <Header
+          icon='select'
+          title='hello world'
+          menus={[
+            {
+              label:"menus1"
+            },
+            {
+              label:"menus2"
+            },
+            {
+              label:"menus3"
+            }
+          ]}
+          onClickMenuItem={console.log}
+          cancelMenuText="取消"
+          menuShortcutKey="f1,f2,fn"
+          configIconClick = {
+            e => {
+              console.log('config icon click');
+            }
+          }
+        ></Header>
+      </div>
+      <code className="code">{`
+        // backShortcutKey 绑定了 a 键快捷触发 onBack
+        <Header
+          title='hello world'
+          onBack={console.log}
+          backShortcutKey="a"
+        />
+        <Header
+          icon='read'
+          title='hello world'
+        ></Header>
+        <Header
+          icon='select'
+          title='hello world'
+          menus={[
+            {
+              label:"menus1"
+            },
+            {
+              label:"menus2"
+            },
+            {
+              label:"menus3"
+            }
+          ]}
+          onClickMenuItem={console.log}
+          cancelMenuText="取消"
+          menuShortcutKey="f1,f2,fn"
+        ></Header>
+      `}</code>
+      <h2>参数</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>onBack</td>
+            <td>返回按钮点击</td>
+            <td>Function("back")</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>onClickMenuItem</td>
+            <td>menu item 点击</td>
+            <td>function(item)</td>
+            <td></td>
+          </tr>
+
+          <tr>
+            <td>icon</td>
+            <td>title 图标</td>
+            <td>string: scan | select | read</td>
+            <td>scan</td>
+          </tr>
+          <tr>
+            <td>title</td>
+            <td>标题</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>onScanBarcode</td>
+            <td>{`(barcode)=> `}</td>
+            <td>Function</td>
+            <td>-</td>
+          </tr>
+          
+          <tr>
+            <td>menus</td>
+            <td>弹出菜单列表，menus item 的所有参数会直接给 Button</td>
+            <td>Array-Object</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>cancelMenuText</td>
+            <td>取消弹出菜单的按钮文案，没有的话不显示取消弹出菜单</td>
+            <td>String</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>menuShortcutKey</td>
+            <td>自己定义绑定 menu 菜单的快捷键弹出，比如 `f1`, `f1,f2` (支持,号分割绑定多个键)</td>
+            <td>String</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>backShortcutKey</td>
+            <td>返回，绑定快捷键, 必须声明过 onBack 参数才有效</td>
+            <td>String</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>configIconClick</td>
+            <td>增加 Config 按钮</td>
+            <td>function</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/Header/index.jsx

@@ -0,0 +1,191 @@
+import React from "react";
+import keycode from "keycode";
+import Button from "../Button";
+import Overlay from "../Overlay";
+import "./index.less";
+
+
+// 在 android pda 里，fn 被触发为 0， 这里做特殊处理
+const SPECIAL_KEY_MAP = ['fn'];
+
+const empty = () => {};
+/*
+  title,
+  onBack,
+  icon: ["scan"],
+  menus: [
+    {
+      label:"",
+      value:""
+    }
+  ],
+  onClickMenuItem: Empty
+*/
+export default function (props) {
+  const {
+    onBack,
+    icon,
+    title,
+    menus = [],
+    onClickMenuItem = empty,
+    onScanBarcode,
+    cancelMenuText,
+    configIconClick = null,
+    menuShortcutKey,
+    backShortcutKey,
+  } = props;
+  const [showMenus, setShowMenus] = React.useState(false);
+
+  // menu弹出快捷键绑定
+  React.useEffect(
+    function () {
+      if (menuShortcutKey) {
+        return bindShortcutKey(
+          getShortcutKeyCodes(menuShortcutKey),
+          function () {
+            setShowMenus(true);
+          }
+        );
+      }
+    },
+    [menuShortcutKey]
+  );
+
+  // back 快捷键绑定
+  React.useEffect(
+    function () {
+      if (backShortcutKey && onBack) {
+        return bindShortcutKey(
+          getShortcutKeyCodes(backShortcutKey),
+          function () {
+            onBack("back");
+          }
+        );
+      }
+    },
+    [backShortcutKey, onBack]
+  );
+
+  //监听实体back键
+  React.useEffect(() => {
+    return onKeyBoradBack(function(){
+      onBack && onBack("back");
+    })
+  }, []);
+
+  // onScanBarcode
+  React.useEffect(() => {
+    return addEventListener(document, "BarcodeScan", function(e){
+      onScanBarcode && onScanBarcode(e.param.scanData)
+    })
+  }, [onScanBarcode])
+
+
+  return (
+    <div className="pda-header">
+      <div className="header-click-area">
+        {onBack ? (
+          <div className="pda-goback" onClick={() => onBack("back")}></div>
+        ) : null}
+        {icon && (
+          <div className={`pda-header-icon pda-header-icon-${icon}`}></div>
+        )}
+      </div>
+      <div className="pda-title-text">{title}</div>
+      {menus && menus.length ? (
+        <div className="pda-header-icon pda-header-more" onClick={() => setShowMenus(true)} />
+      ) : null}
+      {
+        configIconClick ? (
+          <div className="pda-header-icon pda-header-config" onClick={configIconClick} />
+        ) : null
+      }
+
+      <Overlay
+        visible={showMenus}
+        verticalPosition="bottom"
+        closable={false}
+        onClosed={() => setShowMenus(false)}
+      >
+        <div className="pda-menus">
+          {menus.map((item, index) => {
+            return (
+              <Button
+                onClick={() => {
+                  setShowMenus(false);
+                  onClickMenuItem(item);
+                }}
+                key={item.key || index}
+              >
+                {item.label}
+              </Button>
+            );
+          })}
+          {cancelMenuText ? (
+            <div style={{ marginTop: 20 }}>
+              <Button onClick={() => setShowMenus(false)}>
+                {cancelMenuText}
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      </Overlay>
+    </div>
+  );
+}
+
+// 获取快捷键列表值，支持 , 号分割
+// "F5,a" ===> [116, 56]
+function getShortcutKeyCodes(shortcutKey) {
+  const shortcutKeys = shortcutKey.indexOf(",") > -1 ? shortcutKey.split(",") : [shortcutKey];
+  return shortcutKeys
+    .map((k) => {
+      if(SPECIAL_KEY_MAP.indexOf(k.toLowerCase()) > -1){
+        return k.toLowerCase();
+      }
+      const kc = keycode(k);
+      if (kc === undefined) {
+        console.warn("OPButton.shortcutKey error key value by:", k);
+      }
+      return kc;
+    })
+    .filter((k) => k !== undefined);
+}
+
+// 创建快捷键绑定
+function bindShortcutKey(keys, callback) {
+  function keyUpCallback(event) {
+    // 处理特殊键
+    const key = event.key.toLowerCase();
+    const keyCode = SPECIAL_KEY_MAP.indexOf(key) > -1 ? key : event.keyCode;
+    if (keys.indexOf(keyCode) > -1) {
+      callback && callback(event);
+    }
+  }
+  document.addEventListener("keyup", keyUpCallback);
+  return function () {
+    document.removeEventListener("keyup", keyUpCallback);
+  };
+}
+
+
+function onKeyBoradBack(fn){
+  function keyPressed(data){
+    if ('back' == data.param.originValue) {
+      fn && fn()
+    }
+  }
+  document.addEventListener('keyPressed', keyPressed, false);
+  return function(){
+    document.removeEventListener('keyPressed', keyPressed);
+  }
+}
+
+
+// -addEventListener
+function addEventListener(node, eventName, fn){
+  node.addEventListener(eventName, fn, false);
+  return function(){
+    node.removeEventListener(eventName, fn);
+  }
+}

package/packages/Header/index.less

@@ -0,0 +1,71 @@
+.pda-header {
+  background-color:#000000;
+  display: flex;
+  flex-direction: row;
+  // justify-content: center;
+  align-items: center;
+  color: white;
+  height: 84px;
+  .header-click-area {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+  }
+  .pda-goback {
+    background-image: url(https://img.alicdn.com/imgextra/i4/O1CN01O46CYm1Gc4yvZtk7A_!!6000000000642-2-tps-36-64.png);
+    width: 18px;
+    height: 32px;
+    background-size: 100%;
+    margin-left: 28px;
+    margin-right: 8px;
+  }
+  .pda-header-icon {
+    height: 36px;
+    width: 36px;
+    margin-left: 16px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .pda-header-icon-scan {
+    background-image: url(https://img.alicdn.com/imgextra/i4/O1CN017UD9RM1vCKxsjxsrE_!!6000000006136-2-tps-68-68.png);
+  }
+  .pda-header-icon-select {
+    background-image: url(https://img.alicdn.com/imgextra/i2/O1CN0170QXc91udWriUp19S_!!6000000006060-2-tps-74-72.png);
+  }
+  .pda-header-icon-read {
+    background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01EMphgH1ylYGXImCZn_!!6000000006619-2-tps-70-70.png);
+  }
+  .pda-title-text {
+    margin-left: 16px;
+    font-size: 40px;
+    flex:1;
+  }
+
+  .pda-header-more {
+    // height: 36px;
+    // width: 36px;
+    // margin-left: 16px;
+    background-image: url(https://img.alicdn.com/imgextra/i4/O1CN01dTdXds1p9gz4wKAve_!!6000000005318-2-tps-70-26.png);
+    // background-size: 100%;
+    // background-repeat: no-repeat;
+    // background-position: center;
+    // margin-right:15px;
+  }
+  .pda-header-config {
+    background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01SKQH1k1p7rQYTBXdn_!!6000000005314-2-tps-56-60.png);
+  }
+
+  .pda-menus {
+    background-color: white;
+    border-radius: 8px 8px 0 0;
+    width: 100%;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    &>* {
+      margin-bottom: 12px;
+    }
+  }
+}