@cniot/android-pda-components 0.2.21 → 0.2.25

package/packages/Overlay/doc.jsx

@@ -1,103 +0,0 @@
-import React from "react";
-import Overlay from "./index";
-import Toast from '../Toast/index';
-import Confirm from '../Confirm/index';
-// import './doc.less';
-
-export default function () {
-  return (
-    <div>
-      <h1>Overlay</h1>
-      <p>统一处理模态遮罩样式</p>
-      <h2>示例</h2>
-      <div className="light-block light-block-overlay" >
-        <Overlay verticalPosition="top">
-          <Toast 
-            title="111111" 
-            message="22222"
-            type="success"
-          ></Toast>
-        </Overlay>
-      </div>
-      <br />
-      <div className="light-block light-block-overlay" >
-        <Overlay verticalPosition="center" >
-          <Toast 
-            title="111111" 
-            message="22222"
-            type="warning"
-          ></Toast>
-        </Overlay>
-      </div>
-
-      <br />
-      <div className="light-block light-block-overlay" >
-        <Overlay verticalPosition="bottom" closable={true}>
-          <Confirm 
-            title="111111" 
-            message="22222"
-            type="error"
-          ></Confirm>
-        </Overlay>
-      </div>
-
-      <code className="code">{`
-        <Overlay verticalPosition="top" >
-          <Toast 
-            title="111111" 
-            message="22222"
-            type="success"
-          ></Toast>
-        </Overlay>
-
-        <Overlay verticalPosition="center" >
-          <Toast 
-            title="111111" 
-            message="22222"
-            type="success"
-          ></Toast>
-        </Overlay>
-
-        <Overlay verticalPosition="bottom" >
-          <Toast 
-            title="111111" 
-            message="22222"
-            type="success"
-          ></Toast>
-        </Overlay>
-        
-      `}</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>verticalPosition</td>
-            <td>垂直方向位置</td>
-            <td>string</td>
-            <td>top|center|bottom</td>
-          </tr>
-          <tr>
-            <td>closable</td>
-            <td>点击空白关闭</td>
-            <td>boolean</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>visible</td>
-            <td>可见</td>
-            <td>boolean</td>
-            <td>true</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/Overlay/index.jsx

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from "react";
-import "./index.less";
-
-function getTypeClass(type){
-  return {
-    "center" : "op-overlay center",
-    "top" : "op-overlay top",
-    "bottom" : "op-overlay bottom",
-  }[type] || "op-overlay"
-}
-
-export default function Overlay(props) {
-  const {verticalPosition = "center", visible=true, closable = false, onClosed = () => {}} = props;
-  const [hidden, setHidden] = useState(!visible);
-
-  useEffect(() => {
-    setHidden(!visible);
-    // return () => {
-    //   cleanup
-    // }
-  }, [visible])
-
-  const option = {};
-  if(closable) {
-    option.onClick = e => {
-      setHidden(true);
-      onClosed();
-    };
-  }
-  useEffect(() => {
-    setHidden(!visible);
-  }, [visible])
-
-  return !hidden ? (
-    <div
-      className={getTypeClass(verticalPosition)}
-      {...option}
-    >
-      {props.children}
-    </div>
-  ) : null;
-}

package/packages/Overlay/index.less

@@ -1,28 +0,0 @@
-.op-overlay {
-  top: 0;
-  left: 0;
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  // width: 100vw;
-  // height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: 100;
-
-  &.center{
-    align-items: center;
-    justify-content: center;
-  }
-  &.top{
-    align-items: flex-start;
-    justify-content: center;
-  }
-  &.bottom{
-    align-items: flex-end;
-    justify-content: center;
-  }
-  
-}

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;
-    }
-}