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

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); }

import React, { useState, useRef } from 'react';
import { Animated, View, Text, StyleSheet, TouchableWithoutFeedback, PanResponder } from "react-native";

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

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

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


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

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

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

const styles = 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
  }
});
export default SwipeCell;
//# sourceMappingURL=index.js.map