refactor: text input (#86)

* refactor: text input * feat: update package version * refactor: change property background color name Co-authored-by: glauberbrack <[email protected]>
platformbuilders · Jun 1, 2021 · 1a450a3 · 1a450a3
1 parent 1de4b7a
commit 1a450a3
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/react-elements",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Platform Builders Shared Components Library For React Web and Native",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/native/components/TextInput/index.tsx b/src/native/components/TextInput/index.tsx
@@ -58,10 +58,12 @@ const TextInput: FC<TextInputType> = ({
   rightIconName = 'magnify',
   iconColor,
   inputPadding,
+  borderedBackgroundColor,
   borderedHeight,
   borderedColor,
   borderedRadius,
-  fixedLabelVariant = 'caption1',
+  iconType = 'material',
+  fixedLabelVariant = 'caption2',
   ...rest
   // eslint-disable-next-line sonarjs/cognitive-complexity
 }) => {
@@ -179,6 +181,7 @@ const TextInput: FC<TextInputType> = ({
 
   const renderIcon = (iconProp: string, isRightIcon: boolean) => (
     <Icon
+      type={iconType}
       id={`id_${iconProp}`}
       accessibility={`icon_${accessibility}`}
       size={iconSize}
@@ -204,6 +207,7 @@ const TextInput: FC<TextInputType> = ({
         large={large}
       >
         <BorderedWrapper
+          borderedBackgroundColor={borderedBackgroundColor}
           borderedHeight={borderedHeight}
           borderedColor={borderedColor}
           borderedRadius={borderedRadius}
@@ -255,10 +259,7 @@ const TextInput: FC<TextInputType> = ({
                 renderIcon(icon || '', true)}
             </InputAreaWrapper>
           )}
-
-          {(withBottomline || !!borderedHeight) && (
-            <BottomLine status={status} contrast={contrast} />
-          )}
+          {withBottomline && <BottomLine status={status} contrast={contrast} />}
         </BorderedWrapper>
       </FormError>
     </Wrapper>

diff --git a/src/native/components/TextInput/styles.ts b/src/native/components/TextInput/styles.ts
@@ -20,6 +20,7 @@ type InputAreaWrapperProps = {
 };
 
 type BorderedWrapperProps = {
+  borderedBackgroundColor: string;
   borderedHeight?: number;
   borderedColor?: string;
   borderedRadius?: number;
@@ -97,6 +98,7 @@ export const Wrapper = styled.View<WrapperProps>`
 
 export const BorderedWrapper = styled.View<BorderedWrapperProps>`
   ${({
+    borderedBackgroundColor,
     borderedColor,
     borderedHeight,
     borderedRadius,
@@ -108,6 +110,7 @@ export const BorderedWrapper = styled.View<BorderedWrapperProps>`
       border: 1px solid ${
         error ? failure(rest) : borderedColor || primaryMain(rest)
       };
+      background-color: ${borderedBackgroundColor || 'transparent'};
       height: ${borderedHeight}px;
       border-radius: ${borderedRadius}px;
       padding: ${smallSpacing(rest)};
@@ -130,21 +133,21 @@ export const InputBorderedColumnWrapper = styled.View<
   InputBorderedColumnWrapperProps
 >`
   flex-direction: column;
+  padding: 0 ${minimumSpacing};
   width: ${({ hasLeftIcon }: InputBorderedColumnWrapperProps) =>
-    hasLeftIcon ? '90%' : '96%'};
-  margin-left: -${smallSpacing};
+    hasLeftIcon ? '86%' : '92%'};
+  margin-left: ${({ hasLeftIcon }: InputBorderedColumnWrapperProps) =>
+    hasLeftIcon ? minimumSpacing : `-${largeSpacing}`};
 `;
 
 export const FixedLabel = styled(Typography)<FixedLabelProps>`
   color: ${primaryMain};
   margin-bottom: ${minimumSpacing};
-  margin-left: ${({ hasLeftIcon }: FixedLabelProps) =>
-    hasLeftIcon ? '0' : `-${largeSpacing}`};
 `;
 
 export const InputAreaWrapper = styled.View<InputAreaWrapperProps>`
   padding-top: ${({ padding }: InputAreaWrapperProps) =>
-    (!!padding && `${padding}px`) || smallSpacing};
+    (!!padding && `${padding}px`) || minimumSpacing};
   flex-direction: row;
   align-items: center;
   justify-content: center;

diff --git a/src/native/types/TextInputType.ts b/src/native/types/TextInputType.ts
@@ -9,6 +9,7 @@ import { TextInputMaskTypeProp } from '@platformbuilders/react-native-masked-tex
 
 import { HitSlopType } from './Common';
 import { TypographyVariants } from './Variants';
+import { FontType } from './IconType';
 
 export type TextInputType = {
   id: string;
@@ -41,13 +42,15 @@ export type TextInputType = {
   leftIcon?: boolean;
   iconColor?: string;
   inputPadding?: number;
+  borderedBackgroundColor?: string;
   borderedHeight?: number;
   borderedColor?: string;
   borderedRadius?: number;
   iconNameBordered?: string;
   fixedLabelVariant?: TypographyVariants;
   rightIcon?: boolean;
   rightIconName?: string;
+  iconType?: FontType;
 } & TextInputProps;
 
 export interface MaskedTextInputType extends TextInputType {