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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useMemo, useCallback } from 'react';
import Carousel from "../../carousel";
var ListItem = function ListItem(_ref) {
  var key = _ref.key,
    index = _ref.index,
    item = _ref.item,
    instance = _ref.instance;
  var state = instance.state,
    getIsVideo = instance.getIsVideo;
  var transformProps = useMemo(function () {
    if (index !== state.currentIndex) return {};
    var _state$transform = state.transform,
      scale = _state$transform.scale,
      rotateZ = _state$transform.rotateZ;
    return {
      transform: "scale(".concat(scale, ") rotateZ(").concat(rotateZ, "deg)")
    };
  }, [state.currentIndex, state.transform]);
  return /*#__PURE__*/React.createElement("div", {
    className: "preview_item",
    key: key
  }, getIsVideo(item) ?
  /*#__PURE__*/
  // @ts-ignore
  // eslint-disable-next-line jsx-a11y/media-has-caption
  React.createElement("video", {
    width: "100%",
    height: "100%",
    controls: "controls"
  }, /*#__PURE__*/React.createElement("source", {
    src: item,
    type: "video/mp4"
  }), /*#__PURE__*/React.createElement("source", {
    src: item,
    type: "video/webm"
  }), /*#__PURE__*/React.createElement("source", {
    src: item,
    type: "video/ogg"
  }), "\u89C6\u9891\u64AD\u653E\u5931\u8D25\uFF01") : /*#__PURE__*/React.createElement("img", {
    src: item,
    alt: "",
    style: transformProps
  }));
};
var BigImg = function BigImg(_ref2) {
  var instance = _ref2.instance;
  var urlList = instance.urlList,
    previewRef = instance.previewRef,
    infinite = instance.infinite,
    setTransform = instance.setTransform,
    beforeChange = instance.beforeChange;
  var onWheel = useCallback(function (e) {
    if ((e === null || e === void 0 ? void 0 : e.deltaY) <= 0) {
      setTransform('zoomIn');
    } else {
      setTransform('zoomOut');
    }
  }, [setTransform]);
  var config = {
    dots: false,
    infinite: infinite,
    adaptiveHeight: false,
    beforeChange: beforeChange
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "preview_list",
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    onWheel: onWheel
  }, /*#__PURE__*/React.createElement(Carousel, _extends({
    ref: previewRef
  }, config), urlList.map(function (v, idx) {
    return /*#__PURE__*/React.createElement(ListItem, {
      key: idx || v,
      index: idx,
      item: v,
      instance: instance
    });
  })));
};
export default BigImg;