Merge pull request #1 from Dhruv-Rathi/master

Add Text-Input

Author: rjvim

rollup.config.js

@@ -3,12 +3,7 @@ import babel from '@rollup/plugin-babel';
 import commonjs from 'rollup-plugin-commonjs';
 
 export default {
-  input: [
-    'src/index.js',
-    'src/Base/index.js',
-    'src/Blue/index.js',
-    'src/Outline/index.js',
-  ],
+  input: ['src/index.js', 'src/Base/index.js'],
   output: [
     {
       dir: 'build',

src/Base/Base.stories.js

@@ -0,0 +1,47 @@
+import {action} from '@storybook/addon-actions';
+import {text} from '@storybook/addon-knobs';
+import {storiesOf} from '@storybook/react-native';
+import React, {useState} from 'react';
+import Input from '.';
+import {
+  StyleSheet,
+  View,
+  SafeAreaView,
+  Text,
+  Alert,
+  onChangeText,
+} from 'react-native';
+
+storiesOf('Default', module)
+  .addDecorator(getStory => (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        marginHorizontal: 16,
+      }}>
+      {getStory()}
+    </SafeAreaView>
+  ))
+  .add('Default Input Text', () => (
+    <Input
+      label="Username"
+      onChangeText={text => onChangeText(text)}
+      // value={value}
+      // icon={<Text>+91</Text>}
+      // iconPosition="left"
+      // focusColor="#22D3EE"
+    />
+  ))
+  .add('Default Required Field', () => (
+    <Input
+      label="Username"
+      onChangeText={text => onChangeText(text)}
+      // value={value}
+      icon={<Text>😊</Text>}
+      iconPosition="left"
+      error={'This field is required'}
+      // borderColor="#FDBA74"
+      // errorTextStyles={{color: '#FDBA74'}}
+    />
+  ));

src/Base/Button.stories.js

@@ -1,78 +1,94 @@
 import React from 'react';
-import {ActivityIndicator, Text, View, Pressable} from 'react-native';
+import {Text, View, TextInput} from 'react-native';
 
-const Button = ({
-  disabled = false,
-  onPress,
-  busy = false,
-  loaderIcon = <ActivityIndicator color="#fff" />,
-  busyText = 'Processing..',
+const Input = ({
+  onChangeText,
+  iconPosition,
+  icon,
+  value,
+  placeholder = 'Enter Text',
+  label = null,
+  error,
   ...props
 }) => {
-  const textStyles = {
-    ...(props.textStyles || {
-      fontWeight: 'bold',
+  const [focused, setFocused] = React.useState(false);
+  const textInputStyles = {
+    ...(props.textInputStyles || {
+      flex: 1,
+      width: '100%',
       color: props.textColor || '#fff',
       letterSpacing: 0,
     }),
   };
+  const getFlexDirection = () => {
+    if (icon && iconPosition) {
+      if (iconPosition === 'left') {
+        return 'row';
+      } else if (iconPosition === 'right') {
+        return 'row-reverse';
+      }
+    }
+  };
 
-  return (
-    <Pressable
-      disabledd={disabled}
-      onPress={() => {
-        if (!disabled) {
-          onPress();
-        }
-      }}
-      style={({pressed}) => [
-        {
-          backgroundColor: pressed
-            ? props.onPressColor || '#27272A'
-            : props.backgroundColor || '#18181B',
-          width: '100%',
-          borderColor: props.borderColor || '#27272A',
-          borderWidth: 1,
-          borderRadius: 4,
-          paddingVertical: 8,
-          paddingHorizontal: 4,
-          alignItems: 'center',
-          justifyContent: 'center',
-        },
-      ]}>
-      {busy === false && (
-        <View>
-          {typeof props.children === 'string' ? (
-            <Text style={textStyles}>{props.children}</Text>
-          ) : (
-            props.children
-          )}
-        </View>
-      )}
+  const getBorderColor = () => {
+    if (error) {
+      return props.borderColor || '#DC2626';
+    }
+
+    if (focused) {
+      return props.focusColor || '#52525B';
+    }
+  };
 
-      {busy === true && (
-        <View
-          style={{
-            ...(props.loaderIconWrapperStyles || {
-              alignItems: 'center',
-              flexDirection: 'row',
-              justifyContent: 'center',
-            }),
-          }}>
-          <View
+  return (
+    <>
+      <View style={{...props.labelStyles}}>
+        {label && <Text>{label}</Text>}
+      </View>
+      <View
+        style={{
+          ...(props.wrapperStyles || {
+            height: 42,
+            borderWidth: 1,
+            borderRadius: 4,
+            paddingHorizontal: 5,
+            marginTop: 5,
+            alignItems: icon ? 'center' : 'baseline',
+            borderColor: getBorderColor(),
+            flexDirection: getFlexDirection(),
+          }),
+        }}>
+        <View>{icon && icon}</View>
+        <TextInput
+          placeholder={placeholder}
+          style={textInputStyles}
+          onChangeText={onChangeText}
+          value={value}
+          onFocus={() => {
+            setFocused(true);
+          }}
+          onBlur={() => {
+            setFocused(false);
+          }}
+          {...props}
+        />
+      </View>
+      <View>
+        {error && (
+          <Text
             style={{
-              ...(props.loaderStyles || {
-                marginRight: 20,
+              ...(props.errorTextStyles || {
+                color: '#DC2626',
+                paddingTop: 4,
+                fontSize: 12,
               }),
             }}>
-            {loaderIcon}
-          </View>
-
-          <Text style={textStyles}>{busyText}</Text>
-        </View>
-      )}
-    </Pressable>
+            {error}
+          </Text>
+        )}
+      </View>
+    </>
   );
 };
 
-export default Button;
+export default Input;

src/Base/index.js

@@ -1,3 +1 @@
-import '../../src/Base/Button.stories.js';
-import '../../src/Blue/Button.stories.js';
-import '../../src/Outline/Button.stories.js';
+import '../../src/Base/Base.stories.js';