linkmore-design/es/lm-img-list/body/Thumb.js

🌈 🚀lm组件库。🚀

import React, { useMemo } from 'react';
import cn from 'classnames';
import IconFont from "../../icon-font";
var ThumbItem = /*#__PURE__*/React.memo(function (_ref) {
  var index = _ref.index,
    item = _ref.item,
    instance = _ref.instance;
  var state = instance.state,
    slickGoTo = instance.slickGoTo,
    getIsVideo = instance.getIsVideo;
  var handleGoTo = function handleGoTo(e, number) {
    e.preventDefault();
    slickGoTo(number);
  };
  var renderView = useMemo(function () {
    if (getIsVideo(item)) {
      return /*#__PURE__*/React.createElement(IconFont, {
        type: "lmweb-video",
        className: "thumb_item_icon"
      });
    }
    return /*#__PURE__*/React.createElement("img", {
      loading: "lazy",
      src: item,
      alt: ""
    });
  }, [getIsVideo, item]);
  return /*#__PURE__*/React.createElement("div", {
    className: cn('thumb_item', state.currentIndex === index && 'active'),
    onClick: function onClick(e) {
      return handleGoTo(e, index);
    }
  }, renderView);
});
var Thumb = function Thumb(_ref2) {
  var instance = _ref2.instance;
  var dataSource = instance.dataSource;
  var thumbProps = useMemo(function () {
    return {
      gridTemplateColumns: "repeat(".concat(dataSource.length, ", 90px)")
    };
  }, [dataSource.length]);
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_imglist_thumb",
    style: thumbProps,
    onClick: function onClick(e) {
      return e.stopPropagation();
    }
  }, dataSource.map(function (v, idx) {
    return /*#__PURE__*/React.createElement(ThumbItem, {
      key: v || idx,
      index: idx,
      item: v,
      instance: instance
    });
  }));
};
export default /*#__PURE__*/React.memo(Thumb);