@cniot/android-pda-components 0.2.30 → 0.2.32

package/packages/PdaActionSheet/doc.jsx

@@ -1,193 +0,0 @@
-import React, { useState } from "react";
-import ActionSheet from "./index";
-import Button from "../Button"
-export default function () {
-  const [visible, setVisible] = useState(false);
-  return (
-    <div>
-      <h1>ActionSheet</h1>
-      <p>弹窗组件</p>
-      <h2>示例</h2>
-      <div className="light-block">
-        <div style={{ height: "600px", width: "300px", position: "relative", backgroundColor: "#fff", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
-          <Button type="dark" style={{ margin: '12px' }} onClick={() => { setVisible(!visible) }}>切换模式</Button>
-          <ActionSheet
-            visible={visible}
-            infiniteScroll={{
-              hasMore: true,
-              loadMore: () => {console.log("loadMore!")}
-            }}
-            actions={[
-              {
-                key: "total",
-                title: "切换为整箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "seperate",
-                title: "切换为散箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "cancel",
-                title: "取消",
-                onClick: () => {
-                  setVisible(false)
-                }
-              },
-              {
-                key: "total",
-                title: "切换为整箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "seperate",
-                title: "切换为散箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "cancel",
-                title: "取消",
-                onClick: () => {
-                  setVisible(false)
-                }
-              },
-              {
-                key: "total",
-                title: "切换为整箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "seperate",
-                title: "切换为散箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "cancel",
-                title: "取消",
-                onClick: () => {
-                  setVisible(false)
-                }
-              },
-              {
-                key: "total",
-                title: "切换为整箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "seperate",
-                title: "切换为散箱识别",
-                onClick: () => { }
-              },
-              {
-                key: "cancel",
-                title: "取消",
-                onClick: () => {
-                  setVisible(false)
-                }
-              },
-            ]}
-            stickyToBottomActions={[
-              {
-                key: "cancel",
-                title: "取消",
-                onClick: () => {
-                  setVisible(false)
-                }
-              },
-              {
-                key: "cancel",
-                title: "取消",
-                onClick: () => {
-                  setVisible(false)
-                }
-              },
-            ]}
-          />
-        </div>
-      </div>
-      <code className="code">{`
-<div style={{height: "600px", width: "300px",  position: "relative", backgroundColor: "#fff", display: "flex", alignItems: "flex-end"}}>
-<Button type="dark" style={{margin: '12px'}} onClick={() => {setVisible(!visible)}}>切换模式</Button>
-<ActionSheet
-  visible = {visible}
-  actions = {[{
-    key: "total",
-    title: "切换为整箱识别",
-    onClick: () => {}
-  }, {
-    key: "seperate",
-    title: "切换为散箱识别",
-    onClick: () => {}
-  }, {
-    key: "cancel",
-    title: "取消",
-    onClick: () => {
-      setVisible(false)
-    }
-  }]}
-  infiniteScroll={{
-    hasMore: true,
-    loadMore: () => {console.log("loadMore!")}
-  }}
-  stickyToBottomActions={[
-    {
-      key: "cancel",
-      title: "取消",
-      onClick: () => {
-        setVisible(false)
-      }
-    },
-    {
-      key: "cancel",
-      title: "取消",
-      onClick: () => {
-        setVisible(false)
-      }
-    },
-  ]}
-/>
-      `}</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>visible</td>
-            <td>是否显示</td>
-            <td>boolean</td>
-            <td>false</td>
-
-
-          </tr>
-          <tr>
-            <td>actions</td>
-            <td>操作列表</td>
-            <td>object[]</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>stickyToBottomActions</td>
-            <td>吸底操作列表</td>
-            <td>object[]</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>infiniteScroll</td>
-            <td>是否下拉加载更多</td>
-            <td>{JSON.stringify({})}</td>
-            <td><a href="/#InfiniteScroll">参考 InfiniteScroll</a></td>
-          </tr>
-
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/PdaActionSheet/index.jsx

@@ -1,44 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./index.less";
-import classNames from "classnames";
-import InfiniteScroll from "../PdaInfiniteScroll";
-
-export default function ActionSheet(props) {
-  const { className = "", visible, actions = [], stickyToBottomActions = [], stickyToBottomDirection = 'column', infiniteScroll = null, } = props;
-
-  return (
-    <div className={classNames({ [className]: true, 'action-sheet': true, 'show': visible })} >
-      <div className="action-sheet-container">
-        {/* {
-          actions.length > 0 ? (
-
-          ) : null
-        } */}
-        <div className="action-sheet-body">
-          {
-            actions.map((item, index) => {
-              return <div onClick={() => { item.onClick(item.key) }} className="action-sheet-item" key={index}>{item.title}</div>
-            })
-          }
-          {
-            infiniteScroll ? (
-              <InfiniteScroll {...infiniteScroll} />
-            ) : null
-          }
-        </div>
-        {
-          stickyToBottomActions.length > 0 ? (
-            <div className={classNames({"action-sheet-sticky-bottom": true, ['action-sheet-sticky-bottom-' + stickyToBottomDirection]: true})}>
-              {
-                stickyToBottomActions.map((item, index) => {
-                  return <div onClick={() => { item.onClick(item.key) }} className="action-sheet-item" key={index}>{item.title}</div>
-                })
-              }
-            </div>
-          ) : null
-        }
-
-      </div>
-    </div>
-  )
-}

package/packages/PdaActionSheet/index.less

@@ -1,65 +0,0 @@
-.action-sheet {
-  position: absolute;
-  z-index: 1000;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.35);
-  display: none;
-  .action-sheet-container {
-    position: absolute;
-    background-color: #ffffff;
-    z-index: 1010;
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    max-height: 80%;
-    border-radius: 15px * 0.66 15px * 0.66 0 0;
-    padding-bottom: 16px * 0.66;
-    display: flex;
-    flex-direction: column;
-
-    .action-sheet-body {
-      flex: 1;
-      overflow-y: auto;
-    }
-    .action-sheet-sticky-bottom {
-      border-top: 2px solid #F2F2F2;
-    }
-
-    .action-sheet-item {
-      margin: 16px * 0.66 24px * 0.66 0 24px * 0.66;
-      background-color: #f3f4f8;
-      height: 54px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 24px;
-      border-radius: 15px * 0.66;
-    }
-
-    .action-sheet-sticky-bottom-row {
-      display: flex;
-      &>* {
-        // width: ;
-      }
-    }
-  }
-
-  &.show {
-    display: block;
-    .action-sheet-container {
-      animation: slide-in 0.3s ease-out;
-    }
-  }
-}
-
-@keyframes slide-in {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-}

package/packages/PdaDistanceCard/doc.jsx

@@ -1,62 +0,0 @@
-import React from "react";
-import DistanceCard from "./index";
-export default function () {
-  return (
-    <div>
-      <h1>DistanceCard</h1>
-      <p>距离组件</p>
-      <h2>示例</h2>
-      <div className="light-block" style={{display: 'flex', flexDirection: 'row'}}>
-        <DistanceCard
-          title="货物在附近.."
-          infoText="离目标货距离"
-          style={{
-            width: '400px'
-          }}
-          percentage={0.56}
-        />
-      </div>
-      <code className="code">{`
-<DistanceCard
-  title="货物在附近.."
-  infoText="离目标货距离"
-  style={{
-    width: '400px'
-  }}
-  percentage={0.56}
-/>
-      `}</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>infoText</td>
-            <td>提示文本</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>percentage</td>
-            <td>进度条百分比</td>
-            <td>number</td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/PdaDistanceCard/index.jsx

@@ -1,35 +0,0 @@
-import React from "react";
-import "./index.less";
-import classNames from "classnames";
-
-export default class PdaDistanceCard extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { className, title, infoText, percentage = 0,  style={} } = this.props;
-    const distanceImg= 'https://img.alicdn.com/imgextra/i3/O1CN01EFksWL1DBZCu0H1JH_!!6000000000178-2-tps-21-30.png'
-    const indictorImg= 'https://img.alicdn.com/imgextra/i1/O1CN01YEhCSg1aObe8UZq7K_!!6000000003320-2-tps-379-17.png'
-
-    return (
-      <div className={classNames({[className]: true, 'pda-distance-card': true})} style={style}>
-        <p className="pda-distance-card-highlight">
-          <span className="pda-distance-card-highlight1">{title}</span>
-        </p>
-        <div className="pda-distance-indictor">
-          <img src={distanceImg} width={20} height={29} />
-          <p>{infoText}</p>
-        </div>
-        <div className="pda-distance-card-progress">
-          <div className="pda-distance-card-progress-inside" style={{width: `${percentage * 100}%`}}/>
-          <img className="pda-distance-card-progress-indictor" src={indictorImg} />
-        </div>
-        <div className="pda-distance-label">
-          <p>远</p>
-          <p>近</p>
-        </div>
-      </div>
-    )
-  }
-}

package/packages/PdaDistanceCard/index.less

@@ -1,42 +0,0 @@
-.pda-distance-card {
-    border-radius: 16px;
-    padding: 36px 16px;
-    background-color: #fff;
-    & p {
-        margin: 0;
-        font-size: 28px;
-        color: #738399;
-    }
-    .pda-distance-card-highlight {
-        font-size: 60px;
-        line-height: 64px;
-        color: #0091EA;
-    }
-    .pda-distance-indictor {
-        margin-top: 36px;
-        display: flex;
-    }
-    .pda-distance-card-progress {
-        background-color: #EBECF2;
-        height: 34px;
-        border-radius: 6px;
-        border: 4px solid #D9D9D9;
-        margin-top: 8px;
-        position: relative;
-
-        .pda-distance-card-progress-indictor{
-            position: absolute;
-            bottom: 0;
-            left: 5px;
-        }
-        .pda-distance-card-progress-inside {
-            background-color: #0091EA;
-            height: 26px;
-            border-radius: 6px 0px 0px 6px;
-        }
-    }
-    .pda-distance-label {
-        display: flex;
-        justify-content: space-between;
-    }
-}

package/packages/PdaFinishCard/doc.jsx

@@ -1,111 +0,0 @@
-import React from "react";
-import FinishCard from "./index";
-export default function () {
-  return (
-    <div>
-      <h1>FinishCard</h1>
-      <p> 完成组件</p>
-      <h2>示例</h2>
-      <div className="dark-block" style={{display: 'flex', flexDirection: 'row', position: 'relative', width: 480, height: 800}}>
-        <FinishCard
-          title="更换栈板码完成"
-          isError
-          infoList={
-            [
-              {label: '新栈板码：', content: '234982093'},
-              {label: '新栈板码：', content: '23498209323498209123'},
-              {label: '原栈板码：', content: '234982093'},
-            ]
-          }
-          okText="返回首页"
-          onClick={(isConfirm)=>{
-            console.log("isConfirm", isConfirm);
-          }}
-        />
-      </div>
-      <div className="dark-block" style={{display: 'flex', flexDirection: 'row', position: 'relative', width: 480, height: 800}}>
-        <FinishCard
-          title="更换栈板码完成更换栈板码完成更换栈板码完成"
-          infoList={
-            [
-              {label: '新栈板码：', content: '234982093'},
-              {label: '原栈板码：', content: '234982093'},
-            ]
-          }
-          buttonMultiLines
-          okText="返回首页"
-          cancelText={<span>返回<br />暂存任务</span>}
-          onClick={(isConfirm)=>{
-            console.log("isConfirm", isConfirm);
-          }}
-        />
-      </div>
-      <code className="code">{`
-        <FinishCard
-        title="更换栈板码完成"
-        infoList={
-          [
-            {label: '新栈板码：', content: '234982093'},
-            {label: '原栈板码：', content: '234982093'},
-          ]
-        }
-        buttonMultiLines
-        okText="返回首页"
-        cancelText={<span>返回<br />暂存任务</span>}
-        onClick={(isConfirm)=>{
-          console.log("isConfirm", isConfirm);
-        }}
-      />
-      `}</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>isError</td>
-            <td>是否异常完成</td>
-            <td>Boolean</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>infoList</td>
-            <td>更多信息</td>
-            <td>object[]</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>okText</td>
-            <td>确认按钮文本</td>
-            <td>string</td>
-            <td>返回首页</td>
-          </tr>
-          <tr>
-            <td>buttonMultiLines</td>
-            <td>按钮是否多行</td>
-            <td>boolean</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>onClick</td>
-            <td>按钮点击回调</td>
-            <td>(isConfirm) => </td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/PdaFinishCard/index.jsx

@@ -1,62 +0,0 @@
-import React from "react";
-// import OPInput from "../OPInput";
-import "./index.less";
-import classNames from "classnames";
-import BaseLayout from '../BaseLayout'
-import Button from "../Button";
-import { playSound } from "../utils";
-
-export default class PdaFinishCard extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  componentDidMount() {
-    if(this.props.isError) {
-      playSound('success3');
-    } else {
-      playSound('success2');
-    }
-  }
-
-  render() {
-    const { className, title, infoList = [], isError=false, buttonMultiLines = false, style={}, onClick=()=>{}, okText="返回首页", cancelText = null } = this.props;
-    const footer = (
-        <Button.Group>
-          {
-            cancelText ? <Button style={buttonMultiLines ? {height: "auto", lineHeight: "50px"} : {}} type='dark' onClick={()=> onClick(false)}>{cancelText}</Button> : null
-          }
-          <Button type="primary" style={buttonMultiLines ? {height: "auto", lineHeight: "normal"} : {}} onClick={()=> onClick(true)}>{okText}</Button>
-        </Button.Group>
-    )
-
-    return (
-      <BaseLayout
-        footer={footer}
-      >
-        <div className="pda-finish-card-top">
-        <img
-          className="pda-finish-card-img"
-          // width={isError? 370 : 400}
-          // height={269}
-          src={isError ? PdaFinishCard.ERROR_SUCCESS : PdaFinishCard.SUCCESS}
-        />
-        <p className="pda-finish-card-title">{title}</p>
-        {
-          infoList.map((item, index) => {
-            return (
-              <p key={index} className="pda-finish-card-list">
-                <span>{item.label || ''}</span>
-                <span>{item.content || ''}</span>
-              </p>
-            )
-          })
-        }
-        </div>
-      </BaseLayout>
-    )
-  }
-}
-
-// PdaFinishCard.SUCCESS="https://img.alicdn.com/imgextra/i2/O1CN01yYwwSx1uNV0M1gHlQ_!!6000000006025-1-tps-630-436.gif"
-PdaFinishCard.SUCCESS="https://img.alicdn.com/imgextra/i3/O1CN01OL2UYg24792knbTtC_!!6000000007343-1-tps-506-415.gif"
-PdaFinishCard.ERROR_SUCCESS="https://img.alicdn.com/imgextra/i3/O1CN01p5Oc5t1VMFWtBomQc_!!6000000002638-1-tps-600-456.gif"

package/packages/PdaFinishCard/index.less

@@ -1,62 +0,0 @@
-// .pda-finish-card {
-//     display: flex;
-//     flex-direction: column;
-//     align-items: center;
-//     justify-content: space-between;
-//     padding: 24px;
-//     background-color: #000;
-//     & p {
-//         margin: 0;
-//     }
-//     .pda-finish-card-top{
-//         display: flex;
-//         flex-direction: column;
-//         align-items: center;
-//         .pda-finish-card-img {
-//             margin-top: 60px;
-//         }
-//         .pda-finish-card-title {
-//             font-size: 32px;
-//             color: #fff;
-//             font-weight: 500;
-//             margin-bottom: 16px;
-//         }
-//     }
-
-//     .pda-finish-card-list {
-//         margin-top: 16px;
-//         color: #FFFFFF80;
-//         font-size: 32px;
-//         line-height: 32px;
-//     }
-// }
-.pda-finish-card-top {
-    // height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    color: white;
-
-    .pda-finish-card-img {
-        width: 100%;
-        // margin-top: 100px;
-        margin: 50px auto 0;
-    }
-
-    .pda-finish-card-title {
-        font-size: 50px;
-        line-height: 50px;
-        color: #fff;
-        font-weight: 500;
-        margin-bottom: 16px;
-        text-align: center;
-    }
-    .pda-finish-card-list {
-        margin-top: 12px;
-        // color: #FFFFFF80;
-        color: #999999;
-        font-size: 32px;
-        line-height: 30px;
-        text-align: center;
-    }
-}