@cniot/android-pda-components 0.2.20 → 0.2.21

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

package/packages/InfoCard/doc.jsx

@@ -0,0 +1,244 @@
+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>
+  );
+}

package/packages/InfoCard/index.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+import classNames from "classnames";
+
+export default class PdaInfoCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { className = '', title, highlightInfo, subTitle, subHighlightInfo, subHighlightSubInfo, infoImage, tagText, highlightInfoCN, highlightSubInfo, percentage,  highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props;
+    return (
+      <div className={classNames({[className]: true, 'pda-info-card': true, 'pda-info-card-dark': theme === 'dark'})} style={style}>
+        <div className="pda-info-card-title-section">
+          <div className="pda-info-card-title">{title}</div>
+          {
+            tagText ? <div className="pda-info-card-tag">
+              <div className="pda-info-card-tag-text">{tagText}</div>
+             </div> : null
+          }
+        </div>
+        <div className="pda-info-card-highlight-section">
+          <div>
+            <div className="pda-info-card-highlight">
+              <span className="pda-info-card-highlight1">{highlightInfo}</span>
+              <span className="pda-info-card-highlight1CN">{highlightInfoCN}</span>
+              <span className="pda-info-card-highlight2">{highlightSubInfo}</span>
+              <span className="pda-info-card-highlight2CN">{highlightSubInfoCN}</span>
+            </div>
+            {
+              subTitle ?  <div className="pda-info-card-title">{subTitle}</div> : null
+            }
+            {
+              subHighlightInfo ? <div className="pda-info-card-highlight">
+                <span className="pda-info-card-highlight1">{subHighlightInfo}</span>
+                <span className="pda-info-card-highlight2">{subHighlightSubInfo}</span>
+              </div> : null
+            }
+          </div>
+          {
+            infoImage ? <img src={infoImage} width={150} height={150} /> : null
+          }
+        </div>
+        {
+          percentage !== undefined ? <div className="pda-info-card-progress">
+            <div className="pda-info-card-progress-inside" style={{width: `${percentage * 100}%`}}/>
+          </div> : null
+        }
+        <div className="pda-info-card-bold">{boldInfo}</div>
+        {
+          infoList.map((item, index) => {
+            return (
+              <div key={index} className="pda-info-card-list">
+                <span>{item.label || ''}</span>
+                &nbsp;&nbsp;
+                <span>{item.content || ''}</span>
+              </div>
+            )
+          })
+        }
+      </div>
+    )
+  }
+}
+
+PdaInfoCard.IMAGE_1 = "https://img.alicdn.com/imgextra/i2/O1CN01qYuxip1ME9zhdL9XG_!!6000000001402-2-tps-150-150.png";

package/packages/InfoCard/index.less

@@ -0,0 +1,111 @@
+.pda-info-card {
+    border-radius: 16px;
+    padding: 16px;
+    background-color: white;
+    word-break: break-word;
+    .divda-info-card-title{
+        font-size: 32px;
+        line-height: 32px;
+    }
+    .pda-info-card-title-section {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        .pda-info-card-title {
+            font-size: 32px;
+            color: #666666;
+            // margin: 0;
+            // margin-bottom: 16px;
+        }
+        .pda-info-card-tag {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 36px;
+            padding: 0 8px;
+            background-color: #FFCC00;
+            border-radius: 8px;
+        }
+    }
+ 
+    .pda-info-card-highlight-section{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        .pda-info-card-title {
+            font-size: 32px;
+            color: #666666;
+            margin-top: 20px;
+        }
+        .pda-info-card-highlight {
+            font-size: 80px;
+            line-height: 64px;
+            color: #0091EA;
+            font-weight: bold;
+            // margin: 0;
+            // vertical-align: text-bottom;
+            
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+
+            .pda-info-card-highlight1CN {
+                font-size: 64px;
+            }
+            .pda-info-card-highlight2 {
+                font-size: 50px;
+                line-height: 40px;
+            }
+            .pda-info-card-highlight2CN {
+                font-size: 40px;
+                line-height: 40px;
+            }
+        }    
+    }
+    .pda-info-card-bold {
+        font-weight: bold;
+        font-size: 40px;
+        line-height: 48px;
+        // margin: 0;
+        color: black;
+        margin-top: 16px;
+    }
+    .pda-info-card-list {
+        margin-top: 12px;
+        color: #4A4A4A;
+        font-size: 32px;
+        line-height: 32px;
+        word-break: break-all;
+    }
+}
+.pda-info-card-progress {
+    background-color: #F3F4F8;
+    height: 12px;
+    border-radius: 6px;
+    margin-top: 16px;
+    .pda-info-card-progress-inside {
+        background-color: #0091EA;
+        height: 12px;
+        border-radius: 6px;
+    }
+}
+
+
+.pda-info-card.pda-info-card-dark {
+    background-color: black;
+    .pda-info-card-title {
+        color: #999999;
+    }
+
+    .pda-info-card-highlight {
+        color: #FFFFFF;
+    }
+    .pda-info-card-bold {
+        color: #FFFFFF;
+    }
+    .pda-info-card-list {
+        color: #999999;
+    }
+}