@pisell/materials 2.2.108 → 2.2.110

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import './index.less';
+export declare type ItemValue = string | number;
+export interface Item {
+    value: ItemValue;
+    label: React.ReactNode;
+    disabled: boolean;
+    type: 'text' | 'primary';
+    style?: React.CSSProperties;
+    size?: number;
+}
+export interface KeyboardProps {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange?: (value?: ItemValue) => void;
+    items?: Item[];
+    rightItems?: Item[];
+    keydown?: boolean;
+}
+declare const _default: React.MemoExoticComponent<(props: KeyboardProps) => JSX.Element>;
+export default _default;

package/es/components/keyboard/index.js

@@ -0,0 +1,159 @@
+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); }
+import React, { useRef } from 'react';
+import { Button } from 'antd';
+import "./index.less";
+import classNames from 'classnames';
+import { useEventListener, useMemoizedFn, useSize } from 'ahooks';
+var list = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', 'ok'];
+var defaultArr = [{
+  value: 1,
+  label: '1',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 2,
+  label: '2',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 3,
+  label: '3',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 4,
+  label: '4',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 5,
+  label: '5',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 6,
+  label: '6',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 7,
+  label: '7',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 8,
+  label: '8',
+  disabled: false,
+  type: 'text'
+}, {
+  value: 9,
+  label: '9',
+  disabled: false,
+  type: 'text'
+}, {
+  value: '0',
+  label: '0',
+  disabled: false,
+  type: 'text'
+}, {
+  value: '00',
+  label: '00',
+  disabled: false,
+  type: 'text'
+}, {
+  value: '.',
+  label: '.',
+  disabled: false,
+  type: 'text'
+}];
+var Keyboard = function Keyboard(props) {
+  var _props$items = props.items,
+    items = _props$items === void 0 ? defaultArr : _props$items,
+    className = props.className,
+    style = props.style,
+    onChange = props.onChange,
+    rightItems = props.rightItems,
+    _props$keydown = props.keydown,
+    keydown = _props$keydown === void 0 ? true : _props$keydown;
+  var contentRef = useRef(null);
+  var size = useSize(contentRef);
+  useEventListener('keydown', function (ev) {
+    console.log('ev', ev);
+    if (!keydown) {
+      return;
+    }
+    var key = ev.key;
+    if (key === 'Enter') {
+      key = 'ok';
+    }
+    if (key === 'keydown') {
+      key = '+';
+    }
+    if (list.includes(key)) {
+      onChange === null || onChange === void 0 || onChange(key);
+    }
+  });
+  var getHeight = useMemoizedFn(function () {
+    var itemSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+    // 默认高度为25% 的容器宽度 * size大小 + 间距
+    return ((size === null || size === void 0 ? void 0 : size.width) || 0) / 4 * itemSize + (itemSize - 1) * 7;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: props.id || '',
+    className: classNames('pisell-virtual-keyboard-wrap', className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-virtual-keyboard-content'),
+    ref: contentRef
+  }, items.map(function (item) {
+    var _item$style;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-virtual-keyboard-item",
+      style: item.style
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "pisell-virtual-keyboard-".concat(item.value),
+      key: item.value,
+      type: item.type,
+      className: "pisell-virtual-keyboard-item-button",
+      style: {
+        color: item.type === 'primary' ? '#fff' : ((_item$style = item.style) === null || _item$style === void 0 ? void 0 : _item$style.color) || undefined
+      },
+      disabled: item.disabled,
+      onClick: function onClick(e) {
+        onChange === null || onChange === void 0 || onChange(item.value);
+      }
+    }, item.label));
+  })), rightItems && /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-virtual-keyboard-content', 'pisell-virtual-keyboard-right'),
+    style: {
+      flex: "0 0 calc((100% - 21px) / 4 * 1)"
+    }
+  }, rightItems === null || rightItems === void 0 ? void 0 : rightItems.map(function (item) {
+    var _item$style2, _item$style3;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-virtual-keyboard-item",
+      style: _objectSpread(_objectSpread({}, item.style || {}), {}, {
+        height: getHeight(item.size)
+      })
+    }, /*#__PURE__*/React.createElement(Button, {
+      id: "pisell-virtual-keyboard-".concat(item.value),
+      key: item.value,
+      type: item.type,
+      className: "pisell-virtual-keyboard-item-button",
+      style: _objectSpread({
+        fontSize: ((_item$style2 = item.style) === null || _item$style2 === void 0 ? void 0 : _item$style2.fontSize) || 25,
+        color: item.type === 'primary' ? '#fff' : ((_item$style3 = item.style) === null || _item$style3 === void 0 ? void 0 : _item$style3.color) || undefined
+      }, item.type === 'primary' ? item.style || {} : {}),
+      disabled: item.disabled,
+      onClick: function onClick(e) {
+        onChange === null || onChange === void 0 || onChange(item.value);
+      }
+    }, item.label));
+  })));
+};
+export default /*#__PURE__*/React.memo(Keyboard);

package/es/components/keyboard/index.less

@@ -0,0 +1,44 @@
+.pisell-virtual-keyboard-wrap {
+  display: flex;
+  gap: 7px;
+  .pisell-virtual-keyboard-content {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 7px;
+
+    .pisell-virtual-keyboard-item {
+      border-radius: 5px;
+      background: var(--Base-White, #fff);
+      box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.06);;
+      overflow: hidden;
+      width: calc((100% - 14px) / 3 * 1);
+      padding-top: 25%;
+      position: relative;
+
+      .pisell-virtual-keyboard-item-button {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: 5px;
+        color: var(--Base-Black, #000);
+        font-size: 25px;
+        font-style: normal;
+        font-weight: 400;
+        box-shadow: none;
+        padding: 0 !important;
+      }
+    }
+  }
+  .pisell-virtual-keyboard-right {
+    flex-direction: column;
+    justify-content: start;
+    .pisell-virtual-keyboard-item{
+      width: 100%;
+    }
+  }
+}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./index.less";
 declare const List: {
     (props: any): JSX.Element;

package/es/components/login-and-register/index.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import './index.less';
+/**
+ * loginAndRegister组件的属性接口
+ */
+export interface loginAndRegisterProps {
+    /** Logo相关配置 */
+    showLogo?: boolean;
+    logo?: string;
+    logoPosition?: 'left' | 'center' | 'right';
+    logoSize?: {
+        width?: number;
+        height?: number;
+    };
+    /** 标题相关配置 */
+    title?: string;
+    showTitle?: boolean;
+    titleAlign?: 'left' | 'center' | 'right';
+    /** 副标题相关配置 */
+    subtitle?: string;
+    showSubtitle?: boolean;
+    subtitleAlign?: 'left' | 'center' | 'right';
+    /** 登录方式配置 */
+    loginMethods?: ('email' | 'google' | 'facebook' | 'apple')[];
+    defaultLoginMethod?: 'email' | 'google' | 'facebook' | 'apple';
+    /** 表单配置 */
+    emailLabel?: string;
+    passwordLabel?: string;
+    emailPlaceholder?: string;
+    passwordPlaceholder?: string;
+    emailRules?: any[];
+    buttonText?: string;
+    rememberMeText?: string;
+    forgotPasswordText?: string;
+    showRememberMe?: boolean;
+    showForgotPassword?: boolean;
+    /** 社交登录配置 */
+    socialLoginTexts?: {
+        google?: string;
+        facebook?: string;
+        apple?: string;
+    };
+    /** 底部配置 */
+    showFooter?: boolean;
+    showSignUp?: boolean;
+    signUpText?: string;
+    signUpLink?: string;
+    signUpPosition?: 'left' | 'center' | 'right';
+    otherLinks?: Array<{
+        text: string;
+        url: string;
+    }>;
+    otherLinksPosition?: 'left' | 'center' | 'right';
+    /** 登录/注册切换配置 */
+    showTabs?: boolean;
+    loginTabText?: string;
+    registerTabText?: string;
+    /** 注册表单配置 */
+    registerEmailPlaceholder?: string;
+    registerPasswordPlaceholder?: string;
+    registerButtonText?: string;
+    /** 事件回调 */
+    onLogin?: (values: {
+        email: string;
+        loginMethod: string;
+    }) => void;
+    onSocialLogin?: (type: 'google' | 'facebook' | 'apple') => void;
+    onSignUp?: () => void;
+    onRegister?: (values: {
+        email: string;
+        password: string;
+    }) => void;
+    /** 新增背景图片属性 */
+    backgroundImage?: string;
+}
+/**
+ * Saas登录组件
+ * @param props - 组件属性
+ * @returns React组件
+ */
+declare const loginAndRegister: React.FC<loginAndRegisterProps>;
+export default loginAndRegister;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ConfigProviderProps } from '../config-provider';
 interface PageProps extends ConfigProviderProps {
 }

package/es/components/pisell-config-provider/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PisellContextType } from './context';
+interface PisellConfigProviderType {
+    platform?: PisellContextType['platform'];
+    children: React.ReactNode;
+    /** 货币符号 */
+    symbol?: string;
+    /** 当前语言环境 */
+    locale?: string;
+    getSymbolic?: () => string;
+}
+declare const PisellConfigProvider: React.FC<PisellConfigProviderType>;
+export default PisellConfigProvider;

package/es/components/pisellAdjustPrice/PisellAdjustPriceInputNumber.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { InputNumberProps } from 'antd/es/input-number';
 export interface PisellAdjustPriceInputNumberProps extends Omit<InputNumberProps, 'onChange'> {
     value?: number;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const PisellCamera: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default PisellCamera;

package/es/components/pisellCamera/index.js

@@ -0,0 +1,228 @@
+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 Iconfont from "../iconfont";
+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,
+    facingMode: "environment",
+    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-wrap",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      takePhoto();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-camera-action-item"
+  }, /*#__PURE__*/React.createElement(Iconfont, {
+    type: "pisell2-camera-01",
+    style: {
+      fontSize: 32
+    }
+  })))), 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;