@holper/react-native-holper-storybook 0.6.72 → 0.6.74

package/lib/components/Input/index.js

@@ -5,81 +5,85 @@ import style from "./style";
 import { Colors } from "../../configs/constants";
 
 const Input = ({
+  variant,
+  size,
   disabled,
-  rightIcon,
-  rightIconWide,
   leftIcon,
   leftIconWide,
-  size,
-  variant,
+  showLabel,
+  label,
   count,
+  rightIcon,
+  value,
+  maxLength,
   ...props
 }) => (
-  <View>
-    <TextInput
-      style={[
-        style.input,
-        style[variant],
-        style[`${size}Size`],
-        rightIcon && style.rightIcon,
-        leftIcon && style.leftIcon,
-        rightIconWide && style.rightIconWide,
-        leftIconWide && style.leftIconWide,
-        disabled && style.disabled,
-      ]}
-      editable={!disabled}
-      allowFontScaling={false}
-      placeholderTextColor={Colors.midblue}
-      {...props}
-    />
-    <View
-      style={[
-        style[variant],
-        style.rightIconContainer,
-        rightIconWide ? style.rightWideIconContainer : {},
-        disabled ? style.disabled : {},
-      ]}
-    >
-      {rightIcon}
-    </View>
-    <View
-      style={[
-        style[variant],
-        style.leftIconContainer,
-        leftIconWide ? style.leftWideIconContainer : {},
-        disabled ? style.disabled : {},
-      ]}
-    >
-      {leftIcon}
+  <View style={style.container}>
+    {showLabel && <Text style={style.label}>{label}</Text>}
+    <View style={style.inputWrapper}>
+      <TextInput
+        style={[
+          style.input,
+          style[variant],
+          style[`${size}Size`],
+          leftIcon ? style.leftIcon : {},
+          leftIconWide ? style.leftIconWide : {},
+          disabled ? style.disabled : {},
+        ]}
+        editable={!disabled}
+        allowFontScaling={false}
+        placeholderTextColor={Colors.midblue}
+        value={value}
+        maxLength={maxLength}
+        {...props}
+      />
+      {leftIcon && (
+        <View
+          style={[
+            style.leftIconContainer,
+            leftIconWide ? style.leftWideIconContainer : {},
+            disabled ? style.disabled : {},
+          ]}
+        >
+          {leftIcon}
+        </View>
+      )}
+      {rightIcon && <View style={style.rightIconContainer}>{rightIcon}</View>}
     </View>
-    {!!count ? (
+    {count && (
       <Text style={style.count}>
         {value?.length || 0}/{maxLength}
       </Text>
-    ) : null}
+    )}
   </View>
 );
 
 Input.defaultProps = {
+  variant: "default",
   disabled: false,
   leftIcon: null,
   leftIconWide: false,
+  showLabel: false,
+  label: "",
+  count: false,
   rightIcon: null,
-  rightIconWide: false,
+  value: "",
+  maxLength: 100,
   size: "fixed",
-  variant: "default",
-  count: 0,
 };
 
 Input.propTypes = {
+  variant: PropTypes.oneOf(["default", "completed", "error"]),
+  size: PropTypes.oneOf(["fixed", "fit"]),
   disabled: PropTypes.bool,
   leftIcon: PropTypes.node,
   leftIconWide: PropTypes.bool,
+  showLabel: PropTypes.bool,
+  label: PropTypes.string,
+  count: PropTypes.bool,
   rightIcon: PropTypes.node,
-  rightIconWide: PropTypes.bool,
-  size: PropTypes.oneOf(["fixed", "fit"]),
-  variant: PropTypes.oneOf(["default", "completed", "error"]),
-  count: PropTypes.number,
+  value: PropTypes.string,
+  maxLength: PropTypes.number,
 };
 
 export default Input;

package/lib/components/Input/style.js

@@ -1,7 +1,7 @@
-import { Dimensions } from 'react-native';
-import { Colors, borderRadius } from '../../configs/constants';
+import { Dimensions } from "react-native";
+import { Colors, borderRadius } from "../../configs/constants";
 
-const { width } = Dimensions.get('window');
+const { width } = Dimensions.get("window");
 
 export default {
   container: {
@@ -10,12 +10,12 @@ export default {
   label: {
     marginBottom: 4,
     fontSize: 14,
-    fontFamily: 'poppins_regular',
+    fontFamily: "poppins_regular",
     color: Colors.darkblue,
-    fontWeight: 'bold',
+    fontWeight: "bold",
   },
   inputWrapper: {
-    position: 'relative',
+    position: "relative",
   },
   input: {
     height: 50,
@@ -23,10 +23,16 @@ export default {
     borderWidth: 1,
     paddingHorizontal: 20,
     color: Colors.darkblue,
-    fontFamily: 'poppins_regular',
+    fontFamily: "poppins_regular",
     backgroundColor: Colors.white,
     marginVertical: 6,
   },
+  fixedSize: {
+    width: width - 80,
+  },
+  fitSize: {
+    width: "100%",
+  },
   default: {
     borderColor: Colors.lightblue,
   },
@@ -53,18 +59,18 @@ export default {
     paddingRight: 70,
   },
   rightIconContainer: {
-    position: 'absolute',
+    position: "absolute",
     right: 10,
     top: 10,
     height: 42,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   leftIconContainer: {
-    position: 'absolute',
+    position: "absolute",
     left: 10,
     top: 10,
     height: 42,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   rightWideIconContainer: {
     paddingLeft: 2,
@@ -75,22 +81,22 @@ export default {
     borderRightWidth: 1,
   },
   rightIconContainer: {
-    position: 'absolute',
+    position: "absolute",
     right: 10,
     top: 10,
     height: 42,
-    justifyContent: 'center',
+    justifyContent: "center",
   },
   count: {
-    textAlign: 'right',
+    textAlign: "right",
     fontSize: 12,
     color: Colors.gray,
-    fontFamily: 'poppins_regular',
+    fontFamily: "poppins_regular",
     fixedSize: {
       width: width - 80,
     },
     fitSize: {
-      width: '100%',
+      width: "100%",
     },
   },
 };

package/package.json

@@ -2,7 +2,7 @@
   "main": "lib/index.js",
   "name": "@holper/react-native-holper-storybook",
   "description": "A component library for Holper projects",
-  "version": "0.6.72",
+  "version": "0.6.74",
   "license": "MIT",
   "files": [
     "lib",