@cniot/android-pda-components 0.2.30 → 0.2.32

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

package/packages/PdaSteps/doc.jsx

@@ -1,131 +0,0 @@
-import React from "react";
-import Steps from "./index";
-
-const { Step } = Steps;
-
-// const Step = Steps.step
-
-export default function () {
-  return (
-    <div>
-      <h1>Steps</h1>
-      <p>步骤条组件</p>
-      <h2>示例</h2>
-      {/* const { className, title, highlightInfo, highlightInfoCN, highlightSubInfo, highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props; */}
-      <div className="light-block" style={{display: 'flex', flexDirection: 'row'}}>
-        <Steps current={0} style={{
-            marginRight: '32px',
-          }}>
-          <Step title="扫描中" infoList={
-            [
-              {label: '商品条码', content: '623126388798'},
-              {label: '截止日期', content: '2022-07-25'},
-              {label: '产品名称', content: '商品的名称'},
-              {label: '品号', content: '12398765423'},
-            ]
-          } />
-          <Step title="已生产" infoList={
-            [
-              {label: '商品条码', content: '623126388798'},
-              {label: '截止日期', content: '2022-07-25'},
-              {label: '产品名称', content: '商品的名称'},
-              {label: '品号', content: '12398765423'},
-            ]
-          } />
-        </Steps>
-        <Steps current={1}>
-          <Step title="扫描中" infoList={
-            [
-              {label: '商品条码', content: '623126388798'},
-              {label: '截止日期', content: '2022-07-25'},
-              {label: '产品名称', content: '商品的名称'},
-              {label: '品号', content: '12398765423'},
-            ]
-          } />
-          <Step title="已生产" infoList={
-            [
-              {label: '商品条码', content: '623126388798'},
-              {label: '截止日期', content: '2022-07-25'},
-              {label: '产品名称', content: '商品的名称'},
-              {label: '品号', content: '12398765423'},
-            ]
-          } />
-          <Step title="待扫描" infoList={
-            [
-              {label: '商品条码', content: '623126388798'},
-              {label: '截止日期', content: '2022-07-25'},
-              {label: '产品名称', content: '商品的名称'},
-              {label: '品号', content: '12398765423'},
-            ]
-          } />
-        </Steps>
-      </div>
-      <code className="code">{`
-<Steps current={0} style={{
-  marginRight: '32px',
-}}>
-  <Step title="扫描中" infoList={
-    [
-      {label: '商品条码', content: '623126388798'},
-      {label: '截止日期', content: '2022-07-25'},
-      {label: '产品名称', content: '商品的名称'},
-      {label: '品号', content: '12398765423'},
-    ]
-  } />
-  <Step title="已生产" infoList={
-    [
-      {label: '商品条码', content: '623126388798'},
-      {label: '截止日期', content: '2022-07-25'},
-      {label: '产品名称', content: '商品的名称'},
-      {label: '品号', content: '12398765423'},
-    ]
-  } />
-</Steps>
-      `}</code>
-      <h2>Steps 参数</h2>
-      <table className="pure-table pure-table-bordered">
-        <thead>
-          <tr>
-            <th>属性</th>
-            <th>说明</th>
-            <th>类型</th>
-            <th>默认值</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>current</td>
-            <td>当前节点</td>
-            <td>number</td>
-            <td>0</td>
-          </tr>
-        </tbody>
-      </table>
-      <h2>Steps.Step 参数</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>infoList</td>
-            <td>更多信息</td>
-            <td>object[]</td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/packages/PdaSteps/index.jsx

@@ -1,5 +0,0 @@
-import Steps from './PdaSteps';
-import Step from './PdaStep';
-
-export { Step };
-export default Steps;

package/packages/PdaTitle/doc.jsx

@@ -1,102 +0,0 @@
-import React from "react";
-import Title from "./index";
-import Button from '../Button';
-export default function () {
-  return (
-    <div>
-      <h1>Title</h1>
-      <p>废弃-推荐用Header</p>
-      <h2>示例</h2>
-      <div className="dark-block">
-      {/* const { className, goBack = true, icon="scan", title="任务", more=false } = this.props; */}
-        <Title
-          title='hello world'
-          goBackHandle={() => {
-            console.log('go back');
-          }}
-        />
-        <Title
-          icon='read'
-          title='hello world'
-        ></Title>
-        <Title
-          icon='select'
-          title='hello world'
-          menus={
-            <>
-              <Button>按钮</Button>
-              <Button type='primary' onClick={e => console.log(e) }>确认</Button>
-              <Button type='dark'>深色</Button>
-            </>
-          }
-          onClickMenuItem={console.log}
-        ></Title>
-      </div>
-      <code className="code">{`
-        <Title
-          title='hello world'
-          icon='read'
-          goBackHandle={() => {
-            console.log('go back');
-          }}
-          menuList = {
-            <>
-              <Button>按钮</Button>
-              <Button type='primary' onClick={e => console.log(e) }>确认</Button>
-              <Button type='dark'>深色</Button>
-            </>
-          }
-        />
-      `}</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>goBack</td>
-            <td>返回按钮</td>
-            <td>boolean</td>
-            <td>true</td>
-          </tr>
-          <tr>
-            <td>goBackHandle</td>
-            <td>返回按钮点击处理</td>
-            <td>function</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>icon</td>
-            <td>title 图标</td>
-            <td>string: scan | select | read</td>
-            <td>scan</td>
-          </tr>
-          <tr>
-            <td>title</td>
-            <td>标题</td>
-            <td>string</td>
-            <td></td>
-          </tr>
-          <tr>
-            <td>more(废弃，使用 menuList)</td>
-            <td>更多(废弃，使用 menuList)</td>
-            <td>boolean</td>
-            <td>false</td>
-          </tr>
-          <tr>
-            <td>menuList</td>
-            <td>弹出菜单列表</td>
-            <td></td>
-            <td></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  );
-}