mh-rn-component/commonjs/SwipeCell/index.js

"use strict";

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

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

var _reactNative = require("react-native");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const SwipeCell = _ref => {
  let {
    children,
    ...rest
  } = _ref;
  // 用来判断是否有移动，用来做动画节流
  const [moveHave, setMoveHave] = (0, _react.useState)(false);
  const [mainWidth, setMainWidth] = (0, _react.useState)(0);
  const [mainHeight, setMainHeight] = (0, _react.useState)(0);
  const rightWidth = (0, _react.useRef)(0);
  const leftwidth = (0, _react.useRef)(0); // 获取元素宽高

  const layoutRight = e => {
    rightWidth.current = e.nativeEvent.layout.width;
  };

  const layoutLeft = e => {
    leftwidth.current = e.nativeEvent.layout.width;
  }; // 回到固定位置动画


  const springMove = x => {
    return _reactNative.Animated.spring(cell, {
      toValue: {
        x: x,
        y: 0
      },
      speed: 24,
      overshootClamping: true,
      useNativeDriver: false
    });
  };

  const cell = (0, _react.useRef)(new _reactNative.Animated.ValueXY()).current;
  const touchHandel = (0, _react.useRef)(_reactNative.PanResponder.create({
    onMoveShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      cell.setOffset({
        x: cell.x._value,
        y: 0
      });
    },
    onPanResponderMove: (e, gs) => {
      if (gs.dx < 0) {
        _reactNative.Animated.event([null, {
          dx: cell.x,
          dy: cell.y
        }], {
          useNativeDriver: false
        })(e, gs);
      }

      if (rest.left && gs.dx > 0) {
        _reactNative.Animated.event([null, {
          dx: cell.x,
          dy: cell.y
        }], {
          useNativeDriver: false
        })(e, gs);
      }
    },
    onPanResponderRelease: (e, gs) => {
      cell.flattenOffset(); // 回弹

      if (gs.dx > 10) {
        springMove(leftwidth.current).start();
        setMoveHave(true);
      } else if (gs.dx < -10) {
        springMove(-rightWidth.current).start();
        setMoveHave(true);
      } else if (gs.dx > -10 && gs.dx < 0) {
        springMove(0).start();
      } // console.log(gs.dx, cell.x._value)

    }
  })).current;

  const reduction = () => {
    if (moveHave) {
      springMove(0).start();
      setMoveHave(false);
    }
  };

  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.swipe_cell,
    onLayout: e => {
      setMainWidth(e.nativeEvent.layout.width);
      setMainHeight(e.nativeEvent.layout.height);
    }
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, _extends({
    style: [{
      transform: [{
        translateX: cell.x
      }]
    }]
  }, touchHandel.panHandlers), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableWithoutFeedback, {
    onPress: reduction
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.main]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      height: mainHeight,
      position: "absolute",
      left: -leftwidth.current
    },
    onLayout: layoutLeft
  }, rest.left && rest.left()), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      width: mainWidth
    }
  }, children), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: {
      height: mainHeight
    },
    onLayout: layoutRight
  }, !rest.right && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.right
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
    style: {
      color: "#fff"
    }
  }, "\u5220\u9664")), rest.right && rest.right())))));
};

const styles = _reactNative.StyleSheet.create({
  swipe_cell: {
    flex: 1,
    minHeight: 20,
    flexDirection: "row",
    overflow: "hidden"
  },
  main: {
    alignItems: "center",
    justifyContent: "flex-start",
    flexDirection: "row",
    position: "relative"
  },
  right: {
    height: "100%",
    backgroundColor: "#de1c31",
    color: "#fff",
    alignItems: "center",
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10
  }
});

var _default = SwipeCell;
exports.default = _default;
//# sourceMappingURL=index.js.map