@bigbinary/neetoui-rn 0.0.64 → 0.0.65

package/lib/components/ParentView.js

@@ -1 +1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _reactNativeKeyboardAwareScrollView=require("react-native-keyboard-aware-scroll-view");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_reactNativeKeyboardAwareScrollView.KeyboardAwareScrollView,{enableOnAndroid:true,contentContainerStyle:styles.scrollView,showsVerticalScrollIndicator:false,style:{backgroundColor:newBackgroundColor},__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:5}},_react.default.createElement(_.Container,{backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:55,columnNumber:7}},_react.default.createElement(_reactNative.SafeAreaView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:56,columnNumber:9}},_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,__self:_this,__source:{fileName:_jsxFileName,lineNumber:57,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:60,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string};var styles=_reactNative.StyleSheet.create({scrollView:{flexGrow:1}});
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.ParentView=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _propTypes=_interopRequireDefault(require("prop-types"));var _native=require("styled-components/native");var _=require("./");var _excluded=["barStyle","children","backgroundColor","bg"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/ParentView.js";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var ParentView=function ParentView(_ref){var _ref$barStyle=_ref.barStyle,barStyle=_ref$barStyle===void 0?"light-content":_ref$barStyle,children=_ref.children,backgroundColor=_ref.backgroundColor,bg=_ref.bg,rest=(0,_objectWithoutProperties2.default)(_ref,_excluded);var theme=(0,_react.useContext)(_native.ThemeContext);var newBackgroundColor=backgroundColor||bg||theme.colors.background.parentView;var statusBarColors={default:theme.colors.background.white,"dark-content":theme.colors.background.white,"light-content":theme.colors.background.base};var statusBarColor=statusBarColors[barStyle]||statusBarColors["default"];return _react.default.createElement(_.Container,{flex:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:48,columnNumber:5}},_react.default.createElement(_.Container,{backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:49,columnNumber:7}},_react.default.createElement(_reactNative.SafeAreaView,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:50,columnNumber:9}},_react.default.createElement(_reactNative.StatusBar,{barStyle:barStyle,backgroundColor:statusBarColor,__self:_this,__source:{fileName:_jsxFileName,lineNumber:51,columnNumber:11}}))),_react.default.createElement(_.Container,(0,_extends2.default)({flex:1,backgroundColor:newBackgroundColor},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:54,columnNumber:7}}),children));};exports.ParentView=ParentView;ParentView.propTypes={barStyle:_propTypes.default.string,children:_propTypes.default.node,backgroundColor:_propTypes.default.string,bg:_propTypes.default.string};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.64",
+  "version": "0.0.65",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -45,7 +45,6 @@
   },
   "dependencies": {
     "@styled-system/prop-types": "^5.1.5",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-modal": "^13.0.0",
     "react-native-pell-rich-editor": "^1.8.6",
     "react-native-remix-icon": "^0.3.0",

package/src/components/Input.js

@@ -63,11 +63,14 @@ export const Input = React.forwardRef((props, ref) => {
   const {
     label = "",
     labelStyles,
+    containerStyles,
     message = "",
     error = false,
     onFocus,
     onBlur,
     inline = false,
+    LeftIcon,
+    RightIcon,
     brandRight,
     brandLeft,
     brandColor = "font.grey600",
@@ -75,6 +78,7 @@ export const Input = React.forwardRef((props, ref) => {
     disabled = false,
     secureTextEntry = false,
     textAlignVertical = "top",
+    enableFocusStyle = false,
     ...rest
   } = props;
 
@@ -95,38 +99,44 @@ export const Input = React.forwardRef((props, ref) => {
     setIsFocus(false);
   };
 
-  const focusStyles = isFocus && {
-    borderRadius: 4,
-    borderColor: error
-      ? "rgba(255, 105, 105, 0.3)"
-      : theme.colors.border.grey400,
-    borderWidth: inline ? "0px" : "3px",
-    borderStyle: "solid",
-  };
+  const focusStyles = enableFocusStyle &&
+    isFocus && {
+      borderRadius: 4,
+      borderColor: error
+        ? "rgba(255, 105, 105, 0.3)"
+        : theme.colors.border.grey400,
+      borderWidth: inline ? "0px" : "3px",
+      borderStyle: "solid",
+    };
 
   const disabledStyles = disabled && {
     opacity: 0.5,
     bg: theme.colors.background.secondary,
   };
 
-  const inlineInputStyles = isFocus && {
-    backgroundColor: error
-      ? theme.colors.border.danger
-      : theme.colors.border.base,
-  };
+  const inlineInputStyles = enableFocusStyle &&
+    isFocus && {
+      backgroundColor: error
+        ? theme.colors.border.danger
+        : theme.colors.border.base,
+    };
 
   return (
     <Container>
-      {!inline && (
+      {!inline && !!label && (
         <LabelText labelStyles={labelStyles} inline={inline} label={label} />
       )}
       <Container
+        border={!inline}
+        borderColor={borderColor}
+        borderRadius={2}
         {...focusStyles}
         {...disabledStyles}
         flexDirection={inline ? "row" : "column"}
         onBlur={handleBlur}
         onFocus={handleFocus}
         position="relative"
+        {...containerStyles}
       >
         {inline && (
           <Container alignSelf="flex-end" maxWidth={100}>
@@ -138,10 +148,14 @@ export const Input = React.forwardRef((props, ref) => {
           </Container>
         )}
         <Container flexDirection="row" width="100%">
+          {LeftIcon && (
+            <Container alignSelf="center" mx="4px">
+              <LeftIcon />
+            </Container>
+          )}
           {brandLeft && (
             <InputText
               text={brandLeft}
-              borderColor={borderColor}
               brandColor={brandColor}
               brandBackground={brandBackground}
             />
@@ -151,7 +165,6 @@ export const Input = React.forwardRef((props, ref) => {
             height={40}
             flex={1}
             textStyle="subtext"
-            border={!inline && borderColor}
             editable={!disabled}
             color={error ? theme.colors.font.danger : theme.colors.font.primary}
             secureTextEntry={secureTextEntry && !isPasswordVisible}
@@ -162,26 +175,27 @@ export const Input = React.forwardRef((props, ref) => {
           {brandRight && (
             <InputText
               text={brandRight}
-              borderColor={borderColor}
               brandColor={brandColor}
               brandBackground={brandBackground}
             />
           )}
+
+          {RightIcon && (
+            <Container alignSelf="center" mx="4px">
+              <RightIcon />
+            </Container>
+          )}
+
+          {secureTextEntry && (
+            <Container justifyContent="center" mx="4px">
+              <Icon
+                name={isPasswordVisible ? "eye-line" : "eye-off-line"}
+                color={theme.colors.background.grey500}
+                onPress={() => setIsPasswordVisible(!isPasswordVisible)}
+              />
+            </Container>
+          )}
         </Container>
-        {secureTextEntry && (
-          <Container
-            position="absolute"
-            left="90%"
-            height="100%"
-            justifyContent="center"
-          >
-            <Icon
-              name={isPasswordVisible ? "eye-line" : "eye-off-line"}
-              color={theme.colors.background.grey500}
-              onPress={() => setIsPasswordVisible(!isPasswordVisible)}
-            />
-          </Container>
-        )}
       </Container>
       {inline && (
         <View
@@ -195,14 +209,8 @@ export const Input = React.forwardRef((props, ref) => {
   );
 });
 
-const InputText = ({ text, borderColor, brandColor, brandBackground }) => (
-  <Container
-    bg={brandBackground}
-    justifyContent="center"
-    px={2}
-    borderColor={borderColor}
-    borderWidth="1px"
-  >
+const InputText = ({ text, brandColor, brandBackground }) => (
+  <Container bg={brandBackground} justifyContent="center" px={2}>
     {text && <Typography color={brandColor}>{text}</Typography>}
   </Container>
 );
@@ -239,9 +247,13 @@ Input.propTypes = {
    */
   label: PropTypes.string,
   /**
-   * To change the styles of label
+   * To change the styles of label.
    */
   labelStyles: PropTypes.object,
+  /**
+   * To change the styles of input text container.
+   */
+  containerStyles: PropTypes.object,
   /**
    * To display error/info messages
    */
@@ -251,15 +263,15 @@ Input.propTypes = {
    */
   error: PropTypes.bool,
   /**
-   * Changes input layout to inline
+   * Changes input layout to inline.
    */
   inline: PropTypes.bool,
   /**
-   * Display brand to the right of input
+   * Display brand to the right of input.
    */
   brandRight: PropTypes.string,
   /**
-   * Display brand to the left of input
+   * Display brand to the left of input.
    */
   brandLeft: PropTypes.string,
   /**
@@ -267,17 +279,29 @@ Input.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * To change the color of brand text
+   * To change the color of brand text.
    */
   brandColor: PropTypes.string,
   /**
-   * To change the color of brand text
+   * To change the color of brand text.
    */
   brandBackground: PropTypes.string,
   /**
-   * To hide and show password and enable secure text entry
+   * To hide and show password and enable secure text entry.
    */
   secureTextEntry: PropTypes.bool,
+  /**
+   * If true, shows border on focus.
+   */
+  enableFocusStyle: PropTypes.bool,
+  /**
+   * Display Icon to the left of input.
+   */
+  LeftIcon: PropTypes.func,
+  /**
+   * Display Icon to the Right of input.
+   */
+  RightIcon: PropTypes.func,
   children: PropTypes.node,
 };
 
@@ -301,9 +325,7 @@ ErrorMessage.propTypes = {
 
 TextInput.defaultProps = {
   height: 40,
-  border: 1,
   px: 2,
   fontFamily: "inter400",
   fontSize: "14px",
-  borderRadius: 2,
 };

package/src/components/ParentView.js

@@ -1,12 +1,11 @@
 import React, { useContext } from "react";
-import { SafeAreaView, StatusBar, StyleSheet } from "react-native";
+import { SafeAreaView, StatusBar } from "react-native";
 import PropTypes from "prop-types";
 import { ThemeContext } from "styled-components/native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { Container } from "@components";
 
 /**
- *ParentView wraps the childrens with SafeAreaview and KeyboardAwareScrollView.
+ *ParentView wraps the childrens with SafeAreaview.
  *
  *  ## Usage
  * ```js
@@ -46,21 +45,16 @@ export const ParentView = ({
     statusBarColors[barStyle] || statusBarColors["default"];
 
   return (
-    <KeyboardAwareScrollView
-      enableOnAndroid={true}
-      contentContainerStyle={styles.scrollView}
-      showsVerticalScrollIndicator={false}
-      style={{ backgroundColor: newBackgroundColor }}
-    >
+    <Container flex={1}>
       <Container backgroundColor={statusBarColor}>
         <SafeAreaView>
-          <StatusBar barStyle={barStyle} />
+          <StatusBar barStyle={barStyle} backgroundColor={statusBarColor} />
         </SafeAreaView>
       </Container>
       <Container flex={1} backgroundColor={newBackgroundColor} {...rest}>
         {children}
       </Container>
-    </KeyboardAwareScrollView>
+    </Container>
   );
 };
 
@@ -79,9 +73,3 @@ ParentView.propTypes = {
    */
   bg: PropTypes.string,
 };
-
-const styles = StyleSheet.create({
-  scrollView: {
-    flexGrow: 1,
-  },
-});