@cniot/android-pda-components 0.2.30 → 0.2.32

package/packages/InfoCard/index.jsx

@@ -1,67 +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, highlightInfo, subTitle, subHighlightInfo, subHighlightSubInfo, infoImage, tagText, highlightInfoCN, highlightSubInfo, percentage,  highlightSubInfoCN, boldInfo, infoList = [], style={}, theme='light' } = this.props;
-    return (
-      <div className={classNames({[className]: true, 'pda-info-card': true, 'pda-info-card-dark': theme === 'dark'})} style={style}>
-        <div className="pda-info-card-title-section">
-          <div className="pda-info-card-title">{title}</div>
-          {
-            tagText ? <div className="pda-info-card-tag">
-              <div className="pda-info-card-tag-text">{tagText}</div>
-             </div> : null
-          }
-        </div>
-        <div className="pda-info-card-highlight-section">
-          <div>
-            <div className="pda-info-card-highlight">
-              <span className="pda-info-card-highlight1">{highlightInfo}</span>
-              <span className="pda-info-card-highlight1CN">{highlightInfoCN}</span>
-              <span className="pda-info-card-highlight2">{highlightSubInfo}</span>
-              <span className="pda-info-card-highlight2CN">{highlightSubInfoCN}</span>
-            </div>
-            {
-              subTitle ?  <div className="pda-info-card-title">{subTitle}</div> : null
-            }
-            {
-              subHighlightInfo ? <div className="pda-info-card-highlight">
-                <span className="pda-info-card-highlight1">{subHighlightInfo}</span>
-                <span className="pda-info-card-highlight2">{subHighlightSubInfo}</span>
-              </div> : null
-            }
-          </div>
-          {
-            infoImage ? <img src={infoImage} width={150} height={150} /> : null
-          }
-        </div>
-        {
-          percentage !== undefined ? <div className="pda-info-card-progress">
-            <div className="pda-info-card-progress-inside" style={{width: `${percentage * 100}%`}}/>
-          </div> : null
-        }
-        <div className="pda-info-card-bold">{boldInfo}</div>
-        {
-          infoList.map((item, index) => {
-            return (
-              <div key={index} className="pda-info-card-list">
-                <span>{item.label || ''}</span>
-                &nbsp;&nbsp;
-                <span>{item.content || ''}</span>
-              </div>
-            )
-          })
-        }
-      </div>
-    )
-  }
-}
-
-PdaInfoCard.IMAGE_1 = "https://img.alicdn.com/imgextra/i2/O1CN01qYuxip1ME9zhdL9XG_!!6000000001402-2-tps-150-150.png";

package/packages/InfoCard/index.less

@@ -1,111 +0,0 @@
-.pda-info-card {
-    border-radius: 16px;
-    padding: 16px;
-    background-color: white;
-    word-break: break-word;
-    .divda-info-card-title{
-        font-size: 32px;
-        line-height: 32px;
-    }
-    .pda-info-card-title-section {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-        .pda-info-card-title {
-            font-size: 32px;
-            color: #666666;
-            // margin: 0;
-            // margin-bottom: 16px;
-        }
-        .pda-info-card-tag {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            height: 36px;
-            padding: 0 8px;
-            background-color: #FFCC00;
-            border-radius: 8px;
-        }
-    }
- 
-    .pda-info-card-highlight-section{
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        align-items: flex-start;
-        .pda-info-card-title {
-            font-size: 32px;
-            color: #666666;
-            margin-top: 20px;
-        }
-        .pda-info-card-highlight {
-            font-size: 80px;
-            line-height: 64px;
-            color: #0091EA;
-            font-weight: bold;
-            // margin: 0;
-            // vertical-align: text-bottom;
-            
-            display: flex;
-            flex-direction: row;
-            align-items: flex-end;
-
-            .pda-info-card-highlight1CN {
-                font-size: 64px;
-            }
-            .pda-info-card-highlight2 {
-                font-size: 50px;
-                line-height: 40px;
-            }
-            .pda-info-card-highlight2CN {
-                font-size: 40px;
-                line-height: 40px;
-            }
-        }    
-    }
-    .pda-info-card-bold {
-        font-weight: bold;
-        font-size: 40px;
-        line-height: 48px;
-        // margin: 0;
-        color: black;
-        margin-top: 16px;
-    }
-    .pda-info-card-list {
-        margin-top: 12px;
-        color: #4A4A4A;
-        font-size: 32px;
-        line-height: 32px;
-        word-break: break-all;
-    }
-}
-.pda-info-card-progress {
-    background-color: #F3F4F8;
-    height: 12px;
-    border-radius: 6px;
-    margin-top: 16px;
-    .pda-info-card-progress-inside {
-        background-color: #0091EA;
-        height: 12px;
-        border-radius: 6px;
-    }
-}
-
-
-.pda-info-card.pda-info-card-dark {
-    background-color: black;
-    .pda-info-card-title {
-        color: #999999;
-    }
-
-    .pda-info-card-highlight {
-        color: #FFFFFF;
-    }
-    .pda-info-card-bold {
-        color: #FFFFFF;
-    }
-    .pda-info-card-list {
-        color: #999999;
-    }
-}

package/packages/List/doc.jsx

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

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

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

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

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

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