@cniot/android-pda-components 0.2.17 → 0.2.21

package/packages/AppList/index.less

@@ -0,0 +1,52 @@
+.pda-app-list{
+  // width:480px;
+  // background:#000000;
+  .pda-app-group{
+    margin:25px;
+
+    .group-name{
+      font-size:32px;
+      line-height:1em;
+      margin:0;
+      font-size: 32px;
+      color: #FFFFFF;
+      font-weight:400;
+      opacity:0.6;
+    }
+
+    .group-apps{
+      display:flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-top:25px;
+      .app-item{
+        display:flex;
+        flex-direction:column;
+        justify-content:center;
+        align-items:center;
+        background-image: linear-gradient(138deg, #0091EA 0%, #095FFF 100%);
+        border-radius: 12px;
+        font-size: 32px;
+        color: #FFFFFF;
+        min-height:126px;
+        flex:1;
+        min-width:48%;
+        max-width:48%;
+        margin-bottom:25px;
+        cursor: pointer;
+
+        &:hover,&:active,&:focus{
+          background-image: linear-gradient(45deg, #0091EA 0%, #095FFF 100%);
+          box-shadow: 0 0 1px 2px #fff;
+        }
+
+        .app-name{
+          text-align: center;
+        }
+        .app-subname{
+          font-size:50%;
+        }
+      }
+    }
+  }
+}

package/packages/BaseLayout/BarcodeScan.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer'
+import classNames from "classnames";
+import { playSound } from "../utils";
+
+const blankFunc = () => { };
+
+// onBarcodeScan 按下键才开始监听
+// onScanBarcode 一直监听
+export default class BarcodeScan extends React.Component {
+    constructor(props) {
+        super(props);
+        this._barcodeBeginScan = false;
+        this._handleBarcodeScan = e => {
+            const { onBarcodeScan } = this.props;
+            this._stopWork();
+            playSound('scan');
+            onBarcodeScan && onBarcodeScan(e.param);
+        }
+        this._startWork = e => {
+            document.addEventListener('BarcodeScan', this._handleBarcodeScan);
+            this._barcodeBeginScan = true;
+        }
+        this._stopWork = e => {
+            document.removeEventListener('BarcodeScan', this._handleBarcodeScan);
+        }
+        this._handleKeyDown = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            // console.log('keydown code: ', code, keyCode, key);
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                if (!this._barcodeBeginScan) {
+                    this._startWork();
+                }
+            }
+        }
+        this._handleKeyUp = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                this._stopWork();
+                this._barcodeBeginScan = false;
+            }
+        }
+
+        this.onScanBarcode = this.onScanBarcode.bind(this);
+    }
+
+    onScanBarcode(e){
+        this.props.onScanBarcode && this.props.onScanBarcode(e.param);
+    }
+
+    componentDidMount() {
+        const {onBarcodeScan} = this.props;
+        if(onBarcodeScan){
+            document.addEventListener('keydown', this._handleKeyDown);
+            document.addEventListener('keyup', this._handleKeyUp);
+        }
+        document.addEventListener('BarcodeScan', this.onScanBarcode);
+        WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'changeScanMode', 'params': {'scanMode': 'barcode'}}", function (e) {
+            // alert('success ' + JSON.stringify(e));
+        }, function (e) {
+            // alert('failure ' + JSON.stringify(e));
+        });
+    }
+    componentWillUnmount() {
+        const {onBarcodeScan} = this.props;
+        if(onBarcodeScan){
+            document.removeEventListener('keydown', this._handleKeyDown);
+            document.removeEventListener('keyup', this._handleKeyUp);
+        }
+        document.removeEventListener('BarcodeScan', this.onScanBarcode)
+    }
+
+
+    render() {
+        // console.log('onBarcode render');
+
+        const props = this.props;
+        const { onBarcodeScan = blankFunc, ...opts } = props;
+
+        return (
+            <BaseLayoutContainer
+                {...opts}
+            />
+        )
+    }
+}
+
+

package/packages/BaseLayout/BaseLayoutContainer.jsx

@@ -0,0 +1,208 @@
+import React from "react";
+import "./index.less";
+import classNames from "classnames";
+import { WindVaneLog } from '../utils';
+
+const blankFunc = () => { };
+
+export default class BaseLayoutContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showLoading: false,
+    }
+    this._handleKeyUp = e => {
+      const { onScan = blankFunc, onEnter = blankFunc, onEsc = blankFunc, onDelete = blankFunc, scanMode = null } = this.props;
+
+      const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+      if (code === 'Enter') {
+        e.preventDefault();
+        onEnter(e);
+        return;
+      }
+      if (code === 'Delete') {
+        e.preventDefault();
+        onDelete(e);
+        return;
+      }
+      if (code === 'Esc') {
+        e.preventDefault();
+        onEsc(e);
+        return;
+      }
+    }
+    this._handleBeforeUnload = e => {
+      e.returnValue = ("确定离开当前页面吗？");
+      return true;
+    }
+    this._handleUnload = e => {
+      WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopRfidScan', 'params':null}", function (e) {
+        // alert('success ' + JSON.stringify(e));
+      }, function (e) {
+        // alert('failure ' + JSON.stringify(e));
+      });
+      const stopParam = {
+        tag: 'stopRfid',
+        level: 'd',
+        message: 'stop rfid scan!!!'
+      };
+      WindVaneLog(stopParam);
+
+      const leaveParam = {
+        tag: 'leavePage',
+        level: 'd',
+        message: 'leave page: ' + window.location.href,
+      }
+      WindVaneLog(stopParam);
+    }
+  }
+  componentDidMount() {
+    // console.log('这里增加监听');
+    // window.onbeforeunload = this._handleBeforeUnload;
+    window.onunload = this._handleUnload;
+    document.addEventListener('keyup', this._handleKeyUp);
+  }
+  componentWillUnmount() {
+    // console.log('这里关闭页面了');
+    window.onbeforeunload = null;
+    window.onunload = null;
+    document.removeEventListener('keyup', this._handleKeyUp)
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    if(nextProps.loading && !this.props.loading) {
+      this.setState({
+        showLoading: true,
+      })
+      if(nextProps.loadingTimeout) {
+        setTimeout(() => {
+          this.setState({
+            showLoading: false,
+          });
+        }, nextProps.loadingTimeout);
+      }
+    }
+    if(!nextProps.loading && this.state.showLoading) {
+      this.setState({
+        showLoading: false,
+      })
+    }
+    return true;
+  }
+
+  render() {
+    const props = this.props;
+    const { style = {}, header, footer, loading } = this.props;
+
+    return (
+      <div
+        className={classNames({ 'baselayout-wrapper': true, })} style={style}
+      >
+        {
+          header && <div className={classNames({ 'baselayout-header': true })}>
+            {header}
+          </div>
+        }
+        <div className={classNames({ 'baselayout-container': true })}>
+          {props.children}
+        </div>
+        {
+          footer && <div className={classNames({ 'baselayout-footer': true })}>
+            {footer}
+          </div>
+        }
+        {
+          this.state.showLoading ? (
+            <div className="loading">
+              {/* 加载中 */}
+            </div>
+          ) : null
+        }
+
+      </div>
+    )
+  }
+}
+
+
+// export default function BaseLayout(props) {
+//   console.log('render baseLayout:', props);
+
+//   const { style = {}, header, footer, continuousRfidScan = false, onRfidScan = blankFunc, onScan = blankFunc, onEnter = blankFunc, onEsc = blankFunc, onDelete = blankFunc } = props;
+
+//   // const [continuousRfidScanState, setContinuousRfidScanState] = useState(continuousRfidScan)
+
+//   // 监听按键事件
+//   useEffect(() => {
+//     const handleKeyUp = e => {
+//       // console.log(e);
+//       e.preventDefault();
+//       const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+//       if (code === 'F23' || code === 'F24') {
+//         // console.log('scan');
+//         onScan(e);
+//         return;
+//       }
+//       if (code === 'Enter') {
+//         onEnter(e);
+//         return;
+//       }
+//       if (code === 'Delete') {
+//         onDelete(e);
+//         return;
+//       }
+//       if (code === 'Esc') {
+//         onEsc(e);
+//         return;
+//       }
+//     }
+//     document.addEventListener('keyup', handleKeyUp);
+//     return () => {
+//       document.removeEventListener('keyup', handleKeyUp);
+//     }
+//   }, [])
+
+//   // 监听连扫
+//   useEffect(() => {
+//     const handleContinuousRfidScan = (ev) => {
+//       onRfidScan(ev.param);
+//     }
+//     if(continuousRfidScan) {
+//       document.addEventListener('ContinuousRfidScan', handleContinuousRfidScan, false);
+//       WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'startScan', 'params': null}", function (e) {
+//         // console.log('start success ' + JSON.stringify(e));
+//       }, function (e) {
+//         console.log('failure-1 ' + JSON.stringify(e));
+//       });
+//     }
+
+//     return () => {
+//       WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopScan', 'params':null}", function (e) {
+//         // console.log('stop success ' + JSON.stringify(e));
+//       }, function (e) {
+//         console.log('failure-2 ' + JSON.stringify(e));
+//       });
+//       document.removeEventListener('ContinuousRfidScan', handleContinuousRfidScan, false)
+//     }
+//   }, [])
+
+//   return (
+//     <div
+//       className={classNames({ 'baselayout-wrapper': true, })} style={style}
+//     >
+//       {
+//         header && <div className={classNames({ 'baselayout-header': true })}>
+//           {header}
+//         </div>
+//       }
+//       <div className={classNames({ 'baselayout-container': true })}>
+//         {props.children}
+//       </div>
+//       {
+//         footer && <div className={classNames({ 'baselayout-footer': true })}>
+//           {footer}
+//         </div>
+//       }
+//       {/* <div className="baselayout-paddingbottom"></div> */}
+//     </div>
+//   )
+// }

package/packages/BaseLayout/RfidOnce.jsx

@@ -0,0 +1,106 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer'
+import classNames from "classnames";
+import { playSound } from "../utils";
+
+const blankFunc = () => { };
+
+export default class RfidOnce extends React.Component {
+    constructor(props) {
+        super(props);
+        this._rfidBeginScan = false;
+        this._handleRfidScan = e => {
+            const { onRfidOnce, onRfidBoxOnce, onRfidPalletOnce } = this.props;
+            const data = e.param;
+            const isBox = data.rfidData.startsWith("0F006");
+            const isPallet = data.rfidData.startsWith("0F011");
+
+            playSound('single_recog');
+
+            if(isPallet) {
+                let rfidData = data.rfidData;
+                data.originData = rfidData;
+                data.rfidData = rfidData.substr(5, 12)
+            }
+
+            if(onRfidBoxOnce && isBox) {
+                this._stopWork();
+                onRfidBoxOnce(data);
+            } else if(onRfidPalletOnce && isPallet) {
+                this._stopWork();
+                onRfidPalletOnce(data);
+            }
+            if(onRfidOnce){
+                this._stopWork();
+                onRfidOnce(data);
+            }
+        }
+        this._startWork = e => {
+            // console.log('start work');
+            document.addEventListener('ContinuousRfidScan', this._handleRfidScan);
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'startScan', 'params': null}", function(e) {
+                // alert('success ' + JSON.stringify(e));
+            }, function(e) {
+                // alert('failure ' + JSON.stringify(e));
+            });
+            this._rfidBeginScan = true;
+        }
+        this._stopWork = e => {
+            // console.log('stop work');
+            document.removeEventListener('ContinuousRfidScan', this._handleRfidScan);
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopRfidScan', 'params':null}", function(e) {
+            }, function(e) {
+            });
+        }
+        this._handleKeyDown = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                // console.log('keydown', this._rfidBeginScan);
+                if (!this._rfidBeginScan) {
+                    this._startWork();
+                }
+            }
+        }
+        this._handleKeyUp = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                // console.log('keyup stop');
+                this._stopWork();
+                this._rfidBeginScan = false;
+            }
+        }
+    }
+
+    componentDidMount() {
+        document.addEventListener('keydown', this._handleKeyDown);
+        document.addEventListener('keyup', this._handleKeyUp);
+        // document.addEventListener('ContinuousRfidScan', function (data) {
+        //     // console.log(JSON.stringify(data));
+        //     // console.log(data);
+        // }, false);
+
+        WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'changeScanMode', 'params': {'scanMode': 'RFID'}}", function (e) {
+            // alert('success ' + JSON.stringify(e));
+        }, function (e) {
+            // alert('failure ' + JSON.stringify(e));
+        });
+    }
+    componentWillUnmount() {
+        document.removeEventListener('keydown', this._handleKeyDown);
+        document.removeEventListener('keyup', this._handleKeyUp);
+        this._stopWork();
+    }
+
+    render() {
+        // console.log('onRfidOnce render');
+
+        const props = this.props;
+        const { onRfidOnce = blankFunc, ...opts } = props;
+
+        return (
+            <BaseLayoutContainer
+                {...opts}
+            />
+        )
+    }
+}

package/packages/BaseLayout/RfidScan.jsx

@@ -0,0 +1,118 @@
+import React from "react";
+import BaseLayoutContainer from './BaseLayoutContainer'
+import classNames from "classnames";
+
+const blankFunc = () => { };
+
+export default class RfidOnce extends React.Component {
+    static defaultProps = {
+        rfidReaderSleep: false,
+    }
+    constructor(props) {
+        super(props);
+        this._rfidBeginScan = false;
+        this._handleRfidScan = e => {
+            const { onRfidScan, onRfidBoxScan, onRfidPalletScan } = this.props;
+            const data = e.param;
+            const isBox = data.rfidData.startsWith("0F006");
+            const isPallet = data.rfidData.startsWith("0F011");
+            if(isPallet) {
+                let rfidData = data.rfidData;
+                data.originData = rfidData;
+                data.rfidData = rfidData.substr(5, 12)
+            }
+
+            if(isBox && onRfidBoxScan) {
+                onRfidBoxScan(data);
+            } else if(isPallet && onRfidPalletScan) {
+                onRfidPalletScan(data);
+            }
+            if(onRfidScan) {
+                onRfidScan(data);
+            }
+        }
+        this._startWork = e => {
+            document.addEventListener('ContinuousRfidScan', this._handleRfidScan);
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'startScan', 'params': null}", function(e) {
+
+            }, function(e) {
+
+            });
+            this._rfidBeginScan = true;
+        }
+        this._stopWork = e => {
+            document.removeEventListener('ContinuousRfidScan', this._handleRfidScan);
+            // WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopScan', 'params':null}", function(e) {
+            // }, function(e) {
+            // });
+            WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'rfid', 'method': 'stopRfidScan', 'params':null}", function(e) {
+            }, function(e) {
+            });
+        }
+        this._handleKeyDown = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                if (!this._rfidBeginScan) {
+                    this._startWork();
+                }
+            }
+        }
+        this._handleKeyUp = e => {
+            const { code, keyCode, key } = e; // code: F23/F24;  keyCode: 0;  key: uniden...
+            if (code === 'F22' || code === 'F23' || code === 'F24' || code === 'F9' || code ==='F16') {
+                this._stopWork();
+                this._rfidBeginScan = false;
+            }
+        }
+    }
+
+    componentDidMount() {
+        // console.log('Rfid Scan didMount');
+        const { autoRfidScan = false, rfidReaderSleep } = this.props;
+
+        WindVane.call('WindvanePlugin', 'invoke', "{'domain': 'keyboard', 'method': 'changeScanMode', 'params': {'scanMode': 'RFID'}}", function (e) {
+            // alert('success ' + JSON.stringify(e));
+        }, function (e) {
+            // alert('failure ' + JSON.stringify(e));
+        });
+
+        if(!autoRfidScan) {
+            document.addEventListener('keydown', this._handleKeyDown);
+            document.addEventListener('keyup', this._handleKeyUp);
+        } else {
+            if(!rfidReaderSleep) {
+                this._startWork();
+            }
+        }
+    }
+    componentWillUnmount() {
+        // const { autoRfidScan = false } = this.props;
+        document.removeEventListener('keydown', this._handleKeyDown);
+        document.removeEventListener('keyup', this._handleKeyUp);
+        this._stopWork();
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if(this.props.autoRfidScan && (this.props.rfidReaderSleep !== nextProps.rfidReaderSleep) ) {
+            if(!nextProps.rfidReaderSleep) {
+                this._startWork();
+            } else {
+                this._stopWork();
+            }
+        }
+        return true;
+    }
+
+
+    render() {
+        // console.log('onRfidScan render');
+
+        const props = this.props;
+        const { onRfidScan = blankFunc, autoRfidScan, ...opts } = props;
+
+        return (
+            <BaseLayoutContainer
+                {...opts}
+            />
+        )
+    }
+}