@cniot/android-pda-components 0.2.17 → 0.2.21

package/packages/TaskCard/index.less

@@ -0,0 +1,101 @@
+.pda-list-item {
+    padding: 24px 16px;
+    border-radius: 16px;
+    & div {
+        margin: 0;
+    }
+    &>div {
+        margin-bottom: 12px;
+    }
+    &>div:last-child {
+        margin-bottom: 0px;
+    }
+    // .pda-listitem-header {
+    //     font-size: 32px;
+    //     line-height: 32px;
+    //     color: #FFFFFF60;
+
+    // }
+    .pda-listitem-highlight {
+        width: 100%;
+        font-size: 40px;
+        line-height: 40px;
+        font-weight: bold;
+        color: #FFFFFF;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        div:first-child {
+            flex: 1;
+            // display: block;
+            word-break: normal;
+            white-space: normal;
+            word-break: break-word;
+            // width: 200px;
+        }
+    }
+    // .pda-listitem-highlight-top{
+    //     margin-top: -8px;
+    // }
+    .pda-listitem-header,
+    .pda-listitem-state-text,
+    .pda-listitem-subinfo {
+        font-size: 32px;
+        line-height: 32px;
+        color: #999999;
+        word-break: break-all;
+    }
+
+    .pda-listitem-state-block {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 0;
+
+        &>div {
+            padding: 6px 10px;
+            border-radius: 4px;
+            background-color: #0091EA;
+            margin-bottom: 12px;
+            margin-right: 12px;
+
+            font-size: 24px;
+            line-height: 24px;
+        }
+        &>div.success {
+            background-color: #00FF00;
+        }
+        &>div.warning {
+            background-color: #FFCC00;
+        }
+        &>div.error {
+            background-color: #FF0000;
+        }
+    }
+
+    position: relative;
+    .pda-listitem-icon {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 60px;
+        height: 60px;
+        background-color: #0091EA;
+        border-radius: 0 16px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        opacity: 0.85;
+    }
+    .listitem-icon-container {
+        background-size: 100%;
+        background-repeat: no-repeat;
+        // background-position: center;
+        width: 16px;
+        height: 24px;
+    }
+    .listitem-icon-next {
+        background-image: url(https://img.alicdn.com/imgextra/i4/O1CN01FkZisA1tCg1sj3b6U_!!6000000005866-2-tps-40-58.png);
+    }
+}

package/packages/Toast/doc.jsx

@@ -0,0 +1,112 @@
+import React from "react";
+import Toast from "./index";
+export default function () {
+  return (
+    <div>
+      <h1>Toast</h1>
+      <p>弹窗组件，如果要悬浮在页面上，请配合 Overlay 使用</p>
+      <h2>示例</h2>
+      <div className="light-block">
+        <button onClick={
+          e => {
+            // console.log(123);
+            Toast.show({
+              type: 'success',
+              title: 'hello title',
+              message: 'hello message',
+              duration: 1000,
+            })
+          }
+        }>
+          点击 toast
+        </button>
+        <Toast
+          title="111111"
+          message="22222"
+          type="success"
+         ></Toast>
+         <br />
+         <Toast
+          title="111111"
+          message="22222"
+          type="warning"
+         ></Toast>
+
+        <br />
+         <Toast
+          title="延时关闭"
+          message="duration={3000}"
+          type="error"
+          duration={3000}
+         ></Toast>
+
+        <br />
+      </div>
+      <code className="code">{`
+        Toast.show({
+          type: 'success',
+          title: 'hello title',
+          message: 'hello message',
+        })
+        <Toast
+          title="111111"
+          message="22222"
+          type="success"
+        ></Toast>
+        <br />
+        <Toast
+          title="111111"
+          message="22222"
+          type="warning"
+        ></Toast>
+
+        <br />
+        <Toast
+          title="延时关闭"
+          message="duration={3000}"
+          type="error"
+          duration={3000}
+        ></Toast>
+      `}</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>message</td>
+            <td>消息内容</td>
+            <td>string</td>
+            <td>消息内容</td>
+          </tr>
+
+          <tr>
+            <td>type</td>
+            <td>消息类型</td>
+            <td>string</td>
+            <td>success|warning|error</td>
+          </tr>
+          <tr>
+            <td>duration</td>
+            <td>延迟时间</td>
+            <td>number</td>
+            <td>单位 ms</td>
+          </tr>
+
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/packages/Toast/index.jsx

@@ -0,0 +1,7 @@
+import Toast from './toast';
+import { show, clear } from './methods';
+
+Toast.show = show;
+Toast.clear = clear;
+
+export default Toast;

package/packages/Toast/index.less

@@ -0,0 +1,23 @@
+@import '../variable.less';
+
+.toast-wrap{
+  background:#00FF00;
+  border-radius:6px;
+  padding:10px 15px;
+  width: 100%;
+  box-sizing: border-box;
+  &.warning{
+    background-color:#FFCB00;
+  }
+  &.error{
+    background-color:#FF0000;
+  }
+  .toast-title{
+    font-size: 50px;
+    font-weight: bold;
+  }
+
+  .toast-message{
+    font-size: 32px;
+  }
+}

package/packages/Toast/methods.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import { resolveContainer } from '../utils'
+import ReactDOM from 'react-dom'
+import { InternalToast } from './toast'
+import { mergeProps } from '../utils'
+
+const containers = [];
+
+function unmount(container) {
+  const unmountResult = ReactDOM.unmountComponentAtNode(container)
+  if (unmountResult && container.parentNode) {
+    container.parentNode.removeChild(container)
+  }
+}
+
+const defaultProps = {
+  duration: 2000,
+}
+
+export function show(p) {
+  const props = mergeProps(
+    defaultProps,
+    p,
+  )
+  let timer = 0;
+  const { getContainer = () => document.body } = props
+  const container = document.createElement('div')
+  const bodyContainer = resolveContainer(getContainer)
+  bodyContainer.appendChild(container)
+  // console.log('container: ', container);
+
+  clear()
+  containers.push(container)
+
+  function TempToast() {
+    const [visible, setVisible] = useState(true)
+    useEffect(() => {
+      return () => {
+        props.afterClose && props.afterClose()
+      }
+    }, [])
+
+    useEffect(() => {
+      if (props.duration === 0) {
+        return
+      }
+      timer = window.setTimeout(() => {
+        setVisible(false)
+      }, props.duration)
+      return () => {
+        window.clearTimeout(timer)
+      }
+    }, [])
+
+    return (
+      <InternalToast
+        {...props}
+        getContainer={() => container}
+        visible={visible}
+        afterClose={() => {
+          unmount(container)
+        }}
+      />
+    )
+    // return 'hello world: toast'
+  }
+
+  ReactDOM.render(<TempToast />, container)
+}
+
+export function clear() {
+  while (true) {
+    const container = containers.pop()
+    if (!container) break
+    unmount(container)
+  }
+}

package/packages/Toast/toast.jsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect, ReactNode, useMemo } from "react";
+import './index.less';
+
+import classNames from 'classnames'
+// import Mask from '../mask'
+import { mergeProps, playSound } from '../utils'
+// import { PropagationEvent } from '../utils'
+// import { GetContainer } from '../utils'
+import Overlay from '../Overlay'
+
+
+function getTypeClass(type) {
+    return {
+        "success": "toast-wrap success",
+        "warning": "toast-wrap warning",
+        "error": "toast-wrap error",
+    }[type] || "toast-wrap"
+}
+export default function Toast(props) {
+    const { title = "title", message = "message", type = "success", duration = null } = props;
+    const [hidden, setHidden] = useState(false)
+    useEffect(() => {
+      if(window.WindVane){
+        if(type === 'warning') {
+          playSound('error1');
+          window.WindVane.call('WVMotion', 'vibrate', {duration: 400});
+        } else if(type === 'error') {
+          playSound('error2');
+          window.WindVane.call('WVMotion', 'vibrate', {duration: 200});
+          setTimeout(() => {
+            window.WindVane.call('WVMotion', 'vibrate', {duration: 300});
+          }, 250);
+        }
+      }
+    }, [])
+    if (duration) {
+        setTimeout(() => {
+            setHidden(true);
+        }, duration);
+    }
+
+    return !hidden ? (
+        <div className={getTypeClass(type)}>
+            <div className="toast-title">{title}</div>
+            <div className="toast-message">{message}</div>
+        </div>
+    ) : null
+}
+
+
+const defaultProps = {
+    maskClickable: true,
+    stopPropagation: ['click'],
+}
+
+export const InternalToast = p => {
+    const props = mergeProps(defaultProps, p)
+    const { maskClickable, content, icon, position, title, message, type, visible } = props
+
+    return (
+        // <Mask
+        //     visible={props.visible}
+        //     destroyOnClose
+        //     opacity={0}
+        //     disableBodyScroll={!maskClickable}
+        //     getContainer={props.getContainer}
+        //     afterClose={props.afterClose}
+        //     style={{
+        //         pointerEvents: maskClickable ? 'none' : 'auto',
+        //         ...props.maskStyle,
+        //     }}
+        //     className={classNames(`${classPrefix}-mask`, props.maskClassName)}
+        //     stopPropagation={props.stopPropagation}
+        // >
+        //     <div
+        //         style={{ top }}
+        //         className={classNames(
+        //             `${classPrefix}-wrap`,
+        //             icon ? `${classPrefix}-wrap-icon` : `${classPrefix}-wrap-text`
+        //         )}
+        //     >
+        //         {/* {iconElement && (
+        //     <div className={`${classPrefix}-icon`}>{iconElement}</div>
+        //   )} */}
+        //         {content}
+        //     </div>
+        // </Mask>
+        <Overlay visible={visible} verticalPosition='bottom' closable={true}>
+            <Toast
+                title={title}
+                message={message}
+                type={type}
+            ></Toast>
+        </Overlay>
+    )
+}

package/packages/WakeKeyborard/doc.jsx

@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import WakeKeyborard from "./index";
+import Keyborard from "./keyborard";
+import Button from '../Button';
+
+export default function () {
+  const [input, setInput] = useState(false);
+  return (
+    <div>
+      <h1>WakeKeyborard</h1>
+      <p>WakeKeyborard</p>
+      <h2>示例</h2>
+
+      <div className="light-block">
+        <p>点击右下角键盘</p>
+        <WakeKeyborard
+          autoWakeup={true}
+          label='搜索'
+          onWakeKeyboard={() => { console.log('wake keyboard') }}
+          onHidden={() => { console.log('keyboard hidden') }}
+          onClick={v => { console.log('v is ', v); }}
+          type='text'
+        />
+        <p>点击下面按钮唤起</p>
+        <Button
+          onClick={e => {
+            setInput(!input);
+          }}
+        >输入</Button>
+        {
+          input ? (
+            <Keyborard
+              onWakeKeyboard={
+                e => {
+                  console.log('keyborard from button');
+                }
+              }
+              onClick={
+                v => {
+                  console.log('value: ', v);
+                }
+              }
+              onHidden={
+                e => {
+                  console.log('keyborard hidden from button');
+                  setInput(false);
+                }
+              }
+            />
+          ) : null
+        }
+
+      </div>
+      <code className="code">{`
+<WakeKeyborard
+  autoWakeup={true}
+  label='搜索'
+  onWakeKeyboard={() => { console.log('wake keyboard') }}
+  onHidden={() => { console.log('keyboard hidden') }}
+  onClick={v => { console.log('v is ', v); }}
+  type='text'
+/>
+
+
+
+const [input, setInput] = useState(false);
+
+<Button
+  onClick={e => {
+    setInput(!input);
+  }}
+>输入</Button>
+{
+input ? (
+  <Keyborard
+    onWakeKeyboard={
+      e => {
+        console.log('keyborard from button');
+      }
+    }
+    onClick={
+      v => {
+        console.log('value: ', v);
+      }
+    }
+    onHidden={
+      e => {
+        console.log('keyborard hidden from button');
+        setInput(false);
+      }
+    }
+  />
+) : null
+}
+      `}</code>
+      <h2>WakeKeyborard 参数</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>autoWakeup</td>
+            <td>自动唤起</td>
+            <td>boolean</td>
+            <td>false</td>
+          </tr>
+
+        </tbody>
+      </table>
+      <p>其他参数同下面 Keyboard 参数</p>
+
+      <h2>Keyborard 参数</h2>
+      <table className="pure-table pure-table-bordered">
+        <thead>
+          <tr>
+            <th>属性</th>
+            <th>说明</th>
+            <th>类型</th>
+            <th>默认值</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>label</td>
+            <td>确认按键文案</td>
+            <td>string</td>
+            <td>查询</td>
+          </tr>
+          <tr>
+            <td>onWakeKeyboard</td>
+            <td>唤起键盘回调</td>
+            <td>function</td>
+            <td></td>
+          </tr>
+          <tr>
+            <td>onClick</td>
+            <td>点击查询回调</td>
+            <td>function: (value) => { }</td>
+            <td>(value) => { }</td>
+          </tr>
+          <tr>
+            <td>onHidden</td>
+            <td>键盘隐藏时回调</td>
+            <td>function: (value) => { }</td>
+            <td>(value) => { }</td>
+          </tr>
+          <tr>
+            <td>type</td>
+            <td>键盘 type</td>
+            <td>string</td>
+            <td>tel</td>
+          </tr>
+          <tr>
+            <td>placeholder</td>
+            <td>输入框 placeholder</td>
+            <td>string</td>
+            <td>请输入</td>
+          </tr>
+        </tbody>
+      </table>
+
+    </div>
+  );
+}

package/packages/WakeKeyborard/index.jsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect, useRef } from "react";
+// import OPInput from "../OPInput";
+import "./index.less";
+// import classNames from "classnames";
+import Button from '../Button'
+import Keyborard from "./keyborard";
+
+const blankFunc = () => { };
+export default function WakeKeyborard(props) {
+  const [inputVisible, setInputVisible] = useState(props.autoWakeup || false);
+  // const inputRef = useRef(null);
+
+  // const { label = "查询", onWakeKeyboard = blankFunc, onClick = blankFunc, onHidden = blankFunc } = props;
+  const { onClick = blankFunc, onHidden = blankFunc, ...keyborardProps } = props;
+
+  return (
+    <div className="wakekeyborard">
+      {
+        inputVisible ? (
+          <Keyborard
+            // label={label}
+            onClick={
+              (v, e) => {
+                onClick(v);
+                setInputVisible(!inputVisible);
+                // onHidden(true);
+              }
+            }
+            onHidden={
+              s => {
+                setInputVisible(false);
+                onHidden(s);
+              }
+            }
+            {...keyborardProps}
+          />
+        ) : null
+      }
+      {
+        !inputVisible ? (
+          <div
+            className="wakekeyborard-icon"
+            onClick={
+              e => {
+                // this.setState({ inputVisible: !inputVisible });
+                setInputVisible(!inputVisible);
+                // requestAnimationFrame(() => {
+                //   onWakeKeyboard();
+                // })
+              }
+            }
+          ></div>
+        ) : null
+      }
+
+    </div>
+  )
+}
+
+
+WakeKeyborard.Keyborard = Keyborard;

package/packages/WakeKeyborard/index.less

@@ -0,0 +1,55 @@
+.wakekeyborard {
+  .wakekeyborard-icon {
+    width: 80px;
+    height: 80px;
+    background-image: url(https://img.alicdn.com/imgextra/i3/O1CN01kxYh3U25Xzr9nAcYp_!!6000000007537-2-tps-240-240.png);
+    background-size: 100%;
+
+    position: fixed;
+    right: 24px;
+    bottom: 24px;
+  }
+}
+
+.wakekeyborard-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  background-color: rgba(222, 222, 222, 0.2);
+}
+.wakekeyborard-inputbox {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  height: 85px;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  input {
+    // width: 330px;
+    width:100%;
+    border-radius: 16px 0 0 0 ;
+    border: 0;
+    font-size: 42px;
+    background-color: white;
+    padding-left: 20px;
+    &:focus {
+      outline: none;
+    }
+    &::-webkit-input-placeholder {
+      color: rgb(209, 209, 214);
+      font-size: 32px;
+    }
+  }
+  button {
+    width: 150px;
+    border: 0;
+    border-radius: 0 16px 0 0;
+    background-color: white;
+  }
+}