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

🌈 🚀lm组件库。🚀

import { useCallback, useEffect } from 'react';
var useCoreOptions = function useCoreOptions(_ref) {
  var state = _ref.state,
    dispatch = _ref.dispatch,
    props = _ref.props,
    previewRef = _ref.previewRef;
  // 获取显示状态
  var getVisible = useCallback(function () {
    return typeof props.visible === 'boolean' ? props.visible : state.visible;
  }, [props.visible, state.visible]);

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

  // 关闭事件
  var onClose = useCallback(function () {
    var _props$close;
    (_props$close = props.close) === null || _props$close === void 0 ? void 0 : _props$close.call(props);
    dispatch({
      type: 'init'
    });
    dispatch({
      type: 'changeVisible',
      visible: false
    });
  }, []);
  var setTransform = useCallback(function (type) {
    var scale = state.transform.scale * 100;
    var 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: rotateZ,
        scale: scale / 100
      }
    });
  }, [state.transform]);

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

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

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

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