linkmore-design/lib/lm-img-list/body/Banner.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 BannerItem = /*#__PURE__*/_react.default.memo(({
  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]);

  // 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()
  //     }
  //   }
  // }, [])

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