proptypes styles

Author: LucasMonteiro1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-speedometer-chart",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Speedometer Chart component for React Native",
   "main": "src/index.js",
   "author": "Lucas Monteiro",

src/index.js

@@ -1,53 +1,41 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { getStyles, getColorPointIndicator } from './rules';
+import { getStyles } from './rules';
+
+const Speedometer = (props) => {
+  const { value, totalValue, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle } = props;
 
-const Speedometer = ({ value, totalValue, size, outerColor, innerColor, internalColor, style, innerCircleStyle, outerCircleStyle, halfCircleStyle, showText, text, textStyle, showLabels, labelStyle, showPercent, percentStyle, percentSize, showIndicator, indicatorColor }) => {
-  const styles = getStyles(size, percentSize);
-  const degreesValue = (value > totalValue) ? totalValue : value;
   const percentValue = parseInt(String((value * 100) / totalValue).split('.')[0]);
+  const degreesValue = (value > totalValue) ? totalValue : value;
   const degrees = ((degreesValue * 180) / ((totalValue === 0) ? 1 : totalValue)) - 90;
-  const degressStyle = {
-    backgroundColor: internalColor,
-    transform: [{ translateX: size / 4 }, { rotate: `${degrees}deg` }, { translateX: (size / 4 * -1) }],
-  };
 
-  const degressStyleIndicator = {
-    transform: [{ translateX: (2 + size) / 4 }, { rotate: `${((180 / 100) * degreesValue)}deg` }, { translateX: ( (2 + size) / 4 * -1) }],
-  };
+  const styles = getStyles(props, degrees);
 
   const percentElement = (showPercent) ? (
-    <Text style={[{ backgroundColor: innerColor }, percentStyle]} numberOfLines={1}>{percentValue}%</Text>
+    <Text style={[styles.percentText, percentStyle]} numberOfLines={1}>{percentValue}%</Text>
   ) : null;
 
   const textElement = ((showText) && (text)) ? (
-    <Text style={[{ backgroundColor: innerColor }, textStyle]} numberOfLines={1}>{text}</Text>
+    <Text style={[styles.text, textStyle]} numberOfLines={1}>{text}</Text>
   ) : null;
 
   const labelsElement = (showLabels) ? (
-    <View style={[styles.labelsView, { width: size }]}>
+    <View style={styles.labelsView}>
       <Text style={[styles.initialLabel, labelStyle]} numberOfLines={1}>0</Text>
       <Text style={[styles.finalLabel, labelStyle]} numberOfLines={1}>{totalValue}</Text>
     </View>
   ) : null;
 
-  const indicadorElement = ((!showText) && (!showPercent) && (showIndicator) && (totalValue)) ? (
-    <View style={[degressStyleIndicator, styles.indicator, { width: 2 + size / 2, backgroundColor: indicatorColor }]}>
-      <View style={[styles.pointIndicator, { backgroundColor: getColorPointIndicator(indicatorColor) }]}/>
-    </View>
-  ) : null;
-
   return (
     <View style={style}>
-      <View style={[styles.outerCircle, { backgroundColor: outerColor }, outerCircleStyle]}>
-        <View style={[styles.halfCircle, degressStyle, halfCircleStyle]}/>
-        <View style={[styles.innerCircle, { backgroundColor: innerColor }, innerCircleStyle]}>
+      <View style={[styles.outerCircle, outerCircleStyle]}>
+        <View style={[styles.halfCircle, halfCircleStyle]}/>
+        <View style={[styles.innerCircle, innerCircleStyle]}>
           {percentElement}
           {textElement}
         </View>
       </View>
-      {indicadorElement}
       {labelsElement}
     </View>
   );
@@ -60,23 +48,42 @@ Speedometer.propTypes = {
   outerColor: PropTypes.string,
   innerColor: PropTypes.string,
   internalColor: PropTypes.string,
-  style: PropTypes.object,
+  style: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
   showText: PropTypes.bool,
   text: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
-  textStyle: PropTypes.object,
+  textStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
   showLabels: PropTypes.bool,
-  labelStyle: PropTypes.object,
+  labelStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
   showPercent: PropTypes.bool,
-  percentStyle: PropTypes.object,
-  innerCircleStyle: PropTypes.object,
-  outerCircleStyle: PropTypes.object,
-  halfCircleStyle: PropTypes.object,
+  percentStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
+  innerCircleStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
+  outerCircleStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
+  halfCircleStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.arrayOf(PropTypes.object),
+  ]),
   percentSize: PropTypes.number,
-  showIndicator: PropTypes.bool,
-  indicatorColor: PropTypes.string,
 };
 
 Speedometer.defaultProps = {
@@ -92,9 +99,10 @@ Speedometer.defaultProps = {
   labelStyle: {},
   showPercent: false,
   percentStyle: {},
+  innerCircleStyle: {},
+  outerCircleStyle: {},
+  halfCircleStyle: {},
   percentSize: 0.5,
-  showIndicator: false,
-  indicatorColor: 'grey'
 };
 
 export default Speedometer;

src/rules.js

@@ -1,6 +1,4 @@
-import color from 'color';
-
-export const getStyles = (size, percent = 0.5) => ({
+export const getStyles = ({ size, percentSize, internalColor, innerColor, outerColor }, degrees) => ({
   outerCircle: {
     justifyContent: 'flex-end',
     alignItems: 'center',
@@ -9,18 +7,19 @@ export const getStyles = (size, percent = 0.5) => ({
     borderTopLeftRadius: size / 2,
     borderTopRightRadius: size / 2,
     overflow: 'hidden',
+    backgroundColor: outerColor,
   },
   innerCircle: {
     overflow: 'hidden',
     justifyContent: 'flex-end',
     alignItems: 'center',
-    backgroundColor: '#fff',
-    width: size * percent,
-    height: (size / 2) * percent,
+    width: size * percentSize,
+    height: (size / 2) * percentSize,
     borderTopLeftRadius: size / 2,
     borderTopRightRadius: size / 2,
     paddingLeft: 3,
     paddingRight: 3,
+    backgroundColor: innerColor,
   },
   halfCircle: {
     position: 'absolute',
@@ -31,29 +30,23 @@ export const getStyles = (size, percent = 0.5) => ({
     borderTopRightRadius: 0,
     borderBottomRightRadius: 0,
     borderRadius: size / 2,
+    backgroundColor: internalColor,
+    transform: [{ translateX: size / 4 }, { rotate: `${degrees}deg` }, { translateX: (size / 4 * -1) }],
   },
   labelsView: {
     flexDirection: 'row',
+    width: size,
   },
   initialLabel: {
     flex: 1,
   },
   finalLabel: {
     flex: 0,
   },
-  indicator: {
-    height: 4,
-    zIndex: 1000,
-    justifyContent: 'center',
+  percentText: {
+    backgroundColor: innerColor,
   },
-  pointIndicator: {
-    borderRadius: 50,
-    width: 15,
-    height: 15,
-    alignSelf: 'flex-end',
+  text: {
+    backgroundColor: innerColor,
   },
 });
-
-export const getColorPointIndicator = (cor) => {
-  return color(cor).darken(0.2).hex();
-};