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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _iconFont = _interopRequireDefault(require("../../icon-font"));
const ThumbItem = /*#__PURE__*/_react.default.memo(({
  index,
  item,
  instance
}) => {
  const {
    state,
    slickGoTo,
    getIsVideo
  } = instance;
  const handleGoTo = (e, number) => {
    e.preventDefault();
    slickGoTo(number);
  };
  const renderView = (0, _react.useMemo)(() => {
    if (getIsVideo(item)) {
      return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
        type: "lm-icon-video",
        className: "thumb_item_icon"
      });
    }
    return /*#__PURE__*/_react.default.createElement("img", {
      loading: "lazy",
      src: item,
      alt: ""
    });
  }, [getIsVideo, item]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('thumb_item', state.currentIndex === index && 'active'),
    onClick: e => handleGoTo(e, index)
  }, renderView);
});
const Thumb = ({
  instance
}) => {
  const {
    dataSource
  } = instance;
  const thumbProps = (0, _react.useMemo)(() => {
    return {
      gridTemplateColumns: `repeat(${dataSource.length}, 90px)`
    };
  }, [dataSource.length]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_imglist_thumb",
    style: thumbProps,
    onClick: e => e.stopPropagation()
  }, dataSource.map((v, idx) => /*#__PURE__*/_react.default.createElement(ThumbItem, {
    key: v || idx,
    index: idx,
    item: v,
    instance: instance
  })));
};
var _default = /*#__PURE__*/_react.default.memo(Thumb);
exports.default = _default;