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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _carousel = _interopRequireDefault(require("../../carousel"));
const ListItem = ({
  key,
  index,
  item,
  instance
}) => {
  const {
    state,
    getIsVideo
  } = instance;
  const transformProps = (0, _react.useMemo)(() => {
    if (index !== state.currentIndex) return {};
    const {
      scale,
      rotateZ
    } = state.transform;
    return {
      transform: `scale(${scale}) rotateZ(${rotateZ}deg)`
    };
  }, [state.currentIndex, state.transform]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "preview_item",
    key: key
  }, getIsVideo(item) ?
  /*#__PURE__*/
  // @ts-ignore
  // eslint-disable-next-line jsx-a11y/media-has-caption
  _react.default.createElement("video", {
    width: "100%",
    height: "100%",
    controls: "controls"
  }, /*#__PURE__*/_react.default.createElement("source", {
    src: item,
    type: "video/mp4"
  }), /*#__PURE__*/_react.default.createElement("source", {
    src: item,
    type: "video/webm"
  }), /*#__PURE__*/_react.default.createElement("source", {
    src: item,
    type: "video/ogg"
  }), "\u89C6\u9891\u64AD\u653E\u5931\u8D25\uFF01") : /*#__PURE__*/_react.default.createElement("img", {
    src: item,
    alt: "",
    style: transformProps
  }));
};
const BigImg = ({
  instance
}) => {
  const {
    urlList,
    previewRef,
    infinite,
    setTransform,
    beforeChange
  } = instance;
  const onWheel = (0, _react.useCallback)(e => {
    if (e?.deltaY <= 0) {
      setTransform('zoomIn');
    } else {
      setTransform('zoomOut');
    }
  }, [setTransform]);
  const config = {
    dots: false,
    infinite,
    adaptiveHeight: false,
    beforeChange
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "preview_list",
    onClick: e => e.stopPropagation(),
    onWheel: onWheel
  }, /*#__PURE__*/_react.default.createElement(_carousel.default, (0, _extends2.default)({
    ref: previewRef
  }, config), urlList.map((v, idx) => /*#__PURE__*/_react.default.createElement(ListItem, {
    key: idx || v,
    index: idx,
    item: v,
    instance: instance
  }))));
};
var _default = BigImg;
exports.default = _default;