vantui-edit/lib/mixins/transition.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useTransition = useTransition;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _validator = require("./../common/validator");

var getClassNames = function getClassNames(name) {
  return {
    enter: "van-".concat(name, "-enter van-").concat(name, "-enter-active enter-class enter-active-class"),
    'enter-to': "van-".concat(name, "-enter-to van-").concat(name, "-enter-active enter-to-class enter-active-class"),
    leave: "van-".concat(name, "-leave van-").concat(name, "-leave-active leave-class leave-active-class"),
    'leave-to': "van-".concat(name, "-leave-to van-").concat(name, "-leave-active leave-to-class leave-active-class")
  };
};

function useTransition(_ref) {
  var _ref$show = _ref.show,
      show = _ref$show === void 0 ? false : _ref$show,
      _ref$duration = _ref.duration,
      duration = _ref$duration === void 0 ? 300 : _ref$duration,
      _ref$name = _ref.name,
      name = _ref$name === void 0 ? 'fade' : _ref$name,
      onBeforeEnter = _ref.onBeforeEnter,
      onBeforeLeave = _ref.onBeforeLeave,
      onAfterEnter = _ref.onAfterEnter,
      onAfterLeave = _ref.onAfterLeave,
      onEnter = _ref.onEnter,
      onLeave = _ref.onLeave,
      enterClass = _ref.enterClass,
      enterActiveClass = _ref.enterActiveClass,
      enterToClass = _ref.enterToClass,
      leaveClass = _ref.leaveClass,
      leaveActiveClass = _ref.leaveActiveClass,
      leaveToClass = _ref.leaveToClass;
  var transitionEnded = (0, _react.useRef)(false);
  var status = (0, _react.useRef)('');

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      display = _useState2[0],
      setDisplay = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      inited = _useState4[0],
      setInited = _useState4[1];

  var _useState5 = (0, _react.useState)(0),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      currentDuration = _useState6[0],
      setCurrentDuration = _useState6[1];

  var _useState7 = (0, _react.useState)(''),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      classes = _useState8[0],
      setClasses = _useState8[1];

  var classNames = (0, _react.useMemo)(function () {
    var names = getClassNames(name);

    if (!name) {
      names['enter'] += " ".concat(enterClass !== null && enterClass !== void 0 ? enterClass : '');
      names['enter-to'] += "".concat(enterToClass !== null && enterToClass !== void 0 ? enterToClass : '', " ").concat(enterActiveClass !== null && enterActiveClass !== void 0 ? enterActiveClass : '', " ");
      names['leave'] += "  ".concat(leaveClass !== null && leaveClass !== void 0 ? leaveClass : '');
      names['leave-to'] += " ".concat(leaveToClass !== null && leaveToClass !== void 0 ? leaveToClass : '', " ").concat(leaveActiveClass !== null && leaveActiveClass !== void 0 ? leaveActiveClass : '');
    }

    return names;
  }, [enterActiveClass, enterClass, enterToClass, leaveActiveClass, leaveClass, leaveToClass, name]);
  var onTransitionEnd = (0, _react.useCallback)(function () {
    if (transitionEnded.current) {
      return;
    }

    transitionEnded.current = true;

    if (status.current === 'enter') {
      onAfterEnter === null || onAfterEnter === void 0 ? void 0 : onAfterEnter();
    } else {
      onAfterLeave === null || onAfterLeave === void 0 ? void 0 : onAfterLeave();
    }

    if (!show && display) {
      // this.setData({ display: false })
      setDisplay(false);
    }
  }, [display, onAfterEnter, onAfterLeave, show]);

  var _enter = (0, _react.useCallback)(function () {
    // debugger
    // const { duration, name } = this.data
    var currentDuration = (0, _validator.isObj)(duration) ? duration.enter : duration;
    status.current = 'enter'; // this.$emit('before-enter')

    onBeforeEnter === null || onBeforeEnter === void 0 ? void 0 : onBeforeEnter();
    requestAnimationFrame(function () {
      if (status.current !== 'enter') {
        return;
      }

      onEnter === null || onEnter === void 0 ? void 0 : onEnter();
      setInited(true);
      setDisplay(true);
      setClasses(classNames.enter);
      setCurrentDuration(currentDuration);
      requestAnimationFrame(function () {
        if (status.current !== 'enter') {
          return;
        }

        transitionEnded.current = false;
        setTimeout(function () {
          return onTransitionEnd();
        }, currentDuration);
        setClasses(classNames['enter-to']);
      });
    });
  }, [duration, onBeforeEnter, onEnter, classNames, onTransitionEnd]);

  var _leave = (0, _react.useCallback)(function () {
    if (!display) {
      return;
    }

    var currentDuration = (0, _validator.isObj)(duration) ? duration.leave : duration;
    status.current = 'leave';
    onBeforeLeave === null || onBeforeLeave === void 0 ? void 0 : onBeforeLeave();
    requestAnimationFrame(function () {
      if (status.current !== 'leave') {
        return;
      } // this.$emit('leave')


      onLeave === null || onLeave === void 0 ? void 0 : onLeave();
      setClasses(classNames.leave);
      setCurrentDuration(currentDuration);
      requestAnimationFrame(function () {
        if (status.current !== 'leave') {
          return;
        }

        transitionEnded.current = false;
        setTimeout(function () {
          return onTransitionEnd();
        }, currentDuration);
        setClasses(classNames['leave-to']);
      });
    });
  }, [classNames, display, duration, onBeforeLeave, onLeave, onTransitionEnd]);

  (0, _react.useEffect)(function () {
    if (show && (!classes || !classes.includes(classNames['enter-to']))) {
      _enter();
    }

    if (!show) {
      _leave();
    } // eslint-disable-next-line react-hooks/exhaustive-deps

  }, [show]);
  return {
    display: display,
    inited: inited,
    currentDuration: currentDuration,
    classes: classes,
    onTransitionEnd: onTransitionEnd
  };
}