import React, {useState, useEffect, useRef} from 'react';
import {connect} from 'react-redux';
<<<<<<< HEAD
import {Text, Button, Picker} from 'native-base';
import TextField from 'react-native-material-textfield/src/components/field';
import {View} from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome5';
import {StyleSheet} from 'react-native';
/* Props
* defaultText
* variants
* label
* */
const FieldEditor = props => {
const input = useRef();
const [edit, toggleEdit] = useState(false);
const [variants, setVariants] = useState([]);
const [label, setLabel] = useState('');
const [value, setValue] = useState(props.variants[0] || '');
const [editableText, setEditableText] = useState(props.defaultText);
useEffect(() => {
setVariants(props.variants);
setLabel(props.label);
setEditableText(props.variants[0]);
}, []);
const toggle = () => {
toggleEdit(!edit);
setTimeout(() => {
if (input.current) {
input.current.focus();
}
}, 0);
};
const selectValue = value => {
console.log(value);
alert(value);
setEditableText(value);
setValue(value);
};
return (
{label}
{edit ? (
) : (
selectValue(value)}
selectedValue={value}>
{variants.map((variant, index) => (
))}
)}
);
};
const styles = StyleSheet.create({
pickerWrap: {
display: 'flex',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-around',
},
button: {
display: 'flex',
justifyContent: 'center',
marginLeft: 10,
width: '12%',
},
picker: {
height: '100%',
display: 'flex',
marginLeft: 4,
// backgroundColor: '#00000010',
},
wrap: {
margin: 0,
},
textField: {
paddingLeft: 12,
},
inner: {
width: '85%',
height: 65,
},
label: {
paddingLeft: 10,
marginBottom: -10,
},
});
export default connect(state => ({}), null)(FieldEditor);
=======
import TextField from 'react-native-material-textfield/src/components/field';
import {StyleSheet} 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';
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 [userTyped, setUserTyped] = useState('');
const input = useRef();
useEffect(() => {
setData(props.data);
}, []);
const selectValue = value => {
setSelectedValue(value);
};
const typing = text => {
setUserTyped(text)
};
const confirmTyped = () => {
const values = data.values
setData({...data, values: [...values, userTyped]})
}
const styles = StyleSheet.create({
wrapper: {},
inner: {
display: 'flex',
justifyContent: 'space-between',
flexDirection: 'row',
alignItems: 'center',
alignContent: 'center',
},
row: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
width: 90,
},
button: {
width: 40,
height: 40,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
tfWrapper: {
width: editing ? '75%' : '84%',
},
});
return (
{label}
{editing ? (
typing(text)
}
/>
) : (
selectValue(
value,
)
}>
{data.values.map(
(value, id) => {
return (
);
},
)}
)}
{editing ? (
{
setEditing(
!editing,
);
}}
/>
) : (
{
setEditing(!editing);
}}
/>
)}
);
};
export default connect()(FieldEditor);
>>>>>>> fixed