linkmore-design/es/image-viewer/components/Thumb.js

🌈 🚀lm组件库。🚀

import React, { useMemo } from 'react';
import cn from 'classnames';
import IconFont from "../../icon-font";
var ThumbItem = function ThumbItem(_ref) {
  var item = _ref.item,
    instance = _ref.instance;
  var getIsVideo = instance.getIsVideo;
  if (getIsVideo(item)) {
    return /*#__PURE__*/React.createElement(IconFont, {
      type: "lmweb-video",
      className: "thumb_item_icon"
    });
  }
  return /*#__PURE__*/React.createElement("img", {
    src: item,
    alt: ""
  });
};
var Thumb = function Thumb(_ref2) {
  var instance = _ref2.instance;
  var state = instance.state,
    urlList = instance.urlList,
    slickGoTo = instance.slickGoTo;
  var activeIndex = useMemo(function () {
    return state.currentIndex;
  }, [state.currentIndex]);
  var handleGoTo = function handleGoTo(e, number) {
    e.preventDefault();
    slickGoTo(number);
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "thumb_list",
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, urlList.map(function (v, idx) {
    return /*#__PURE__*/React.createElement("div", {
      className: cn('thumb_item', activeIndex === idx && 'active'),
      key: idx || v,
      onClick: function onClick(e) {
        return handleGoTo(e, idx);
      }
    }, /*#__PURE__*/React.createElement(ThumbItem, {
      item: v,
      instance: instance
    }));
  }));
};
export default Thumb;