fix(exoflex): make TextInput label optional (#177)

* fix(exoflex): make TextInput label optional * chore(exoflex): add TextInput example without label
kodefox · Nov 2, 2019 · 5998f44 · 5998f44
1 parent 0352647
commit 5998f44
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/packages/exoflex/example/src/examples/TextInputExample.tsx b/packages/exoflex/example/src/examples/TextInputExample.tsx
@@ -10,6 +10,10 @@ function TextInputExample() {
         placeholder="Hint Text"
         containerStyle={{ marginVertical: 10 }}
       />
+      <TextInput
+        placeholder="Type here..."
+        containerStyle={{ marginVertical: 10 }}
+      />
       <TextInput
         label="Input Label (Disabled)"
         value="Input Text"

diff --git a/packages/exoflex/src/components/TextInput/TextInputOutlined.tsx b/packages/exoflex/src/components/TextInput/TextInputOutlined.tsx
@@ -42,11 +42,12 @@ function TextInputOutlined(
             ? colors.accent
             : colors.border,
           backgroundColor: disabled ? colors.disabled : colors.surface,
+          justifyContent: !!label ? 'space-between' : 'center',
         },
         containerStyle,
       ]}
     >
-      <Label style={labelStyle}>{label}</Label>
+      {!!label && <Label style={labelStyle}>{label}</Label>}
       <TextInput
         ref={ref}
         editable={!disabled && editable}
@@ -86,7 +87,6 @@ let styles = StyleSheet.create({
     height: 60,
     padding: 12,
     paddingVertical: 10,
-    justifyContent: 'space-between',
   },
   errorIcon: {
     position: 'absolute',

diff --git a/packages/exoflex/src/components/TextInput/types.ts b/packages/exoflex/src/components/TextInput/types.ts
@@ -18,7 +18,7 @@ export type TextInputProps = BaseTextInputProps & {
   /**
    * Label for the text input
    */
-  label: string;
+  label?: string;
   /**
    * When set to true, will disable all interaction with the text input
    * Defaults to 'false'.