Horhik/Ankilan
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases 2 Wiki Activity

stylize field-editor.jsx

Browse source
This commit is contained in:
horhik 2020-04-02 09:51:00 -03:00
parent 92b2966b14
commit e57d06019f
1 changed files with 106 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

225
src/components/view/field-editor.jsx
View file

@ -1,131 +1,118 @@
import React, {useState, useEffect, useRef} from 'react'; import React, {useState, useEffect, useRef} from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import TextField from 'react-native-material-textfield/src/components/field'; 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 {View, Text, Button, Picker} from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import IconedButton from './iconed-button.jsx'; import IconedButton from './iconed-button.jsx';
const FieldEditor = props => { const FieldEditor = props => {
const [data, setData] = useState({}); const [data, setData] = useState({});
const [editing, setEditing] = useState(true); const [editing, setEditing] = useState(true);
const label = props.data.label; const label = props.data.label;
const [selectedValue, setSelectedValue] = useState( const [selectedValue, setSelectedValue] = useState(props.data.values[0]);
props.data.values[0], const [userTyped, setUserTyped] = useState('');
); const input = useRef();
const [userTyped, setUserTyped] = useState(''); useEffect(() => {
const input = useRef(); setData(props.data);
useEffect(() => { }, []);
setData(props.data);
}, []);
const selectValue = value => { const selectValue = value => {
setSelectedValue(value); setSelectedValue(value);
}; };
const typing = text => { const typing = text => {
setUserTyped(text) console.log(text);
}; setUserTyped(text);
const confirmTyped = () => { };
const values = data.values const confirmTyped = () => {
setData({...data, values: [...values, userTyped]}) const values = data.values;
} setData({...data, values: [...values, userTyped]});
};
const styles = StyleSheet.create({ const styles = StyleSheet.create({
wrapper: {}, wrapper: {},
inner: { inner: {
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
alignContent: 'center', alignContent: 'center',
}, },
row: { row: {
display: 'flex', display: 'flex',
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'space-between', justifyContent: 'space-between',
width: 90, width: 90,
}, },
button: { button: {
width: 40, width: 40,
height: 40, height: 40,
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}, },
tfWrapper: { tfWrapper: {
width: editing ? '75%' : '84%', width: editing ? '75%' : '84%',
}, },
}); pickerLabel: {
color: '#00000050',
fontSize: 12,
marginLeft: 2,
},
hr: {
height: 1,
width: '100%',
backgroundColor: '#00000070',
},
});
return ( return (
<View style={styles.wrapper}> <View style={styles.wrapper}>
<Text>{label}</Text> <View style={styles.inner}>
<View style={styles.inner}> <View style={styles.tfWrapper}>
<View style={styles.tfWrapper}> {editing ? (
{editing ? ( <TextField
<TextField lineType={'none'}
multiline={true} multiline={true}
label={data.type} label={data.type}
value={selectedValue} value={selectedValue}
ref={input} editable={true}
onChangeText={text => ref={input}
typing(text) onChangeText={text => typing(text)}
} />
/> ) : (
) : ( <View>
<Picker <Text style={styles.pickerLabel}>{'label'}</Text>
selectedValue={ <Picker
selectedValue selectedValue={selectedValue}
} onValueChange={value => selectValue(value)}>
onValueChange={value => {data.values.map((value, id) => {
selectValue( return <Picker.Item value={value} label={value} key={id} />;
value, })}
) </Picker>
}> </View>
{data.values.map( )}
(value, id) => { </View>
return ( {editing ? (
<Picker.Item <View style={styles.row}>
value={ <IconedButton
value icon="caret-down"
} onPress={() => {
label={ setEditing(!editing);
value }}
} />
key={ <IconedButton icon="check" onPress={confirmTyped} />
id </View>
} ) : (
/> <IconedButton
); icon="pen"
}, onPress={() => {
)} setEditing(!editing);
</Picker> }}
)} />
</View> )}
{editing ? ( </View>
<View style={styles.row}> <View style={styles.hr} />
<IconedButton </View>
icon="caret-down" );
onPress={() => {
setEditing(
!editing,
);
}}
/>
<IconedButton
icon="check"
onPress={confirmTyped}
/>
</View>
) : (
<IconedButton
icon="pen"
onPress={() => {
setEditing(!editing);
}}
/>
)}
</View>
</View>
);
}; };
export default connect()(FieldEditor); export default connect()(FieldEditor);