@cniot/android-pda-components 0.2.21 → 0.2.25

package/packages/InfoCard/doc.jsx

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

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

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

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

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

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