zarm/lib/image/Image.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.IMAGE_STATUS = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _bem = require("@zarm-design/bem");

var _react = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

var _imagePreview = _interopRequireDefault(require("../image-preview"));

var _lazyDetector = _interopRequireDefault(require("./lazy-detector"));

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

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) { (0, _defineProperty2.default)(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; }

var IMAGE_STATUS = {
  PENDING: 'pending',
  LOADING: 'loading',
  LOADED: 'loaded',
  FAILED: 'failed'
};
exports.IMAGE_STATUS = IMAGE_STATUS;

var Image = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(props, ["src", "placeholder", "fallback", "alt", "onLoad", "onError", "onClick", "className", "width", "height", "style", "fit", "shape", "preview", "lazy"]);

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

  var _useState3 = (0, _react.useState)(!lazy),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      initialized = _useState4[0],
      setInitialized = _useState4[1];

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

  var bem = (0, _bem.createBEM)('image', {
    prefixCls: prefixCls
  });
  var cls = bem([(0, _defineProperty2.default)({}, "".concat(shape), !!shape), className]);
  var imgRef = ref || /*#__PURE__*/(0, _react.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.default.show({
        images: [src || ''],
        orientation: orientation
      });
    }

    onClick && onClick(event);
  };

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

      return /*#__PURE__*/_react.default.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;
  }), (0, _defineProperty2.default)(_renderImageStatus, IMAGE_STATUS.LOADING, function () {
    if (placeholder) {
      var _locale$Image2;

      return /*#__PURE__*/_react.default.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.default.createElement("div", {
    className: cls,
    style: _objectSpread({
      width: width,
      height: height
    }, style)
  }, lazy && !initialized && /*#__PURE__*/_react.default.createElement(_lazyDetector.default, {
    onActive: function onActive() {
      setInitialized(true);
    }
  }), /*#__PURE__*/_react.default.createElement("img", (0, _extends2.default)({
    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
};
var _default = Image;
exports.default = _default;