@pisell/materials 1.0.923 → 1.0.925

package/es/components/pisellCamera/index.js

@@ -0,0 +1,219 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { Camera } from 'react-camera-pro';
+import { getText } from "../../locales";
+import PisellModal from "../../components/pisellModal";
+import "./index.less";
+var PisellCamera = /*#__PURE__*/forwardRef(function (props, ref) {
+  var cameraRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    photo = _useState4[0],
+    setPhoto = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    cameraAvailable = _useState6[0],
+    setCameraAvailable = _useState6[1]; // null: 检测中, true: 可用, false: 不可用
+  var uploadFileRef = useRef(null);
+
+  // Base64转File对象
+  var base64ToFile = function base64ToFile(base64String, filename) {
+    var _arr$0$match;
+    var arr = base64String.split(',');
+    var mime = ((_arr$0$match = arr[0].match(/:(.*?);/)) === null || _arr$0$match === void 0 ? void 0 : _arr$0$match[1]) || '';
+    var bstr = atob(arr[1]);
+    var n = bstr.length;
+    var u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new File([u8arr], filename, {
+      type: mime
+    });
+  };
+
+  // 拍照并添加到fileList
+  var takePhoto = function takePhoto() {
+    if (!cameraRef.current || !cameraRef.current.takePhoto) {
+      return;
+    }
+    try {
+      var _cameraRef$current, _cameraRef$current$ta;
+      var _photo = (_cameraRef$current = cameraRef.current) === null || _cameraRef$current === void 0 || (_cameraRef$current$ta = _cameraRef$current.takePhoto) === null || _cameraRef$current$ta === void 0 ? void 0 : _cameraRef$current$ta.call(_cameraRef$current);
+      var timestamp = Date.now();
+      var filename = "photo-".concat(timestamp, ".jpg");
+      setPhoto(_photo);
+
+      // 转换为File对象
+      var file = base64ToFile(_photo, filename);
+
+      // 创建符合Antd Upload格式的文件对象
+      var uploadFile = {
+        uid: timestamp.toString(),
+        name: filename,
+        status: 'uploading',
+        url: _photo,
+        // 用于预览
+        originFileObj: file,
+        // 原始文件对象，用于上传
+        thumbUrl: _photo,
+        lastModified: Date.now(),
+        lastModifiedDate: new Date(),
+        type: 'image/jpeg',
+        size: file.size
+      };
+      console.log('takePhoto_uploadFile', uploadFile);
+      uploadFileRef.current = uploadFile;
+      return uploadFile;
+    } catch (error) {
+      console.error('takePhoto_error', error);
+      uploadFileRef.current = null;
+      setPhoto('');
+      return null;
+    }
+  };
+  var onOpen = function onOpen() {
+    setCameraAvailable(null);
+    setPhoto('');
+    uploadFileRef.current = null;
+    setOpen(true);
+  };
+
+  // 关闭相机弹窗，重置状态
+  var onClose = function onClose() {
+    cameraRef.current = null;
+    uploadFileRef.current = null;
+    setOpen(false);
+    setPhoto('');
+    setCameraAvailable(null);
+  };
+
+  // 重拍照片
+  var onRetakePhoto = function onRetakePhoto() {
+    setPhoto('');
+  };
+
+  // 使用照片
+  var onUsePhoto = function onUsePhoto() {
+    var _props$onChange;
+    props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, uploadFileRef.current);
+    onClose();
+  };
+  useImperativeHandle(ref, function () {
+    return {
+      open: onOpen,
+      takePhoto: takePhoto,
+      isCameraAvailable: function isCameraAvailable() {
+        return cameraAvailable;
+      }
+    };
+  });
+  console.log('cameraAvailable', cameraAvailable);
+  return /*#__PURE__*/React.createElement(PisellModal, {
+    open: open,
+    onCancel: function onCancel(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onClose();
+    },
+    header: false,
+    footer: null,
+    destroyOnClose: true,
+    bodyStyle: {
+      padding: 0
+    },
+    width: '90vw',
+    className: "pisell-camera-modal"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-container",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }, cameraAvailable === null ?
+  /*#__PURE__*/
+  // 检测中
+  React.createElement("div", {
+    className: "pisell-camera-loading"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-loading-text"
+  }, getText('pisell-camera-checking'))) : cameraAvailable === false ?
+  /*#__PURE__*/
+  // 无摄像头
+  React.createElement("div", {
+    className: "pisell-camera-no-camera"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-no-camera-icon"
+  }, "\uD83D\uDCF7"), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-no-camera-text"
+  }, getText('pisell-camera-no-camera-accessible')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-no-camera-desc"
+  }, getText('pisell-camera-no-camera-desc'))) : null, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Camera, {
+    ref: cameraRef,
+    errorMessages: {
+      // noCameraAccessible: getText('pisell-camera-no-camera-accessible'),
+      // permissionDenied: getText('pisell-camera-permission-denied'),
+      // switchCamera: getText('pisell-camera-switch-camera'),
+      // canvas: getText('pisell-camera-canvas'),
+    },
+    numberOfCamerasCallback: function numberOfCamerasCallback(numberOfCameras) {
+      console.log('numberOfCameras', numberOfCameras);
+      if (!cameraRef.current) {
+        return;
+      }
+      if (numberOfCameras <= 0) {
+        setTimeout(function () {
+          setCameraAvailable(function (pre) {
+            if (pre === true) {
+              return true;
+            }
+            return false;
+          });
+        }, 5000);
+      } else {
+        setCameraAvailable(true);
+      }
+    }
+  }), cameraAvailable === true && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-action"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-action-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      takePhoto();
+    }
+  })), photo && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-container"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: photo,
+    alt: "photo",
+    className: "pisell-camera-photo"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-img-action"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-img-action-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onRetakePhoto();
+    }
+  }, getText('pisell-upload-camera-retake')), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-photo-img-action-item",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onUsePhoto();
+    }
+  }, getText('pisell-upload-camera-use')))))));
+});
+export default PisellCamera;

package/es/components/pisellCamera/index.less

@@ -0,0 +1,120 @@
+.pisell-camera-modal {
+  .pisell-camera-container {
+    width: 100%;
+    height: 90vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .pisell-camera-action {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .pisell-camera-action-item {
+        width: 60px;
+        height: 60px;
+        background-color: #fff;
+        border-radius: 60px;
+        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+      }
+    }
+
+    .pisell-camera-photo-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+
+      .pisell-camera-photo {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    .pisell-camera-photo-img-action {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 100px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      background-color: rgba(0, 0, 0, 0.5);
+
+      .pisell-camera-photo-img-action-item {
+        padding: 20px 60px;
+        font-size: 20px;
+        color: #fff;
+        cursor: pointer;
+      }
+    }
+
+    .pisell-camera-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: transparent;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .pisell-camera-loading-text {
+        font-size: 18px;
+        color: #666;
+      }
+    }
+
+    .pisell-camera-no-camera {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      background-color: #f5f5f5;
+      padding: 40px;
+      text-align: center;
+
+      .pisell-camera-no-camera-icon {
+        font-size: 64px;
+        margin-bottom: 20px;
+        opacity: 0.6;
+      }
+
+      .pisell-camera-no-camera-text {
+        font-size: 20px;
+        color: #333;
+        margin-bottom: 12px;
+        font-weight: 500;
+      }
+
+      .pisell-camera-no-camera-desc {
+        font-size: 14px;
+        color: #666;
+        line-height: 1.5;
+        max-width: 300px;
+      }
+    }
+  }
+}

package/es/components/pisellToast/index.d.ts

@@ -13,5 +13,5 @@ export interface PisellToastProps {
     onClose?: () => void;
 }
 declare const PisellToast: (props: PisellToastProps) => void;
-export { default as useToast } from './squareToast/useToast';
+export { useToast } from './squareToast';
 export default PisellToast;

package/es/components/pisellToast/index.js

@@ -32,5 +32,5 @@ var PisellToast = function PisellToast(props) {
     onClose: onClose
   });
 };
-export { default as useToast } from "./squareToast/useToast";
+export { useToast } from "./squareToast";
 export default PisellToast;

package/es/components/pisellToast/squareToast/index.d.ts

@@ -1,25 +1,15 @@
-import React from 'react';
+import { clear, show, success, info, loading, fail, hide } from './methods';
 import './index.less';
-export declare type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading';
-export interface ToastProps {
-    /** Toast 类型 */
-    type?: ToastType;
-    /** 显示的内容，支持文本或 React 节点 */
-    message: React.ReactNode;
-    /** 是否显示 */
-    visible?: boolean;
-    /** 自动关闭时间，单位毫秒，0 表示不自动关闭 */
-    duration?: number;
-    /** 关闭回调 */
-    onClose?: () => void;
-    /** 自定义图标 */
-    icon?: React.ReactNode;
-    /** 自定义样式类名 */
-    className?: string;
-    /** 自定义样式 */
-    style?: React.CSSProperties;
-    /** 是否显示遮罩 */
-    mask?: boolean;
+interface ToastInstance {
+    show: typeof show;
+    clear: typeof clear;
+    success: typeof success;
+    info: typeof info;
+    loading: typeof loading;
+    fail: typeof fail;
+    error: typeof fail;
+    hide: typeof hide;
 }
-declare const Toast: React.FC<ToastProps>;
+declare const Toast: ToastInstance;
+export declare const useToast: () => ToastInstance;
 export default Toast;

package/es/components/pisellToast/squareToast/index.js

@@ -1,110 +1,28 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useEffect, useMemo, useState } from 'react';
-import Modal from "../../modal";
-import Icon from "../../icon";
-import classNames from 'classnames';
+import { useMemo } from 'react';
+import { clear, show, success, info, loading, fail, hide } from "./methods";
 import "./index.less";
-var icons = {
-  info: '',
-  success: 'iconchenggong-1-01',
-  error: 'icon-warning',
-  warning: 'icon-warning',
-  loading: 'icon-loading',
-  fail: 'icon-warning'
+var Toast = {
+  show: show,
+  clear: clear,
+  success: success,
+  info: info,
+  loading: loading,
+  fail: fail,
+  error: fail,
+  hide: hide
 };
-var Toast = function Toast(_ref) {
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'info' : _ref$type,
-    message = _ref.message,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? false : _ref$visible,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? 2000 : _ref$duration,
-    onClose = _ref.onClose,
-    icon = _ref.icon,
-    className = _ref.className,
-    _ref$mask = _ref.mask,
-    mask = _ref$mask === void 0 ? false : _ref$mask,
-    style = _ref.style;
-  var _useState = useState(visible),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalVisible = _useState2[0],
-    setInternalVisible = _useState2[1];
-  useEffect(function () {
-    setInternalVisible(visible);
-  }, [visible]);
-  useEffect(function () {
-    if (internalVisible && duration > 0) {
-      var timer = setTimeout(function () {
-        handleClose();
-      }, duration);
-      return function () {
-        return clearTimeout(timer);
-      };
-    }
-  }, [internalVisible, duration]);
-  var handleClose = function handleClose() {
-    setInternalVisible(false);
-    onClose === null || onClose === void 0 || onClose();
-  };
-  var showIcon = useMemo(function () {
-    return icon !== undefined || icons[type];
-  }, [type, icon]);
-  var renderIcon = function renderIcon() {
-    if (icon !== undefined) {
-      return icon;
-    }
-    var iconType = icons[type];
-    if (iconType) {
-      return /*#__PURE__*/React.createElement(Icon, {
-        type: iconType,
-        className: "pisell-square-toast-icon pisell-square-toast-icon-".concat(type)
-      });
-    }
-    return null;
-  };
-  return /*#__PURE__*/React.createElement(Modal, {
-    open: visible,
-    footer: null,
-    closable: false,
-    centered: true,
-    maskTransitionName: "",
-    transitionName: "",
-    getContainer: function getContainer() {
-      return document.body;
-    },
-    wrapClassName: "pisell-square-toast-wrap",
-    className: classNames('pisell-square-toast-modal', className),
-    width: "auto",
-    style: _objectSpread({
-      textAlign: 'center'
-    }, style),
-    bodyStyle: {
-      padding: 0
-    },
-    mask: mask,
-    modalRender: function modalRender() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "pisell-square-toast ".concat(type ? "pisell-square-toast-".concat(type) : '')
-      }, showIcon && /*#__PURE__*/React.createElement("div", {
-        className: "pisell-square-toast-icon-wrapper"
-      }, renderIcon()), /*#__PURE__*/React.createElement("div", {
-        className: "pisell-square-toast-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "pisell-square-toast-message"
-      }, message)));
-    }
-  });
+export var useToast = function useToast() {
+  return useMemo(function () {
+    return {
+      show: show,
+      clear: clear,
+      success: success,
+      info: info,
+      loading: loading,
+      fail: fail,
+      error: fail,
+      hide: hide
+    };
+  }, []);
 };
 export default Toast;

package/es/components/pisellToast/squareToast/index.less

@@ -5,6 +5,8 @@
 .pisell-square-toast-modal {
   pointer-events: none;
   user-select: none;
+  min-width: 190px;
+  min-height: 74px;
 
   // Toast 容器
   .pisell-square-toast {
@@ -19,7 +21,6 @@
     overflow: hidden;
     background: rgba(0, 0, 0, 0.8);
 
-    // 图标包装器
     .pisell-square-toast-icon-wrapper {
       display: flex;
       align-items: center;
@@ -43,27 +44,15 @@
 
     // 内容区域
     .pisell-square-toast-content {
-      .pisell-square-toast-message {
-        font-size: 20px;
-        line-height: 1.5;
-        color: #ffffff;
-        text-align: center;
-      }
-    }
-
-    // 带图标的样式调整
-    &.pisell-square-toast-success,
-    &.pisell-square-toast-error,
-    &.pisell-square-toast-warning,
-    &.pisell-square-toast-fail,
-    &.pisell-square-toast-loading {
-      min-width: 190px;
-      min-height: 74px;
+      font-size: 20px;
+      line-height: 1.5;
+      color: #ffffff;
+      text-align: center;
     }
   }
 }
 
-// 旋转动画
+// loading 旋转动画
 @keyframes fadenum {
   to {
     transform: rotate(360deg);

package/es/components/pisellToast/squareToast/methods.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ToastProps } from './toast';
+interface ToastInstance {
+    close: () => void;
+}
+declare const show: (configOrContent: Partial<ToastProps> | React.ReactNode, duration?: number, onClose?: () => void) => ToastInstance;
+declare const clear: () => void;
+declare const success: (content: React.ReactNode, duration?: number, onClose?: () => void) => ToastInstance;
+declare const info: (content: React.ReactNode, duration?: number, onClose?: () => void) => ToastInstance;
+declare const loading: (content: React.ReactNode, duration?: number, onClose?: () => void) => ToastInstance;
+declare const fail: (content: React.ReactNode, duration?: number, onClose?: () => void) => ToastInstance;
+declare const hide: () => void;
+export { show, clear, success, info, loading, fail, hide };