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

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useMemo, useCallback } from 'react';
import Carousel from "../../carousel";
var BannerItem = /*#__PURE__*/React.memo(function (_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]);

  // useEffect(() => {
  //   // 1. 创建 IntersectionObserver对象
  //   const ob = new IntersectionObserver(
  //     (entry) => {
  //       console.log('可见', entry[0].isIntersecting)
  //       if (entry[0].isIntersecting) {
  //         // 图片可见
  //         if (imgRef.current) {
  //           console.log('赋值src')
  //           imgRef.current.src = item
  //           setLoading(true)
  //         }
  //         ob.unobserve(imgRef.current!)
  //       }
  //     },
  //     {
  //       root: document.querySelector('.lm_imglist_banner'),
  //     },
  //   )

  //   if (imgRef.current) {
  //     // 2. 观察img
  //     ob.observe(imgRef.current!)

  //     return () => {
  //       ob.disconnect()
  //     }
  //   }
  // }, [])

  var renderView = useMemo(function () {
    if (getIsVideo(item)) {
      return (
        /*#__PURE__*/
        // @ts-ignore
        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")
      );
    }
    return /*#__PURE__*/React.createElement("img", {
      loading: "lazy",
      alt: "",
      src: item,
      style: transformProps
    });
  }, [getIsVideo, item, transformProps]);
  return /*#__PURE__*/React.createElement("div", {
    className: "banner_item"
  }, renderView);
});
var BigImg = function BigImg(_ref2) {
  var instance = _ref2.instance;
  var dataSource = instance.dataSource,
    bodyRef = instance.bodyRef,
    enableWheel = instance.enableWheel,
    infinite = instance.infinite,
    setTransform = instance.setTransform,
    beforeChange = instance.beforeChange;
  var onWheel = useCallback(function (e) {
    if (!enableWheel) return;
    if ((e === null || e === void 0 ? void 0 : e.deltaY) <= 0) {
      setTransform('zoomIn');
    } else {
      setTransform('zoomOut');
    }
  }, [enableWheel, setTransform]);
  var config = {
    dots: false,
    infinite: infinite,
    adaptiveHeight: false,
    // 自适应高度
    beforeChange: beforeChange
  };
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_imglist_banner",
    onClick: function onClick(e) {
      return e.stopPropagation();
    },
    onWheel: onWheel
  }, /*#__PURE__*/React.createElement(Carousel, _extends({
    ref: bodyRef
  }, config), dataSource.map(function (v, idx) {
    return /*#__PURE__*/React.createElement(BannerItem, {
      key: v || idx,
      index: idx,
      item: v,
      instance: instance
    });
  })));
};
export default /*#__PURE__*/React.memo(BigImg);