@cniot/android-pda-components 0.2.20 → 0.2.21

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

package/packages/PdaFinishCard/doc.jsx

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

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

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

package/packages/PdaInfiniteScroll/doc.jsx

@@ -0,0 +1,121 @@
+import React from "react";
+import InfiniteScroll from "./index";
+import { List } from "..";
+
+
+const dataSource = [{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"11111",
+  tags:[1,2,3,4]
+},{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"",
+  tags:[1,2,3,4]
+},{
+  title: "hello world",
+  subTitle:"sub title",
+},{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"11111",
+}];
+
+export default function () {
+  return (
+    <div>
+      <h1>InfiniteScroll</h1>
+      <p>滚动加载组件</p>
+      <h2>示例</h2>
+      <div className="light-block">
+        <div style={{
+              width: '432px',
+              height: '425px',
+              overflow: 'scroll'
+            }}>
+          <List 
+            onItemClick={console.log} 
+            tabIndex={0} 
+            dataSource={dataSource}
+          >
+          </List>
+            <InfiniteScroll
+              hasMore={true}
+              loadMore={() => {console.log("loadMore!")}}
+            />
+          </div>
+      </div>
+      <code className="code">{`
+
+const dataSource = [{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"11111",
+  tags:[1,2,3,4]
+},{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"",
+  tags:[1,2,3,4]
+},{
+  title: "hello world",
+  subTitle:"sub title",
+},{
+  title: "hello world",
+  subTitle:"sub title",
+  extra:"11111",
+}];
+
+<div style={{
+  width: '432px',
+  height: '425px',
+  overflow: 'scroll'
+}}>
+
+  <List 
+    onItemClick={console.log} 
+    tabIndex={0} 
+    dataSource={dataSource}
+  >
+  </List> 
+  <InfiniteScroll
+    hasMore={true}
+    loadMore={() => {console.log("loadMore!")}}
+  />
+</div>
+      `}</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>hasMore</td>
+            <td>是否还有更多</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+          <tr>
+            <td>loadMore</td>
+            <td>更多加载方法，当 hasMore 是 true 且拉到底部时会调用该方法</td>
+            <td>()=></td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>threshold</td>
+            <td>阈值，底部距离页面多少的时候调用 loadMore 方法</td>
+            <td>number</td>
+            <td>0</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/PdaInfiniteScroll/index.jsx

@@ -0,0 +1,114 @@
+import React, {useEffect, useRef} from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+import classNames from "classnames";
+import usePersistFn from 'ahooks/es/usePersistFn';
+import useLockFn from 'ahooks/es/useLockFn';
+import { getScrollParent } from './utils'
+
+function Loading (props) {
+  return  <div
+    style={{
+      color: props.color || '#999'
+    }}
+  >
+    <svg
+      height='1em'
+      viewBox='0 0 100 40'
+      style={{ verticalAlign: '-0.125em' }}
+    >
+      <g stroke='none' strokeWidth='1' fill='none' fillRule='evenodd'>
+        <g transform='translate(-100.000000, -71.000000)'>
+          <g transform='translate(95.000000, 71.000000)'>
+            <g transform='translate(5.000000, 0.000000)'>
+              {[0, 1, 2].map(i => (
+                <rect
+                  key={i}
+                  fill='currentColor'
+                  x={20 + i * 26}
+                  y='16'
+                  width='8'
+                  height='8'
+                  rx='2'
+                >
+                  <animate
+                    attributeName='y'
+                    from='16'
+                    to='16'
+                    dur='2s'
+                    begin={`${i * 0.2}s`}
+                    repeatCount='indefinite'
+                    values='16; 6; 26; 16; 16'
+                    keyTimes='0; 0.1; 0.3; 0.4; 1'
+                    id='circ-anim'
+                  />
+                </rect>
+              ))}
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  </div>
+}
+
+function isWindow(element) {
+  return element === window;
+}
+
+export default function InfiniteScroll (props) {
+  const { className, hasMore, loadMore, threshold = 0, style } = props;
+  const doLoadMore = useLockFn(async () => {
+    await loadMore();
+  })
+
+  const elementRef = useRef(null);
+
+  const check = usePersistFn(() => {
+    if (!hasMore) return;
+    const element = elementRef.current;
+    if (!element) return;
+    const parent = getScrollParent(element);
+    if (!parent) return;
+    const elementTop = element.getBoundingClientRect().top;
+    const current = isWindow(parent) ? window.innerHeight : parent.getBoundingClientRect().bottom;
+    if (current >= elementTop - threshold) {
+      doLoadMore();
+    }
+  })
+
+  // 确保在内容不足时会自动触发加载事件
+  useEffect(() => {
+    check();
+  })
+
+  useEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const parent = getScrollParent(element);
+    if (!parent) return;
+    function onScroll() {
+      check();
+    }
+    parent.addEventListener('scroll', onScroll);
+    return () => {
+      parent.removeEventListener('scroll', onScroll)
+    }
+  }, [])
+
+  return (
+    <div className={classNames({[className]: true, "pda-infinite-scroll": true})} style={style} ref={elementRef}>
+      {hasMore ? (
+        <div className="pda-infinite-scroll-view">
+          <span>加载中</span>
+          <Loading />
+        </div>
+      ) : (
+        <div className="pda-infinite-scroll-view">
+          <span>没有更多了~</span>
+        </div>
+      )}
+    </div>
+  )
+}
+

package/packages/PdaInfiniteScroll/index.less

@@ -0,0 +1,12 @@
+.pda-infinite-scroll {
+    margin-top: 10px;
+
+    span {
+        color: #999;
+    }
+    .pda-infinite-scroll-view {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}

package/packages/PdaInfiniteScroll/utils.jsx

@@ -0,0 +1,25 @@
+
+const overflowScrollReg = /scroll|auto/i;
+
+function isElement(node) {
+  const ELEMENT_NODE_TYPE = 1;
+  return (
+    node.tagName !== 'HTML' &&
+    node.tagName !== 'BODY' &&
+    node.nodeType === ELEMENT_NODE_TYPE
+  )
+}
+
+export function getScrollParent(el, root) {
+  let node = el;
+
+  while (node && node !== root && isElement(node)) {
+    const { overflowY } = window.getComputedStyle(node);
+    if (overflowScrollReg.test(overflowY)) {
+      return node;
+    }
+    node = node.parentNode;
+  }
+
+  return root;
+}

package/packages/PdaSteps/PdaStep/index.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+import classNames from "classnames";
+
+export default class PdaInfoCard extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const { className, title, isActive, infoList = [], style={}, index, isLast } = this.props;
+
+    return (
+      <div className={classNames({[className]: true, "pda-step-card": true})} style={style}>
+        <div className="pda-step-indictor">
+          <div className={classNames({"pda-step-indictor-top": true, "pda-step-indictor-top-hidden": index === 0})}></div>
+          <div className={classNames({"pda-step-indictor-center": true, "pda-step-indictor-center-active": isActive})}></div>
+          <div className={classNames({"pda-step-indictor-bottom": true, "pda-step-indictor-bottom-hidden": isLast})}></div>
+        </div>
+        <div className={classNames({ 'pda-step': true, 'pda-step-dark': !isActive})}>
+          <div className="pda-step-title">{title}</div>
+          {
+            infoList.map((item, index) => {
+              return (
+                <div key={index} className="pda-step-list">
+                  <span>{item.label || ''}</span>
+                  &nbsp;&nbsp;
+                  <span>{item.content || ''}</span>
+                </div>
+              )
+            })
+          }
+        </div>
+      </div>
+    )
+  }
+}