@cniot/android-pda-components 0.2.30 → 0.2.32

package/packages/Confirm/index.less

@@ -1,55 +0,0 @@
-@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

@@ -1,155 +0,0 @@
-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'
-        ></Header>
-        <Header
-          icon='select'
-          title='hello world'
-          menus={[
-            {
-              label:"menus1"
-            },
-            {
-              label:"menus2"
-            },
-            {
-              label:"menus3"
-            }
-          ]}
-          onClickMenuItem={console.log}
-          cancelMenuText="取消"
-          menuShortcutKey="f1,f2,fn"
-        ></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>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/Header/index.jsx

@@ -1,184 +0,0 @@
-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,
-    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-more" onClick={() => setShowMenus(true)} />
-      ) : 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

@@ -1,68 +0,0 @@
-.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-menus {
-    background-color: white;
-    border-radius: 8px 8px 0 0;
-    width: 100%;
-    padding: 24px;
-    display: flex;
-    flex-direction: column;
-    &>* {
-      margin-bottom: 12px;
-    }
-  }
-}

package/packages/InfoCard/doc.jsx

@@ -1,244 +0,0 @@
-import React from "react";
-import InfoCard from "./index";
-export default function () {
-  return (
-    <div>
-      <h1>InfoCard</h1>
-      <p>InfoCard</p>
-      <h2>示例</h2>
-      {/* const { className, title, highlightInfo, highlightInfoCN, highlightSubInfo, highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props; */}
-      <div className="light-block" style={{width:480, display:"block"}} >
-          <InfoCard
-            title="待拣件数"
-            highlightInfo="800"
-            highlightInfoCN = "件"
-            highlightSubInfo="/800"
-            highlightSubInfoCN="件"
-            percentage={0.64}
-            boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
-            infoList={
-              [
-                {label: '商品条码', content: '623126388798'},
-                {label: '截止日期', content: '2022-07-25'},
-                {label: '产品名称', content: '商品的名称'},
-                {label: '品号', content: '12398765423'},
-              ]
-            }
-          />
-          <InfoCard
-            title="待拣件数"
-            highlightInfo="800"
-            highlightInfoCN = "件"
-            highlightSubInfo="/800"
-            highlightSubInfoCN="件"
-            percentage={0.64}
-            boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
-            theme='dark'
-            infoList={
-              [
-                {label: '商品条码', content: '623126388798'},
-                {label: '截止日期', content: '2022-07-25'},
-                {label: '产品名称', content: '商品的名称'},
-                {label: '品号', content: '12398765423'},
-              ]
-            }
-          />
-      </div>
-      <code className="code">{`
-<InfoCard
-  title="待拣件数"
-  highlightInfo="800"
-  highlightInfoCN = "件"
-  highlightSubInfo="/800"
-  highlightSubInfoCN="件"
-  percentage={0.64}
-  boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
-  infoList={
-    [
-      {label: '商品条码', content: '623126388798'},
-      {label: '截止日期', content: '2022-07-25'},
-      {label: '产品名称', content: '商品的名称'},
-      {label: '品号', content: '12398765423'},
-    ]
-  }
-/>`}
-</code>
-
-      <div className="light-block" style={{width:480, display:"block"}}>
-        <InfoCard
-          title="待拣件数"
-          highlightInfo="800"
-          highlightInfoCN = "件"
-          highlightSubInfo="/800"
-          highlightSubInfoCN="件"
-          tagText="少货2"
-          boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
-          theme='dark'
-          infoList={
-            [
-              {label: '商品条码', content: '623126388798'},
-              {label: '截止日期', content: '2022-07-25'},
-              {label: '产品名称', content: '商品的名称'},
-              {label: '品号', content: '12398765423'},
-            ]
-          }
-        />
-      </div>
-      <code className="code">{`
-<InfoCard
-title="待拣件数"
-highlightInfo="800"
-highlightInfoCN = "件"
-highlightSubInfo="/800"
-highlightSubInfoCN="件"
-tagText="少货2"
-boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
-theme='dark'
-infoList={
-  [
-    {label: '商品条码', content: '623126388798'},
-    {label: '截止日期', content: '2022-07-25'},
-    {label: '产品名称', content: '商品的名称'},
-    {label: '品号', content: '12398765423'},
-  ]
-}
-/>`}
-</code>
-      <div className="light-block" style={{width:480, display:"block"}}>
-        <InfoCard
-          title="漏扫箱数/识别总箱数"
-          highlightInfo="0"
-          highlightSubInfo="/40"
-          infoImage={InfoCard.IMAGE_1}
-        />
-      </div>
-      <code className="code">{`
-<InfoCard
-title="漏扫箱数/识别总箱数"
-highlightInfo="0"
-highlightSubInfo="/40"
-infoImage={InfoCard.IMAGE_1}
-/>`}
-</code>
-      <div className="light-block" style={{width:480, display:"block"}}>
-        <InfoCard
-          title="识别箱数(CS)"
-          highlightInfo="0"
-          highlightSubInfo="/50"
-          subTitle="识别个数(EA)"
-          subHighlightInfo="40"
-          subHighlightSubInfo="/50"
-          infoImage={InfoCard.IMAGE_1}
-        />
-      </div>
-      <code className="code">{`
-<InfoCard
-  title="识别箱数(CS)"
-  highlightInfo="0"
-  highlightSubInfo="/50"
-  subTitle="识别个数(EA)"
-  subHighlightInfo="40"
-  subHighlightSubInfo="/50"
-  infoImage={InfoCard.IMAGE_1}
-/>`}
-</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>title</td>
-            <td>标题</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>highlightInfo</td>
-            <td>高亮文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>highlightInfoCN</td>
-            <td>高亮文本(中文)</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>highlightSubInfo</td>
-            <td>高亮副文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>highlightSubInfoCN</td>
-            <td>高亮副文本(中文)</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>subTitle</td>
-            <td>副标题</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>subHighlightInfo</td>
-            <td>副高亮文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>subHighlightSubInfo</td>
-            <td>副高亮副文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>boldInfo</td>
-            <td>加粗文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>theme</td>
-            <td>主题</td>
-            <td>string: light | dark</td>
-            <td>light</td>
-          </tr>
-          <tr>
-            <td>infoList</td>
-            <td>更多信息</td>
-            <td>object[]</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>percentage</td>
-            <td>进度条百分比，传值时显示进度条</td>
-            <td>number</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>tagText</td>
-            <td> 右上角 tag 文本，传值时显示 tag</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>infoImage</td>
-            <td>左侧图片地址</td>
-            <td>string</td>
-            <td>可以使用 InfoCard.IMAGE_1 1张内置图片</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}