@arco-design/mobile-react 2.19.1-941e02b.7 → 2.19.1

package/umd/image-picker/index.d.ts

@@ -1,181 +0,0 @@
-import React, { InputHTMLAttributes } from 'react';
-import { ImageProps } from '../image';
-export interface ImagePickItem {
-    /**
-     * 图片地址
-     * @en Image Url
-     */
-    url: string;
-    /**
-     * 图片文件
-     * @en Image File
-     */
-    file?: File;
-    /**
-     * 图片状态
-     * @en Image Status
-     * @default 'loaded'
-     */
-    status: 'loaded' | 'loading' | 'error';
-}
-export interface AdapterFile {
-    url?: string;
-    size: number;
-    name: string;
-}
-export interface SelectCallback {
-    files: AdapterFile[];
-}
-export interface ImagePickerProps {
-    /**
-     * 自定义类名
-     * @en Custom className
-     */
-    className?: string;
-    /**
-     * 自定义样式
-     * @en Custom stylesheet
-     */
-    style?: React.CSSProperties;
-    /**
-     * 已选择图片列表
-     * @en selected images list
-     */
-    images: ImagePickItem[];
-    /**
-     * 可以选择的文件类型
-     * @en Available File Types
-     * @default 'image/*'
-     */
-    accept?: string;
-    /**
-     * 是否支持多选
-     * @en Whether To Support Multiple Selection
-     */
-    multiple?: boolean;
-    /**
-     * 图片选取模式 Image selection mode [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
-     * @en Whether To Support Multiple Selection [capture MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)
-     */
-    capture?: InputHTMLAttributes<unknown>['capture'];
-    /**
-     * 一行展示图片张数
-     * @en The Number Of Pictures Displayed In A Row
-     * @default 3
-     */
-    columns?: number;
-    /**
-     * 格子间的间距
-     * @en spacing between grids
-     * @default 8
-     */
-    gutter?: number;
-    /**
-     * 最多选择图片张数，超出数量自动隐藏上传按钮，0表示不做限制
-     * @en max Pictures Can Choose
-     */
-    limit?: number;
-    /**
-     * 文件大小限制，单位为K
-     * @en File size limit, in K
-     */
-    maxSize?: number;
-    /**
-     * 是否隐藏删除Icon
-     * @en Whether to hide delete Icon
-     * @default false
-     */
-    hideDelete?: boolean;
-    /**
-     * 是否隐藏选择Icon
-     * @en Whether to hide Select Icon
-     * @default false
-     */
-    hideSelect?: boolean;
-    /**
-     * 是否总是展示选择Icon，默认情况下当图片数量超出limit值时会自动隐藏选择Icon
-     * @en Whether to always show Select Icon
-     * @default false
-     */
-    alwaysShowSelect?: boolean;
-    /**
-     * 禁用选择和删除图片
-     * @en Disable Select & Delete Image
-     */
-    disabled?: boolean;
-    /**
-     * 自定义删除图标
-     * @en Defined Delete Icon
-     */
-    deleteIcon?: React.ReactNode;
-    /**
-     * 自定义选择图标
-     * @en Defined Select Icon
-     */
-    selectIcon?: React.ReactNode;
-    /**
-     * 透传给图片的属性
-     * @en Attributes passed through to the image
-     */
-    imageProps?: ImageProps;
-    /**
-     * 自定义上传失败展示
-     * @en Defined upload failed display
-     */
-    renderError?: (index?: number) => React.ReactNode | React.ReactNode;
-    /**
-     * 自定义上传中展示
-     * @en Defined uploading display
-     */
-    renderLoading?: (index?: number) => React.ReactNode | React.ReactNode;
-    /**
-     * 上传方法
-     * @en upload function
-     */
-    upload?: (file: ImagePickItem) => Promise<ImagePickItem | null>;
-    onSelect?: (...args: any[]) => void;
-    /**
-     * 已选图片列表发生变化
-     * @en The list of selected images changes
-     */
-    onChange?: (fileList: ImagePickItem[]) => Promise<void>;
-    /**
-     * 图片超过限制大小
-     * @en Image exceeds size limit
-     */
-    onMaxSizeExceed?: (file: File) => void;
-    /**
-     * 选择张数超过限制
-     * @en The number of pictures exceeds the limit
-     */
-    onLimitExceed?: (files: File[]) => void;
-    /**
-     * 图片点击
-     * @en click event
-     */
-    onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
-    /**
-     * 图片长按事件
-     * @en long press event
-     */
-    onLongPress?: (e: React.MouseEvent<HTMLElement, MouseEvent>, image: ImagePickItem, index: number) => void;
-    /**
-     * 图片选择适配器
-     * @en Select Adaptor
-     */
-    selectAdapter: () => Promise<SelectCallback>;
-}
-export interface ImagePickerRef {
-    /** 最外层元素 DOM */
-    dom: HTMLDivElement | null;
-}
-/**
- * 图片选择器组件
- * @en ImagePicker Component
- * @type 数据输入
- * @type_en Data Entry
- * @name 图片选择器
- * @name_en ImagePicker
- */
-declare const ImagePicker: React.ForwardRefExoticComponent<ImagePickerProps & React.RefAttributes<ImagePickerRef>>;
-export default ImagePicker;

package/umd/image-picker/index.js

@@ -1,304 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "@babel/runtime/helpers/extends", "react", "@arco-design/mobile-utils", "../context-provider", "../icon", "../image", "../grid", "./add-icon"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("@babel/runtime/helpers/extends"), require("react"), require("@arco-design/mobile-utils"), require("../context-provider"), require("../icon"), require("../image"), require("../grid"), require("./add-icon"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global._extends, global.react, global.mobileUtils, global.contextProvider, global.icon, global.image, global.grid, global.addIcon);
-    global.index = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _extends2, _react, _mobileUtils, _contextProvider, _icon, _image, _grid, _addIcon) {
-  "use strict";
-
-  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-  _exports.__esModule = true;
-  _exports.default = void 0;
-  _extends2 = _interopRequireDefault(_extends2);
-  _react = _interopRequireWildcard(_react);
-  _image = _interopRequireDefault(_image);
-  _grid = _interopRequireDefault(_grid);
-  _addIcon = _interopRequireDefault(_addIcon);
-
-  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-  /**
-   * 图片选择器组件
-   * @en ImagePicker Component
-   * @type 数据输入
-   * @type_en Data Entry
-   * @name 图片选择器
-   * @name_en ImagePicker
-   */
-  var ImagePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-    var _props$className = props.className,
-        className = _props$className === void 0 ? '' : _props$className,
-        style = props.style,
-        _props$accept = props.accept,
-        accept = _props$accept === void 0 ? 'image/*' : _props$accept,
-        _props$multiple = props.multiple,
-        multiple = _props$multiple === void 0 ? false : _props$multiple,
-        capture = props.capture,
-        _props$columns = props.columns,
-        columns = _props$columns === void 0 ? 3 : _props$columns,
-        _props$gutter = props.gutter,
-        gutter = _props$gutter === void 0 ? 8 : _props$gutter,
-        _props$limit = props.limit,
-        limit = _props$limit === void 0 ? 0 : _props$limit,
-        _props$images = props.images,
-        images = _props$images === void 0 ? [] : _props$images,
-        maxSize = props.maxSize,
-        disabled = props.disabled,
-        deleteIcon = props.deleteIcon,
-        selectIcon = props.selectIcon,
-        _props$hideDelete = props.hideDelete,
-        hideDelete = _props$hideDelete === void 0 ? false : _props$hideDelete,
-        _props$hideSelect = props.hideSelect,
-        hideSelect = _props$hideSelect === void 0 ? false : _props$hideSelect,
-        _props$alwaysShowSele = props.alwaysShowSelect,
-        alwaysShowSelect = _props$alwaysShowSele === void 0 ? false : _props$alwaysShowSele,
-        imageProps = props.imageProps,
-        renderLoading = props.renderLoading,
-        renderError = props.renderError,
-        onLongPress = props.onLongPress,
-        onClick = props.onClick,
-        _props$onChange = props.onChange,
-        onChange = _props$onChange === void 0 ? function () {
-      return null;
-    } : _props$onChange,
-        onMaxSizeExceed = props.onMaxSizeExceed,
-        onLimitExceed = props.onLimitExceed,
-        upload = props.upload,
-        selectAdapter = props.selectAdapter;
-    var domRef = (0, _react.useRef)(null);
-    var fileRef = (0, _react.useRef)(null);
-    (0, _react.useImperativeHandle)(ref, function () {
-      return {
-        dom: domRef.current
-      };
-    });
-
-    var parseFile = function parseFile(file) {
-      return new Promise(function (resolve, reject) {
-        if (file.url) {
-          resolve(file.url);
-        } else {
-          var reader = new FileReader();
-
-          reader.onload = function (e) {
-            var _e$target;
-
-            var dataURL = (_e$target = e.target) == null ? void 0 : _e$target.result;
-
-            if (!dataURL) {
-              reject(new Error('file parse error'));
-            }
-
-            resolve(dataURL);
-          };
-
-          reader.onerror = function () {
-            reject(new Error('file parse error'));
-          };
-
-          reader.readAsDataURL(file);
-        }
-      });
-    };
-
-    var handleChange = function handleChange(event) {
-      var files = [].concat(event.target.files || []).filter(function (file) {
-        // 过滤maxSize
-        if (maxSize && file.size > maxSize * 1024) {
-          onMaxSizeExceed && onMaxSizeExceed(file);
-          return false;
-        }
-
-        return true;
-      }) || [];
-      event.target.value = ''; // 截断limit
-
-      if (limit !== 0 && files.length + images.length > limit) {
-        onLimitExceed && onLimitExceed(files);
-        files.length = limit - images.length;
-      } // 解析文件生成预览
-
-
-      Promise.all(files.map(function (file) {
-        return parseFile(file);
-      })).then(function (parseFiles) {
-        var res = parseFiles.map(function (url, index) {
-          return {
-            url: url,
-            status: upload ? 'loading' : 'loaded',
-            file: files[index]
-          };
-        });
-        var cacheRes = [].concat(images, res);
-        onChange(cacheRes); // 执行upload
-
-        if (typeof upload === 'function') {
-          var propsImageLength = images.length;
-          files.forEach(function (_file, index) {
-            upload(cacheRes[propsImageLength + index]).then(function (data) {
-              cacheRes[propsImageLength + index] = (0, _extends2.default)({}, cacheRes[propsImageLength + index], data);
-            }).catch(function () {
-              cacheRes[propsImageLength + index].status = 'error';
-            }).finally(function () {
-              cacheRes[propsImageLength + index].status = 'loaded';
-              onChange([].concat(cacheRes));
-            });
-          });
-        }
-      });
-    };
-
-    var handleDelete = function handleDelete(index) {
-      onChange(images.filter(function (_i, j) {
-        return j !== index;
-      }));
-    }; // click && longPress
-
-
-    var timeOutEvent;
-
-    var handleTouchStart = function handleTouchStart(e, image, index) {
-      e.preventDefault();
-      timeOutEvent = setTimeout(function () {
-        timeOutEvent = 0;
-        typeof onLongPress === 'function' && onLongPress(e, image, index);
-      }, 750);
-    };
-
-    var handleTouchEnd = function handleTouchEnd(e, image, index) {
-      clearTimeout(timeOutEvent);
-
-      if (timeOutEvent !== 0) {
-        typeof onClick === 'function' && onClick(e, image, index);
-      }
-    };
-
-    var handleSelect = function handleSelect() {
-      var _fileRef$current;
-
-      selectAdapter ? selectAdapter().then(function (_ref) {
-        var files = _ref.files;
-        return handleChange({
-          target: {
-            files: files
-          }
-        });
-      }) : (_fileRef$current = fileRef.current) == null ? void 0 : _fileRef$current.click();
-    };
-
-    var getGridData = function getGridData(prefixCls, locale) {
-      var errorNode = function errorNode(index) {
-        if (renderError) {
-          return typeof renderError === 'function' ? renderError(index) : renderError;
-        }
-
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: prefixCls + "-image-picker-error"
-        }, /*#__PURE__*/_react.default.createElement("p", null, locale.ImagePicker.loadError));
-      };
-
-      var loadingNode = function loadingNode(index) {
-        if (renderLoading) {
-          return typeof renderLoading === 'function' ? renderLoading(index) : renderLoading;
-        }
-
-        return null;
-      };
-
-      var data = (limit && limit < images.length ? images.slice(0, limit) : images).map(function (image, index) {
-        var url = image.url,
-            status = image.status;
-        return {
-          img: /*#__PURE__*/_react.default.createElement("div", {
-            key: index + "-" + url,
-            className: prefixCls + "-image-picker-image"
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            onTouchStart: function onTouchStart(e) {
-              return handleTouchStart(e, image, index);
-            },
-            onTouchEnd: function onTouchEnd(e) {
-              return handleTouchEnd(e, image, index);
-            },
-            className: prefixCls + "-image-picker-image-container"
-          }, /*#__PURE__*/_react.default.createElement(_image.default, (0, _extends2.default)({
-            showLoading: true,
-            showError: true
-          }, imageProps || {}, {
-            src: url,
-            errorArea: errorNode(index),
-            loadingArea: loadingNode(index),
-            status: status || (imageProps == null ? void 0 : imageProps.status)
-          })), /*#__PURE__*/_react.default.createElement("div", {
-            className: prefixCls + "-image-picker-image-mask"
-          })), !hideDelete && /*#__PURE__*/_react.default.createElement("div", {
-            className: prefixCls + "-image-picker-close",
-            onClick: function onClick() {
-              return handleDelete(index);
-            }
-          }, deleteIcon || /*#__PURE__*/_react.default.createElement("div", {
-            className: prefixCls + "-image-picker-close-icon"
-          }, /*#__PURE__*/_react.default.createElement(_icon.IconClose, null)))),
-          title: ''
-        };
-      });
-      var showSelect = !hideSelect && images.length < (limit || Infinity);
-      var disableSelect = disabled || alwaysShowSelect && !showSelect;
-
-      if (showSelect || alwaysShowSelect) {
-        var _cls;
-
-        data.push({
-          img: /*#__PURE__*/_react.default.createElement("div", {
-            className: (0, _mobileUtils.cls)(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
-            onClick: handleSelect
-          }, /*#__PURE__*/_react.default.createElement("div", {
-            className: prefixCls + "-image-picker-add-container"
-          }, selectIcon || /*#__PURE__*/_react.default.createElement("div", {
-            className: prefixCls + "-image-picker-add-icon"
-          }, /*#__PURE__*/_react.default.createElement(_addIcon.default, null)), !selectAdapter ? /*#__PURE__*/_react.default.createElement("input", {
-            capture: capture,
-            accept: accept,
-            multiple: multiple,
-            type: "file",
-            onChange: handleChange,
-            ref: fileRef
-          }) : null)),
-          title: ''
-        });
-      }
-
-      return data;
-    };
-
-    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref2) {
-      var _cls2;
-
-      var prefixCls = _ref2.prefixCls,
-          _ref2$locale = _ref2.locale,
-          locale = _ref2$locale === void 0 ? _mobileUtils.defaultLocale : _ref2$locale;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _mobileUtils.cls)(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
-        style: style,
-        ref: domRef
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: prefixCls + "-image-picker-container"
-      }, /*#__PURE__*/_react.default.createElement(_grid.default, {
-        data: getGridData(prefixCls, locale),
-        gutter: gutter,
-        columns: columns
-      })));
-    });
-  });
-  var _default = ImagePicker;
-  _exports.default = _default;
-});

package/umd/image-picker/style/css/index.css

@@ -1,147 +0,0 @@
-.arco-image-picker {
-  font-size:  0.28rem ;
-}
-.arco-image-picker-container {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-wrap: wrap;
-          flex-wrap: wrap;
-}
-.arco-image-picker-image {
-  position: relative;
-  width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  padding-top: 100%;
-  border-radius:  0.04rem ;
-  overflow: hidden;
-}
-.arco-image-picker-image-container {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-}
-.arco-image-picker-image .arco-image {
-  height: 100%;
-  width: 100%;
-}
-.arco-image-picker-image-mask {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
-}
-.arco-image-picker-add {
-  background-color:  #f7f8fa ;
-  border-radius:  0.04rem ;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: 100%;
-}
-.arco-image-picker-add-container {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  text-align: center;
-  font-size:  0.24rem ;
-  color:  #86909c ;
-}
-.arco-image-picker-add-icon {
-  font-size:  0.6rem ;
-  color:  #d8d8d8 ;
-}
-.arco-image-picker-add-icon svg {
-  display: block;
-}
-.arco-image-picker-add-disabled {
-  pointer-events: none;
-}
-.arco-image-picker-add-disabled .arco-image-picker-add-icon {
-  opacity:  0.7 ;
-}
-.arco-image-picker-add input {
-  position: absolute;
-  opacity: 0;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-}
-.arco-image-picker-close {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-}
-.arco-image-picker-close-icon {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  font-size:  0.24rem ;
-  width:  0.36rem ;
-  height:  0.36rem ;
-  color:  #ffffff ;
-  background:  rgba(0, 0, 0, 0.3) ;
-  border-radius:  0 0.04rem ;
-}
-.arco-image-picker-error {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-          justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-          align-items: center;
-  background:  rgba(0, 0, 0, 0.5) ;
-  color:  #ffffff ;
-  font-size:  0.28rem ;
-}
-.arco-image-picker-disabled {
-  pointer-events: none;
-}

package/umd/image-picker/style/css/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../../style/css/public.css';
-import './index.css';

package/umd/image-picker/style/css/index.js

@@ -1,15 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["../../../../style/css/public.css", "./index.css"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(require("../../../../style/css/public.css"), require("./index.css"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(global._public, global.index);
-    global.index = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
-  "use strict";
-});

package/umd/image-picker/style/index.d.ts

@@ -1,2 +0,0 @@
-import '../../../style/public.less';
-import './index.less';

package/umd/image-picker/style/index.js

@@ -1,15 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["../../../style/public.less", "./index.less"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(require("../../../style/public.less"), require("./index.less"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(global._public, global.index);
-    global.index = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
-  "use strict";
-});