@cniot/android-pda-components 0.2.17 → 0.2.21

package/packages/InfoCard/doc.jsx

@@ -0,0 +1,244 @@
+import React from "react";
+import InfoCard from "./index";
+export default function () {
+  return (
+    <div>
+      <h1>InfoCard</h1>
+      <p>InfoCard</p>
+      <h2>示例</h2>
+      {/* const { className, title, highlightInfo, highlightInfoCN, highlightSubInfo, highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props; */}
+      <div className="light-block" style={{width:480, display:"block"}} >
+          <InfoCard
+            title="待拣件数"
+            highlightInfo="800"
+            highlightInfoCN = "件"
+            highlightSubInfo="/800"
+            highlightSubInfoCN="件"
+            percentage={0.64}
+            boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
+            infoList={
+              [
+                {label: '商品条码', content: '623126388798'},
+                {label: '截止日期', content: '2022-07-25'},
+                {label: '产品名称', content: '商品的名称'},
+                {label: '品号', content: '12398765423'},
+              ]
+            }
+          />
+          <InfoCard
+            title="待拣件数"
+            highlightInfo="800"
+            highlightInfoCN = "件"
+            highlightSubInfo="/800"
+            highlightSubInfoCN="件"
+            percentage={0.64}
+            boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
+            theme='dark'
+            infoList={
+              [
+                {label: '商品条码', content: '623126388798'},
+                {label: '截止日期', content: '2022-07-25'},
+                {label: '产品名称', content: '商品的名称'},
+                {label: '品号', content: '12398765423'},
+              ]
+            }
+          />
+      </div>
+      <code className="code">{`
+<InfoCard
+  title="待拣件数"
+  highlightInfo="800"
+  highlightInfoCN = "件"
+  highlightSubInfo="/800"
+  highlightSubInfoCN="件"
+  percentage={0.64}
+  boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
+  infoList={
+    [
+      {label: '商品条码', content: '623126388798'},
+      {label: '截止日期', content: '2022-07-25'},
+      {label: '产品名称', content: '商品的名称'},
+      {label: '品号', content: '12398765423'},
+    ]
+  }
+/>`}
+</code>
+
+      <div className="light-block" style={{width:480, display:"block"}}>
+        <InfoCard
+          title="待拣件数"
+          highlightInfo="800"
+          highlightInfoCN = "件"
+          highlightSubInfo="/800"
+          highlightSubInfoCN="件"
+          tagText="少货2"
+          boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
+          theme='dark'
+          infoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+            ]
+          }
+        />
+      </div>
+      <code className="code">{`
+<InfoCard
+title="待拣件数"
+highlightInfo="800"
+highlightInfoCN = "件"
+highlightSubInfo="/800"
+highlightSubInfoCN="件"
+tagText="少货2"
+boldInfo="加粗显示：512/五厂综包一楼,这是加粗显示的货品名称可能有多行"
+theme='dark'
+infoList={
+  [
+    {label: '商品条码', content: '623126388798'},
+    {label: '截止日期', content: '2022-07-25'},
+    {label: '产品名称', content: '商品的名称'},
+    {label: '品号', content: '12398765423'},
+  ]
+}
+/>`}
+</code>
+      <div className="light-block" style={{width:480, display:"block"}}>
+        <InfoCard
+          title="漏扫箱数/识别总箱数"
+          highlightInfo="0"
+          highlightSubInfo="/40"
+          infoImage={InfoCard.IMAGE_1}
+        />
+      </div>
+      <code className="code">{`
+<InfoCard
+title="漏扫箱数/识别总箱数"
+highlightInfo="0"
+highlightSubInfo="/40"
+infoImage={InfoCard.IMAGE_1}
+/>`}
+</code>
+      <div className="light-block" style={{width:480, display:"block"}}>
+        <InfoCard
+          title="识别箱数(CS)"
+          highlightInfo="0"
+          highlightSubInfo="/50"
+          subTitle="识别个数(EA)"
+          subHighlightInfo="40"
+          subHighlightSubInfo="/50"
+          infoImage={InfoCard.IMAGE_1}
+        />
+      </div>
+      <code className="code">{`
+<InfoCard
+  title="识别箱数(CS)"
+  highlightInfo="0"
+  highlightSubInfo="/50"
+  subTitle="识别个数(EA)"
+  subHighlightInfo="40"
+  subHighlightSubInfo="/50"
+  infoImage={InfoCard.IMAGE_1}
+/>`}
+</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>highlightInfo</td>
+            <td>高亮文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>highlightInfoCN</td>
+            <td>高亮文本(中文)</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>highlightSubInfo</td>
+            <td>高亮副文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>highlightSubInfoCN</td>
+            <td>高亮副文本(中文)</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>subTitle</td>
+            <td>副标题</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>subHighlightInfo</td>
+            <td>副高亮文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>subHighlightSubInfo</td>
+            <td>副高亮副文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>boldInfo</td>
+            <td>加粗文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>theme</td>
+            <td>主题</td>
+            <td>string: light | dark</td>
+            <td>light</td>
+          </tr>
+          <tr>
+            <td>infoList</td>
+            <td>更多信息</td>
+            <td>object[]</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>percentage</td>
+            <td>进度条百分比，传值时显示进度条</td>
+            <td>number</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>tagText</td>
+            <td> 右上角 tag 文本，传值时显示 tag</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>infoImage</td>
+            <td>左侧图片地址</td>
+            <td>string</td>
+            <td>可以使用 InfoCard.IMAGE_1 1张内置图片</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/InfoCard/index.jsx

@@ -0,0 +1,67 @@
+import React from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+import classNames from "classnames";
+
+export default class PdaInfoCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { className = '', title, highlightInfo, subTitle, subHighlightInfo, subHighlightSubInfo, infoImage, tagText, highlightInfoCN, highlightSubInfo, percentage,  highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props;
+    return (
+      <div className={classNames({[className]: true, 'pda-info-card': true, 'pda-info-card-dark': theme === 'dark'})} style={style}>
+        <div className="pda-info-card-title-section">
+          <div className="pda-info-card-title">{title}</div>
+          {
+            tagText ? <div className="pda-info-card-tag">
+              <div className="pda-info-card-tag-text">{tagText}</div>
+             </div> : null
+          }
+        </div>
+        <div className="pda-info-card-highlight-section">
+          <div>
+            <div className="pda-info-card-highlight">
+              <span className="pda-info-card-highlight1">{highlightInfo}</span>
+              <span className="pda-info-card-highlight1CN">{highlightInfoCN}</span>
+              <span className="pda-info-card-highlight2">{highlightSubInfo}</span>
+              <span className="pda-info-card-highlight2CN">{highlightSubInfoCN}</span>
+            </div>
+            {
+              subTitle ?  <div className="pda-info-card-title">{subTitle}</div> : null
+            }
+            {
+              subHighlightInfo ? <div className="pda-info-card-highlight">
+                <span className="pda-info-card-highlight1">{subHighlightInfo}</span>
+                <span className="pda-info-card-highlight2">{subHighlightSubInfo}</span>
+              </div> : null
+            }
+          </div>
+          {
+            infoImage ? <img src={infoImage} width={150} height={150} /> : null
+          }
+        </div>
+        {
+          percentage !== undefined ? <div className="pda-info-card-progress">
+            <div className="pda-info-card-progress-inside" style={{width: `${percentage * 100}%`}}/>
+          </div> : null
+        }
+        <div className="pda-info-card-bold">{boldInfo}</div>
+        {
+          infoList.map((item, index) => {
+            return (
+              <div key={index} className="pda-info-card-list">
+                <span>{item.label || ''}</span>
+                &nbsp;&nbsp;
+                <span>{item.content || ''}</span>
+              </div>
+            )
+          })
+        }
+      </div>
+    )
+  }
+}
+
+PdaInfoCard.IMAGE_1 = "https://img.alicdn.com/imgextra/i2/O1CN01qYuxip1ME9zhdL9XG_!!6000000001402-2-tps-150-150.png";

package/packages/InfoCard/index.less

@@ -0,0 +1,111 @@
+.pda-info-card {
+    border-radius: 16px;
+    padding: 16px;
+    background-color: white;
+    word-break: break-word;
+    .divda-info-card-title{
+        font-size: 32px;
+        line-height: 32px;
+    }
+    .pda-info-card-title-section {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        .pda-info-card-title {
+            font-size: 32px;
+            color: #666666;
+            // margin: 0;
+            // margin-bottom: 16px;
+        }
+        .pda-info-card-tag {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 36px;
+            padding: 0 8px;
+            background-color: #FFCC00;
+            border-radius: 8px;
+        }
+    }
+ 
+    .pda-info-card-highlight-section{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
+        .pda-info-card-title {
+            font-size: 32px;
+            color: #666666;
+            margin-top: 20px;
+        }
+        .pda-info-card-highlight {
+            font-size: 80px;
+            line-height: 64px;
+            color: #0091EA;
+            font-weight: bold;
+            // margin: 0;
+            // vertical-align: text-bottom;
+            
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+
+            .pda-info-card-highlight1CN {
+                font-size: 64px;
+            }
+            .pda-info-card-highlight2 {
+                font-size: 50px;
+                line-height: 40px;
+            }
+            .pda-info-card-highlight2CN {
+                font-size: 40px;
+                line-height: 40px;
+            }
+        }    
+    }
+    .pda-info-card-bold {
+        font-weight: bold;
+        font-size: 40px;
+        line-height: 48px;
+        // margin: 0;
+        color: black;
+        margin-top: 16px;
+    }
+    .pda-info-card-list {
+        margin-top: 12px;
+        color: #4A4A4A;
+        font-size: 32px;
+        line-height: 32px;
+        word-break: break-all;
+    }
+}
+.pda-info-card-progress {
+    background-color: #F3F4F8;
+    height: 12px;
+    border-radius: 6px;
+    margin-top: 16px;
+    .pda-info-card-progress-inside {
+        background-color: #0091EA;
+        height: 12px;
+        border-radius: 6px;
+    }
+}
+
+
+.pda-info-card.pda-info-card-dark {
+    background-color: black;
+    .pda-info-card-title {
+        color: #999999;
+    }
+
+    .pda-info-card-highlight {
+        color: #FFFFFF;
+    }
+    .pda-info-card-bold {
+        color: #FFFFFF;
+    }
+    .pda-info-card-list {
+        color: #999999;
+    }
+}

package/packages/List/doc.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import List from "./index";
+const dataSource = [{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"11111",
+  tags:[1,2,3,4]
+},{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"",
+  tags:[1,2,3,4]
+},{
+  title: "hello world",
+  subTitle:"sub title",
+},{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"11111",
+}];
+
+export default function () {
+  return (
+    <div>
+      <h1>List</h1>
+      <p>列表组件，通常要配合不同的 List Item 来使用</p>
+      <h2>示例</h2>
+      <div className="light-block">
+        <List 
+          onClickItem={console.log} 
+          dataSource={dataSource}
+        >
+        </List>
+      </div>
+      <code className="code">{`
+        const dataSource = [{
+          title: "hello world",
+          subTitle:"sub title",
+          extra:"11111",
+          tags:[1,2,3,4]
+        },{
+          title: "hello world",
+          subTitle:"sub title",
+          extra:"",
+          tags:[1,2,3,4]
+        },{
+          title: "hello world",
+          subTitle:"sub title",
+        },{
+          title: "hello world",
+          subTitle:"sub title",
+          extra:"11111",
+        }];
+        <List 
+          onClickItem={console.log} 
+          tabIndex={0} 
+          dataSource={dataSource}
+        >
+        </List>
+      `}</code>
+
+      <h2>List</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>onClickItem</td>
+            <td>Item 点击回调，参数 dataSource[i]</td>
+            <td>Function</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>dataSource</td>
+            <td>{`Array({title, subTitle, extra, tags})`}</td>
+            <td>Array</td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/List/index.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import "./index.less";
+
+function empty(){}
+
+export default function List(props) {
+  // onItemClick 兼容老的方法
+  const { dataSource=[], onClickItem, onItemClick=empty} = props;
+  return (
+    <div className="android-pda-list" >
+      {
+        dataSource.map((item, index)=>{
+          return <DefaultItem key={item.key || index} dataSource={item} onClick={onClickItem || onItemClick} ></DefaultItem>
+        })
+      }
+      {
+        props.children
+      }
+    </div>
+  );
+}
+
+
+// 默认 item
+function DefaultItem(props){
+  // 兼容老的用法，直接用 List.Item
+  const dataSource = props.dataSource || {
+    title: props.title, 
+    subTitle: props.subTitle, 
+    extra: props.extra, 
+    tags: props.tags
+  };
+  const { title, subTitle, extra, tags=[], tabIndex} = dataSource;
+  const { onClick } = props;
+  return <div className="default-item" onClick={()=>{ onClick(props.dataSource) }} tabIndex={tabIndex} >
+    <div className="text">
+      <div>{title}</div>
+      <div className="sub-text">
+        {subTitle}
+      </div>
+      <div className="sub-tags">
+        {
+          tags.map((text)=>{
+            return <div className="sub-tag-item" key={text} >{text}</div>
+          })
+        }
+      </div>
+    </div>
+    <div className="extra">{extra}</div>
+  </div>
+}
+
+// 
+List.Item = DefaultItem;

package/packages/List/index.less

@@ -0,0 +1,43 @@
+.android-pda-list{
+  .default-item{
+    background-color:#282828;
+    font-size:36px;
+    padding:10px 10px;
+    border-radius: 6px;
+    color:#ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+    cursor: pointer;
+    margin-bottom:10px;
+    &:hover,&:active,&:focus{
+      background-color:#686868;
+    }
+    .text{
+      flex:1;
+    }
+    .sub-text{
+      font-size:80%;
+      opacity:0.7;
+    }
+    .sub-tags{
+      display: flex;
+      .sub-tag-item{
+        background-color:#00FF00;
+        padding:2px;
+        font-size:60%;
+        margin-right:3px;
+        border-radius:2px;
+        color:#000000;
+        line-height:1em;
+      }
+      .sub-tag-item:first-child{
+        margin-left:0;
+      }
+    }
+    .extra{
+      font-size:80%;
+      opacity:0.7;
+    }
+  }
+}