@cniot/android-pda-components 0.2.30 → 0.2.32

package/packages/PdaTitle/index.jsx

@@ -1,51 +0,0 @@
-import React from "react";
-import classNames from "classnames";
-// import OPInput from "../OPInput";
-import Overlay from "../Overlay";
-import "./index.less";
-
-const blankFunc = () => {}
-export default class PdaTitle extends React.Component {
-  state = {
-    showMenu: false,
-  }
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { className, goBack = true, goBackHandle = blankFunc, icon="scan", title="任务", menuList = null } = this.props;
-    const { showMenu } = this.state;
-
-    return (
-      <div className={classNames({[className]: true, 'pda-header': true})}>
-        <div className='header-click-area' onClick={ goBack ? goBackHandle : blankFunc}>
-          {
-            goBack && <div className="pda-goback"></div>
-          }
-          {
-            icon && <div className={classNames({"pda-header-icon": true, ["pda-header-icon-"+icon]: true})}></div>
-          }
-        </div>
-        <p className={classNames({'pda-title-text': true})}>{ title }</p>
-        {
-          menuList ? (<div className="pda-header-more" onClick={e => {
-            this.setState({showMenu: true});
-          }}/> ) : null
-        }
-        {
-          <Overlay 
-            visible = {showMenu}
-            verticalPosition = 'bottom'
-            closable={true}
-            onClosed={e => this.setState({showMenu: false})}
-          >
-            <div className='pda-menus'>
-              {menuList}
-            </div>
-          </Overlay>
-        }
-      </div>
-    )
-  }
-}

package/packages/PdaTitle/index.less

@@ -1,65 +0,0 @@
-.pda-header {
-  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;
-  }
-  .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-left: auto;
-  }
-
-  .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/Presentation/doc.jsx

@@ -1,72 +0,0 @@
-import React from "react";
-import Presentation from "./index";
-export default function () {
-  return (
-    <div>
-      <h1>Presentation</h1>
-      <p>图示组件，通常包含一个图片+一行文字</p>
-      <h2>示例</h2>
-      <div className="light-block pda">
-        <Presentation text="请靠近报废纸箱" subText="开始识别"></Presentation>
-      </div>
-      <br />
-      <div className="light-block pda" style={{backgroundColor:"#000000"}}>
-        <Presentation image={Presentation.IMAGE_4} text="请靠近纸箱" subText="开始识别" transparent={true}></Presentation>
-      </div>
-      <br />
-      <div className="light-block pda" imageWidth={300} imageHeight={500} style={{backgroundColor:"#000000"}} >
-        <Presentation image={Presentation.IMAGE_2} imageStyle={{width: "500px"}} text="请靠近报废纸箱" subText="开始识别" transparent={true} ></Presentation>
-      </div>
-
-      <br />
-      <div className="light-block pda" style={{backgroundColor:"#000000"}} >
-        <Presentation image={Presentation.IMAGE_3} text="请靠近箱码进行识别"  ></Presentation>
-      </div>
-
-      <br />
-      <code className="code">{`
-<Presentation text="请靠近报废纸箱" subText="开始识别"></Presentation>
-<Presentation image={Presentation.IMAGE_4} text="请靠近纸箱" subText="开始识别" transparent={true}></Presentation>
-<Presentation image={Presentation.IMAGE_2} imageStyle={{width: "500px"}} text="请靠近报废纸箱" subText="开始识别" transparent={true} ></Presentation>
-<Presentation image={Presentation.IMAGE_3} text="请靠近箱码进行识别"  ></Presentation>
-      `}</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>image</td>
-            <td>图片地址</td>
-            <td>string</td>
-            <td>可以使用 Presentation.IMAGE_1, Presentation.IMAGE_2, Presentation.IMAGE_3, Presentation.IMAGE_4 4张内置图片</td>
-          </tr>
-          <tr>
-            <td>text</td>
-            <td>文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>transparent</td>
-            <td>是否透明，不显示被色背景</td>
-            <td>boolean</td>
-            <td>默认false</td>
-          </tr>
-          <tr>
-            <td>subText</td>
-            <td>副文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/Presentation/index.jsx

@@ -1,25 +0,0 @@
-import React from "react";
-import './index.less';
-// 图示
-export default function Presentation(props){
-  const { 
-    image= Presentation.IMAGE_1,
-    text="",
-    subText="",
-    transparent
-  } = props;
-  return <div className={transparent ? "presentation-card transparent" : "presentation-card"}>
-    <img src={image} />
-    {
-      text ? <div className="text">{text}</div> : null
-    }
-    {
-      subText ? <div className="sub-text">{subText}</div> : null
-    }
-  </div>
-}
-
-Presentation.IMAGE_1 = "https://img.alicdn.com/imgextra/i3/O1CN019Ivkor1ksy3pMGDsz_!!6000000004740-2-tps-280-322.png";
-Presentation.IMAGE_2 = "https://img.alicdn.com/imgextra/i1/O1CN01lhSunu1X4VPw1Mlas_!!6000000002870-2-tps-352-158.png";
-Presentation.IMAGE_3 = "https://img.alicdn.com/imgextra/i1/O1CN01mreYXo1XfbUsQ7hip_!!6000000002951-2-tps-322-144.png";
-Presentation.IMAGE_4 = "https://img.alicdn.com/imgextra/i3/O1CN017gNM8F1Fmmcfti7Dg_!!6000000000530-1-tps-414-286.gif";

package/packages/Presentation/index.less

@@ -1,31 +0,0 @@
-@import '../variable.less';
-
-.presentation-card{
-  margin:12px;
-  background-color:#ffffff;
-  border-radius: 6px;
-  text-align: center;
-  padding:20px 6px;
-  img{
-    width:70%;
-    height:auto;
-  }
-  &.transparent{
-    background-color:transparent;
-    color:#ffffff;
-    margin-top: 80px;
-  }
-
-  .text{
-    margin-top:12px;
-    font-weight:700;
-    font-size:32px;
-  }
-  .sub-text {
-    margin-top:6px;
-    font-weight:700;
-    font-size:24px;
-    line-height: 24px;
-    color: #999999;
-  }
-}

package/packages/SelectCard/doc.jsx

@@ -1,57 +0,0 @@
-import React, {useState} from "react";
-import SelectCard from "./index";
-
-export default function () {
-  return (
-    <div>
-      <h1>SelectCard</h1>
-      <p>选择 Card</p>
-      <h2>示例</h2>
-      <div className="dark-block">
-         <SelectCard title='栈板' label='徐福记' onClick={e => {console.log(e)} }/>
-         <SelectCard title='栈板' label='徐福记' select={false} onClick={e => {console.log(e)} }/>
-      </div>
-      <code className="code">{`
-<SelectCard title='栈板' label='徐福记' onClick={e => {console.log(e)} }/>
-<SelectCard title='栈板' label='徐福记' select={false} onClick={e => {console.log(e)} }/>
-      `}</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>label</td>
-            <td>内容</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>select</td>
-            <td>是否显示小箭头</td>
-            <td>boolean</td>
-            <td>true</td>
-          </tr>
-          <tr>
-            <td>onClick</td>
-            <td>点击事件</td>
-            <td>function</td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/SelectCard/index.jsx

@@ -1,13 +0,0 @@
-import React, {useState, useEffect} from "react";
-import "./index.less";
-import classNames from "classnames";
-
-export default function SelectCard (props) {
-  const {title, label, select = true, onClick = e => {}} = props;
-  return (
-    <div className="select-card" >
-      <p>{title}</p>
-      <div className="select-card-content" onClick={onClick}>{label} {select ? <span className="select-icon"></span> : null} </div>
-    </div>
-  )
-}

package/packages/SelectCard/index.less

@@ -1,30 +0,0 @@
-.select-card {
-  padding-top: 12px;
-  p {
-    color: #999999;
-    font-size: 32px;
-    line-height: 40px;
-    margin-bottom: 12px;
-    padding-left: 16px;
-  }
-  .select-card-content {
-    background-color: #282828;
-    padding: 24px 16px;
-    padding-right: 24px;
-    border-radius: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    color: #FFFFFF;
-    font-size: 40px;
-    line-height: 40px;
-  }
-
-  .select-icon {
-    background-image: url(https://img.alicdn.com/imgextra/i1/O1CN01WnYl6Z1qBM3uInOvw_!!6000000005457-2-tps-40-68.png);
-    background-size: 100%;
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 20px;
-  }
-}

package/packages/SimpleCard/doc.jsx

@@ -1,59 +0,0 @@
-import React, {useState} from "react";
-import SimpleCard from "./index";
-
-export default function () {
-  return (
-    <div>
-      <h1>SimpleCard</h1>
-      <p>简单 Card</p>
-      <h2>示例</h2>
-      <div className="light-block">
-        <SimpleCard />
-        <SimpleCard title="标题" content="内容" type='error' onClick={e=>{console.log(e);}}/>
-        <SimpleCard title="500" content="装车完成"  onClick={e=>{console.log(e);}}/>
-      </div>
-      <code className="code">{`
-<SimpleCard />
-<SimpleCard title="标题" content="内容" type='error' onClick={e=>{console.log(e);}}/>
-<SimpleCard title="500" content="装车完成"  onClick={e=>{console.log(e);}}/>
-      `}</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>title</td>
-          </tr>
-          <tr>
-            <td>content</td>
-            <td>内容</td>
-            <td>string</td>
-            <td>content</td>
-          </tr>
-          <tr>
-            <td>onClick</td>
-            <td>点击事件</td>
-            <td>function</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>type</td>
-            <td>类型</td>
-            <td>default | error</td>
-            <td>default</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/SimpleCard/index.jsx

@@ -1,13 +0,0 @@
-import React, {useState, useEffect} from "react";
-import "./index.less";
-import classNames from "classnames";
-
-export default function SimpleCard (props) {
-  const { className=undefined, title='', content='', type='default', onClick=()=>{} } = props;
-  return title || content ? (
-    <div className={classNames({[className]: true, 'simple-card': true, ['simple-card-'+type]: true})} onClick={onClick}>
-      <p className="simple-card-title">{title}</p>
-      <p className="simple-card-content">{content}</p>
-    </div>
-  ) : null
-}

package/packages/SimpleCard/index.less

@@ -1,38 +0,0 @@
-.simple-card {
-  display: inline-block;
-  padding: 12px 0 12px 18px;
-  border-radius: 12px;
-  // margin-top: 12px;
-  // margin-left: 12px;
-
-  .simple-card-title {
-    font-weight: bold;
-    font-size: 56px;
-    line-height: 40px;
-    margin-top: 12px;
-  }
-  .simple-card-content {
-    font-size: 28px;
-    line-height: 40px;
-    margin-top: 12px;
-    // margin-bottom: 12px;
-  }
-  &.simple-card-default {
-    background-color: #F3F4F9;
-    .simple-card-title {
-      color: #0091EA;
-    }
-    .simple-card-content {
-      color: #000000;
-    }
-  }
-  &.simple-card-error {
-    background-color: #ff0000;
-    .simple-card-title {
-      color: white;
-    }
-    .simple-card-content {
-      color: #FFAFB1;
-    }
-  }
-}

package/packages/SimpleCardBlock/doc.jsx

@@ -1,77 +0,0 @@
-import React, {useState} from "react";
-import SimpleCardBlock from "./index";
-
-export default function () {
-  return (
-    <div>
-      <h1>SimpleCardBlock</h1>
-      <p>卡片块</p>
-      <h2>示例</h2>
-      <div className="light-block">
-        <SimpleCardBlock
-          title="出库信息出库信息出库信息出库信息出库信息出库信息出库信息"
-          tag={
-            {label: '注意啦', type: 'warning'}
-          }
-          dataSource={
-            [
-              {title: '500', content: '装车完成'},
-              {title: "标题", content: "内容", type: 'error', onClick: e=>console.log(e) },
-              {title: '500', content: '装车完成'},
-              {title: "标题", content: "内容", type: 'error', onClick: e=>console.log(e) },
-              {title: '500', content: '装车完成'},
-            ]
-          }
-        />
-      </div>
-      <code className="code">{`
-<SimpleCardBlock
-  title="出库信息出库信息出库信息出库信息出库信息出库信息出库信息"
-  tag={
-    {label: '注意啦', type: 'warning'}
-  }
-  dataSource={
-    [
-      {title: '500', content: '装车完成'},
-      {title: "标题", content: "内容", type: 'error', onClick: e=>console.log(e) },
-      {title: '500', content: '装车完成'},
-      {title: "标题", content: "内容", type: 'error', onClick: e=>console.log(e) },
-      {title: '500', content: '装车完成'},
-    ]
-  }
-/>
-      `}</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>title</td>
-          </tr>
-          <tr>
-            <td>tag</td>
-            <td>标签</td>
-            <td>object</td>
-            <td>参考 Tab</td>
-          </tr>
-          <tr>
-            <td>dataSource</td>
-            <td>card 数据源</td>
-            <td>{JSON.stringify([{}, {}])}</td>
-            <td>对象格式参考 SimpleCard</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/SimpleCardBlock/index.jsx

@@ -1,43 +0,0 @@
-import React, {useState, useEffect} from "react";
-import SimpleCard from "../SimpleCard";
-import Tag from '../Tag';
-import "./index.less";
-import classNames from "classnames";
-
-export default function SimpleCardBlock (props) {
-  const { className=undefined, dataSource=[], title='', tag} = props;
-  return (
-    <div className={classNames({[className]: true, 'simple-card-block': true, })} >
-      <div className="simple-card-block-header">
-        <p className="simple-card-block-title">{title}</p>
-        {
-          tag ? (
-            <div style={{marginLeft: 12}}>
-              <Tag {...tag} />
-            </div>
-
-          ) : null
-        }
-
-      </div>
-      {
-        dataSource.length > 0 ? (
-          <div className="simple-card-block-content">
-            {
-              dataSource.map((item, index) => {
-                return <SimpleCard
-                  key={index}
-                  {
-                    ...item
-                  }
-                />
-              })
-            }
-            <div style={{display: 'inline-block', padding: '12px  18px'}}></div>
-            <div style={{display: 'inline-block', padding: '0  18px', margin: 0}}></div>
-          </div>
-        ) : null
-      }
-    </div>
-  )
-}

package/packages/SimpleCardBlock/index.less

@@ -1,26 +0,0 @@
-.simple-card-block {
-  background-color: white;
-  padding: 24px 12px;
-  border-radius: 12px;
-
-  .simple-card-block-header {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .simple-card-block-title {
-    color: #666666;
-    font-size: 32px;
-    line-height: 32px;
-  }
-  .simple-card-block-content {
-    display: flex;
-    flex-wrap: wrap;
-    &>div {
-      min-width: 190px;
-      flex: 1;
-      margin-right: 12px;
-      margin-top: 12px;
-    }
-  }
-}

package/packages/SubCard/doc.jsx

@@ -1,63 +0,0 @@
-import React from "react";
-import SubCard from "./index";
-export default function () {
-  return (
-    <div>
-      <h1>SubCard</h1>
-      <p>附卡片</p>
-      <h2>示例</h2>
-      <div className="dark-block" style={{display:"flex"}}>
-        <SubCard style={{marginRight: "20px", width: 400}} tag={{label: "散箱", type: "default"}}  title="品号" context="50827834508278345082783450827834" attrs={["批次：23842839", "数量：234"]} ></SubCard>
-        <SubCard style={{marginRight: "20px", width: 400}} title="品号" tag={{label: "少货", type: "warning"}} context="5082 7834" name="徐福记抹茶凤梨酥17g" attrs={["批次：23842839", "数量：234"]} ></SubCard>
-        <SubCard title="品号" tag={{label: "少货", type: "warning"}} name="徐福记抹茶凤梨酥17g"></SubCard>
-      </div>
-      <code className="code">{`
-        <SubCard tag={{label: "散箱", type: "default"}}  title="品号" context="5082 7834" attrs={["批次：23842839", "数量：234"]} ></SubCard>
-        <SubCard title="品号" tag={{label: "少货", type: "warning"}} context="5082 7834" name="徐福记抹茶凤梨酥17g" attrs={["批次：23842839", "数量：234"]} ></SubCard>
-      `}</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>context</td>
-            <td>内容</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>name</td>
-            <td>品名</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>tag</td>
-            <td>标签名</td>
-            <td>object</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>attrs</td>
-            <td>Array</td>
-            <td></td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}