tuya-panel-kit/lib/components/carousel/index.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 _jsxFileName = 'src/components/carousel/index.js';

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 _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _dot = require('./dot');

var _dot2 = _interopRequireDefault(_dot);

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 Carousel = function (_React$Component) {
  _inherits(Carousel, _React$Component);

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

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

    _initialiseProps.call(_this);

    var _this$props = _this.props,
        children = _this$props.children,
        selectedIndex = _this$props.selectedIndex;

    _this.count = children ? _react2.default.Children.count(children) : 0;
    var index = _this.count > 1 ? Math.min(selectedIndex, _this.count - 1) : 0;
    _this.state = {
      width: 0,
      isScrolling: false,
      selectedIndex: index,
      offset: { x: 0, y: 0 },
      autoplayStop: false
    };
    return _this;
  }

  _createClass(Carousel, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.autoplay();
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      var children = nextProps.children,
          loop = nextProps.loop,
          selectedIndex = nextProps.selectedIndex,
          useViewPagerOnAndroid = nextProps.useViewPagerOnAndroid;
      var width = this.state.width;

      if (selectedIndex !== this.state.selectedIndex) {
        var index = this.count > 1 ? Math.min(selectedIndex, this.count - 1) : 0;
        var changeOffset = width * (index + (loop ? 1 : 0));
        this.setState({
          selectedIndex: index,
          offset: { x: changeOffset, y: 0 }
        }, function () {
          return _this2.androidScrollTo(changeOffset, useViewPagerOnAndroid);
        });
      }
      if (children && _react2.default.Children.count(children) === this.count) return;
      this.count = _react2.default.Children.count(children) || 1;
      var offset = width * (loop ? 1 : 0);
      this.setState({
        autoplayStop: false,
        isScrolling: false,
        selectedIndex: 0,
        offset: { x: offset, y: 0 }
      });
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      this.autoplayTimer && clearTimeout(this.autoplayTimer);
      this.androidScrollEndTimer && clearTimeout(this.androidScrollEndTimer);
      this.scrollEndTimter && clearTimeout(this.scrollEndTimter);
      this.firstScrollTimer && clearTimeout(this.firstScrollTimer);
      this.loopJumpTimer && clearTimeout(this.loopJumpTimer);
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          hasDots = _props.hasDots,
          loop = _props.loop,
          accessibilityLabel = _props.accessibilityLabel,
          pageStyle = _props.pageStyle;

      if (!children) return null;
      var pages = void 0;
      var pageWidth = [pageStyle, { width: this.state.width }];
      if (this.count > 1) {
        var childrenArray = _react2.default.Children.toArray(children);
        if (loop) {
          childrenArray.unshift(childrenArray[this.count - 1]);
          childrenArray.push(childrenArray[1]);
        }
        pages = childrenArray.map(function (child, index) {
          return _react2.default.createElement(
            _reactNative.View,
            {
              key: 'carousel_' + index,
              accessibilityLabel: accessibilityLabel + '_' + index,
              style: pageWidth,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 344
              }
            },
            child
          );
        });
      } else {
        pages = _react2.default.createElement(
          _reactNative.View,
          { style: pageWidth, __source: {
              fileName: _jsxFileName,
              lineNumber: 353
            }
          },
          children
        );
      }
      return _react2.default.createElement(
        _reactNative.View,
        { onLayout: this.onLayout, __source: {
            fileName: _jsxFileName,
            lineNumber: 356
          }
        },
        this._renderScroll(pages),
        hasDots && this._renderDots()
      );
    }
  }]);

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

Carousel.propTypes = {
  accessibilityLabel: _propTypes2.default.string,

  bounces: _propTypes2.default.bool,

  hasDots: _propTypes2.default.bool,

  autoplay: _propTypes2.default.bool,

  autoplayInterval: _propTypes2.default.number,

  selectedIndex: _propTypes2.default.number,

  dots: _propTypes2.default.oneOfType([_propTypes2.default.element, _propTypes2.default.func]),

  dotStyle: _reactNative.ViewPropTypes.style,

  dotActiveStyle: _reactNative.ViewPropTypes.style,

  pageStyle: _reactNative.ViewPropTypes.style,

  useViewPagerOnAndroid: _propTypes2.default.bool
};
Carousel.defaultProps = {
  accessibilityLabel: 'Carousel',
  bounces: true,
  hasDots: true,
  autoplay: false,
  autoplayInterval: 2000,
  selectedIndex: 0,
  dots: _dot2.default,
  dotStyle: {},
  dotActiveStyle: {},
  pageStyle: {},
  useViewPagerOnAndroid: true
};

var _initialiseProps = function _initialiseProps() {
  var _this3 = this;

  this.onScrollBegin = function (e) {
    _this3.setState({
      isScrolling: true
    }, function () {
      if (_this3.props.onScrollBeginDrag) {
        _this3.props.onScrollBeginDrag(e, _this3.state);
      }
    });
  };

  this.onScrollEnd = function (e) {
    _this3.setState({ isScrolling: false });

    if (!e.nativeEvent.contentOffset) {
      var position = e.nativeEvent.position;

      e.nativeEvent.contentOffset = {
        x: position * _this3.state.width,
        y: 0
      };
    }
    _this3.updateIndex(e.nativeEvent.contentOffset);
    _this3.scrollEndTimter = setTimeout(function () {
      _this3.autoplay();
      _this3.loopJump();
      if (_this3.props.onMomentumScrollEnd) {
        _this3.props.onMomentumScrollEnd(e, _this3.state);
      }
    });
  };

  this.onScrollEndDrag = function (e) {
    var _state = _this3.state,
        offset = _state.offset,
        selectedIndex = _state.selectedIndex;

    var previousOffset = offset.x;
    var newOffset = e.nativeEvent.contentOffset.x;
    if (previousOffset === newOffset && (selectedIndex === 0 || selectedIndex === _this3.count - 1)) {
      _this3.setState({
        isScrolling: false
      });
    }
    if (_this3.props.onScrollEndDrag) {
      _this3.props.onScrollEndDrag(e, _this3.state);
    }
  };

  this.onLayout = function (e) {
    var _props2 = _this3.props,
        selectedIndex = _props2.selectedIndex,
        loop = _props2.loop,
        useViewPagerOnAndroid = _props2.useViewPagerOnAndroid;

    var scrollIndex = _this3.count > 1 ? Math.min(selectedIndex, _this3.count - 1) : 0;
    var width = e.nativeEvent.layout.width;

    var offset = width * (scrollIndex + (loop ? 1 : 0));
    _this3.setState({
      width: width,
      offset: { x: offset, y: 0 }
    }, function () {
      return _this3.androidScrollTo(offset, useViewPagerOnAndroid);
    });
  };

  this.onPageScrollStateChanged = function (state) {
    if (state === 'dragging') _this3.onScrollBegin();
  };

  this.androidScrollTo = function (offset, isViewPager) {
    if (_reactNative.Platform.OS === 'android' && !isViewPager) {
      _this3.firstScrollTimer = setTimeout(function () {
        _this3.scrollview.scrollTo({ x: offset, y: 0, animated: false });
      }, 0);
    }
  };

  this.loopJump = function () {
    if (_this3.state.loopJump && _reactNative.Platform.OS === 'android') {
      var i = _this3.state.selectedIndex + (_this3.props.loop ? 1 : 0);
      if (_this3.props.useViewPagerOnAndroid) {
        _this3.loopJumpTimer = setTimeout(function () {
          return _this3.scrollview.setPageWithoutAnimation && _this3.scrollview.setPageWithoutAnimation(i);
        }, 50);
      } else {
        _this3.loopJumpTimer = setTimeout(function () {
          var x = _this3.state.width * i;
          _this3.scrollview.scrollTo({ x: x, y: 0 }, false);
        }, 0);
      }
    }
  };

  this.updateIndex = function (currentOffset) {
    var paramOffset = currentOffset;
    var selectedIndex = _this3.state.selectedIndex;
    var _state2 = _this3.state,
        offset = _state2.offset,
        width = _state2.width;

    var diff = currentOffset.x - offset.x;
    if (!diff) return;
    selectedIndex += Math.round(diff / width);
    var loopJump = false;
    if (_this3.props.loop) {
      loopJump = true;
      if (selectedIndex <= -1) {
        selectedIndex = _this3.count - 1;
        paramOffset.x = width * _this3.count;
      } else if (selectedIndex >= _this3.count) {
        selectedIndex = 0;
        paramOffset.x = width;
      }
    }
    _this3.setState({
      selectedIndex: selectedIndex,
      offset: paramOffset,
      loopJump: loopJump
    });
    if (_this3.props.carouselChange) {
      _this3.props.carouselChange(selectedIndex);
    }
  };

  this.scrollNextPage = function () {
    var _state3 = _this3.state,
        selectedIndex = _state3.selectedIndex,
        isScrolling = _state3.isScrolling,
        width = _state3.width;

    if (isScrolling || _this3.count < 2) return;
    var diff = selectedIndex + 1 + (_this3.props.loop ? 1 : 0);
    var offsetX = diff * width;
    if (_reactNative.Platform.OS === 'android' && _this3.props.useViewPagerOnAndroid) {
      _this3.scrollview && _this3.scrollview.setPage(diff);
    } else {
      _this3.scrollview && _this3.scrollview.scrollTo({ x: offsetX, y: 0 });
    }
    _this3.setState({
      isScrolling: true,
      autoplayStop: false
    });
    if (_reactNative.Platform.OS === 'android') {
      _this3.androidScrollEndTimer = setTimeout(function () {
        _this3.onScrollEnd({
          nativeEvent: {
            position: diff
          }
        });
      }, 0);
    }
  };

  this.autoplay = function () {
    var _props3 = _this3.props,
        children = _props3.children,
        autoplay = _props3.autoplay,
        autoplayInterval = _props3.autoplayInterval,
        loop = _props3.loop;
    var _state4 = _this3.state,
        isScrolling = _state4.isScrolling,
        autoplayStop = _state4.autoplayStop,
        selectedIndex = _state4.selectedIndex;

    if (!Array.isArray(children) || !autoplay || isScrolling || autoplayStop) return;
    clearTimeout(_this3.autoplayTimer);
    _this3.autoplayTimer = setTimeout(function () {
      if (!loop && selectedIndex === _this3.count - 1) {
        _this3.setState({
          autoplayStop: true
        });
        return;
      }
      _this3.scrollNextPage();
    }, autoplayInterval);
  };

  this._renderScroll = function (pages) {
    if (_reactNative.Platform.OS === 'android' && _this3.props.useViewPagerOnAndroid) {
      return _react2.default.createElement(
        _reactNative.ViewPagerAndroid,
        _extends({
          ref: function ref(_ref) {
            _this3.scrollview = _ref;
          }
        }, _this3.props, {
          initialPage: _this3.props.loop ? _this3.state.selectedIndex + 1 : _this3.state.selectedIndex,
          onPageScrollStateChanged: _this3.onPageScrollStateChanged,
          onPageSelected: _this3.onScrollEnd,
          key: '$carousel',
          style: _this3.props.style,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 277
          }
        }),
        pages
      );
    }
    return _react2.default.createElement(
      _reactNative.ScrollView,
      _extends({}, _this3.props, {
        horizontal: true,
        ref: function ref(_ref2) {
          _this3.scrollview = _ref2;
        },
        showsHorizontalScrollIndicator: false,
        showsVerticalScrollIndicator: false,
        pagingEnabled: true,
        removeClippedSubviews: false,
        automaticallyAdjustContentInsets: false,
        directionalLockEnabled: true,
        contentContainerStyle: _this3.props.style,
        contentOffset: _this3.state.offset,
        onScrollBeginDrag: _this3.onScrollBegin,
        onMomentumScrollEnd: _this3.onScrollEnd,
        onScrollEndDrag: _this3.onScrollEndDrag,
        bounces: !!_this3.props.bounces,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 295
        }
      }),
      pages
    );
  };

  this._renderDots = function () {
    var _props4 = _this3.props,
        dotStyle = _props4.dotStyle,
        dotActiveStyle = _props4.dotActiveStyle,
        dots = _props4.dots,
        dotWrapperStyle = _props4.dotWrapperStyle;

    return dots ? dots({
      dotStyle: dotStyle,
      dotWrapperStyle: dotWrapperStyle,
      dotActiveStyle: dotActiveStyle,
      currentIndex: _this3.state.selectedIndex,
      count: _this3.count
    }) : null;
  };
};

exports.default = Carousel;