vantui-edit/lib/swipe-cell/index.js

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

"use strict";

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

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

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

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

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

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

var _components = require("@tarojs/components");

var _react = require("react");

var _taro = require("@tarojs/taro");

var utils = _interopRequireWildcard(require("../wxs/utils"));

var _utils2 = require("../common/utils");

var _jsxRuntime = require("react/jsx-runtime");

var _excluded = ["leftWidth", "rightWidth", "style", "className", "disabled", "name", "onClick", "onOpen", "onClose", "asyncClose", "children", "renderRight", "renderLeft"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var ARRAY = [];
var MIN_DISTANCE = 20;

function getDirection(x, y) {
  if (x > y && x > MIN_DISTANCE) {
    return 'horizontal';
  }

  if (y > x && y > MIN_DISTANCE) {
    return 'vertical';
  }

  return '';
}

function Index(props, ref) {
  var _useState = (0, _react.useState)({}),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      wrapperStyle = _useState2[0],
      setWrapperStyle = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      offset = _useState4[0],
      setOffset = _useState4[1];

  var _useState5 = (0, _react.useState)({}),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      instanceKey = _useState6[0],
      setInstanceKey = _useState6[1];

  var _useState7 = (0, _react.useState)({}),
      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
      touchState = _useState8[0],
      setTouchState = _useState8[1];

  var _useState9 = (0, _react.useState)(0),
      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
      startOffset = _useState10[0],
      setStartOffset = _useState10[1];

  var _useState11 = (0, _react.useState)({
    left: 0.2,
    right: 0.2
  }),
      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
      THRESHOLD = _useState12[0],
      setTHRESHOLD = _useState12[1];

  var _props$leftWidth = props.leftWidth,
      leftWidth = _props$leftWidth === void 0 ? 0 : _props$leftWidth,
      _props$rightWidth = props.rightWidth,
      rightWidth = _props$rightWidth === void 0 ? 0 : _props$rightWidth,
      style = props.style,
      className = props.className,
      disabled = props.disabled,
      _props$name = props.name,
      name = _props$name === void 0 ? '' : _props$name,
      onClick = props.onClick,
      onOpen = props.onOpen,
      onClose = props.onClose,
      asyncClose = props.asyncClose,
      children = props.children,
      renderRight = props.renderRight,
      renderLeft = props.renderLeft,
      others = (0, _objectWithoutProperties2.default)(props, _excluded);
  var swipeMove = (0, _react.useCallback)(function () {
    var offset2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var dragging = arguments.length > 1 ? arguments[1] : undefined;
    var offset_ = (0, _utils2.range)(offset2, -rightWidth, leftWidth);
    setOffset(offset_);

    if (offset2 === 0) {
      setTHRESHOLD({
        left: 0.2,
        right: 0.2
      });
    }

    var transform = "translate3d(".concat(offset_, "px, 0, 0)");
    var transition = dragging ? 'none' : 'transform .6s cubic-bezier(0.18, 0.89, 0.32, 1)';

    var wrapperStyle_ = _objectSpread(_objectSpread({}, wrapperStyle), {}, {
      '-webkit-transform': transform,
      '-webkit-transition': transition,
      transform: transform,
      transition: transition
    });

    setWrapperStyle(wrapperStyle_);
  }, [leftWidth, rightWidth, wrapperStyle]);
  var close = (0, _react.useCallback)(function () {
    swipeMove(0, false);
  }, [swipeMove]);
  (0, _react.useEffect)(function () {
    var k = new Date();

    if (JSON.stringify(instanceKey) === '{}') {
      setInstanceKey({
        key: k,
        close: close
      });
      ARRAY.push({
        key: k,
        close: close
      });
    }
  }, [close, instanceKey]);
  (0, _react.useEffect)(function () {
    return function () {
      ARRAY = ARRAY.filter(function (item) {
        return item.key !== instanceKey.key;
      });
    }; // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  var resetTouchStatus = (0, _react.useCallback)(function () {
    setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
      direction: '',
      deltaX: 0,
      deltaY: 0,
      offsetX: 0,
      offsetY: 0,
      startX: 0,
      startY: 0
    }));
  }, [touchState]);
  var touchStart = (0, _react.useCallback)(function (event) {
    resetTouchStatus();
    var touch = event.touches[0];
    setTouchState(_objectSpread(_objectSpread({}, touchState), {}, {
      startX: touch.clientX,
      startY: touch.clientY
    }));
  }, [touchState, resetTouchStatus]);
  var touchMove = (0, _react.useCallback)(function (event) {
    resetTouchStatus();
    var touch = event.touches[0];

    var newTouchState = _objectSpread(_objectSpread({}, touchState), {}, {
      direction: touchState.direction || getDirection(Math.abs(touch.clientX - (touchState.startX || 0)), Math.abs(touch.clientY - (touchState.startY || 0))),
      deltaX: touch.clientX - (touchState.startX || 0),
      deltaY: touch.clientY - (touchState.startY || 0),
      offsetX: Math.abs(touchState.deltaX),
      offsetY: Math.abs(touchState.deltaY)
    });

    setTouchState(newTouchState);
    return newTouchState;
  }, [touchState, resetTouchStatus]);
  var open = (0, _react.useCallback)(function (position) {
    var offset = position === 'left' ? leftWidth : -rightWidth;
    var THRESHOLD_ = {
      left: 0.2,
      right: 0.2
    };

    if (position === 'left') {
      THRESHOLD_.left = 0.8;
    }

    if (position === 'right') {
      THRESHOLD_.right = 0.8;
    }

    setTHRESHOLD(THRESHOLD_);
    swipeMove(offset, false);

    if (onOpen) {
      var e = {
        detail: {
          position: position,
          name: name
        }
      };
      onOpen(e);
    }
  }, [leftWidth, onOpen, rightWidth, swipeMove, name]);
  var swipeLeaveTransition = (0, _react.useCallback)(function () {
    if (offset > 0) {
      if (leftWidth && offset > THRESHOLD.left * leftWidth) {
        open('left');
      } else {
        swipeMove(0);
      }
    }

    if (offset < 0) {
      if (rightWidth && -offset > THRESHOLD.right * rightWidth) {
        open('right');
      } else {
        swipeMove(0);
      }
    }
  }, [THRESHOLD.left, THRESHOLD.right, leftWidth, offset, open, rightWidth, swipeMove]);
  var onClick_ = (0, _react.useCallback)(function (event) {
    event.stopPropagation();
    event.preventDefault();
    var _event$currentTarget$ = event.currentTarget.dataset.key,
        position = _event$currentTarget$ === void 0 ? 'outside' : _event$currentTarget$;
    Object.defineProperty(event, 'detail', {
      value: {
        position: position,
        name: name,
        instance: {
          close: close,
          open: open
        }
      }
    });
    if (onClick) onClick(event);

    if (asyncClose && onClose) {
      onClose(event);
    } else if (onClose) {
      onClose(event);
      swipeMove(0);
    } else {
      swipeMove(0);
    }
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [asyncClose, onClick, onClose, swipeMove]);
  var startDrag = (0, _react.useCallback)(function (event) {
    if (disabled) return;
    setStartOffset(offset);
    touchStart(event);
  }, [disabled, offset, touchStart]);
  var onDrag = (0, _react.useCallback)(function (event) {
    if (disabled) return;
    event.preventDefault();
    var touchState = touchMove(event);

    if (!touchState.direction || touchState.direction === 'vertical') {
      return;
    }

    ARRAY.filter(function (item) {
      return item.key !== instanceKey.key;
    }).forEach(function (item) {
      return item.close(true);
    });
    swipeMove(startOffset + touchState.deltaX, true);
  }, [disabled, instanceKey.key, startOffset, swipeMove, touchMove]);
  var endDrag = (0, _react.useCallback)(function () {
    if (disabled) return;
    swipeLeaveTransition();
    (0, _taro.nextTick)(function () {
      resetTouchStatus();
    });
  }, [disabled, resetTouchStatus, swipeLeaveTransition]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      close: close,
      open: open
    };
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, _objectSpread(_objectSpread({
    className: "van-swipe-cell  ".concat(className),
    "data-key": "cell",
    style: utils.style([style]) // onClick={onClick_}
    ,
    onTouchStart: startDrag,
    onTouchMove: onDrag,
    onTouchEnd: endDrag,
    onTouchCancel: endDrag
  }, others), {}, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.View, {
      style: wrapperStyle,
      children: [leftWidth ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-swipe-cell__left",
        "data-key": "left",
        onClick: onClick_,
        style: {
          width: leftWidth + 'px'
        },
        children: renderLeft
      }) : '', children, rightWidth ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
        className: "van-swipe-cell__right",
        "data-key": "right",
        onClick: onClick_,
        style: {
          width: rightWidth + 'px'
        },
        children: renderRight
      }) : '']
    })
  }));
}

var SwipeCell = /*#__PURE__*/(0, _react.forwardRef)(Index);
exports.SwipeCell = SwipeCell;
var _default = SwipeCell;
exports.default = _default;