Ankilan/src/components/Form/picker-list.jsx

93 lines
2.2 KiB
React
Raw Normal View History

2020-04-03 06:32:26 +00:00
import React, {useState, useEffect, useRef} from 'react';
import {View} from 'native-base';
2020-04-03 06:32:26 +00:00
import {connect} from 'react-redux';
import PosPicker from './pos-picker';
import FieldEditor from './field-editor';
import {setDef} from '../../actions/anki-set-actions';
import {sendField} from '../../actions/form-actions';
import {setPosId} from '../../actions/anki-ui-actions';
/*
2020-04-03 06:32:26 +00:00
****************** props:*****************
* startId props.data[0] / [1] /[8] ...
* labelNum // Translate 1 / Translate 2 ...
* */
const PickerList = (props) => {
const [tr, setTr] = useState(props.data[props.id].definitions[0]);
const [def, setDef] = useState(props.data[props.id].definitions[0]);
const [pos, setPos] = useState(props.data[props.id].pos);
2020-04-03 06:32:26 +00:00
useEffect(() => {
// props.setPosId(props.id, props.id);
setPos(props.data[props.id].pos);
setDef(props.data[props.id].definitions[0]);
setTr(props.data[props.id].translates[0]);
console.log('emmit', props.id);
}, [props]);
useEffect(() => {
props.sendField({
text: {
pos: pos,
tr: tr,
definition: def,
},
role: props.role,
});
}, [tr, def, pos]);
const updateData = (c) => {
console.log('HDFLSDKFJ SDF', {
text: {
pos: pos,
tr: tr,
definition: def,
},
role: props.role,
});
};
2020-04-03 06:32:26 +00:00
return (
<View>
<PosPicker
labelNum={props.labelNum}
defaultId={props.id}
onSelect={(id) => {
props.setPosId(props.labelNum - 1, id);
}}
2020-04-03 06:32:26 +00:00
/>
<FieldEditor
hasChanged={(c) => {
setTr(c);
updateData(c);
}}
pos={pos}
data={{
label: `Translate ${props.labelNum}`,
values: props.data[props.id].translates,
}}
/>
<FieldEditor
hasChanged={(c) => {
setDef(c);
updateData(c);
}}
pos={pos}
data={{
label: `Definition ${props.labelNum}`,
values: props.data[props.id].definitions,
}}
/>
2020-04-03 06:32:26 +00:00
</View>
);
};
export default connect(
(state) => ({
data: state.api.parsedDictionary.compounded,
word: state.api.availableApi.word,
}),
{
setDef,
sendField,
setPosId,
},
)(PickerList);