@antmjs/vantui/es/mixins/transition.js

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
import { isObj } from './../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")
  };
};
export 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 = useRef(false);
  var status = useRef('');
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    display = _useState2[0],
    setDisplay = _useState2[1];
  var _useState3 = useState(false),
    _useState4 = _slicedToArray(_useState3, 2),
    inited = _useState4[0],
    setInited = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    currentDuration = _useState6[0],
    setCurrentDuration = _useState6[1];
  var _useState7 = useState(''),
    _useState8 = _slicedToArray(_useState7, 2),
    classes = _useState8[0],
    setClasses = _useState8[1];
  var classNames = 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 = 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 = useCallback(function () {
    // debugger
    // const { duration, name } = this.data

    var currentDuration = 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 = useCallback(function () {
    if (!display) {
      return;
    }
    var currentDuration = 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]);
  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
  };
}