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

package/esm/image-picker/index.js

@@ -1,282 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, forwardRef, useImperativeHandle } from 'react';
-import { cls, defaultLocale } from '@arco-design/mobile-utils';
-import { ContextLayout } from '../context-provider';
-import { IconClose } from '../icon';
-import Image from '../image';
-import Grid from '../grid';
-import AddIcon from './add-icon';
-
-/**
- * 图片选择器组件
- * @en ImagePicker Component
- * @type 数据输入
- * @type_en Data Entry
- * @name 图片选择器
- * @name_en ImagePicker
- */
-var ImagePicker = /*#__PURE__*/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 = useRef(null);
-  var fileRef = useRef(null);
-  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] = _extends({}, 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.createElement("div", {
-        className: prefixCls + "-image-picker-error"
-      }, /*#__PURE__*/React.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.createElement("div", {
-          key: index + "-" + url,
-          className: prefixCls + "-image-picker-image"
-        }, /*#__PURE__*/React.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.createElement(Image, _extends({
-          showLoading: true,
-          showError: true
-        }, imageProps || {}, {
-          src: url,
-          errorArea: errorNode(index),
-          loadingArea: loadingNode(index),
-          status: status || (imageProps == null ? void 0 : imageProps.status)
-        })), /*#__PURE__*/React.createElement("div", {
-          className: prefixCls + "-image-picker-image-mask"
-        })), !hideDelete && /*#__PURE__*/React.createElement("div", {
-          className: prefixCls + "-image-picker-close",
-          onClick: function onClick() {
-            return handleDelete(index);
-          }
-        }, deleteIcon || /*#__PURE__*/React.createElement("div", {
-          className: prefixCls + "-image-picker-close-icon"
-        }, /*#__PURE__*/React.createElement(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.createElement("div", {
-          className: cls(prefixCls + "-image-picker-add", (_cls = {}, _cls[prefixCls + "-image-picker-add-disabled"] = disableSelect, _cls)),
-          onClick: handleSelect
-        }, /*#__PURE__*/React.createElement("div", {
-          className: prefixCls + "-image-picker-add-container"
-        }, selectIcon || /*#__PURE__*/React.createElement("div", {
-          className: prefixCls + "-image-picker-add-icon"
-        }, /*#__PURE__*/React.createElement(AddIcon, null)), !selectAdapter ? /*#__PURE__*/React.createElement("input", {
-          capture: capture,
-          accept: accept,
-          multiple: multiple,
-          type: "file",
-          onChange: handleChange,
-          ref: fileRef
-        }) : null)),
-        title: ''
-      });
-    }
-
-    return data;
-  };
-
-  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref2) {
-    var _cls2;
-
-    var prefixCls = _ref2.prefixCls,
-        _ref2$locale = _ref2.locale,
-        locale = _ref2$locale === void 0 ? defaultLocale : _ref2$locale;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-image-picker", className, (_cls2 = {}, _cls2[prefixCls + "-image-picker-disabled"] = disabled, _cls2)),
-      style: style,
-      ref: domRef
-    }, /*#__PURE__*/React.createElement("div", {
-      className: prefixCls + "-image-picker-container"
-    }, /*#__PURE__*/React.createElement(Grid, {
-      data: getGridData(prefixCls, locale),
-      gutter: gutter,
-      columns: columns
-    })));
-  });
-});
-export default ImagePicker;

package/esm/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/esm/image-picker/style/css/index.d.ts

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

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

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

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

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

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

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

package/esm/image-picker/style/index.less

@@ -1,116 +0,0 @@
-@import '../../../style/mixin.less';
-
-.@{prefix}-image-picker {
-    .use-var(font-size, image-picker-font-size);
-    &-container {
-        display: flex;
-        flex-wrap: wrap;
-    }
-    .container() {
-        position: absolute;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        left: 0;
-    }
-    &-image {
-        position: relative;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding-top: 100%;
-        .use-var(border-radius, image-picker-border-radius);
-        overflow: hidden;
-        &-container {
-            .container()
-        }
-        .arco-image{
-            height: 100%;
-            width: 100%;
-        }
-        &-mask {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 2;
-        }
-    }
-    &-add {
-        .use-var(background-color, image-picker-add-background);
-        .use-var(border-radius, image-picker-border-radius);
-        position: relative;
-        width: 100%;
-        height: 100%;
-        padding-top: 100%;
-        &-container {
-            .container();
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            .use-var(font-size, image-picker-add-text-font-size);
-            .use-var(color, image-picker-add-text-color);
-        }
-        &-icon {
-            .use-var(font-size, image-picker-add-icon-font-size);
-            .use-var(color, image-picker-add-icon-color);
-            svg {
-                display: block;
-            }
-        }
-        &-disabled {
-            pointer-events: none;
-        }
-        &-disabled &-icon {
-            .use-var(opacity, image-picker-disabled-opacity);
-        }
-        input {
-            position: absolute;
-            opacity: 0;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            display: none;
-        }
-    }
-    &-close {
-        position: absolute;
-        top: 0;
-        right: 0;
-        z-index: 2;
-        &-icon {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            .use-var(font-size, image-picker-close-font-size);
-            .use-var(width, image-picker-close-width);
-            .use-var(height, image-picker-close-height);
-            .use-var(color, image-picker-close-color);
-            .use-var(background, image-picker-close-background);
-            .use-var(border-radius, image-picker-close-border-radius);
-        }
-    }
-    &-error {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        .use-var(background, image-picker-error-background);
-        .use-var(color, image-picker-error-color);
-        .use-var(font-size, image-picker-font-size);
-    }
-}
-
-.@{prefix}-image-picker-disabled {
-    pointer-events: none;
-}

package/umd/image-picker/add-icon.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function AddIcon(): JSX.Element;

package/umd/image-picker/add-icon.js

@@ -1,35 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "react"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("react"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.react);
-    global.addIcon = mod.exports;
-  }
-})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
-  "use strict";
-
-  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-  _exports.__esModule = true;
-  _exports.default = AddIcon;
-  _react = _interopRequireDefault(_react);
-
-  function AddIcon() {
-    return /*#__PURE__*/_react.default.createElement("svg", {
-      width: "30",
-      height: "30",
-      viewBox: "0 0 30 30",
-      fill: "none"
-    }, /*#__PURE__*/_react.default.createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M14.5 0C14.2239 0 14 0.223857 14 0.5V14H0.5C0.223858 14 0 14.2239 0 14.5V15.5C0 15.7761 0.223857 16 0.5 16H14V29.5C14 29.7761 14.2239 30 14.5 30H15.5C15.7761 30 16 29.7761 16 29.5V16H29.5C29.7761 16 30 15.7761 30 15.5V14.5C30 14.2239 29.7761 14 29.5 14H16V0.5C16 0.223858 15.7761 0 15.5 0H14.5Z",
-      fill: "#C9CDD4"
-    }));
-  }
-});

package/umd/image-picker/demo/style/css/mobile.css

@@ -1,40 +0,0 @@
-#demo-image-picker .demo-space {
-  font-size: 14px;
-  line-height: 1;
-  margin: 8px 0;
-}
-#demo-image-picker #demo-order-5 .custom-delete {
-  top: 4px;
-  right: 4px;
-  font-size: 18px;
-  position: absolute;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  line-height: 16px;
-  text-align: center;
-}
-#demo-image-picker #demo-order-5 .custom-delete-bg {
-  background-color: #0000004d;
-}
-#demo-image-picker #demo-order-6 .loading,
-#demo-image-picker #demo-order-6 .loading1,
-#demo-image-picker #demo-order-6 .load-error,
-#demo-image-picker #demo-order-6 .load-error1 {
-  background: rgba(0, 0, 0, 0.5);
-  text-align: center;
-  line-height: 1.5;
-  font-size: 14px;
-  color: #fff;
-  width: 100%;
-  height: 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;
-}

package/umd/image-picker/demo/style/mobile.less

@@ -1,42 +0,0 @@
-@import '../../../../style/mixin.less';
-
-#demo-image-picker {
-    .demo-space{
-        font-size: 14px;
-        line-height: 1;
-        margin: 8px 0;
-    }
-    #demo-order-5 {
-        .custom-delete {
-            top: 4px;
-            right: 4px;
-            font-size: 18px;
-            position: absolute;
-            border-radius: 50%;
-            width: 18px;
-            height: 18px;
-            line-height: 16px;
-            text-align: center;
-        }
-        .custom-delete-bg {
-            background-color: #0000004d;
-        }
-    }
-    #demo-order-6 {
-        .loading,
-        .loading1,
-        .load-error,
-        .load-error1 {
-            background: rgba(0, 0, 0, 0.5);
-            text-align: center;
-            line-height: 1.5;
-            font-size: 14px;
-            color: #fff;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-    }
-}