zarm/es/image/Image.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";

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; }

import { createBEM } from '@zarm-design/bem';
import React, { createRef, useContext, useState } from 'react';
import { ConfigContext } from '../config-provider';
import ImagePreview from '../image-preview';
import LazyDetector from './lazy-detector';
export var IMAGE_STATUS = {
  PENDING: 'pending',
  LOADING: 'loading',
  LOADED: 'loaded',
  FAILED: 'failed'
};
var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _renderImageStatus;

  var src = props.src,
      placeholder = props.placeholder,
      fallback = props.fallback,
      alt = props.alt,
      onLoad = props.onLoad,
      onError = props.onError,
      onClick = props.onClick,
      className = props.className,
      width = props.width,
      height = props.height,
      style = props.style,
      fit = props.fit,
      shape = props.shape,
      preview = props.preview,
      lazy = props.lazy,
      restProps = _objectWithoutProperties(props, ["src", "placeholder", "fallback", "alt", "onLoad", "onError", "onClick", "className", "width", "height", "style", "fit", "shape", "preview", "lazy"]);

  var _useState = useState(IMAGE_STATUS.LOADING),
      _useState2 = _slicedToArray(_useState, 2),
      status = _useState2[0],
      setStatus = _useState2[1];

  var _useState3 = useState(!lazy),
      _useState4 = _slicedToArray(_useState3, 2),
      initialized = _useState4[0],
      setInitialized = _useState4[1];

  var _useContext = useContext(ConfigContext),
      prefixCls = _useContext.prefixCls,
      locale = _useContext.locale;

  var bem = createBEM('image', {
    prefixCls: prefixCls
  });
  var cls = bem([_defineProperty({}, "".concat(shape), !!shape), className]);
  var imgRef = ref || /*#__PURE__*/createRef();
  var inIframe = window.self !== window.top;
  var orientation = inIframe ? 'portrait' : undefined;

  var handleLoad = function handleLoad(event) {
    onLoad && onLoad(event);
    setStatus(IMAGE_STATUS.LOADED);
  };

  var handleError = function handleError(event) {
    onError && onError(event);
    setStatus(IMAGE_STATUS.FAILED);
  };

  var handleClick = function handleClick(event) {
    if (preview) {
      ImagePreview.show({
        images: [src || ''],
        orientation: orientation
      });
    }

    onClick && onClick(event);
  };

  var renderImageStatus = (_renderImageStatus = {}, _defineProperty(_renderImageStatus, IMAGE_STATUS.LOADED, function () {
    return null;
  }), _defineProperty(_renderImageStatus, IMAGE_STATUS.FAILED, function () {
    if (fallback) {
      var _locale$Image;

      return /*#__PURE__*/React.createElement("div", {
        className: bem('fallback')
      }, typeof fallback === 'boolean' ? locale === null || locale === void 0 ? void 0 : (_locale$Image = locale.Image) === null || _locale$Image === void 0 ? void 0 : _locale$Image.loadFailed : fallback);
    }

    return null;
  }), _defineProperty(_renderImageStatus, IMAGE_STATUS.LOADING, function () {
    if (placeholder) {
      var _locale$Image2;

      return /*#__PURE__*/React.createElement("div", {
        className: bem('loading')
      }, typeof placeholder === 'boolean' ? locale === null || locale === void 0 ? void 0 : (_locale$Image2 = locale.Image) === null || _locale$Image2 === void 0 ? void 0 : _locale$Image2.loading : placeholder);
    }

    return null;
  }), _renderImageStatus);
  return /*#__PURE__*/React.createElement("div", {
    className: cls,
    style: _objectSpread({
      width: width,
      height: height
    }, style)
  }, lazy && !initialized && /*#__PURE__*/React.createElement(LazyDetector, {
    onActive: function onActive() {
      setInitialized(true);
    }
  }), /*#__PURE__*/React.createElement("img", _extends({
    className: bem('img'),
    src: initialized ? src : undefined,
    alt: alt,
    ref: imgRef,
    style: {
      objectFit: fit
    }
  }, restProps, {
    onClick: handleClick,
    onError: handleError,
    onLoad: handleLoad
  })), renderImageStatus[status]());
});
Image.displayName = 'Image';
Image.defaultProps = {
  placeholder: false,
  fallback: false,
  fit: 'fill',
  shape: 'rect',
  preview: false,
  lazy: false
};
export default Image;