@cniot/android-pda-components 0.2.20 → 0.2.21

package/packages/PdaSteps/PdaStep/index.less

@@ -0,0 +1,70 @@
+.pda-step-card {
+    display: flex;
+    flex-direction: row;
+    .pda-step-indictor {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 16px;
+        .pda-step-indictor-top {
+            width: 1px;
+            background-color: #BEC0C6;
+            flex: 1;
+        }
+        .pda-step-indictor-top-hidden {
+            background-color: #FFFFFF00;
+        }
+        .pda-step-indictor-center {
+            height: 24px;
+            width: 24px;
+            border-radius: 12px;
+            background-color: #BEC0C6;
+        }
+        .pda-step-indictor-center-active {
+            background-color: #0091EA;
+        }
+        .pda-step-indictor-bottom {
+            flex: 1;
+            width: 1px;
+            background-color: #BEC0C6;
+        }
+        .pda-step-indictor-bottom-hidden {
+            background-color: #FFFFFF00;
+        }
+    }
+
+}
+
+.pda-step {
+    border-radius: 16px;
+    padding: 24px 16px;
+    & p {
+        margin: 0;
+    }
+    background-color: #FFFFFF;
+    margin-bottom: 16px;
+
+    .pda-step-title {
+        font-size: 60px;
+        color: #0091EA;
+        // margin: 0;
+        // margin-bottom: 16px;
+    }
+    .pda-step-list {
+        margin-top: 8px;
+        color: #4A4A4A;
+        font-size: 32px;
+        line-height: 32px;
+    }
+}
+
+.pda-step.pda-step-dark {
+    background-color: #000;
+    .pda-step-title {
+        color: #FFFFFF;
+    }
+
+    .pda-step-list {
+        color: #BEC0C6;
+    }
+}

package/packages/PdaSteps/PdaSteps/index.jsx

@@ -0,0 +1,33 @@
+import React, {cloneElement} from "react";
+import "./index.less";
+import classNames from "classnames";
+import Step from '../PdaStep'
+
+export default class PdaInfoCard extends React.Component {
+  static Step = Step;
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { className, style={}, theme='light', current = 0, children} = this.props;
+    return (
+      <div className={classNames({[className]: true})} style={style}>
+        {(children || []).map((child, index) => {
+          const childProps = {
+            index,
+            isLast: index === (children || []).length - 1,
+            ...child.props
+          };
+          if (index === current) {
+            childProps.isActive = true;
+          } else {
+            childProps.isActive = false;
+          }
+          return cloneElement(child, childProps);
+        })}
+      </div>
+    )
+  }
+}

package/packages/PdaSteps/doc.jsx

@@ -0,0 +1,131 @@
+import React from "react";
+import Steps from "./index";
+
+const { Step } = Steps;
+
+// const Step = Steps.step
+
+export default function () {
+  return (
+    <div>
+      <h1>Steps</h1>
+      <p>步骤条组件</p>
+      <h2>示例</h2>
+      {/* const { className, title, highlightInfo, highlightInfoCN, highlightSubInfo, highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props; */}
+      <div className="light-block" style={{display: 'flex', flexDirection: 'row'}}>
+        <Steps current={0} style={{
+            marginRight: '32px',
+          }}>
+          <Step title="扫描中" infoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+            ]
+          } />
+          <Step title="已生产" infoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+            ]
+          } />
+        </Steps>
+        <Steps current={1}>
+          <Step title="扫描中" infoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+            ]
+          } />
+          <Step title="已生产" infoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+            ]
+          } />
+          <Step title="待扫描" infoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+            ]
+          } />
+        </Steps>
+      </div>
+      <code className="code">{`
+<Steps current={0} style={{
+  marginRight: '32px',
+}}>
+  <Step title="扫描中" infoList={
+    [
+      {label: '商品条码', content: '623126388798'},
+      {label: '截止日期', content: '2022-07-25'},
+      {label: '产品名称', content: '商品的名称'},
+      {label: '品号', content: '12398765423'},
+    ]
+  } />
+  <Step title="已生产" infoList={
+    [
+      {label: '商品条码', content: '623126388798'},
+      {label: '截止日期', content: '2022-07-25'},
+      {label: '产品名称', content: '商品的名称'},
+      {label: '品号', content: '12398765423'},
+    ]
+  } />
+</Steps>
+      `}</code>
+      <h2>Steps 参数</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>current</td>
+            <td>当前节点</td>
+            <td>number</td>
+            <td>0</td>
+          </tr>
+        </tbody>
+      </table>
+      <h2>Steps.Step 参数</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>infoList</td>
+            <td>更多信息</td>
+            <td>object[]</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/PdaSteps/index.jsx

@@ -0,0 +1,5 @@
+import Steps from './PdaSteps';
+import Step from './PdaStep';
+
+export { Step };
+export default Steps;

package/packages/PdaTitle/doc.jsx

@@ -0,0 +1,102 @@
+import React from "react";
+import Title from "./index";
+import Button from '../Button';
+export default function () {
+  return (
+    <div>
+      <h1>Title</h1>
+      <p>废弃-推荐用Header</p>
+      <h2>示例</h2>
+      <div className="dark-block">
+      {/* const { className, goBack = true, icon="scan", title="任务", more=false } = this.props; */}
+        <Title
+          title='hello world'
+          goBackHandle={() => {
+            console.log('go back');
+          }}
+        />
+        <Title
+          icon='read'
+          title='hello world'
+        ></Title>
+        <Title
+          icon='select'
+          title='hello world'
+          menus={
+            <>
+              <Button>按钮</Button>
+              <Button type='primary' onClick={e => console.log(e) }>确认</Button>
+              <Button type='dark'>深色</Button>
+            </>
+          }
+          onClickMenuItem={console.log}
+        ></Title>
+      </div>
+      <code className="code">{`
+        <Title
+          title='hello world'
+          icon='read'
+          goBackHandle={() => {
+            console.log('go back');
+          }}
+          menuList = {
+            <>
+              <Button>按钮</Button>
+              <Button type='primary' onClick={e => console.log(e) }>确认</Button>
+              <Button type='dark'>深色</Button>
+            </>
+          }
+        />
+      `}</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>goBack</td>
+            <td>返回按钮</td>
+            <td>boolean</td>
+            <td>true</td>
+          </tr>
+          <tr>
+            <td>goBackHandle</td>
+            <td>返回按钮点击处理</td>
+            <td>function</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>more(废弃，使用 menuList)</td>
+            <td>更多(废弃，使用 menuList)</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>menuList</td>
+            <td>弹出菜单列表</td>
+            <td></td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/PdaTitle/index.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import classNames from "classnames";
+// import OPInput from "../OPInput";
+import Overlay from "../Overlay";
+import "../Header/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/Presentation/doc.jsx

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

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

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

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

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

@@ -0,0 +1,30 @@
+.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;
+  }
+}