linkmore-design/lib/image-viewer/components/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 = ({
  item,
  instance
}) => {
  const {
    getIsVideo
  } = instance;
  if (getIsVideo(item)) {
    return /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "lm-icon-video",
      className: "thumb_item_icon"
    });
  }
  return /*#__PURE__*/_react.default.createElement("img", {
    src: item,
    alt: ""
  });
};
const Thumb = ({
  instance
}) => {
  const {
    state,
    urlList,
    slickGoTo
  } = instance;
  const activeIndex = (0, _react.useMemo)(() => state.currentIndex, [state.currentIndex]);
  const handleGoTo = (e, number) => {
    e.preventDefault();
    slickGoTo(number);
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "thumb_list",
    onClick: e => e.stopPropagation()
  }, urlList.map((v, idx) => /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('thumb_item', activeIndex === idx && 'active'),
    key: idx || v,
    onClick: e => handleGoTo(e, idx)
  }, /*#__PURE__*/_react.default.createElement(ThumbItem, {
    item: v,
    instance: instance
  }))));
};
var _default = Thumb;
exports.default = _default;