tuya-panel-kit/lib/components/swipeout/swipeout.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || 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; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _jsxFileName = 'src/components/swipeout/swipeout.js';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _nativeButton = require('./nativeButton');

var _nativeButton2 = _interopRequireDefault(_nativeButton);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var SwipeoutButton = function SwipeoutButton(props) {
  var swipeoutBtnStyle = [styles.swipeoutBtn];

  if (props.type === 'delete') {
    swipeoutBtnStyle.push(styles.colorDelete);
  }
  if (props.type === 'primary') {
    swipeoutBtnStyle.push(styles.colorPrimary);
  }
  if (props.type === 'secondary') {
    swipeoutBtnStyle.push(styles.colorSecondary);
  }

  if (props.backgroundColor) {
    swipeoutBtnStyle.push([{ backgroundColor: props.backgroundColor }]);
  }

  swipeoutBtnStyle.push([{
    height: props.height,
    width: props.width
  }]);

  var swipeoutBtnContentStyle = {
    height: props.height,
    width: props.width
  };

  var swipeoutBtnTextStyle = [props.textStyle, styles.swipeoutBtnText];
  if (props.color) {
    swipeoutBtnTextStyle.push([{ color: props.color }]);
  }
  if (props.fontSize) {
    swipeoutBtnTextStyle.push([{ fontSize: props.fontSize }]);
  }
  return _react2.default.createElement(
    _nativeButton2.default,
    {
      onPress: props.onPress || null,
      disabled: props.disabled || false,
      style: [styles.swipeoutBtnWrapperStyle, swipeoutBtnStyle],
      textStyle: swipeoutBtnTextStyle,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 46
      }
    },
    props.content ? _react2.default.createElement(
      _reactNative.View,
      { style: swipeoutBtnContentStyle, __source: {
          fileName: _jsxFileName,
          lineNumber: 52
        }
      },
      props.content
    ) : props.text
  );
};

var Swipeout = function (_React$Component) {
  _inherits(Swipeout, _React$Component);

  function Swipeout(props) {
    _classCallCheck(this, Swipeout);

    var _this = _possibleConstructorReturn(this, (Swipeout.__proto__ || Object.getPrototypeOf(Swipeout)).call(this, props));

    _this.onLayout = function (event) {
      var _event$nativeEvent$la = event.nativeEvent.layout,
          width = _event$nativeEvent$la.width,
          height = _event$nativeEvent$la.height;

      _this.setState({
        contentWidth: width,
        contentHeight: height
      });
    };

    _this.onOpen = function () {
      var _this$props = _this.props,
          onOpen = _this$props.onOpen,
          sectionID = _this$props.sectionID,
          rowID = _this$props.rowID;

      if (onOpen && typeof onOpen === 'function') onOpen(sectionID, rowID);
    };

    _this.onClose = function () {
      var _this$props2 = _this.props,
          onClose = _this$props2.onClose,
          sectionID = _this$props2.sectionID,
          rowID = _this$props2.rowID;

      if (onClose && typeof onClose === 'function') onClose(sectionID, rowID);
    };

    _this.onShow = function (contentDot, direction, duration) {
      var left = direction === 'left';
      _this.onOpen();
      _reactNative.Animated.timing(_this.state.contentDot, {
        duration: duration,
        easing: _reactNative.Easing.linear,
        delay: 0,
        toValue: contentDot
      }).start(function () {
        _this.setState({
          openedLeft: left,
          openedRight: !left,
          swiping: false
        });
      });
    };

    _this.onHide = function () {
      var _this$props3 = _this.props,
          sectionID = _this$props3.sectionID,
          rowID = _this$props3.rowID,
          onClose = _this$props3.onClose;
      var _this$state = _this.state,
          openedLeft = _this$state.openedLeft,
          openedRight = _this$state.openedRight;

      if (onClose && (openedLeft || openedRight)) {
        var direction = openedRight ? 'right' : 'left';
        onClose(sectionID, rowID, direction);
      }
      _reactNative.Animated.timing(_this.state.contentDot, {
        duration: 160,
        easing: _reactNative.Easing.linear,
        delay: 0,
        toValue: 0
      }).start(function () {
        _this.setState({
          openedRight: false,
          openedLeft: false,
          swiping: false
        });
      });
    };

    _this.grantMeasureCallback = function (x, y, width) {
      var _this$props4 = _this.props,
          left = _this$props4.left,
          right = _this$props4.right,
          buttonWidth = _this$props4.buttonWidth;

      var btnWidth = buttonWidth || width / 5;
      _this.setState({
        btnWidth: btnWidth,
        leftWidth: left ? left.length * btnWidth : 0,
        rightWidth: right ? right.length * btnWidth : 0,
        swiping: true
      });
    };

    _this.handlePanResponderGrant = function () {
      var disabled = _this.props.disabled;

      if (disabled) return;
      var _this$state2 = _this.state,
          openedLeft = _this$state2.openedLeft,
          openedRight = _this$state2.openedRight;

      if (!openedLeft && !openedRight) {
        _this.onOpen();
      } else {
        _this.onClose();
      }
      _this.swipeoutContent.measure(_this.grantMeasureCallback);
    };

    _this.handlePanResponderMove = function (e, gestureState) {
      var disabled = _this.props.disabled;
      var _this$state3 = _this.state,
          openedLeft = _this$state3.openedLeft,
          openedRight = _this$state3.openedRight,
          leftWidth = _this$state3.leftWidth,
          rightWidth = _this$state3.rightWidth;

      if (disabled) return;
      var dx = gestureState.dx;
      var dy = gestureState.dy;

      if (openedRight) {
        dx -= rightWidth;
      } else if (openedLeft) {
        dx += leftWidth;
      }
      var moveHorizontal = Math.abs(dx) > Math.abs(dy);
      if (_this.props.scroll) {
        if (moveHorizontal) {
          _this.props.scroll(false);
        } else {
          _this.props.scroll(true);
        }
      }
      if (!_this.state.swiping) return;
      if (dx < 0 && _this.props.right) {
        _this.state.contentDot.setValue(dx);
      } else if (dx > 0 && _this.props.left) {
        _this.state.contentDot.setValue(dx);
      }
    };

    _this.handlePanResponderEnd = function (e, gestureState) {
      var _this$props5 = _this.props,
          disabled = _this$props5.disabled,
          onScrollEnd = _this$props5.onScrollEnd;
      var _this$state4 = _this.state,
          openedLeft = _this$state4.openedLeft,
          openedRight = _this$state4.openedRight,
          leftWidth = _this$state4.leftWidth,
          rightWidth = _this$state4.rightWidth,
          contentDotNum = _this$state4.contentDotNum,
          contentWidth = _this$state4.contentWidth,
          swiping = _this$state4.swiping;

      if (disabled) return;
      var dx = gestureState.dx;

      var openX = contentWidth * 0.33;
      var openLeft = dx > openX || dx > leftWidth / 2;
      var openRight = dx < -openX || dx < -rightWidth / 2;
      if (openedRight) {
        openRight = dx - openX < -openX;
      }
      if (openedLeft) {
        openLeft = dx + openX > openX;
      }
      if (swiping) {
        if (openRight && contentDotNum < 0 && dx < 0) {
          _this.onShow(-rightWidth, 'right', dx > openX ? 350 : 160);
        } else if (openLeft && contentDotNum > 0 && dx > 0) {
          _this.onShow(leftWidth, 'left');
        } else {
          _this.onHide();
        }
      }
      if (typeof onScrollEnd === 'function' && onScrollEnd) {
        onScrollEnd();
      }
    };

    _this.autoClose = function (btn) {
      var onPress = btn.onPress;

      if (_this.props.autoClose) _this.onHide();
      if (onPress && typeof onPress === 'function') {
        onPress();
      }
    };

    _this.renderButtons = function (btnsArray, visible, style) {
      var accessibilityLabel = _this.props.accessibilityLabel;

      if (btnsArray && visible) {
        return _react2.default.createElement(
          _reactNative.Animated.View,
          { style: style, __source: {
              fileName: _jsxFileName,
              lineNumber: 312
            }
          },
          btnsArray.map(function (btn, index) {
            return _react2.default.createElement(SwipeoutButton, {
              backgroundColor: btn.backgroundColor,
              color: btn.color,
              disabled: btn.disabled,
              key: btn.key || index,
              accessibilityLabel: accessibilityLabel + '_' + (btn.key || index),
              onPress: function onPress() {
                return _this.autoClose(btn);
              },
              text: btn.text,
              content: btn.content,
              type: btn.type,
              width: _this.state.btnWidth,
              height: _this.state.contentHeight,
              fontSize: btn.fontSize,
              textStyle: btn.textStyle,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 314
              }
            });
          })
        );
      }
    };

    _this.state = {
      contentDot: new _reactNative.Animated.Value(0),
      contentDotNum: 0,
      btnWidth: 0,
      leftWidth: 0,
      rightWidth: 0,
      contentHeight: 0,
      contentWidth: 0,
      openedRight: false,
      openedLeft: false,
      swiping: false
    };
    return _this;
  }

  _createClass(Swipeout, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var _this2 = this;

      this.panResponder = _reactNative.PanResponder.create({
        onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
          return true;
        },
        onStartShouldSetPanResponderCapture: function onStartShouldSetPanResponderCapture() {
          return _this2.state.openedLeft || _this2.state.openedRight;
        },
        onMoveShouldSetPanResponderCapture: function onMoveShouldSetPanResponderCapture(event, gestureState) {
          return Math.abs(gestureState.dx) > _this2.props.sensitivity && Math.abs(gestureState.dy) <= _this2.props.sensitivity;
        },
        onPanResponderGrant: this.handlePanResponderGrant,
        onPanResponderMove: this.handlePanResponderMove,
        onPanResponderRelease: this.handlePanResponderEnd,
        onPanResponderTerminate: this.handlePanResponderEnd,
        onShouldBlockNativeResponder: function onShouldBlockNativeResponder() {
          return false;
        },
        onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
          return false;
        }
      });
      this.state.contentDot.addListener(function (obj) {
        _this2.setState({
          contentDotNum: obj.value
        });
      });
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.close) this.onHide();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      var accessibilityLabel = this.props.accessibilityLabel;
      var _state = this.state,
          contentDotNum = _state.contentDotNum,
          contentWidth = _state.contentWidth;

      var styleSwipeout = [styles.swipeout, this.props.style];
      if (this.props.backgroundColor) {
        styleSwipeout.push([{ backgroundColor: this.props.backgroundColor }]);
      }
      var styleLeft = [styles.swipeoutBtns, {
        left: 0,
        overflow: 'hidden',
        width: contentDotNum
      }];
      var styleRight = [styles.swipeoutBtns, {
        right: 0,
        left: Math.abs(contentWidth + contentDotNum)
      }];
      var styleContent = [styles.swipeoutContent, {
        left: this.state.contentDot
      }];
      var isRightVisible = contentDotNum < 0;
      var isLeftVisible = contentDotNum > 0;
      return _react2.default.createElement(
        _reactNative.View,
        { style: styleSwipeout, __source: {
            fileName: _jsxFileName,
            lineNumber: 366
          }
        },
        _react2.default.createElement(
          _reactNative.Animated.View,
          { style: styleContent, __source: {
              fileName: _jsxFileName,
              lineNumber: 367
            }
          },
          _react2.default.createElement(
            _reactNative.View,
            _extends({
              ref: function ref(_ref) {
                _this3.swipeoutContent = _ref;
              },
              accessibilityLabel: accessibilityLabel,

              onLayout: this.onLayout
            }, this.panResponder.panHandlers, {
              __source: {
                fileName: _jsxFileName,
                lineNumber: 368
              }
            }),
            this.props.children
          )
        ),
        this.renderButtons(this.props.left, isLeftVisible, styleLeft),
        this.renderButtons(this.props.right, isRightVisible, styleRight)
      );
    }
  }]);

  return Swipeout;
}(_react2.default.Component);

Swipeout.defaultProps = {
  accessibilityLabel: 'Swipeout',
  disabled: false,
  rowID: -1,
  sectionID: -1,
  sensitivity: 50
};
Swipeout.propTypes = {
  accessibilityLabel: _propTypes2.default.string,

  disabled: _propTypes2.default.bool,

  left: _propTypes2.default.array,

  right: _propTypes2.default.array,

  buttonWidth: _propTypes2.default.number,

  onOpen: _propTypes2.default.func,

  onClose: _propTypes2.default.func,

  sensitivity: _propTypes2.default.number,

  scroll: _propTypes2.default.func,

  onScrollEnd: _propTypes2.default.func,

  style: _reactNative.ViewPropTypes.style,

  close: _propTypes2.default.bool
};


var styles = _reactNative.StyleSheet.create({
  colorDelete: {
    backgroundColor: '#fb3d38'
  },
  colorPrimary: {
    backgroundColor: '#006fff'
  },
  colorSecondary: {
    backgroundColor: '#fd9427'
  },
  swipeout: {
    backgroundColor: '#dbddde',
    overflow: 'hidden'
  },
  swipeoutBtn: {
    alignItems: 'center',
    backgroundColor: '#fff',
    flex: 1,
    justifyContent: 'center',
    overflow: 'hidden'
  },
  swipeoutBtnText: {
    color: '#fff',
    textAlign: 'center'
  },
  swipeoutBtnWrapperStyle: {
    flex: 1
  },
  swipeoutBtns: {
    bottom: 0,
    flex: 1,
    flexDirection: 'row',
    position: 'absolute',
    right: 0,
    top: 0
  },
  swipeoutContent: {}
});

exports.default = Swipeout;