@cniot/android-pda-components 0.2.30 → 0.2.32

package/packages/SubCard/index.jsx

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

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

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

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

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

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

package/packages/TaskCard/index.jsx

@@ -1,65 +0,0 @@
-import React from "react";
-import "./index.less";
-import classNames from "classnames";
-
-export default class PdaListItem extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { className, header, onClick = () => {}, onHeightLightClick = () => {}, onIconClick = () => {}, highlightText, highlightSubText, stateTextList = [], stateList=[], subInfoList = [], style={}, icon } = this.props;
-    return (
-      <div className={classNames({[className]: true, 'pda-list-item': true, })} style={style} onClick={onClick}>
-        {!!header ? <div className="pda-listitem-header">{header}</div> : null}
-        <div onClick={onHeightLightClick} className={classNames({"pda-listitem-highlight": true })}>
-          <div>{highlightText}</div>
-          <div>{highlightSubText}</div>
-        </div>
-        <div className="pda-listitem-state-text">
-          {
-            stateTextList.map((item, index) => {
-              return (
-                <span key={index}>{item.label || ''}｜</span>
-              )
-            })
-          }
-        </div>
-        <div className="pda-listitem-state-block">
-          {
-            stateList.map((item, index) => {
-              // const type = item?.type ? item.type : 'default';
-              const type = (item && item.type) ? item.type : 'default';
-              return (
-                <div key={index} className={type}>
-                  {item.label || ""}
-                </div>
-              )
-            })
-          }
-        </div>
-        {
-          icon ? (
-            <div onClick={onIconClick} className="pda-listitem-icon">
-              <div className={classNames({"listitem-icon-container": true, ["listitem-icon-"+icon]: true})}></div>
-            </div>
-          ) : null
-        }
-        {
-          subInfoList.map((item, index) => {
-            return (
-              <div key={index} className="pda-listitem-subinfo">
-                <span>{item.label || ''}</span>
-                &nbsp;&nbsp;
-                <span>{item.content || ''}</span>
-              </div>
-            )
-          })
-        }
-
-
-        
-      </div>
-    )
-  }
-}

package/packages/TaskCard/index.less

@@ -1,101 +0,0 @@
-.pda-list-item {
-    padding: 24px 16px;
-    border-radius: 16px;
-    & div {
-        margin: 0;
-    }
-    &>div {
-        margin-bottom: 12px;
-    }
-    &>div:last-child {
-        margin-bottom: 0px;
-    }
-    // .pda-listitem-header {
-    //     font-size: 32px;
-    //     line-height: 32px;
-    //     color: #FFFFFF60;
-
-    // }
-    .pda-listitem-highlight {
-        width: 100%;
-        font-size: 40px;
-        line-height: 40px;
-        font-weight: bold;
-        color: #FFFFFF;
-
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        div:first-child {
-            flex: 1;
-            // display: block;
-            word-break: normal;
-            white-space: normal;
-            word-break: break-word;
-            // width: 200px;
-        }
-    }
-    // .pda-listitem-highlight-top{
-    //     margin-top: -8px;
-    // }
-    .pda-listitem-header,
-    .pda-listitem-state-text,
-    .pda-listitem-subinfo {
-        font-size: 32px;
-        line-height: 32px;
-        color: #999999;
-        word-break: break-all;
-    }
-
-    .pda-listitem-state-block {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        margin-bottom: 0;
-
-        &>div {
-            padding: 6px 10px;
-            border-radius: 4px;
-            background-color: #0091EA;
-            margin-bottom: 12px;
-            margin-right: 12px;
-
-            font-size: 24px;
-            line-height: 24px;
-        }
-        &>div.success {
-            background-color: #00FF00;
-        }
-        &>div.warning {
-            background-color: #FFCC00;
-        }
-        &>div.error {
-            background-color: #FF0000;
-        }
-    }
-
-    position: relative;
-    .pda-listitem-icon {
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 60px;
-        height: 60px;
-        background-color: #0091EA;
-        border-radius: 0 16px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        opacity: 0.85;
-    }
-    .listitem-icon-container {
-        background-size: 100%;
-        background-repeat: no-repeat;
-        // background-position: center;
-        width: 16px;
-        height: 24px;
-    }
-    .listitem-icon-next {
-        background-image: url(https://img.alicdn.com/imgextra/i4/O1CN01FkZisA1tCg1sj3b6U_!!6000000005866-2-tps-40-58.png);
-    }
-}

package/packages/Toast/doc.jsx

@@ -1,112 +0,0 @@
-import React from "react";
-import Toast from "./index";
-export default function () {
-  return (
-    <div>
-      <h1>Toast</h1>
-      <p>弹窗组件，如果要悬浮在页面上，请配合 Overlay 使用</p>
-      <h2>示例</h2>
-      <div className="light-block">
-        <button onClick={
-          e => {
-            // console.log(123);
-            Toast.show({
-              type: 'success',
-              title: 'hello title',
-              message: 'hello message',
-              duration: 1000,
-            })
-          }
-        }>
-          点击 toast
-        </button>
-        <Toast
-          title="111111"
-          message="22222"
-          type="success"
-         ></Toast>
-         <br />
-         <Toast
-          title="111111"
-          message="22222"
-          type="warning"
-         ></Toast>
-
-        <br />
-         <Toast
-          title="延时关闭"
-          message="duration={3000}"
-          type="error"
-          duration={3000}
-         ></Toast>
-
-        <br />
-      </div>
-      <code className="code">{`
-        Toast.show({
-          type: 'success',
-          title: 'hello title',
-          message: 'hello message',
-        })
-        <Toast
-          title="111111"
-          message="22222"
-          type="success"
-        ></Toast>
-        <br />
-        <Toast
-          title="111111"
-          message="22222"
-          type="warning"
-        ></Toast>
-
-        <br />
-        <Toast
-          title="延时关闭"
-          message="duration={3000}"
-          type="error"
-          duration={3000}
-        ></Toast>
-      `}</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>message</td>
-            <td>消息内容</td>
-            <td>string</td>
-            <td>消息内容</td>
-          </tr>
-
-          <tr>
-            <td>type</td>
-            <td>消息类型</td>
-            <td>string</td>
-            <td>success|warning|error</td>
-          </tr>
-          <tr>
-            <td>duration</td>
-            <td>延迟时间</td>
-            <td>number</td>
-            <td>单位 ms</td>
-          </tr>
-
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/Toast/index.jsx

@@ -1,7 +0,0 @@
-import Toast from './toast';
-import { show, clear } from './methods';
-
-Toast.show = show;
-Toast.clear = clear;
-
-export default Toast;

package/packages/Toast/index.less

@@ -1,23 +0,0 @@
-@import '../variable.less';
-
-.toast-wrap{
-  background:#00FF00;
-  border-radius:6px;
-  padding:10px 15px;
-  width: 100%;
-  box-sizing: border-box;
-  &.warning{
-    background-color:#FFCB00;
-  }
-  &.error{
-    background-color:#FF0000;
-  }
-  .toast-title{
-    font-size: 50px;
-    font-weight: bold;
-  }
-
-  .toast-message{
-    font-size: 32px;
-  }
-}