@cniot/android-pda-components 0.2.21 → 0.2.25

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

package/packages/PdaInfiniteScroll/doc.jsx

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

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

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

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

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

package/packages/PdaSteps/PdaStep/index.less

@@ -1,70 +0,0 @@
-.pda-step-card {
-    display: flex;
-    flex-direction: row;
-    .pda-step-indictor {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin-right: 16px;
-        .pda-step-indictor-top {
-            width: 1px;
-            background-color: #BEC0C6;
-            flex: 1;
-        }
-        .pda-step-indictor-top-hidden {
-            background-color: #FFFFFF00;
-        }
-        .pda-step-indictor-center {
-            height: 24px;
-            width: 24px;
-            border-radius: 12px;
-            background-color: #BEC0C6;
-        }
-        .pda-step-indictor-center-active {
-            background-color: #0091EA;
-        }
-        .pda-step-indictor-bottom {
-            flex: 1;
-            width: 1px;
-            background-color: #BEC0C6;
-        }
-        .pda-step-indictor-bottom-hidden {
-            background-color: #FFFFFF00;
-        }
-    }
-
-}
-
-.pda-step {
-    border-radius: 16px;
-    padding: 24px 16px;
-    & p {
-        margin: 0;
-    }
-    background-color: #FFFFFF;
-    margin-bottom: 16px;
-
-    .pda-step-title {
-        font-size: 60px;
-        color: #0091EA;
-        // margin: 0;
-        // margin-bottom: 16px;
-    }
-    .pda-step-list {
-        margin-top: 8px;
-        color: #4A4A4A;
-        font-size: 32px;
-        line-height: 32px;
-    }
-}
-
-.pda-step.pda-step-dark {
-    background-color: #000;
-    .pda-step-title {
-        color: #FFFFFF;
-    }
-
-    .pda-step-list {
-        color: #BEC0C6;
-    }
-}

package/packages/PdaSteps/PdaSteps/index.jsx

@@ -1,33 +0,0 @@
-import React, {cloneElement} from "react";
-import "./index.less";
-import classNames from "classnames";
-import Step from '../PdaStep'
-
-export default class PdaInfoCard extends React.Component {
-  static Step = Step;
-
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const { className, style={}, theme='light', current = 0, children} = this.props;
-    return (
-      <div className={classNames({[className]: true})} style={style}>
-        {(children || []).map((child, index) => {
-          const childProps = {
-            index,
-            isLast: index === (children || []).length - 1,
-            ...child.props
-          };
-          if (index === current) {
-            childProps.isActive = true;
-          } else {
-            childProps.isActive = false;
-          }
-          return cloneElement(child, childProps);
-        })}
-      </div>
-    )
-  }
-}