react-native-animated-pagination-dots/lib/commonjs/dots/SlidingDot.js

FlatList animated pagination dots

"use strict";

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

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

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

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

const SlidingDot = _ref => {
  let {
    scrollX,
    data,
    dotSize,
    containerStyle,
    dotStyle,
    slidingIndicatorStyle,
    marginHorizontal
  } = _ref;
  const {
    width
  } = (0, _reactNative.useWindowDimensions)();
  const defaultProps = {
    dotSize: dotSize || 12,
    marginHorizontal: marginHorizontal || 3
  };
  const inputRange = [-width, 0, width];
  const translateX = scrollX.interpolate({
    inputRange,
    outputRange: [-defaultProps.dotSize + defaultProps.marginHorizontal * 2, 0, defaultProps.dotSize + defaultProps.marginHorizontal * 2]
  });
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [{
      height: defaultProps.dotSize
    }, styles.containerStyle, containerStyle]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
    style: [{
      width: defaultProps.dotSize,
      height: defaultProps.dotSize,
      borderRadius: defaultProps.dotSize / 2
    }, styles.slidingIndicatorStyle, // eslint-disable-next-line react-native/no-inline-styles
    {
      position: 'absolute',
      marginHorizontal: marginHorizontal,
      transform: [{
        translateX
      }]
    }, slidingIndicatorStyle]
  }), data.map((_item, index) => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      key: index,
      style: [{
        width: defaultProps.dotSize,
        height: defaultProps.dotSize,
        marginHorizontal: defaultProps.marginHorizontal,
        borderRadius: defaultProps.dotSize / 2
      }, styles.dotStyle, dotStyle]
    });
  }));
};

const styles = _reactNative.StyleSheet.create({
  containerStyle: {
    position: 'absolute',
    bottom: 30,
    flexDirection: 'row',
    alignSelf: 'center'
  },
  dotStyle: {
    backgroundColor: '#347af0',
    opacity: 0.4
  },
  slidingIndicatorStyle: {
    backgroundColor: '#347af0',
    zIndex: 99,
    alignItems: 'center',
    justifyContent: 'center',
    alignSelf: 'center'
  }
});

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