zarm/lib/swipe-action/SwipeAction.js

基于 React 的移动端UI库

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

var _react = require("@use-gesture/react");

var _bem = require("@zarm-design/bem");

var _react2 = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

var _useClickAway = _interopRequireDefault(require("../use-click-away"));

var _hooks = require("../utils/hooks");

var _SwipeActionItem = _interopRequireDefault(require("./SwipeActionItem"));

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

var SwipeAction = /*#__PURE__*/_react2.default.forwardRef(function (props, ref) {
  var _leftRef$current, _rightRef$current;

  var children = props.children,
      className = props.className,
      leftActions = props.leftActions,
      rightActions = props.rightActions,
      moveDistanceRatio = props.moveDistanceRatio,
      moveTimeSpan = props.moveTimeSpan,
      initialAnimationDuration = props.animationDuration,
      offset = props.offset,
      autoClose = props.autoClose,
      disabled = props.disabled,
      onClose = props.onClose,
      onOpen = props.onOpen;
  var isOpen = (0, _react2.useRef)(null);
  var pending = (0, _react2.useRef)(false);
  var leftRef = (0, _react2.useRef)();
  var rightRef = (0, _react2.useRef)();
  var swipeActionWrap = (0, _react2.useRef)(ref || null);

  var _useContext = (0, _react2.useContext)(_configProvider.ConfigContext),
      prefixCls = _useContext.prefixCls;

  var _useSafeState = (0, _hooks.useSafeState)(0),
      _useSafeState2 = (0, _slicedToArray2.default)(_useSafeState, 2),
      offsetLeft = _useSafeState2[0],
      setOffsetLeft = _useSafeState2[1];

  var _useSafeState3 = (0, _hooks.useSafeState)(initialAnimationDuration),
      _useSafeState4 = (0, _slicedToArray2.default)(_useSafeState3, 2),
      animationDuration = _useSafeState4[0],
      setAnimationDuration = _useSafeState4[1];

  var bem = (0, _bem.createBEM)('swipe-action', {
    prefixCls: prefixCls
  });
  var doTransition = (0, _react2.useCallback)(function (_ref) {
    var offsetX = _ref.offsetX,
        duration = _ref.duration;
    setAnimationDuration(duration);
    setOffsetLeft(offsetX);
  }, [offsetLeft]);
  (0, _useClickAway.default)(swipeActionWrap.current, function () {
    close();
  }, 'ontouchstart' in window ? 'touchstart' : 'mousedown');
  var dragStart = (0, _react2.useRef)(0);

  var close = function close() {
    if (pending.current) return;
    doTransition({
      offsetX: 0,
      duration: initialAnimationDuration
    });
    isOpen.current = null;
    dragStart.current = 0;
  };

  var renderButtons = function renderButtons(actions, direction, refs) {
    if (!actions || actions.length === 0) {
      return;
    }

    var cls = bem('actions', [(0, _defineProperty2.default)({}, "".concat(direction), true)]);
    return /*#__PURE__*/_react2.default.createElement("div", {
      className: cls,
      ref: refs
    }, actions.map(function (action, index) {
      return /*#__PURE__*/_react2.default.createElement(_SwipeActionItem.default, (0, _extends2.default)({}, action, {
        key: +index,
        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
          var _action$onClick;

          return _regenerator.default.wrap(function _callee$(_context) {
            while (1) {
              switch (_context.prev = _context.next) {
                case 0:
                  pending.current = true;
                  _context.next = 3;
                  return (_action$onClick = action.onClick) === null || _action$onClick === void 0 ? void 0 : _action$onClick.call(action);

                case 3:
                  pending.current = false;

                  if (autoClose) {
                    close === null || close === void 0 ? void 0 : close();
                  }

                case 5:
                case "end":
                  return _context.stop();
              }
            }
          }, _callee);
        }))
      }));
    }));
  };

  var dragging = (0, _react2.useRef)(false);
  var btnsLeftWidth = (leftRef === null || leftRef === void 0 ? void 0 : (_leftRef$current = leftRef.current) === null || _leftRef$current === void 0 ? void 0 : _leftRef$current.offsetWidth) || 0;
  var btnsRightWidth = (rightRef === null || rightRef === void 0 ? void 0 : (_rightRef$current = rightRef.current) === null || _rightRef$current === void 0 ? void 0 : _rightRef$current.offsetWidth) || 0;
  var bind = (0, _react.useDrag)(function (state) {
    var _state$offset = (0, _slicedToArray2.default)(state.offset, 1),
        offsetX = _state$offset[0];

    if (isOpen.current === 'right' && offsetX < 0 || isOpen.current === 'left' && offsetX > 0) {
      return false;
    }

    if (state.down) {
      dragging.current = true;
    }

    if (!dragging.current) return;
    dragStart.current = offsetX;

    if (offsetX > 0 && !(leftRef !== null && leftRef !== void 0 && leftRef.current)) {
      return false;
    }

    if (offsetX < 0 && !(rightRef !== null && rightRef !== void 0 && rightRef.current)) {
      return false;
    }

    if (state.last) {
      var timeSpan = Math.floor(state.elapsedTime);
      var distanceX = 0;
      var _isOpen = false;

      if (btnsLeftWidth > 0 && (offsetX / btnsLeftWidth > moveDistanceRatio || offsetX > 0 && timeSpan <= moveTimeSpan)) {
        distanceX = btnsLeftWidth;
        _isOpen = true;
      } else if (btnsRightWidth > 0 && offsetX / btnsRightWidth < -moveDistanceRatio || offsetX < 0 && timeSpan <= moveTimeSpan) {
        distanceX = -btnsRightWidth;
        _isOpen = true;
      }

      doTransition({
        offsetX: distanceX,
        duration: initialAnimationDuration
      });

      if (_isOpen) {
        // 打开
        isOpen.current = distanceX > 0 ? 'left' : 'right';
        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
      } else {
        // 还原
        close();
      }

      window.setTimeout(function () {
        dragging.current = false;
      });
    } else {
      doTransition({
        offsetX: offsetX,
        duration: 0
      });
    }
  }, {
    from: function from() {
      return [dragStart.current, 0];
    },
    bounds: function bounds() {
      var _leftRef$current2, _rightRef$current2;

      var leftWidth = (leftRef === null || leftRef === void 0 ? void 0 : (_leftRef$current2 = leftRef.current) === null || _leftRef$current2 === void 0 ? void 0 : _leftRef$current2.offsetWidth) || 0;
      var rightWidth = (rightRef === null || rightRef === void 0 ? void 0 : (_rightRef$current2 = rightRef.current) === null || _rightRef$current2 === void 0 ? void 0 : _rightRef$current2.offsetWidth) || 0;
      return {
        left: -rightWidth - offset,
        right: leftWidth + offset
      };
    },
    enabled: !disabled,
    axis: 'x',
    pointer: {
      touch: true
    },
    preventScroll: true,
    triggerAllEvents: true
  });
  var style = {
    WebkitTransitionDuration: "".concat(animationDuration, "ms"),
    transitionDuration: "".concat(animationDuration, "ms"),
    WebkitTransform: "translate3d(".concat(offsetLeft, "px, 0, 0)"),
    transform: "translate3d(".concat(offsetLeft, "px, 0, 0)")
  };
  var cls = bem([className]);
  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, leftActions || rightActions ? /*#__PURE__*/_react2.default.createElement("div", (0, _extends2.default)({
    ref: swipeActionWrap,
    className: cls,
    style: props.style
  }, bind()), renderButtons(leftActions, 'left', leftRef), renderButtons(rightActions, 'right', rightRef), /*#__PURE__*/_react2.default.createElement("div", {
    className: bem('content'),
    style: style,
    onTransitionEnd: function onTransitionEnd() {
      return !isOpen.current && (onClose === null || onClose === void 0 ? void 0 : onClose());
    },
    onClick: function onClick(e) {
      if (isOpen.current && !dragging.current) {
        e.preventDefault();
        e.stopPropagation();
        close();
      }
    }
  }, children)) : children);
});

SwipeAction.displayName = 'SwipeAction';
SwipeAction.defaultProps = {
  leftActions: [],
  rightActions: [],
  moveDistanceRatio: 0.5,
  moveTimeSpan: 300,
  animationDuration: 300,
  offset: 10,
  autoClose: true,
  disabled: false
};
var _default = SwipeAction;
exports.default = _default;