@arco-design/mobile-react 2.19.0

package/esm/image/index.js

@@ -0,0 +1,319 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef, useImperativeHandle, useRef, useEffect, useMemo } from 'react';
+import { cls, handleUnit, nextTick } from '@arco-design/mobile-utils';
+import { ContextLayout } from '../context-provider';
+import Loading from '../loading';
+import { useSystem, useWindowSize, getStyleWithVendor, useMountedState } from '../_helpers';
+
+/**
+ * 增强版的 img 标签，提供多种图片填充模式，支持图片加载中提示、加载失败提示。
+ * @en Enhanced img tag, provides a variety of image filling modes, and supports image loading prompts and loading failure prompts.
+ * @type 数据展示
+ * @type_en Data Display
+ * @name 图片
+ * @name_en Image
+ */
+export var BaseImage = /*#__PURE__*/forwardRef(function (props, ref) {
+  var system = useSystem();
+
+  var _useWindowSize = useWindowSize(),
+      windowWidth = _useWindowSize.windowWidth,
+      windowHeight = _useWindowSize.windowHeight;
+
+  var _useMountedState = useMountedState('init'),
+      imageStatus = _useMountedState[0],
+      setImageStatus = _useMountedState[1];
+
+  var _useMountedState2 = useMountedState(''),
+      wrapClass = _useMountedState2[0],
+      setWrapClass = _useMountedState2[1];
+
+  var _useMountedState3 = useMountedState(false),
+      staticRetrying = _useMountedState3[0],
+      setStaticRetrying = _useMountedState3[1];
+
+  var imageRef = useRef(null);
+  var imageDomRef = useRef(null);
+  var wrapRef = useRef(null);
+  var retryCountRef = useRef(0);
+  var loadingImageRef = useRef(null);
+  var style = props.style,
+      className = props.className,
+      _props$status = props.status,
+      status = _props$status === void 0 ? 'init' : _props$status,
+      src = props.src,
+      width = props.width,
+      height = props.height,
+      _props$alt = props.alt,
+      alt = _props$alt === void 0 ? '' : _props$alt,
+      _props$fit = props.fit,
+      fit = _props$fit === void 0 ? 'cover' : _props$fit,
+      _props$position = props.position,
+      position = _props$position === void 0 ? 'center' : _props$position,
+      radius = props.radius,
+      bordered = props.bordered,
+      loadingArea = props.loadingArea,
+      errorArea = props.errorArea,
+      showLoading = props.showLoading,
+      showError = props.showError,
+      _props$animateDuratio = props.animateDuration,
+      animateDuration = _props$animateDuratio === void 0 ? 200 : _props$animateDuratio,
+      _props$retryTime = props.retryTime,
+      retryTime = _props$retryTime === void 0 ? 0 : _props$retryTime,
+      forceHttps = props.forceHttps,
+      _props$boxWidth = props.boxWidth,
+      boxWidth = _props$boxWidth === void 0 ? 0 : _props$boxWidth,
+      _props$boxHeight = props.boxHeight,
+      boxHeight = _props$boxHeight === void 0 ? 0 : _props$boxHeight,
+      topOverlap = props.topOverlap,
+      bottomOverlap = props.bottomOverlap,
+      _props$showImage = props.showImage,
+      showImage = _props$showImage === void 0 ? true : _props$showImage,
+      staticLabel = props.staticLabel,
+      _props$nativeProps = props.nativeProps,
+      nativeProps = _props$nativeProps === void 0 ? {} : _props$nativeProps,
+      onChange = props.onChange,
+      onClick = props.onClick,
+      _onLoad = props.onLoad,
+      onError = props.onError,
+      onAutoRetry = props.onAutoRetry;
+  var isPreview = Boolean(fit.indexOf('preview') >= 0);
+  var actualBoxWidth = boxWidth || windowWidth;
+  var actualBoxHeight = boxHeight || windowHeight;
+  var attrs = useMemo(function () {
+    var imageStyle = {};
+
+    if (radius) {
+      imageStyle.borderRadius = handleUnit(radius);
+    }
+
+    if (!isPreview) {
+      imageStyle.objectFit = fit;
+      imageStyle.objectPosition = position;
+    }
+
+    return {
+      alt: alt,
+      src: forceHttps ? src.replace('http://', 'https://') : src,
+      className: "image-content" + (bordered ? ' bordered' : '') + " " + system,
+      style: imageStyle
+    };
+  }, [alt, bordered, fit, forceHttps, isPreview, position, radius, src, system]);
+
+  function retry() {
+    loadImage(true);
+  }
+
+  useImperativeHandle(ref, function () {
+    return {
+      dom: wrapRef.current,
+      image: imageDomRef.current,
+      retry: retry
+    };
+  });
+  useEffect(function () {
+    retryCountRef.current = 0;
+    loadImage();
+  }, [attrs, width, height, showImage, staticLabel]);
+
+  function changeStatus(newStatus) {
+    setImageStatus(newStatus);
+    onChange && onChange(newStatus);
+  }
+
+  function replaceChild(newChild) {
+    var dom = imageRef.current;
+
+    if (!dom) {
+      return;
+    }
+
+    if (dom.children && dom.children.length) {
+      dom.replaceChild(newChild, dom.children[0]);
+    } else {
+      dom.appendChild(newChild);
+    }
+  }
+
+  function loadImage(isFromRetry) {
+    // 如果在加载图片前发现上一个图片还没加载完，则抛弃上一个图片的加载
+    // @en Abort last image before starting loading new image
+    if (loadingImageRef.current) {
+      loadingImageRef.current.src = '';
+      loadingImageRef.current = null;
+    }
+
+    if (!showImage || staticLabel) {
+      return;
+    }
+
+    changeStatus('loading');
+    var image = new Image();
+    Object.keys(nativeProps).forEach(function (key) {
+      image[key] = nativeProps[key];
+    });
+    image.className = attrs.className;
+    Object.keys(attrs.style).forEach(function (key) {
+      image.style[key] = attrs.style[key];
+    });
+
+    image.onload = function (evt) {
+      loadingImageRef.current = null;
+      imageDomRef.current = image;
+      changeStatus('loaded');
+      var _image$width = image.width,
+          imageWidth = _image$width === void 0 ? 0 : _image$width,
+          _image$height = image.height,
+          imageHeight = _image$height === void 0 ? 0 : _image$height;
+      var extraClass = '';
+
+      if (isPreview) {
+        var scale = imageWidth / imageHeight;
+        var windowScale = actualBoxWidth / actualBoxHeight;
+
+        if (fit === 'preview-y') {
+          if (scale < windowScale) {
+            image.style.width = actualBoxWidth + "px";
+            image.style.height = actualBoxWidth / scale + "px";
+            extraClass = 'preview-overflow-y';
+          } else {
+            extraClass = 'preview-fit-contain-y';
+          }
+        } else if (fit === 'preview-x') {
+          if (scale > windowScale) {
+            image.style.width = actualBoxHeight * scale + "px";
+            image.style.height = actualBoxHeight + "px";
+            extraClass = 'preview-overflow-x';
+          } else {
+            extraClass = 'preview-fit-contain-x';
+          }
+        }
+      }
+
+      extraClass && image.classList.add(extraClass);
+      setWrapClass(extraClass ? extraClass + "-container" : '');
+      replaceChild(image);
+      _onLoad && _onLoad(evt, image);
+    };
+
+    image.onerror = function (evt) {
+      loadingImageRef.current = null;
+
+      if (isFromRetry || retryCountRef.current >= retryTime) {
+        changeStatus('error');
+        var placeholder = document.createElement('div');
+        replaceChild(placeholder);
+        onError && onError(evt);
+      } else {
+        retryCountRef.current += 1;
+        onAutoRetry && onAutoRetry(evt);
+        loadImage();
+      }
+    };
+
+    nextTick(function () {
+      image.src = attrs.src;
+      image.alt = attrs.alt;
+      loadingImageRef.current = image;
+    });
+  }
+
+  function handleStaticImageError(e) {
+    var evt = e.nativeEvent;
+
+    if (retryCountRef.current >= retryTime) {
+      onError && onError(evt);
+    } else {
+      retryCountRef.current += 1;
+      onAutoRetry && onAutoRetry(evt); // 强制刷新一下<img>使其重新加载
+      // @en Force refresh <img> to reload
+
+      setStaticRetrying(true);
+      nextTick(function () {
+        setStaticRetrying(false);
+      });
+    }
+  }
+
+  function getImageStyle() {
+    if (isPreview) {
+      var overflow = fit === 'preview-x' ? {
+        overflowX: 'auto'
+      } : {
+        overflowY: 'auto'
+      };
+      return _extends({
+        width: actualBoxWidth,
+        height: actualBoxHeight
+      }, overflow);
+    }
+
+    return {
+      width: Number(width) || width,
+      height: Number(height) || height
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
+    var prefixCls = _ref.prefixCls;
+    return /*#__PURE__*/React.createElement("div", {
+      className: cls(prefixCls + "-image all-border-box", {
+        preview: isPreview
+      }, system, wrapClass, className),
+      style: _extends({}, getImageStyle(), style || {}),
+      ref: wrapRef
+    }, bottomOverlap !== null ? /*#__PURE__*/React.createElement("div", {
+      className: "image-content image-bottom-overlap",
+      style: {
+        borderRadius: radius
+      }
+    }, bottomOverlap || /*#__PURE__*/React.createElement("div", {
+      className: "image-placeholder"
+    })) : null, /*#__PURE__*/React.createElement("div", {
+      className: cls('image-container', imageStatus, {
+        animate: Boolean(animateDuration),
+        'static-label': staticLabel
+      }),
+      style: getStyleWithVendor({
+        transitionDuration: animateDuration + "ms"
+      }),
+      onClick: onClick,
+      ref: imageRef
+    }, staticLabel && showImage && !staticRetrying ? /*#__PURE__*/React.createElement("img", _extends({}, nativeProps, attrs, {
+      ref: imageDomRef,
+      onLoad: function onLoad(e) {
+        return _onLoad && _onLoad(e.nativeEvent, imageDomRef.current);
+      },
+      onError: handleStaticImageError
+    })) : null), showLoading && (status === 'loading' || imageStatus === 'loading') ? /*#__PURE__*/React.createElement("div", {
+      className: "image-content image-loading-container",
+      style: {
+        borderRadius: radius
+      }
+    }, loadingArea || /*#__PURE__*/React.createElement("div", {
+      className: "image-loading"
+    }, /*#__PURE__*/React.createElement(Loading, {
+      type: "circle",
+      className: "loading-icon",
+      radius: 8.5,
+      stroke: 3
+    }))) : null, showError && (status === 'error' || imageStatus === 'error') ? /*#__PURE__*/React.createElement("div", {
+      className: "image-content image-error-container",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        retry();
+      },
+      style: {
+        borderRadius: radius
+      }
+    }, errorArea || /*#__PURE__*/React.createElement("div", {
+      className: "image-retry-load"
+    }, "\u91CD\u8BD5")) : null, topOverlap ? /*#__PURE__*/React.createElement("div", {
+      className: "image-content image-top-overlap",
+      style: {
+        borderRadius: radius
+      }
+    }, topOverlap) : null);
+  });
+});
+export default BaseImage;

package/esm/image/style/css/index.css

@@ -0,0 +1,172 @@
+.arco-image {
+  display: inline-block;
+  position: relative;
+}
+.arco-image.preview {
+  -webkit-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+.arco-image.preview .image-container,
+.arco-image.preview .image-loading-container .image-loading,
+.arco-image.preview .image-error-container .image-retry-load {
+  background-color: transparent;
+}
+.arco-image.preview .image-container::after {
+  border-color: transparent;
+}
+.arco-image .image-bottom-overlap,
+.arco-image .image-top-overlap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.arco-image .image-bottom-overlap {
+  z-index: 0;
+  overflow: hidden;
+}
+.arco-image .image-placeholder {
+  background-color:  #f7f8fa ;
+  width: 100%;
+  height: 100%;
+}
+.arco-image .image-top-overlap {
+  z-index: 10;
+}
+.arco-image .image-loading-container,
+.arco-image .image-error-container {
+  overflow: hidden;
+  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-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  z-index: 2;
+  font-size:  0.32rem ;
+}
+.arco-image .image-container {
+  position: relative;
+  font-size: 0;
+  opacity: 0;
+  z-index: 1;
+}
+.arco-image .image-container.static-label,
+.arco-image .image-container.loaded,
+.arco-image .image-container.error {
+  opacity: 1;
+}
+.arco-image .image-container.animate {
+  -webkit-transition-property: opacity;
+  transition-property: opacity;
+  -webkit-transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
+          transition-timing-function:  cubic-bezier(0.39, 0.575, 0.565, 1) ;
+}
+.arco-image .image-container .bordered {
+  box-shadow: 0 0 0 1PX #e5e6eb inset;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
+  .arco-image .image-container .bordered {
+    box-shadow: 0 0 0 0.5PX #e5e6eb inset;
+  }
+}
+.ios .arco-image .image-container .bordered,
+.arco-image .image-container .bordered.ios {
+  box-shadow: none;
+  border: 0.5PX solid #e5e6eb;
+}
+.arco-image .image-container,
+.arco-image .image-container img {
+  width: inherit;
+  height: inherit;
+  min-width: inherit;
+  min-height: inherit;
+  max-width: inherit;
+  max-height: inherit;
+}
+.arco-image .image-container .preview-fit-contain-y {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.arco-image .image-container .preview-fit-contain-x {
+  height: 100%;
+  width: auto;
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.arco-image .image-error-container .image-retry-load {
+  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-color:  rgba(0, 0, 0, 0.6) ;
+  font-size:  0.32rem ;
+  color:  #e6e8eb ;
+}
+.arco-image .image-loading-container .image-loading {
+  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;
+  color:  #e6e8eb ;
+  background-color:  rgba(0, 0, 0, 0.6) ;
+}
+.arco-image .image-loading-container .image-loading .bg-color-with-config {
+  background: #e6e8eb;
+}
+.arco-image .image-loading-container .image-loading .stop-color-with-config {
+  stop-color: #e6e8eb;
+}
+.arco-image .image-loading-container .image-loading .fill-color-with-config {
+  fill: #e6e8eb;
+}
+.arco-image .image-loading-container .image-loading .stroke-color-with-config {
+  stroke: #e6e8eb;
+}

package/esm/image/style/css/index.d.ts

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

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

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

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

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

package/esm/image/style/index.js

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

package/esm/image/style/index.less

@@ -0,0 +1,144 @@
+@import "../../../style/mixin.less";
+
+.@{prefix}-image {
+    display: inline-block;
+    position: relative;
+
+    &.preview {
+        transition: all .3s ease-in-out;
+
+        .image-container,
+        .image-loading-container .image-loading,
+        .image-error-container .image-retry-load {
+            background-color: transparent;
+        }
+
+        .image-container::after {
+            border-color: transparent;
+        }
+    }
+
+    .image-bottom-overlap,
+    .image-top-overlap {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+    }
+
+    .image-bottom-overlap {
+        z-index: 0;
+        overflow: hidden;
+    }
+
+    .image-placeholder {
+        .use-var(background-color, image-placeholder-background);
+        width: 100%;
+        height: 100%;
+    }
+
+    .image-top-overlap {
+        z-index: 10;
+    }
+
+    .image-loading-container,
+    .image-error-container {
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        .use-var(font-size, image-inner-font-size);
+    }
+
+    .image-container {
+        position: relative;
+        font-size: 0;
+        opacity: 0;
+        z-index: 1;
+
+        &.static-label,
+        &.loaded,
+        &.error {
+            opacity: 1;
+        }
+
+        &.animate {
+            transition-property: opacity;
+            .use-var(transition-timing-function, image-transition-function);
+        }
+
+        .bordered {
+            .hairline-var(line-color);
+        }
+
+        &,
+        & img {
+            width: inherit;
+            height: inherit;
+            min-width: inherit;
+            min-height: inherit;
+            max-width: inherit;
+            max-height: inherit;
+        }
+
+        .preview-fit-contain-y {
+            width: 100%;
+            height: auto;
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .preview-fit-contain-x {
+            height: 100%;
+            width: auto;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    .image-error-container {
+
+        .image-retry-load {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(background-color, image-mask-background);
+            .use-var(font-size, image-retry-font-size);
+            .use-var(color, image-retry-icon-color);
+        }
+    }
+
+    .image-loading-container {
+
+        .image-loading {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .use-var(color, image-loading-icon-color);
+            .use-var(background-color, image-mask-background);
+            .set-loading-color-var(image-loading-icon-color);
+        }
+    }
+}

package/esm/image-preview/demo/style/css/mobile.css

@@ -0,0 +1,31 @@
+#demo-image-preview {
+  padding-bottom: 0.54rem;
+}
+#demo-image-preview .arcodesign-mobile-demo-content {
+  padding: 0 0.24rem;
+  background: transparent;
+}
+#demo-image-preview .arco-cell {
+  border-radius: 0.16rem;
+  overflow: hidden;
+}
+#demo-image-preview .image-fit-demo {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+          flex-direction: row;
+  -webkit-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+          justify-content: space-between;
+}
+#demo-image-preview .image-fit-demo .arco-image {
+  width: 2.18rem;
+  height: 2.18rem;
+  border-radius: 2px;
+  overflow: hidden;
+}

package/esm/image-preview/demo/style/mobile.less

@@ -0,0 +1,25 @@
+@import '../../../../style/mixin.less';
+
+#demo-image-preview {
+    .rem(padding-bottom, 27);
+    .arcodesign-mobile-demo-content {
+        .rem(padding, 0, 12);
+        background: transparent;
+    }
+    .@{prefix}-cell {
+        .rem(border-radius, 8);
+        overflow: hidden;
+    }
+    .image-fit-demo {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        .@{prefix}-image {
+            .rem(width, 109);
+            .rem(height, 109);
+            border-radius: 2px;
+            overflow: hidden;
+        }
+    }
+}