@cniot/android-pda-components 0.2.20 → 0.2.21

package/packages/List/doc.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import List from "./index";
+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>List</h1>
+      <p>列表组件，通常要配合不同的 List Item 来使用</p>
+      <h2>示例</h2>
+      <div className="light-block">
+        <List 
+          onClickItem={console.log} 
+          dataSource={dataSource}
+        >
+        </List>
+      </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",
+        }];
+        <List 
+          onClickItem={console.log} 
+          tabIndex={0} 
+          dataSource={dataSource}
+        >
+        </List>
+      `}</code>
+
+      <h2>List</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>onClickItem</td>
+            <td>Item 点击回调，参数 dataSource[i]</td>
+            <td>Function</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>dataSource</td>
+            <td>{`Array({title, subTitle, extra, tags})`}</td>
+            <td>Array</td>
+            <td>-</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/List/index.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import "./index.less";
+
+function empty(){}
+
+export default function List(props) {
+  // onItemClick 兼容老的方法
+  const { dataSource=[], onClickItem, onItemClick=empty} = props;
+  return (
+    <div className="android-pda-list" >
+      {
+        dataSource.map((item, index)=>{
+          return <DefaultItem key={item.key || index} dataSource={item} onClick={onClickItem || onItemClick} ></DefaultItem>
+        })
+      }
+      {
+        props.children
+      }
+    </div>
+  );
+}
+
+
+// 默认 item
+function DefaultItem(props){
+  // 兼容老的用法，直接用 List.Item
+  const dataSource = props.dataSource || {
+    title: props.title, 
+    subTitle: props.subTitle, 
+    extra: props.extra, 
+    tags: props.tags
+  };
+  const { title, subTitle, extra, tags=[], tabIndex} = dataSource;
+  const { onClick } = props;
+  return <div className="default-item" onClick={()=>{ onClick(props.dataSource) }} tabIndex={tabIndex} >
+    <div className="text">
+      <div>{title}</div>
+      <div className="sub-text">
+        {subTitle}
+      </div>
+      <div className="sub-tags">
+        {
+          tags.map((text)=>{
+            return <div className="sub-tag-item" key={text} >{text}</div>
+          })
+        }
+      </div>
+    </div>
+    <div className="extra">{extra}</div>
+  </div>
+}
+
+// 
+List.Item = DefaultItem;

package/packages/List/index.less

@@ -0,0 +1,43 @@
+.android-pda-list{
+  .default-item{
+    background-color:#282828;
+    font-size:36px;
+    padding:10px 10px;
+    border-radius: 6px;
+    color:#ffffff;
+    display: flex;
+    justify-content: space-between;
+    align-items:center;
+    cursor: pointer;
+    margin-bottom:10px;
+    &:hover,&:active,&:focus{
+      background-color:#686868;
+    }
+    .text{
+      flex:1;
+    }
+    .sub-text{
+      font-size:80%;
+      opacity:0.7;
+    }
+    .sub-tags{
+      display: flex;
+      .sub-tag-item{
+        background-color:#00FF00;
+        padding:2px;
+        font-size:60%;
+        margin-right:3px;
+        border-radius:2px;
+        color:#000000;
+        line-height:1em;
+      }
+      .sub-tag-item:first-child{
+        margin-left:0;
+      }
+    }
+    .extra{
+      font-size:80%;
+      opacity:0.7;
+    }
+  }
+}

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