dumi-theme-antd/dist/builtins/ImagePreview/index.js

Ant Design 5.0 官网风格类似的 dumi2 主题插件

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import React from 'react';
import classNames from 'classnames';
import { Image } from 'antd';
import toArray from 'rc-util/lib/Children/toArray';
import { jsx as ___EmotionJSX } from "@emotion/react";
function isGood(className) {
  return /\bgood\b/i.test(className);
}
function isBad(className) {
  return /\bbad\b/i.test(className);
}
function isInline(className) {
  return /\binline\b/i.test(className);
}
function isGoodBadImg(imgMeta) {
  return imgMeta.isGood || imgMeta.isBad;
}
function isCompareImg(imgMeta) {
  return isGoodBadImg(imgMeta) || imgMeta.inline;
}
var ImagePreview = function ImagePreview(props) {
  var children = props.children,
    float = props.float,
    pure = props.pure;
  var imgs = toArray(children).filter(function (ele) {
    return ele.type === 'img';
  });
  var imgsMeta = imgs.map(function (img) {
    var _img$props = img.props,
      alt = _img$props.alt,
      description = _img$props.description,
      src = _img$props.src,
      className = _img$props.className;
    return {
      className: className,
      alt: alt,
      description: description,
      src: src,
      isGood: isGood(className) || undefined,
      isBad: isBad(className) || undefined,
      inline: isInline(className)
    };
  });
  var imagesList = imgsMeta.map(function (meta, index) {
    var metaCopy = _objectSpread({}, meta);
    delete metaCopy.description;
    delete metaCopy.isGood;
    delete metaCopy.isBad;
    return ___EmotionJSX("div", {
      key: index
    }, ___EmotionJSX("div", {
      className: "image-modal-container"
    }, ___EmotionJSX("img", _extends({}, metaCopy, {
      src: meta.src,
      alt: meta.alt
    }))));
  });
  var comparable = imgs.length === 2 && imgsMeta.every(isCompareImg) || imgs.length >= 2 && imgsMeta.every(isGoodBadImg);
  var style = comparable ? {
    width: "".concat((100 / imgs.length).toFixed(3), "%")
  } : {};
  var hasCarousel = imgs.length > 1 && !comparable;
  var previewClassName = classNames({
    clearfix: true,
    'preview-image-boxes': true,
    'preview-image-boxes-float': float !== undefined,
    'preview-image-boxes-pure': pure !== undefined,
    'preview-image-boxes-compare': comparable,
    'preview-image-boxes-with-carousel': hasCarousel
  });
  return ___EmotionJSX("div", {
    className: previewClassName
  }, imagesList.map(function (_, index) {
    if (!comparable && index !== 0) {
      return null;
    }
    var coverMeta = imgsMeta[index];
    var imageWrapperClassName = classNames({
      'preview-image-wrapper': pure === undefined,
      good: coverMeta.isGood,
      bad: coverMeta.isBad
    });
    return ___EmotionJSX("div", {
      className: "preview-image-box",
      style: style,
      key: index
    }, ___EmotionJSX("div", {
      className: imageWrapperClassName
    }, ___EmotionJSX(Image, {
      className: coverMeta.className,
      src: coverMeta.src,
      alt: coverMeta.alt
    })), ___EmotionJSX("div", {
      className: "preview-image-title"
    }, coverMeta.alt), ___EmotionJSX("div", {
      className: "preview-image-description",
      dangerouslySetInnerHTML: {
        __html: coverMeta.description
      }
    }));
  }));
};
export default ImagePreview;