bee-ui/src/BarChart/Rectangular.js

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

const styles = StyleSheet.create({
  rectangularWrap: {
    flex: 1,
  },
  rectangular: {
    width: 10,
    backgroundColor: '#82A0FA',
    borderTopLeftRadius: 5,
    borderTopRightRadius: 5,
    borderBottomLeftRadius: 5,
    borderBottomRightRadius: 5,
  },
});

class Rectangular extends Component {
  static propTypes = {
    customStyle: PropTypes.object,
    valueHeight: PropTypes.number,
    onClick: PropTypes.func,
    item: PropTypes.object,
  }
  static defaultProps = {
    customStyle: {},
    valueHeight: 0,
    onClick: () => {},
    item: {},
  }
  onPress = () => {
    const item = this.props.item;
    this.props.onClick(item);
  }
  get rectangularWarp() {
    const customStyle = this.props.customStyle;
    const raduis = customStyle.raduis;
    const rectangularWarp = {
      justifyContent: 'flex-end',
      height: customStyle.height,
      width: customStyle.width,
      backgroundColor: customStyle.backgroundColor,
      borderTopLeftRadius: raduis,
      borderTopRightRadius: raduis,
      borderBottomLeftRadius: raduis,
      borderBottomRightRadius: raduis,
    };
    return rectangularWarp;
  }
  get rectangular() {
    const customStyle = this.props.customStyle;
    const raduis = customStyle.raduis;
    return {
      height: this.props.valueHeight,
      width: customStyle.width,
      backgroundColor: customStyle.fillColor,
      borderTopLeftRadius: raduis,
      borderTopRightRadius: raduis,
      borderBottomLeftRadius: raduis,
      borderBottomRightRadius: raduis,
    };
  }
  render() {
    return (
      <TouchableOpacity onPress={this.onPress}>
        <View style={this.rectangularWarp}>
          <View style={[styles.rectangular, this.rectangular]} />
        </View>
      </TouchableOpacity>

    );
  }
}

export default Rectangular;