[todo_app_6] isEditing?

수정, 삭제 스타일

수정중인지 아닌지 여부를 판단해서 스타일을 표시할거라 isEditing이 필요함

render(){

const { isEditing } = this.state;

수정, 삭제를 할 수 있는 연필, 엑스표 모양 이모지를 넣자

column안에서 관리할거임

<View style={styles.container}>

<View style={styles.column}> {/* column*/}

<TouchableOpacity onPress={this._toggleComplete}>

<View style={[

styles.circle,

isCompleted ? styles.completedCircle : styles.uncompletedCircle

]} />

</TouchableOpacity>

<Text

    style={[

styles.text,

isCompleted ? styles.completedText : styles.uncompletedText

]}>

todo

</Text>)

</View>

{isEditing ?

<View style={styles.action}>{/*수정할 때 모드*/}

<TouchableOpacity>

<View style={styles.actionContainer}>

<Text style={styles.actionText}>✅</Text>

</View>

</TouchableOpacity>

</View>

:

<View style={styles.action}>{/*수정하지 않을 때 때 모드*/}

<TouchableOpacity>

<View style={styles.actionContainer}>

<Text style={styles.actionText}>✏️</Text>

</View>

</TouchableOpacity>

<TouchableOpacity>

<View style={styles.actionContainer}>

<Text style={styles.actionText}>❌</Text>

</View>

</TouchableOpacity>

</View>}

</View>

스타일을 준다

const styles = StyleSheet.create({

container: {

width: width - 50,

borderBottomColor: "#bbb",

borderBottomWidth: StyleSheet.hairlineWidth,

alignItems: "center",

flexDirection: "row",

justifyContent: "space-between"

}, column: {

flexDirection: "row",

alignItems: "center",

//width: width/2,

justifyContent: "space-between"

},

action: {

flexDirection: "row"

},

actionContainer: {

marginVertical :10,

marginHorizontal: 10

}

})

//width: width/2,

이부분은 주석처리 해야 잘 나오는데 왜 쓴건지 잘 모르겠음......

편집중인지? 완료했는지? 

_startEditing = () => {

this.setState({

isEditing: true

});

};

_finishEdition = () => {

this.setState({

isEditing: false

});

};

{isEditing ?

<View style={styles.action}>

<TouchableOpacity onPressOut={this._finishEdition}>

<View style={styles.actionContainer}>

<Text style={styles.actionText}>✅</Text>

</View>

</TouchableOpacity>

</View>

:

<View style={styles.action}>

<TouchableOpacity onPressOut={this._startEditing}>

<View style={styles.actionContainer}>

<Text style={styles.actionText}>✏️</Text>

</View>

</TouchableOpacity>

<TouchableOpacity onPressOut={() => deleteToDo(id)}>

<View style={styles.actionContainer}>

<Text style={styles.actionText}>❌</Text>

</View>

</TouchableOpacity>

</View>}

great :O