@arco-design/mobile-react 2.19.1 → 2.21.0

package/esm/image-picker/index.js

@@ -0,0 +1,302 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useRef, forwardRef, useImperativeHandle } from 'react';
+import { Promise } from 'es6-promise';
+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';
+export * from './type';
+/**
+ * 图片选择器组件
+ * @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);
+  var cacheRef = useRef([]);
+  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, fromAdapter) {
+    var files = Array.prototype.filter.call(event.target.files || [], function (file) {
+      // 过滤maxSize
+      if (maxSize && file.size > maxSize * 1024) {
+        onMaxSizeExceed && onMaxSizeExceed(file);
+        return false;
+      }
+
+      return true;
+    }) || [];
+
+    if (!fromAdapter) {
+      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: typeof upload === 'function' ? 'loading' : 'loaded',
+          file: files[index]
+        };
+      });
+      cacheRef.current = [].concat(images, res);
+      onChange([].concat(cacheRef.current)); // 执行upload
+
+      if (typeof upload === 'function') {
+        files.forEach(function (_file) {
+          upload(cacheRef.current.find(function (_ref) {
+            var file = _ref.file;
+            return file === _file;
+          })).then(function (data) {
+            var index = cacheRef.current.findIndex(function (_ref2) {
+              var file = _ref2.file;
+              return file === _file;
+            });
+            cacheRef.current[index] = _extends({}, cacheRef.current[index], data, {
+              status: undefined
+            });
+          }).catch(function () {
+            var index = cacheRef.current.findIndex(function (_ref3) {
+              var file = _ref3.file;
+              return file === _file;
+            });
+            cacheRef.current[index].status = 'error';
+          }).finally(function () {
+            onChange([].concat(cacheRef.current));
+          });
+        });
+      }
+    });
+  };
+
+  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;
+      onLongPress == null ? void 0 : onLongPress(e, image, index);
+    }, 750);
+  };
+
+  var handleClick = function handleClick(e, image, index) {
+    clearTimeout(timeOutEvent);
+
+    if (timeOutEvent !== 0) {
+      onClick == null ? void 0 : onClick(e, image, index);
+    }
+  };
+
+  var handleSelect = function handleSelect() {
+    var _fileRef$current;
+
+    selectAdapter ? selectAdapter().then(function (_ref4) {
+      var files = _ref4.files;
+      return handleChange({
+        target: {
+          files: files
+        }
+      }, true);
+    }) : (_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);
+          },
+          onClick: function onClick(e) {
+            return handleClick(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: function onChange(e) {
+            return handleChange(e);
+          },
+          ref: fileRef
+        }) : null)),
+        title: ''
+      });
+    }
+
+    return data;
+  };
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref5) {
+    var _cls2;
+
+    var prefixCls = _ref5.prefixCls,
+        _ref5$locale = _ref5.locale,
+        locale = _ref5$locale === void 0 ? defaultLocale : _ref5$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

@@ -0,0 +1,147 @@
+.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

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

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

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

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

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

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

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

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

@@ -0,0 +1,116 @@
+@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()
+        }
+        .@{prefix}-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;
+}