@r3l/app/lib/modules/ui/mobile/pills.component.js

Relevant App

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

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

var _reactNativeWeb = require("react-native-web");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _global = require("../../../styles/global");

var styles;

function Pills(props) {
  var scrollToPage = props.scrollToPage,
      currentIndex = props.currentIndex,
      slides = props.slides;
  if (!slides || !slides.length) return null;
  var indicator = props.slides.map(function (slide, i) {
    var active = false;
    if (currentIndex === i) active = true;
    return /*#__PURE__*/_react.default.createElement(_reactNativeWeb.TouchableWithoutFeedback, {
      onPress: function onPress() {
        return scrollToPage(i);
      },
      key: i
    }, /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
      style: [styles.indicatorItem, {
        backgroundColor: active ? _global.blue : 'lightgrey'
      }]
    }));
  });
  return /*#__PURE__*/_react.default.createElement(_reactNativeWeb.View, {
    style: styles.pillContainer
  }, indicator);
}

styles = _reactNativeWeb.StyleSheet.create({
  pillContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  indicatorItem: {
    marginLeft: 3,
    marginRight: 3,
    height: 5,
    width: 5,
    borderRadius: 5
  }
});
Pills.propTypes = {
  slides: _propTypes.default.array,
  currentIndex: _propTypes.default.number,
  scrollToPage: _propTypes.default.func
};
//# sourceMappingURL=pills.component.js.map