@cniot/android-pda-components 0.2.20 → 0.2.21

package/packages/SimpleCard/doc.jsx

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+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>
+  );
+}

package/packages/SubCard/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './index.less';
+export default function SubCard(props){
+  const {title, context, name, tag, attrs = [], style} = props
+  return <div className="android-sub-card" style={style}>
+    <div className="android-sub-card-title-section">
+      <div className="android-sub-card-title">{title}</div>
+      {
+        tag ? <div className="android-sub-card-tag">
+          <div className={tag.type}>
+            {tag.label || ""}
+          </div>
+        </div> : null
+      }
+    </div>
+    <div className="android-sub-card-context">{context}</div>
+    {
+      name ? <div className="android-sub-card-name">{name}</div> : null
+    }
+    <div className="android-sub-card-attrs">
+      {
+        attrs.map((text)=>{
+          return <div key={text}>{text}</div>
+        })
+      }
+    </div>
+  </div>;
+}

package/packages/SubCard/index.less

@@ -0,0 +1,64 @@
+.android-sub-card{
+  background: #282828;
+  border-radius: 16px;
+  padding:10px;
+  color: #FFFFFF;
+  .android-sub-card-title-section {
+    display: flex;
+    justify-content: space-between;
+    .android-sub-card-title{
+      opacity: 0.6;
+      font-size: 32px * 0.666;
+    }
+    .android-sub-card-tag {
+      margin-bottom: 0;
+
+      &>div {
+          padding: 6px 10px;
+          border-radius: 4px;
+          background-color: #0091EA;
+          color: #fff;
+          font-size: 24px * 0.666;
+          line-height: 24px * 0.666;
+      }
+      &>div.success {
+          background-color: #00FF00;
+      }
+      &>div.warning {
+          background-color: #FFCC00;
+          color: #000;
+      }
+      &>div.error {
+          background-color: #FF0000;
+      }
+  }
+  }
+
+  .android-sub-card-context{
+    font-size: 60px;
+    line-height: 60px;
+    font-weight: bold;
+    // margin: -6px 0 -6px 0;
+    word-break: break-all;
+    word-wrap: break-word;
+    margin-top: 16px;
+  }
+
+  .android-sub-card-name {
+    font-size: 40px;
+    line-height: 40px;
+    font-weight: bold;
+    margin-top: 16px;
+    margin-bottom: 12px;
+  }
+
+  .android-sub-card-attrs{
+    // opacity: 0.6;
+    font-size: 32px;
+    line-height: 32px;
+    color: #999999;
+    &>div {
+      margin-top: 12px;
+    }
+  }
+}

package/packages/Tag/doc.jsx

@@ -0,0 +1,47 @@
+import React, {useState} from "react";
+import Tag from "./index";
+
+export default function () {
+  return (
+    <div>
+      <h1>Tag</h1>
+      <p>标签</p>
+      <h2>示例</h2>
+      <div className="light-block">
+        <Tag />
+        <Tag label='warning' type='warning'/>
+      </div>
+      <code className="code">{`
+<Tag />
+<Tag label='warning' type='warning'/>
+      `}</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>label</td>
+            <td>label</td>
+            <td>string</td>
+            <td>label</td>
+
+
+          </tr>
+          <tr>
+            <td>type</td>
+            <td>类型</td>
+            <td>success | warning | error</td>
+            <td>success</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/Tag/index.jsx

@@ -0,0 +1,12 @@
+import React, {useState, useEffect} from "react";
+import "./index.less";
+import classNames from "classnames";
+
+export default function Tag (props) {
+  const { className=undefined, label='label', type='success' } = props;
+  return (
+    <div className={classNames({[className]: true, 'pda-tag': true, ['pda-tag-'+type]: true})}>
+      {label}
+    </div>
+  )
+}

package/packages/Tag/index.less

@@ -0,0 +1,22 @@
+.pda-tag {
+  display: inline-block;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background-color: #0091ea;
+  margin-bottom: 12px;
+  margin-right: 12px;
+
+  font-size: 24px;
+  line-height: 24px;
+
+  word-break: keep-all;
+  &.pda-tag-success {
+    background-color: #00ff00;
+  }
+  &.pda-tag-warning {
+    background-color: #ffcc00;
+  }
+  &.pda-tag-error {
+    background-color: #ff0000;
+  }
+}

package/packages/TaskCard/doc.jsx

@@ -0,0 +1,151 @@
+import React from "react";
+import ListItem from "./index";
+export default function () {
+  return (
+    <div>
+      <h1>ListItem</h1>
+      <p>扫码组件</p>
+      <h2>示例</h2>
+      {/* const { className, header, highlightText, highlightSubText, stateTextList = [], stateList=[], subInfoList = [], style={} } = this.props; */}
+      <div className="light-block" style={{display: 'flex', flexDirection: 'row'}}>
+        <ListItem
+          onClick={
+            e => {
+              console.log(123);
+            }
+          }
+          // header="任务单"
+          highlightText="c5058f90218443bf857bc1e6c0b72aef"
+          highlightSubText="30%"
+          icon="next"
+          stateTextList={[
+            {label: '状态1'},
+            {label: '状态2'},
+            {label: '状态2'},
+          ]}
+          stateList={[
+            {label: 'success', type: 'success'},
+            {label: 'default', },
+            {label: 'warning', type: 'warning'},
+            {label: 'error', type: 'error'},
+          ]}
+          subInfoList={
+            [
+              {label: '商品条码', content: '623126388798'},
+              {label: '截止日期', content: '2022-07-25'},
+              {label: '产品名称', content: '商品的名称'},
+              {label: '品号', content: '12398765423'},
+              {label: '仓库', content: '12398000032432432423400000765423'},
+            ]
+          }
+          onHeightLightClick={()=> {
+            console.log('heightlight click!')
+          }}
+          onIconClick={()=> {
+            console.log('icon click!')
+          }}
+          style={{
+            width: '432px',
+            marginRight: '32px',
+            backgroundColor: 'black'
+          }}
+        />
+      </div>
+      <code className="code">{`
+<ListItem
+  header="任务单"
+  highlightText="XXXX-XX-XXX"
+  highlightSubText="30%"
+  icon="next"
+  stateTextList={[
+    {label: '状态1'},
+    {label: '状态2'},
+    {label: '状态2'},
+  ]}
+  stateList={[
+    {label: 'success', type: 'success'},
+    {label: 'default', },
+    {label: 'warning', type: 'warning'},
+    {label: 'error', type: 'error'},
+  ]}
+  onIconClick={()=> {
+    console.log('icon click!')
+  }}
+  onHeightLightClick={()=> {
+    console.log('heightlight click!')
+  }}
+  subInfoList={
+    [
+      {label: '商品条码', content: '623126388798'},
+      {label: '截止日期', content: '2022-07-25'},
+      {label: '产品名称', content: '商品的名称'},
+      {label: '品号', content: '12398765423'},
+      {label: '仓库', content: '12398000000000765423'},
+    ]
+  }
+/>
+      `}</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>header</td>
+            <td>标题</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>icon</td>
+            <td>右上方icon</td>
+            <td>string: next</td>
+            <td>暂时只支持 next</td>
+          </tr>
+          <tr>
+            <td>onHeightLightClick</td>
+            <td>HeightLight文本点击事件</td>
+            <td>()=></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>onIconClick</td>
+            <td>右上方icon点击事件</td>
+            <td>()=></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>highlightText</td>
+            <td>高亮文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>highlightSubText</td>
+            <td>高亮副文本</td>
+            <td>string</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>stateTextList</td>
+            <td>状态列表</td>
+            <td>object[]</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>subInfoList</td>
+            <td>更多商品信息</td>
+            <td>object[]</td>
+            <td></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}