stylize field-editor.jsx

src/components/view/field-editor.jsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useRef} from 'react';
 import {connect} from 'react-redux';
 import TextField from 'react-native-material-textfield/src/components/field';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, TextInput} from 'react-native';
 import {View, Text, Button, Picker} from 'native-base';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 import IconedButton from './iconed-button.jsx';
@@ -9,9 +9,7 @@ const FieldEditor = props => {
   const [data, setData] = useState({});
   const [editing, setEditing] = useState(true);
   const label = props.data.label;
-	const [selectedValue, setSelectedValue] = useState(
-		props.data.values[0],
-	);
+  const [selectedValue, setSelectedValue] = useState(props.data.values[0]);
   const [userTyped, setUserTyped] = useState('');
   const input = useRef();
   useEffect(() => {
@@ -22,12 +20,13 @@ const FieldEditor = props => {
     setSelectedValue(value);
   };
   const typing = text => {
-					setUserTyped(text)
+    console.log(text);
+    setUserTyped(text);
   };
   const confirmTyped = () => {
-								const values = data.values
-								setData({...data, values: [...values, userTyped]})
-				}
+    const values = data.values;
+    setData({...data, values: [...values, userTyped]});
+  };
 
   const styles = StyleSheet.create({
     wrapper: {},
@@ -54,51 +53,43 @@ const FieldEditor = props => {
     tfWrapper: {
       width: editing ? '75%' : '84%',
     },
+    pickerLabel: {
+      color: '#00000050',
+      fontSize: 12,
+      marginLeft: 2,
+    },
+    hr: {
+      height: 1,
+      width: '100%',
+      backgroundColor: '#00000070',
+    },
   });
 
   return (
     <View style={styles.wrapper}>
-			<Text>{label}</Text>
       <View style={styles.inner}>
         <View style={styles.tfWrapper}>
           {editing ? (
             <TextField
+              lineType={'none'}
               multiline={true}
               label={data.type}
               value={selectedValue}
+              editable={true}
               ref={input}
-							onChangeText={text =>
-								typing(text)
-							}
+              onChangeText={text => typing(text)}
             />
           ) : (
+            <View>
+              <Text style={styles.pickerLabel}>{'label'}</Text>
               <Picker
-							selectedValue={
-								selectedValue
-							}
-							onValueChange={value =>
-								selectValue(
-									value,
-								)
-							}>
-							{data.values.map(
-								(value, id) => {
-									return (
-										<Picker.Item
-											value={
-												value
-											}
-											label={
-												value
-											}
-											key={
-												id
-											}
-										/>
-									);
-								},
-							)}
+                selectedValue={selectedValue}
+                onValueChange={value => selectValue(value)}>
+                {data.values.map((value, id) => {
+                  return <Picker.Item value={value} label={value} key={id} />;
+                })}
               </Picker>
+            </View>
           )}
         </View>
         {editing ? (
@@ -106,15 +97,10 @@ const FieldEditor = props => {
             <IconedButton
               icon="caret-down"
               onPress={() => {
-								setEditing(
-									!editing,
-								);
+                setEditing(!editing);
               }}
             />
-						<IconedButton
-							icon="check"
-							onPress={confirmTyped}
-						/>
+            <IconedButton icon="check" onPress={confirmTyped} />
           </View>
         ) : (
           <IconedButton
@@ -125,6 +111,7 @@ const FieldEditor = props => {
           />
         )}
       </View>
+      <View style={styles.hr} />
     </View>
   );
 };