moved component level constants into props

halilb · Feb 8, 2019 · 9801f4b · 9801f4b
1 parent 556e16f
commit 9801f4b
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 81 deletions.
diff --git a/README.md b/README.md
@@ -74,6 +74,8 @@ const saeInput = (
     iconClass={FontAwesomeIcon}
     iconName={'pencil'}
     iconColor={'white'}
+    inputPadding={16}
+    labelHeight={24}
     // active border height
     borderHeight={2}
     // TextInput props
@@ -99,6 +101,8 @@ const fumiInput = (
     iconName={'university'}
     iconColor={'#f95a25'}
     iconSize={20}
+    iconWidth={40}
+    inputPadding={16}
   />
 );
 ```
@@ -119,6 +123,7 @@ const kohanaInput = (
     iconClass={MaterialsIcon}
     iconName={'directions-bus'}
     iconColor={'#f4d29a'}
+    inputPadding={16}
     labelStyle={{ color: '#91627b' }}
     inputStyle={{ color: '#91627b' }}
     labelContainerStyle={{ padding: 20 }}
@@ -143,6 +148,7 @@ const makikoInput = (
     iconClass={FontAwesomeIcon}
     iconName={'comment'}
     iconColor={'white'}
+    inputPadding={16}
     inputStyle={{ color: '#db786d' }}
   />
 );
@@ -164,6 +170,8 @@ const isaoInput = (
     activeColor={'#da7071'}
     // active border height
     borderHeight={8}
+    inputPadding={16}
+    labelHeight={24}
     // this is applied as passive border and label color
     passiveColor={'#dadada'}
   />
@@ -185,6 +193,7 @@ const hoshiInput = (
     borderColor={'#b76c94'}
     // active border height
     borderHeight={3}
+    inputPadding={16}
     // this is used to set backgroundColor of label mask.
     // please pass the backgroundColor of your TextInput container.
     backgroundColor={'#F9F7F6'}
@@ -205,6 +214,7 @@ const jiroInput = (
     label={'Dog\'s name'}
     // this is used as active and passive border color
     borderColor={'#9b537a'}
+    inputPadding={16}
     inputStyle={{ color: 'white' }}
   />
 );
@@ -221,6 +231,7 @@ import { Kaede } from 'react-native-textinput-effects';
 const kaedeInput = (
   <Kaede
     label={'Website'}
+    inputPadding={16}
   />
 );
 ```
@@ -238,6 +249,8 @@ const akiraInput = (
     label={'First Name'}
     // this is used as active and passive border color
     borderColor={'#a5d1cc'}
+    inputPadding={16}
+    labelHeight={24}
     labelStyle={{ color: '#ac83c4' }}
   />
 );
@@ -256,6 +269,8 @@ const madokaInput = (
     label={'Frequency'}
     // this is used as active and passive border color
     borderColor={'#aee2c9'}
+    inputPadding={16}
+    labelHeight={24}
     labelStyle={{ color: '#008445' }}
     inputStyle={{ color: '#f4a197' }}
   />

diff --git a/lib/Akira.js b/lib/Akira.js
@@ -11,20 +11,21 @@ import {
 
 import BaseInput from './BaseInput';
 
-const LABEL_HEIGHT = 24;
-const PADDING = 16;
-
 export default class Akira extends BaseInput {
   static propTypes = {
     /*
      * this is applied as active border and label color
      */
     borderColor: PropTypes.string,
+    labelHeight: PropTypes.number,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     borderColor: '#7A7593',
+    labelHeight: 24,
+    inputPadding: 16,
     height: 48,
     animationDuration: 200,
   };
@@ -34,6 +35,8 @@ export default class Akira extends BaseInput {
       label,
       style: containerStyle,
       height: inputHeight,
+      labelHeight,
+      inputPadding,
       inputStyle,
       labelStyle,
       borderColor,
@@ -50,12 +53,12 @@ export default class Akira extends BaseInput {
           <Animated.View
             style={{
               width,
-              height: LABEL_HEIGHT,
+              height: labelHeight,
               transform: [
                 {
                   translateY: focusedAnim.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [LABEL_HEIGHT + PADDING, 0],
+                    outputRange: [labelHeight + inputPadding, 0],
                   }),
                 },
               ],
@@ -75,6 +78,7 @@ export default class Akira extends BaseInput {
             {
               width,
               height: inputHeight,
+              paddingHorizontal: inputPadding,
             },
           ]}
           value={value}
@@ -101,7 +105,7 @@ export default class Akira extends BaseInput {
         <Animated.View
           style={{
             position: 'absolute',
-            top: LABEL_HEIGHT,
+            top: labelHeight,
             width,
             height: focusedAnim.interpolate({
               inputRange: [0, 1],
@@ -151,7 +155,6 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   textInput: {
-    paddingHorizontal: PADDING,
     padding: 0,
     color: 'black',
     fontSize: 18,

diff --git a/lib/Fumi.js b/lib/Fumi.js
@@ -10,9 +10,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-const ICON_WIDTH = 40;
-
 export default class Fumi extends BaseInput {
   static propTypes = {
     /*
@@ -43,6 +40,8 @@ export default class Fumi extends BaseInput {
     height: 48,
     iconColor: '#00aeef',
     iconSize: 20,
+    iconWidth: 40,
+    inputPadding: 16,
     passiveIconColor: '#a3a3a3',
     animationDuration: 300,
   };
@@ -58,11 +57,13 @@ export default class Fumi extends BaseInput {
       style: containerStyle,
       inputStyle,
       height: inputHeight,
+      inputPadding,
+      iconWidth,
       labelStyle,
     } = this.props;
     const { focusedAnim, value } = this.state;
     const AnimatedIcon = Animated.createAnimatedComponent(iconClass);
-    const ANIM_PATH = PADDING + inputHeight;
+    const ANIM_PATH = inputPadding + inputHeight;
     const NEGATIVE_ANIM_PATH = ANIM_PATH * -1;
 
     return (
@@ -79,7 +80,7 @@ export default class Fumi extends BaseInput {
             size={iconSize}
             style={{
               position: 'absolute',
-              left: PADDING,
+              left: inputPadding,
               bottom: focusedAnim.interpolate({
                 inputRange: [0, 0.5, 0.51, 0.7, 1],
                 outputRange: [
@@ -102,15 +103,15 @@ export default class Fumi extends BaseInput {
             styles.separator,
             {
               height: inputHeight,
-              left: ICON_WIDTH + 8,
+              left: iconWidth + 8,
             },
           ]}
         />
         <TouchableWithoutFeedback onPress={this.focus}>
           <Animated.View
             style={{
               position: 'absolute',
-              left: ICON_WIDTH + PADDING,
+              left: iconWidth + inputPadding,
               height: inputHeight,
               top: focusedAnim.interpolate({
                 inputRange: [0, 0.5, 0.51, 0.7, 1],
@@ -119,7 +120,7 @@ export default class Fumi extends BaseInput {
                   ANIM_PATH,
                   NEGATIVE_ANIM_PATH,
                   NEGATIVE_ANIM_PATH,
-                  PADDING / 2,
+                  inputPadding / 2,
                 ],
               }),
             }}
@@ -150,7 +151,7 @@ export default class Fumi extends BaseInput {
           style={[
             styles.textInput,
             {
-              marginLeft: ICON_WIDTH + PADDING,
+              marginLeft: iconWidth + inputPadding,
               color: iconColor,
             },
             inputStyle,

diff --git a/lib/Hoshi.js b/lib/Hoshi.js
@@ -11,9 +11,6 @@ import {
 
 import BaseInput from './BaseInput';
 
-const PADDING = 16;
-const BORDER_HEIGHT_DEFAULT = 3;
-
 export default class Hoshi extends BaseInput {
   static propTypes = {
     borderColor: PropTypes.string,
@@ -22,13 +19,15 @@ export default class Hoshi extends BaseInput {
      * this should be replaced if we can find a better way to mask label animation.
      */
     maskColor: PropTypes.string,
+    inputPadding: PropTypes.number,
     height: PropTypes.number,
   };
 
   static defaultProps = {
     borderColor: 'red',
+    inputPadding: 16,
     height: 48,
-    borderHeight: 6,
+    borderHeight: 3,
   };
 
   render() {
@@ -40,6 +39,7 @@ export default class Hoshi extends BaseInput {
       maskColor,
       borderColor,
       borderHeight,
+      inputPadding,
       height: inputHeight,
     } = this.props;
     const { width, focusedAnim, value } = this.state;
@@ -52,7 +52,7 @@ export default class Hoshi extends BaseInput {
           styles.container,
           containerStyle,
           {
-            height: inputHeight + PADDING,
+            height: inputHeight + inputPadding,
             width: containerWidth,
           },
         ]}
@@ -67,6 +67,7 @@ export default class Hoshi extends BaseInput {
             {
               width,
               height: inputHeight,
+              left: inputPadding,
             },
           ]}
           value={value}
@@ -90,7 +91,7 @@ export default class Hoshi extends BaseInput {
                 }),
                 left: focusedAnim.interpolate({
                   inputRange: [0, 0.5, 0.51, 1],
-                  outputRange: [PADDING, 2 * PADDING, 0, PADDING],
+                  outputRange: [inputPadding, 2 * inputPadding, 0, inputPadding],
                 }),
               },
             ]}
@@ -100,7 +101,12 @@ export default class Hoshi extends BaseInput {
             </Text>
           </Animated.View>
         </TouchableWithoutFeedback>
-        <View style={[styles.labelMask, { backgroundColor: maskColor }]} />
+        <View
+          style={[styles.labelMask, {
+            backgroundColor: maskColor,
+            width: inputPadding,
+          }]}
+        />
         <Animated.View
           style={[
             styles.border,
@@ -134,15 +140,13 @@ const styles = StyleSheet.create({
   textInput: {
     position: 'absolute',
     bottom: 2,
-    left: PADDING,
     padding: 0,
     color: '#6a7989',
     fontSize: 18,
     fontWeight: 'bold',
   },
   labelMask: {
     height: 24,
-    width: PADDING,
   },
   border: {
     position: 'absolute',