@cniot/android-pda-components 0.2.23 → 0.2.24

package/packages/Confirm/index.jsx

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

@@ -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,171 +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'
-          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

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

@@ -1,71 +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-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;
-    }
-  }
-}