react-native-komect-uikit/src/teaset/Carousel/CarouselControl.js

React Native UI Toolkit

/**
 * @Author: will
 * @Date:   2017-06-19T17:49:44+08:00
 * @Filename: CarouselControl.js
 * @Last modified by:   will
 * @Last modified time: 2017-06-20T15:05:59+08:00
 */



// CarouselControl.js

'use strict';

import React, {Component, PropTypes} from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

import Theme from '../themes/Theme';

export default class CarouselControl extends Component {

  static propTypes = {
    ...View.propTypes,
    dot: PropTypes.element,
    activeDot: PropTypes.element,
  };

  static defaultProps = {
    ...View.defaultProps,
  };

  renderDot(dotIndex) {
    let {dot, carousel} = this.props;
    if (React.isValidElement(dot)) {
      dot = React.cloneElement(dot, {key: dotIndex, onPress: () => carousel && carousel.scrollToPage(dotIndex)});
      return dot;
    }
    return (
      <TouchableOpacity
        key={'dot' + dotIndex}
        style={{
          width: Theme.carouselDotUseSize,
          height: Theme.carouselDotUseSize,
          alignItems: 'center',
          justifyContent: 'center',
        }}
        onPress={() => carousel && carousel.scrollToPage(dotIndex)}
      >
        <View
          style={{
            backgroundColor: Theme.carouselDotColor,
            width: Theme.carouselDotSize,
            height: Theme.carouselDotSize,
            borderRadius: Theme.carouselDotSize / 2,
          }}
          />
      </TouchableOpacity>
    );
  }

  renderActiveDot(dotIndex) {
    let {activeDot, carousel} = this.props;
    if (React.isValidElement(activeDot)) {
      activeDot = React.cloneElement(activeDot, {key: dotIndex});
      return activeDot;
    }
    return (
      <TouchableOpacity
        key={dotIndex}
        style={{
          width: Theme.carouselDotUseSize,
          height: Theme.carouselDotUseSize,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <View
          style={{
            backgroundColor: Theme.carouselActiveDotColor,
            width: Theme.carouselDotSize,
            height: Theme.carouselDotSize,
            borderRadius: Theme.carouselDotSize / 2,
          }}
          />
      </TouchableOpacity>
    );
  }

  renderDots() {
    let {index, total} = this.props;
    let dots = [];
    for (let i = 0; i < total; ++i) {
      if (i == index) dots.push(this.renderActiveDot(i));
      else dots.push(this.renderDot(i));
    }
    return dots;
  }

  render() {
    let {style, index, total, ...others} = this.props;
    return (
      <View style={[styles.container, style]} pointerEvents='box-none'>
        <View style={{flexDirection: 'row'}}>
          {this.renderDots()}
        </View>
      </View>
    );
  }

}

var styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    padding: 4,
    flexDirection: 'column',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
});