@cniot/android-pda-components 0.2.20 → 0.2.21

package/packages/BaseLayout/index.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer';
+import RfidOnce from './RfidOnce';
+import RfidScan from './RfidScan';
+import BarcodeScan from './BarcodeScan';
+import classNames from "classnames";
+
+const blankFunc = () => { };
+
+export default class BaseLayout extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const props = this.props;
+        // onScanBarcode 一直监听
+        // onBarcodeScan 按下某些建才监听
+        const {onBarcodeScan, onScanBarcode,  onRfidOnce, onRfidBoxOnce, onRfidPalletOnce,   onRfidScan, onRfidBoxScan, onRfidPalletScan } = props;
+
+        if(onRfidOnce || onRfidBoxOnce || onRfidPalletOnce) {
+            return (
+                <RfidOnce
+                    // onRfidOnce={onRfidOnce}
+                    {...props}
+                />
+            )
+        }
+        if(onRfidScan || onRfidBoxScan || onRfidPalletScan) {
+            return (
+                <RfidScan
+                    // onRfidScan={onRfidScan}
+                    {...props}
+                />
+            )
+        }
+        if(onBarcodeScan || onScanBarcode) {
+            return (
+                <BarcodeScan
+                    // onBarcodeScan= {onBarcodeScan}
+                    {...props}
+                />
+            )
+        }
+
+        return (
+            <BaseLayoutContainer
+                {...props}
+             />
+        )
+    }
+}

package/packages/BaseLayout/index.less

@@ -0,0 +1,47 @@
+.baselayout-wrapper {
+    height: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: black;
+
+    .baselayout-header {
+        // height: 84px;
+    }
+    .baselayout-container {
+        // height: calc(100% - 84px);
+        padding: 0 24px;
+        overflow-x: auto;
+        flex: 1;
+
+        &>* {
+            margin-top: 16px;
+        }
+        padding-bottom: 16px;
+    }
+    .baselayout-footer {
+        padding: 16px 0;
+    }
+    // .baselayout-paddingbottom {
+    //     height: 24px;
+    // }
+
+    .loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      color: white;
+      background-color: rgba(0,0,0,0.4);
+      background-image: url(https://img.alicdn.com/imgextra/i2/O1CN01PRSptR1YO1wOlBHCr_!!6000000003048-1-tps-240-240.gif);
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 120px 120px;
+    }
+}

package/packages/Button/doc.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import Button from "./index";
+
+export default function () {
+  return (
+    <div>
+      <h1>Button</h1>
+      <p>扫码组件</p>
+      <h2>示例</h2>
+      {/* const { type="default", width, style = {}, onClick } = this.props; */}
+      <div className="light-block">
+        <Button dataClick='arms track'>按钮</Button>
+        <Button type='primary' onClick={e => console.log(e) } dataClick=''>确认</Button>
+        <Button type='dark'>深色</Button>
+        <Button.Group>
+          <Button type="cutout">镂空</Button>
+          <Button>按钮</Button>
+        </Button.Group>
+      </div>
+      <code className="code">{`
+        <Button dataClick='arms track'>按钮</Button>
+        <Button  type='primary' onClick={e => console.log(e) }>确认</Button>
+        <Button  type='dark'>深色</Button>
+        <Button.Group>
+          <Button type="cutout">镂空</Button>
+          <Button>按钮</Button>
+        </Button.Group>
+      `}</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>type</td>
+            <td>类型</td>
+            <td>string: primary | dark | cutout</td>
+            <td>default</td>
+          </tr>
+          <tr>
+            <td>onClick</td>
+            <td>点击事件</td>
+            <td>function</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>dataClick</td>
+            <td>arms 监控使用</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/Button/index.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+
+
+export default function Button(props){
+  const { type="default", onClick, className="", tabIndex=1, dataClick=''} = props;
+  let opt = {};
+  if(dataClick) {
+    opt['data-click'] = dataClick;
+  }
+  return (
+    <button className={`pda-button pda-button-${type} ${className}`} onClick={onClick} tabIndex={tabIndex} {...opt}>
+      {props.children}
+    </button>
+  )
+}
+
+export function ButtonGroup(props){
+  return (
+    <div className="button-group" >
+      {props.children}
+    </div>
+  )
+}
+
+Button.Group = ButtonGroup;

package/packages/Button/index.less

@@ -0,0 +1,62 @@
+.pda-button {
+    display: block;
+    box-sizing: border-box;
+    padding-right: 0;
+    text-align: center;
+    font-size: 40px;
+    height: 90px;
+    line-height: 40px;
+    // color: #000;
+    color: #fff;
+    background-color: #F3F4F8;
+    border-radius: 10px;
+    width: 100%;
+    border-width: 0;
+    word-break: keep-all;
+
+    &.pda-button-default {
+        color: #000;
+    }
+    &:active {
+        background-color: #979797;
+    }
+
+    &.pda-button-primary {
+        background-color: #0091EA;
+        // color: #fff;
+        &:active {
+            background-color: #0074BB;
+        }
+    }
+
+    &.pda-button-dark {
+        background-color: #282828;
+        // color: #fff;
+        &:active {
+            background-color: #979797;
+        }
+    }
+
+    &.pda-button-cutout {
+        // background-color: #282828;
+        // color: #fff;
+        color: #0091EA;
+        border-width: 4px;
+        border-color: #0091EA;
+        // &:active {
+        //     background-color: #979797;
+        // }
+    }
+}
+
+.button-group {
+    display: flex;
+    flex-direction: row;
+    padding: 20px 24px;
+    width: 100%;
+    .pda-button {
+        &:not(:last-child){
+            margin-right: 16px;
+        }
+    }
+}

package/packages/Confirm/doc.jsx

@@ -0,0 +1,147 @@
+import React from "react";
+import Confirm from "./index";
+export default function () {
+  return (
+    <div>
+      <h1>Confirm</h1>
+      <p>确认组件, 如果要悬浮在页面上，请配合 Overlay 使用</p>
+      <h2>示例</h2>
+      <div className="light-block">
+        <Confirm
+          title="111111"
+          message="22222"
+          okText="确认"
+          cancelText="取消"
+          okDataClick='clickOk'
+          // type="warning"
+          subMessage={
+            [{ label: '箱码', content: 'abcdefghijklmnopqrstuvwxyz' }]
+          }
+          onClick={(isConfirm) => {
+            console.log("isConfirm", isConfirm);
+          }}
+        ></Confirm>
+        <br />
+        <Confirm
+          title="111111"
+          message="22222"
+          okText="确认"
+          cancelText="取消"
+          type="warning"
+          subMessage={
+            [{ label: '箱码', content: 'abcdefghijklmnopqrstuvwxyz' }]
+          }
+          onClick={(isConfirm) => {
+            console.log("isConfirm", isConfirm);
+          }}
+          insertButtons={
+            [
+              { label: '查看详情111', value: 'hello', dataClick: '查看详情1234' }
+            ]
+          }
+          appendButtons={
+            [
+              { label: '查看详情', value: { name: 'id111' } }
+            ]
+          }
+        ></Confirm>
+      </div>
+      <code className="code">{`
+        <Confirm
+          // type="warning"
+          title="111111"
+          message="22222"
+          okText="确认"
+          cancelText="取消"
+          onClick={(isConfirm)=>{
+            console.log("isConfirm", isConfirm);
+          }}
+        ></Confirm>
+      `}</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>message</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>onClick</td>
+            <td>按钮点击回调</td>
+            <td>(isConfirm)=></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>type</td>
+            <td>类型</td>
+            <td>string: primary | warning</td>
+            <td>primary</td>
+          </tr>
+          <tr>
+            <td>subMessage</td>
+            <td>描述</td>
+            <td>{JSON.stringify([{ label: '箱码' }, { content: 'abcdefghijklmnopqrstuvwxyz' }])}</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/Confirm/index.jsx

@@ -0,0 +1,71 @@
+import React from "react";
+import classNames from "classnames";
+import Button from "../Button";
+import './index.less';
+
+function empty(){}
+
+export default function Confirm(props){
+  const { title = "title", message = null, subMessage = [], okText="okText", cancelText=null, okDataClick=null, cancelDataClick=null, onClick = empty, type="primary", insertButtons = [], appendButtons = []} = props;
+
+  const innerHTML = {__html: message};
+
+  return <div className={classNames({"confirm-wrap": true, ["confirm-"+type]: true})}>
+    <div className="confirm-content">
+      <div className="confirm-title">{title}</div>
+      {
+        message ? <div className="confirm-message">{message}</div> : null
+      }
+      {
+        subMessage.length ? (
+          <div className="confirm-sub-message">
+            {
+              subMessage.map((item, index) => {
+                const { label, content } = item;
+                return (
+                  <div className="confirm-sub-block" key={label ? label : index}>
+                    <p className="confirm-sub-label">
+                      {/* <span>{item.label || ''}</span>:&nbsp; */}
+                      {label ? label + ' : ' : ''}
+                    </p>
+                    <p className="confirm-sub-content">
+                      {content || ''}
+                    </p>
+                  </div>
+                  // <p key={index} className="pda-listitem-subinfo">
+                  //   <span>{item.label || ''}</span>:&nbsp;<span></span>
+                  // </p>
+                )
+              })
+            }
+          </div>
+        ) : null
+      }
+    </div>
+
+    <div className="confirm-btns">
+      {
+        insertButtons.length > 0 ? (
+          <Button.Group>
+            {
+              insertButtons.map((item, index) => <Button key={index} onClick={()=> onClick(item.value)} dataClick={item.dataClick}>{item.label}</Button> )
+            }
+          </Button.Group>
+        ) : null
+      }
+      <Button.Group>
+        {cancelText ? <Button className="confirm-cancel-button" onClick={()=> onClick(false)} dataClick={cancelDataClick}>{cancelText}</Button> : null}
+        <Button type="primary" onClick={()=> onClick(true)} dataClick={okDataClick}>{okText}</Button>
+      </Button.Group>
+      {
+        appendButtons.length > 0 ? (
+          <Button.Group>
+            {
+              appendButtons.map((item, index) => <Button key={index} onClick={()=> onClick(item.value)} dataClick={item.dataClick}>{item.label}</Button> )
+            }
+          </Button.Group>
+        ) : null
+      }
+    </div>
+  </div>
+}

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