linkmore-design/lib/image-viewer/fns/index.js

🌈 🚀lm组件库。🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
const useCoreOptions = ({
  state,
  dispatch,
  props,
  previewRef
}) => {
  // 获取显示状态
  const getVisible = (0, _react.useCallback)(() => {
    return typeof props.visible === 'boolean' ? props.visible : state.visible;
  }, [props.visible, state.visible]);

  // 获取是否为视频格式
  const getIsVideo = (0, _react.useCallback)(url => {
    const fileExtension = url.replace(/.*\./, '').toLowerCase();
    return ['mp4', 'm2v', 'mkv', 'ogm', 'webm'].includes(fileExtension);
  }, []);

  // 关闭事件
  const onClose = (0, _react.useCallback)(() => {
    props.close?.();
    dispatch({
      type: 'init'
    });
    dispatch({
      type: 'changeVisible',
      visible: false
    });
  }, []);
  const setTransform = (0, _react.useCallback)(type => {
    let scale = state.transform.scale * 100;
    let rotateZ = state.transform.rotateZ;
    switch (type) {
      case 'zoomIn':
        scale += 25;
        break;
      case 'zoomOut':
        scale < 30 ? scale : scale -= 25;
        break;
      case 'rotateLeft':
        rotateZ -= 90;
        break;
      case 'rotateRight':
        rotateZ += 90;
        break;
      default:
        break;
    }
    dispatch({
      type: 'changeTransform',
      transform: {
        rotateZ,
        scale: scale / 100
      }
    });
  }, [state.transform]);

  // 切换轮播前的回调
  const beforeChange = (0, _react.useCallback)((from, currentIndex) => {
    dispatch({
      type: 'changeCurrent',
      current: {
        currentIndex
      }
    });
  }, []);
  // 切换轮播后的回调
  const afterChange = (0, _react.useCallback)(currentIndex => {
    dispatch({
      type: 'changeCurrent',
      current: {
        currentIndex
      }
    });
  }, []);

  // 转到指定的轮播图, 直接跳转, 不展示动画
  const slickGoTo = (0, _react.useCallback)(currentIndex => {
    previewRef.current.goTo(currentIndex, true);
  }, []);

  // 转到下一张轮播图
  const slickNext = (0, _react.useCallback)(() => {
    previewRef.current.next();
  }, []);

  // 转到上一张轮播图
  const slickPrev = (0, _react.useCallback)(() => {
    previewRef.current.prev();
  }, []);
  (0, _react.useEffect)(() => {
    if (getVisible()) {
      slickGoTo(props.initialIndex);
      dispatch({
        type: 'changeCurrent',
        current: {
          currentIndex: props.initialIndex
        }
      });
    }
  }, [getVisible, props.initialIndex, slickGoTo]);
  const CoreMethods = {
    getVisible,
    getIsVideo,
    onClose,
    setTransform,
    beforeChange,
    afterChange,
    slickGoTo,
    slickNext,
    slickPrev
  };
  const RefMethods = {
    getState: () => state
  };
  return {
    CoreMethods,
    RefMethods
  };
};
var _default = useCoreOptions;
exports.default = _default;