@cniot/android-pda-components 0.2.38 → 0.2.41

package/es/index.es.js

@@ -33,10 +33,10 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import React, { useState, useEffect, useRef, cloneElement, useCallback } from "react";
+import React, { useState, useEffect, useRef, Component, cloneElement, useCallback } from "react";
 import ReactDOM from "react-dom";
 var global = "";
-var _classnames_2_3_1_classnames = { exports: {} };
+var classnames = { exports: {} };
 /*!
   Copyright (c) 2018 Jed Watson.
   Licensed under the MIT License (MIT), see
@@ -82,9 +82,9 @@ var _classnames_2_3_1_classnames = { exports: {} };
       window.classNames = classNames2;
     }
   })();
-})(_classnames_2_3_1_classnames);
-var classNames = _classnames_2_3_1_classnames.exports;
-var index$t = "";
+})(classnames);
+var classNames = classnames.exports;
+var index$v = "";
 function getTypeClass$2(type) {
   return {
     "center": "op-overlay center",
@@ -113,7 +113,7 @@ function Overlay$1(props) {
     className: getTypeClass$2(verticalPosition)
   }, option), props.children) : null;
 }
-var index$s = "";
+var index$u = "";
 const blankFunc$6 = () => {
 };
 class PdaTitle extends React.Component {
@@ -152,7 +152,7 @@ class PdaTitle extends React.Component {
     }, menuList)));
   }
 }
-var _keycode_2_2_1_keycode = { exports: {} };
+var keycode$1 = { exports: {} };
 (function(module, exports) {
   function keyCode(searchInput) {
     if (searchInput && typeof searchInput === "object") {
@@ -279,9 +279,9 @@ var _keycode_2_2_1_keycode = { exports: {} };
   for (var alias in aliases) {
     codes[alias] = aliases[alias];
   }
-})(_keycode_2_2_1_keycode, _keycode_2_2_1_keycode.exports);
-var keycode = _keycode_2_2_1_keycode.exports;
-var index$r = "";
+})(keycode$1, keycode$1.exports);
+var keycode = keycode$1.exports;
+var index$t = "";
 function Button(props) {
   const { type = "default", onClick, className = "", tabIndex = 1, dataClick = "" } = props;
   let opt = {};
@@ -303,7 +303,7 @@ Button.Group = ButtonGroup;
 const SPECIAL_KEY_MAP = ["fn"];
 const empty$3 = () => {
 };
-function index$q(props) {
+function index$s(props) {
   const {
     onBack,
     icon,
@@ -422,7 +422,7 @@ function addEventListener(node, eventName, fn) {
     node.removeEventListener(eventName, fn);
   };
 }
-var index$p = "";
+var index$r = "";
 class PdaInfoCard$2 extends React.Component {
   constructor(props) {
     super(props);
@@ -480,7 +480,7 @@ class PdaInfoCard$2 extends React.Component {
   }
 }
 PdaInfoCard$2.IMAGE_1 = "https://img.alicdn.com/imgextra/i2/O1CN01qYuxip1ME9zhdL9XG_!!6000000001402-2-tps-150-150.png";
-var index$o = "";
+var index$q = "";
 class PdaListItem extends React.Component {
   constructor(props) {
     super(props);
@@ -526,7 +526,7 @@ class PdaListItem extends React.Component {
     }));
   }
 }
-var index$n = "";
+var index$p = "";
 function empty$2() {
 }
 function Confirm(props) {
@@ -571,7 +571,7 @@ function Confirm(props) {
     dataClick: item.dataClick
   }, item.label))) : null));
 }
-var index$m = "";
+var index$o = "";
 function WindVaneLog(param) {
   const params = {
     domain: "logger",
@@ -755,7 +755,7 @@ function confirm(props) {
     onClick: onNext
   })));
 }
-var index$l = "";
+var index$n = "";
 function getTypeClass(type) {
   return {
     "center": "op-overlay center",
@@ -784,7 +784,7 @@ function Overlay(props) {
     className: getTypeClass(verticalPosition)
   }, option), props.children) : null;
 }
-var index$k = "";
+var index$m = "";
 function Prompt(props) {
   const inputRef = React.useRef();
   const { data = {}, onNext } = props;
@@ -855,7 +855,7 @@ function splitMessage(message) {
   var msg = String(message).split("by Error:");
   return msg[1] || msg[0];
 }
-var index$j = "";
+var index$l = "";
 function NotFound(props) {
   return /* @__PURE__ */ React.createElement("div", {
     style: { padding: "20%" }
@@ -956,7 +956,7 @@ function createHashHistory(b) {
   }
   function z(a, e) {
     e === void 0 && (e = null);
-    return C(_extends({ pathname: d.pathname, hash: "", search: "" }, typeof a === "string" ? J(a) : a, { state: e, key: H() }));
+    return C(_extends({}, d, typeof a === "string" ? J(a) : a, { state: e, key: H() }));
   }
   function A(a) {
     v = a;
@@ -987,7 +987,11 @@ function createHashHistory(b) {
       w(a, e);
     }
     var g = r.Replace, n = z(a, e);
-    c.length && (c.call({ action: g, location: n, retry: l }), 1) || (n = [{ usr: n.state, key: n.key, idx: q }, x(n)], u.replaceState(n[0], "", n[1]), A(g));
+    c.length && (c.call({
+      action: g,
+      location: n,
+      retry: l
+    }), 1) || (n = [{ usr: n.state, key: n.key, idx: q }, x(n)], u.replaceState(n[0], "", n[1]), A(g));
   }
   function p(a) {
     u.go(a);
@@ -1034,7 +1038,7 @@ function createHashHistory(b) {
     }
   };
 }
-var index$i = "";
+var index$k = "";
 function Debug(props) {
   const { appManager } = props;
   const pages = Array.from(appManager.pageManager.keys()).reverse();
@@ -1100,7 +1104,7 @@ function PlaySound({ data, service, action }) {
   service.onNext({});
   return null;
 }
-var index$h = {
+var index$j = {
   Alert,
   Start,
   Toast: toast,
@@ -1111,7 +1115,7 @@ var index$h = {
   Loading: Loading$1,
   PlaySound
 };
-var index$g = "";
+var index$i = "";
 function Presentation(props) {
   const {
     image = Presentation.IMAGE_1,
@@ -1133,7 +1137,7 @@ Presentation.IMAGE_1 = "https://img.alicdn.com/imgextra/i3/O1CN019Ivkor1ksy3pMGD
 Presentation.IMAGE_2 = "https://img.alicdn.com/imgextra/i1/O1CN01lhSunu1X4VPw1Mlas_!!6000000002870-2-tps-352-158.png";
 Presentation.IMAGE_3 = "https://img.alicdn.com/imgextra/i1/O1CN01mreYXo1XfbUsQ7hip_!!6000000002951-2-tps-322-144.png";
 Presentation.IMAGE_4 = "https://img.alicdn.com/imgextra/i3/O1CN017gNM8F1Fmmcfti7Dg_!!6000000000530-1-tps-414-286.gif";
-var index$f = "";
+var index$h = "";
 function empty$1() {
 }
 function List(props) {
@@ -1179,7 +1183,7 @@ function DefaultItem(props) {
   }, extra));
 }
 List.Item = DefaultItem;
-var index$e = "";
+var index$g = "";
 const blankFunc$5 = () => {
 };
 class BaseLayoutContainer extends React.Component {
@@ -1521,7 +1525,7 @@ class BaseLayout extends React.Component {
     return /* @__PURE__ */ React.createElement(BaseLayoutContainer, __spreadValues({}, props));
   }
 }
-var index$d = "";
+var index$f = "";
 const blankFunc$1 = () => {
 };
 function Keyborard(props) {
@@ -1597,6 +1601,351 @@ function WakeKeyborard(props) {
   }) : null);
 }
 WakeKeyborard.Keyborard = Keyborard;
+const classPrefix$3 = "image-uploader";
+class PreviewItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  renderDelete() {
+    return /* @__PURE__ */ React.createElement("span", {
+      className: `${classPrefix$3}-cell-delete`,
+      onClick: this.props.onDelete
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "uploader-delete-icon",
+      alt: "close",
+      src: "https://img.alicdn.com/imgextra/i2/O1CN01MInPNX1FWIOjjrlea_!!6000000000494-2-tps-32-32.png"
+    }));
+  }
+  render() {
+    const { src, deletable, onView, box } = this.props;
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "image-space-item"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$3}-cell`,
+      style: { width: box, height: box }
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$3}-cell-image`,
+      style: { width: box, height: box }
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: `${classPrefix$3}-img`,
+      src,
+      fit: "cover",
+      onClick: onView
+    })), deletable && this.renderDelete()));
+  }
+}
+const classPrefix$2 = "image-uploader";
+class UploadeButton extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    const { box } = this.props;
+    return /* @__PURE__ */ React.createElement("div", {
+      className: `image-space-item`
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$2}-upload-button-wrap`,
+      onClick: this.props.onUpload
+    }, /* @__PURE__ */ React.createElement("span", {
+      className: `${classPrefix$2}-upload-button image-uploader-cell`,
+      style: { width: box, height: box }
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "uploader-add-icon",
+      alt: "add",
+      src: "https://img.alicdn.com/imgextra/i1/O1CN01RipHZ11yVyprbUP5B_!!6000000006585-2-tps-32-32.png"
+    }))));
+  }
+}
+var index$e = "";
+const classPrefix$1 = "image-viewer";
+class ImageViewer extends Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "onShow", (index2 = 0) => {
+      const { props } = this;
+      let newIdx = 0;
+      if (typeof index2 !== "number") {
+        newIdx = 0;
+      } else {
+        newIdx = index2 > props.images.length - 1 ? 0 : index2;
+      }
+      this.setState({
+        visible: true,
+        currentIndex: newIdx,
+        loading: true
+      });
+    });
+    __publicField(this, "onHide", () => {
+      this.setState({
+        visible: false
+      });
+    });
+    __publicField(this, "handleImageLoaded", (e) => {
+      this.setState({
+        loading: false
+      });
+    });
+    __publicField(this, "onClickMask", (e) => {
+      if (e.target.getAttribute("class") !== "image-viewer-image-wrapper" && e.target.getAttribute("class") !== "image-viewer-loading")
+        return;
+      const { afterClose } = this.props;
+      this.setState({
+        visible: false
+      }, () => {
+        afterClose && afterClose();
+      });
+    });
+    __publicField(this, "onClose", () => {
+      const { onDelete, images } = this.props;
+      const { currentIndex } = this.state;
+      if (images.length === 0) {
+        this.setState({
+          visible: false
+        }, () => {
+          onDelete && onDelete(images[currentIndex], currentIndex);
+        });
+      } else {
+        this.setState({
+          currentIndex: 0,
+          visible: false
+        }, () => {
+          onDelete && onDelete(images[currentIndex], currentIndex);
+        });
+      }
+    });
+    __publicField(this, "onPrev", (e) => {
+      e.stopPropagation();
+      const { currentIndex } = this.state;
+      this.setState({
+        currentIndex: currentIndex - 1,
+        loading: true
+      });
+    });
+    __publicField(this, "onNext", (e) => {
+      e.stopPropagation();
+      const { currentIndex } = this.state;
+      this.setState({
+        currentIndex: currentIndex + 1,
+        loading: true
+      });
+    });
+    this.state = {
+      visible: false,
+      currentIndex: 0,
+      loading: false
+    };
+  }
+  render() {
+    const { currentIndex, visible, loading } = this.state;
+    const { images } = this.props;
+    return /* @__PURE__ */ React.createElement("div", null, visible ? /* @__PURE__ */ React.createElement("div", {
+      className: "v-mask",
+      onClick: this.onClickMask
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `v-mask-content`
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$1}-content`
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$1}-slides`
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "image-viewer-indicator"
+    }, currentIndex + 1, " / ", images.length), /* @__PURE__ */ React.createElement("div", {
+      className: "viewer-image-close",
+      onClick: this.onClose
+    }, /* @__PURE__ */ React.createElement("svg", {
+      width: "44",
+      height: "44",
+      viewBox: "0 0 768 768"
+    }, /* @__PURE__ */ React.createElement("path", {
+      fill: "#FFF",
+      d: "M607.5 205.5l-178.5 178.5 178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"
+    }))), /* @__PURE__ */ React.createElement("div", {
+      className: "image-viewer-slides-inner"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: "image-viewer-image-wrapper"
+    }, /* @__PURE__ */ React.createElement("img", {
+      src: this.props.images[currentIndex].url,
+      style: { width: loading ? 1 : "auto" },
+      onLoad: this.handleImageLoaded
+    }))), images.length > 1 ? /* @__PURE__ */ React.createElement(React.Fragment, null, currentIndex === 0 ? null : /* @__PURE__ */ React.createElement("div", {
+      className: "viewer-image-arrow viewer-prev",
+      onClick: this.onPrev
+    }, /* @__PURE__ */ React.createElement("svg", {
+      width: "44",
+      height: "44",
+      viewBox: "0 0 768 768"
+    }, /* @__PURE__ */ React.createElement("path", {
+      d: "M640.5 352.5v63h-390l178.5 180-45 45-256.5-256.5 256.5-256.5 45 45-178.5 180h390z"
+    }))), currentIndex === images.length - 1 ? null : /* @__PURE__ */ React.createElement("div", {
+      className: "viewer-image-arrow viewer-next",
+      onClick: this.onNext
+    }, /* @__PURE__ */ React.createElement("svg", {
+      width: "44",
+      height: "44",
+      viewBox: "0 0 768 768"
+    }, /* @__PURE__ */ React.createElement("path", {
+      d: "M384 127.5l256.5 256.5-256.5 256.5-45-45 178.5-180h-390v-63h390l-178.5-180z"
+    })))) : null))), loading ? /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$1}-loading`,
+      onClick: this.onClose
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix$1}-loading-reactor`
+    }, /* @__PURE__ */ React.createElement("svg", {
+      viewBox: "0 0 32 32",
+      width: "36",
+      height: "36",
+      fill: "white"
+    }, /* @__PURE__ */ React.createElement("path", {
+      opacity: ".25",
+      d: "M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"
+    })))) : null) : null);
+  }
+}
+const classPrefix = "image-uploader";
+class ImageUploader extends Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "onViewImage", (index2) => {
+      this.imgRef.onShow(index2);
+    });
+    __publicField(this, "onClickAdd", () => {
+      const { capture } = this.props;
+      const self = this;
+      const isCameraMode = capture && capture === "camera";
+      const params = {
+        type: "0",
+        mode: isCameraMode ? "camera" : "photo"
+      };
+      const p = {
+        ios: "taobao://",
+        android: "com.taobao.taobao"
+      };
+      window.WindVane.call("Base", "isInstall", p, function() {
+        self.handlerUpload(params);
+      }, function() {
+        self.handlerUploadNavigator();
+      });
+    });
+    __publicField(this, "handlerUploadNavigator", () => {
+      const { beforeUpload } = this.props;
+      const dom = document.querySelector("#inputFile");
+      dom.click();
+      dom.onchange = (e) => {
+        let fileData = e.target.files[0];
+        const reader = new FileReader();
+        reader.readAsDataURL(fileData);
+        reader.onload = (event) => {
+          const base64 = event.target.result;
+          beforeUpload && beforeUpload({
+            data: base64
+          });
+        };
+        const windowURL = window.URL || window.webkitURL;
+        const imgSrc = windowURL.createObjectURL(fileData);
+        const { images } = this.state;
+        const uid = (Math.random() * 1e4).toFixed(0);
+        this.setState({
+          images: [...images, { id: uid, url: imgSrc }]
+        });
+      };
+    });
+    __publicField(this, "handlerUpload", (params) => {
+      const { beforeUpload } = this.props;
+      window.WindVane.call("WVCamera", "takePhoto", params, function(e) {
+        const plugin = {
+          domain: "camera",
+          method: "getBase64",
+          params: {
+            filePath: e.localPath
+          }
+        };
+        window.WindVane.call("WindvanePlugin", "invoke", JSON.stringify(plugin), function(res) {
+          beforeUpload && beforeUpload(res.data);
+        }, function(err) {
+          console.log("failure " + JSON.stringify(err));
+        });
+      }, function(err) {
+        console.log("takePhoto failure: " + JSON.stringify(err));
+      });
+    });
+    __publicField(this, "onDelete", (item, index2) => {
+      const { onDelete } = this.props;
+      onDelete && onDelete(item, index2);
+    });
+    __publicField(this, "_showLoading", () => {
+      this.setState({
+        loading: true
+      });
+    });
+    __publicField(this, "_hideLoading", () => {
+      setTimeout(() => {
+        this.setState({
+          loading: false
+        });
+      }, 10 * 1e3);
+    });
+    this.state = {
+      images: [],
+      loading: false
+    };
+  }
+  componentDidMount() {
+    this.setState({
+      images: this.props.value
+    });
+  }
+  render() {
+    const { value, loading = false } = this.props;
+    const { maxCount = 1, deletable = false, capture = "camera", box = 80 } = this.props;
+    const { images } = this.state;
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix}`
+    }, /* @__PURE__ */ React.createElement("input", {
+      type: "file",
+      name: "file",
+      accept: "image/*",
+      id: "inputFile",
+      style: { display: "none" }
+    }), /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix}-wrap`
+    }, images && images.map((item, index2) => {
+      return /* @__PURE__ */ React.createElement(PreviewItem, {
+        src: item.url,
+        key: item.url,
+        box,
+        deletable,
+        onDelete: () => this.onDelete(item, index2),
+        onView: () => this.onViewImage(index2)
+      });
+    }), images && images.length < maxCount ? /* @__PURE__ */ React.createElement(UploadeButton, {
+      box,
+      onUpload: this.onClickAdd
+    }) : null)), loading ? /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix}-loading`
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: `${classPrefix}-loading-reactor`
+    }, /* @__PURE__ */ React.createElement("svg", {
+      viewBox: "0 0 32 32",
+      width: "36",
+      height: "36",
+      fill: "white"
+    }, /* @__PURE__ */ React.createElement("path", {
+      opacity: ".25",
+      d: "M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"
+    }), /* @__PURE__ */ React.createElement("path", {
+      d: "M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"
+    })))) : null, /* @__PURE__ */ React.createElement(ImageViewer, {
+      ref: (ref) => this.imgRef = ref,
+      images: value,
+      onDelete: this.onDelete
+    }));
+  }
+}
+var index$d = "";
 var index$c = "";
 var index$b = "";
 class PdaInfoCard$1 extends React.Component {
@@ -1816,7 +2165,7 @@ function usePersistFn(fn) {
   }
   return persistFn.current;
 }
-var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+var __awaiter = function(thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function(resolve) {
       resolve(value);
@@ -1843,7 +2192,7 @@ var __awaiter = globalThis && globalThis.__awaiter || function(thisArg, _argumen
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-var __generator = globalThis && globalThis.__generator || function(thisArg, body) {
+var __generator = function(thisArg, body) {
   var _ = {
     label: 0,
     sent: function sent() {
@@ -1935,7 +2284,7 @@ var __generator = globalThis && globalThis.__generator || function(thisArg, body
     };
   }
 };
-var __read = globalThis && globalThis.__read || function(o, n) {
+var __read = function(o, n) {
   var m = typeof Symbol === "function" && o[Symbol.iterator];
   if (!m)
     return o;
@@ -1959,7 +2308,7 @@ var __read = globalThis && globalThis.__read || function(o, n) {
   }
   return ar;
 };
-var __spread = globalThis && globalThis.__spread || function() {
+var __spread = function() {
   for (var ar = [], i = 0; i < arguments.length; i++) {
     ar = ar.concat(__read(arguments[i]));
   }
@@ -2208,4 +2557,4 @@ function SimpleCardBlock(props) {
   })) : null);
 }
 const ListItem = PdaListItem;
-export { ActionSheet, index$5 as AppList, BaseLayout, Button, Confirm, PdaDistanceCard as DistanceCard, PdaFinishCard as FinishCard, index$q as Header, InfiniteScroll, PdaInfoCard$2 as InfoCard, Keyborard, List, ListItem, Overlay$1 as Overlay, index$h as PageFlowSystemPages, Presentation, SelectCard, SimpleCard, SimpleCardBlock, PdaInfoCard as Steps, SubCard, Tag, PdaListItem as TaskCard, PdaTitle as Title, Toast, WakeKeyborard };
+export { ActionSheet, index$5 as AppList, BaseLayout, Button, Confirm, PdaDistanceCard as DistanceCard, PdaFinishCard as FinishCard, index$s as Header, ImageUploader, ImageViewer, InfiniteScroll, PdaInfoCard$2 as InfoCard, Keyborard, List, ListItem, Overlay$1 as Overlay, index$j as PageFlowSystemPages, Presentation, SelectCard, SimpleCard, SimpleCardBlock, PdaInfoCard as Steps, SubCard, Tag, PdaListItem as TaskCard, PdaTitle as Title, Toast, WakeKeyborard };