@cniot/android-pda-components 0.2.17 → 0.2.21

package/packages/Overlay/doc.jsx

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

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

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

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

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

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

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

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

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