Woa 9306 (#111)

* add support for inactiveColor

* lint fix

* adding support to enlargeActive page indicator in PageControl; adding example for colored placeholder in TextInput

* edit for docs

* Adding support for custom spacing between the page indicators (circles)

* fix for enlargement size

Author: Inbal-Tish

demo/src/screens/componentScreens/InputsScreen.js

@@ -71,6 +71,8 @@ export default class InputScreen extends Component {
           <TextInput
             text70
             floatingPlaceholder
+            placeholderTextColor={Colors.cyan30}
+            floatingPlaceholderColor={Colors.cyan30}
             placeholder="underline colors && error"
             onChangeText={text => this.setState({error: text ? '' : 'This field is required'})}
             error={this.state.error}

demo/src/screens/componentScreens/PageControlScreen.js

@@ -17,6 +17,17 @@ export default class PageControlScreen extends Component {
         <PageControl containerStyle={containerStyle} numOfPages={10} currentPage={4} color={Colors.purple40}/>
         <PageControl containerStyle={containerStyle} numOfPages={10} currentPage={5} color={Colors.violet40} size={20}/>
         <PageControl containerStyle={containerStyle} numOfPages={10} currentPage={6} color={Colors.orange40} size={20}/>
+        <PageControl
+          containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70}
+        />
+        <PageControl
+          containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70}
+          enlargeActive
+        />
+        <PageControl
+          containerStyle={containerStyle} numOfPages={10} currentPage={6} inactiveColor={Colors.dark70} enlargeActive
+          spacing={10}
+        />
       </ScrollView>
     );
   }

src/components/pageControl/index.js

@@ -1,16 +1,22 @@
-import React from 'react';
+import _ from 'lodash';
 import PropTypes from 'prop-types';
+import React from 'react';
 import {StyleSheet} from 'react-native';
-import _ from 'lodash';
-import * as Constants from '../../helpers/Constants';
 import {ThemeManager} from '../../style';
 import {BaseComponent} from '../../commons';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
 
-function getColorStyle(color, index, currentPage) {
+
+function getColorStyle(color, inactiveColor, index, currentPage) {
   const compColor = color || ThemeManager.primaryColor;
-  return {borderColor: compColor, backgroundColor: (index === currentPage) ? compColor : 'transparent'};
+  return {borderColor: (index === currentPage) ? compColor : inactiveColor || compColor,
+    backgroundColor: (index === currentPage) ? compColor : inactiveColor || 'transparent'};
+}
+
+function getSizeStyle(size, enlargeActive, index, currentPage) {
+  const temp = enlargeActive ? ((index === currentPage) ? size + 2 : size) : size;
+  return {width: temp, height: temp, borderRadius: temp / 2};
 }
 
 /**
@@ -38,56 +44,66 @@ export default class PageControl extends BaseComponent {
      */
     onPagePress: PropTypes.func,
     /**
-     * Color of the selected page dot and the border of the not selected pages
+     * Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages
      */
     color: PropTypes.string,
+    /**
+     * Color of the unselected page dots and the border of the not selected pages
+     */
+    inactiveColor: PropTypes.string,
     /**
      * The size of the page indicator
      */
     size: PropTypes.number,
+    /**
+     * Whether to enlarge the active page indicator
+     */
+    enlargeActive: PropTypes.bool,
+    /**
+     * The space between the siblings page indicators
+     */
+    spacing: PropTypes.number,
   };
 
-  generateStyles() {
-    this.styles = createStyles(this.props.size);
-  }
+  static defaultProps = {
+    size: 10,
+    spacing: 4,
+    enlargeActive: false,
+  };
 
   render() {
-    const {numOfPages, currentPage, color, containerStyle, onPagePress} = this.props;
+    const {numOfPages, currentPage, color, inactiveColor, containerStyle, onPagePress, size, spacing, enlargeActive}
+      = this.props;
+
     return (
-      <View style={[this.styles.container, containerStyle]}>
+      <View style={[styles.container, containerStyle]}>
         {
           _.map([...new Array(numOfPages)], (item, index) =>
             <TouchableOpacity
               disabled={_.isUndefined(onPagePress)}
               onPress={() => onPagePress && onPagePress(index)}
               key={index}
-              style={[this.styles.pageIndicator, getColorStyle(color, index, currentPage)]}
+              style={[
+                styles.pageIndicator,
+                {marginRight: spacing / 2, marginLeft: spacing / 2},
+                getColorStyle(color, inactiveColor, index, currentPage),
+                getSizeStyle(size, enlargeActive, index, currentPage),
+              ]}
             />)
         }
       </View>
     );
   }
 }
 
-function createStyles(size = 10) {
-  return StyleSheet.create({
-    container: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    pageView: {
-      width: Constants.screenWidth,
-      height: Constants.screenHeight,
-    },
-    pageIndicator: {
-      backgroundColor: 'transparent',
-      borderWidth: 1,
-      marginRight: 2,
-      marginLeft: 2,
-      width: size,
-      height: size,
-      borderRadius: size / 2,
-    },
-  });
-}
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pageIndicator: {
+    backgroundColor: 'transparent',
+    borderWidth: 1,
+  },
+});

src/components/view/index.js

@@ -17,7 +17,7 @@ export default class View extends BaseComponent {
     ...ViewPropTypes,
     ...BaseComponent.propTypes,
     /**
-     * if true, will add SafeAreaView as a wrapper
+     * if true, will render as SafeAreaView
      */
     useSafeArea: PropTypes.bool,
   };