feat(textinput): add flat variant

react95-io · Dec 28, 2020 · 6f17149 · 6f17149
1 parent 49552d8
commit 6f17149
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 37 deletions.
diff --git a/example/src/examples/TextInputExample.tsx b/example/src/examples/TextInputExample.tsx
@@ -1,50 +1,108 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
-import { TextInput, Panel, Fieldset } from 'react95-native';
+import { View, StyleSheet } from 'react-native';
+import { TextInput, Panel, Fieldset, Cutout, ScrollView } from 'react95-native';
 
 const loremIpsum =
   'But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself';
 const TextInputExample = () => {
   return (
     <Panel style={styles.container}>
-      <Fieldset label='Default' style={[styles.fieldset]}>
-        <TextInput defaultValue={loremIpsum} />
-        <TextInput
-          disabled
-          defaultValue={loremIpsum}
-          style={[{ marginTop: 20 }]}
-        />
-      </Fieldset>
-      <Fieldset label='Empty' style={[styles.fieldset]}>
-        <TextInput defaultValue='' placeholder='Placeholder text here...' />
-        <TextInput
-          disabled
-          defaultValue=''
-          placeholder='Placeholder text here...'
-          style={[{ marginTop: 20 }]}
-        />
-      </Fieldset>
-      <Fieldset label='Multiline' style={[styles.fieldset]}>
-        <TextInput
-          multiline
-          style={[{ height: 120 }]}
-          defaultValue={loremIpsum}
-        />
-        <TextInput
-          disabled
-          multiline
-          style={[{ height: 120, marginTop: 20 }]}
-          defaultValue={loremIpsum}
-        />
-      </Fieldset>
+      <Cutout background='material'>
+        <ScrollView>
+          <View style={{ padding: 16 }}>
+            <Fieldset label='Default' style={[styles.fieldset]}>
+              <TextInput defaultValue={loremIpsum} />
+              <TextInput
+                disabled
+                defaultValue={loremIpsum}
+                style={[{ marginTop: 20 }]}
+              />
+            </Fieldset>
+            <Fieldset label='Empty' style={[styles.fieldset]}>
+              <TextInput
+                defaultValue=''
+                placeholder='Placeholder text here...'
+              />
+              <TextInput
+                disabled
+                defaultValue=''
+                placeholder='Placeholder text here...'
+                style={[{ marginTop: 20 }]}
+              />
+            </Fieldset>
+            <Fieldset label='Multiline' style={[styles.fieldset]}>
+              <TextInput
+                multiline
+                style={[{ height: 120 }]}
+                defaultValue={loremIpsum}
+              />
+              <TextInput
+                disabled
+                multiline
+                style={[{ height: 120, marginTop: 20 }]}
+                defaultValue={loremIpsum}
+              />
+            </Fieldset>
+
+            <Cutout style={{ padding: 20 }}>
+              <Fieldset
+                variant='flat'
+                label='Default'
+                style={[styles.fieldset]}
+              >
+                <TextInput variant='flat' defaultValue={loremIpsum} />
+                <TextInput
+                  variant='flat'
+                  disabled
+                  defaultValue={loremIpsum}
+                  style={[{ marginTop: 20 }]}
+                />
+              </Fieldset>
+              <Fieldset variant='flat' label='Empty' style={[styles.fieldset]}>
+                <TextInput
+                  variant='flat'
+                  defaultValue=''
+                  placeholder='Placeholder text here...'
+                />
+                <TextInput
+                  variant='flat'
+                  disabled
+                  defaultValue=''
+                  placeholder='Placeholder text here...'
+                  style={[{ marginTop: 20 }]}
+                />
+              </Fieldset>
+              <Fieldset
+                variant='flat'
+                label='Multiline'
+                style={[styles.fieldset]}
+              >
+                <TextInput
+                  variant='flat'
+                  multiline
+                  style={[{ height: 120 }]}
+                  defaultValue={loremIpsum}
+                />
+                <TextInput
+                  variant='flat'
+                  disabled
+                  multiline
+                  style={[{ height: 120, marginTop: 20 }]}
+                  defaultValue={loremIpsum}
+                />
+              </Fieldset>
+            </Cutout>
+          </View>
+        </ScrollView>
+      </Cutout>
     </Panel>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 16,
+    padding: 8,
   },
   fieldset: {
     padding: 20,

diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
@@ -16,28 +16,39 @@ type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
   defaultValue?: string;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
+  variant?: 'default' | 'flat';
 };
 
 // TODO: implement scrollbars in TextInput
 
 const TextInput = ({
   disabled,
   value,
+  variant = 'default',
   defaultValue,
   style = {},
   ...rest
 }: Props) => {
   const theme = useContext(ThemeContext);
   const hasValue = !!(value || defaultValue);
 
+  const isFlat = variant === 'flat';
+
+  const getBackgroundColor = () => {
+    if (isFlat) {
+      return disabled ? theme.flatLight : 'transparent';
+    }
+    return disabled ? theme.material : theme.canvas;
+  };
+
   return (
-    <View style={[styles.wrapper, style]}>
-      <Border variant='cutout' />
+    <View style={[styles.wrapper, { padding: isFlat ? 2 : 4 }, style]}>
+      <Border variant={isFlat ? 'flat' : 'cutout'} />
       <NativeTextInput
         style={[
           styles.input,
           {
-            backgroundColor: disabled ? theme.material : theme.canvas,
+            backgroundColor: getBackgroundColor(),
           },
           theme.text.regular,
           disabled && hasValue ? theme.text.disabled : theme.text.default,
@@ -55,7 +66,6 @@ const TextInput = ({
 
 const styles = StyleSheet.create({
   wrapper: {
-    padding: 4,
     minHeight: blockSizes.md,
     justifyContent: 'center',
   },