Commit f7c6f6fb authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
parents 7e55c1ae 73aeb818
import React from 'react'; import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput,Modal } from 'react-native'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput, Modal, Alert } from 'react-native';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType'; import ActionType from '../redux/globalActionType';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
...@@ -10,7 +10,9 @@ class Item extends React.Component { ...@@ -10,7 +10,9 @@ class Item extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
value: 0 value: 0,
modalVisible: false,
description: ''
} }
} }
handleChangeQuantity = (item, qty) => { handleChangeQuantity = (item, qty) => {
...@@ -34,11 +36,45 @@ class Item extends React.Component { ...@@ -34,11 +36,45 @@ class Item extends React.Component {
} }
} }
handleAddDescription() {
this.setState({
modalVisible: true
})
}
render() { render() {
const { item } = this.props const { item } = this.props
// console.log("ini id itemnya "+item.id) // console.log("ini id itemnya "+item.id)
return ( return (
<View style={{ flex: 1, margin: 10 }} key={item.id} ref={this.props._scrollView}> <View style={{ flex: 1, margin: 10 }} key={item.id} ref={this.props._scrollView}>
<Modal animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this.setState({
modalVisible: false
})
}}>
<View style={styles.centerViewModal}>
<View style={styles.modalView}>
<Text style={{ fontSize: 12, color: '#CFB368', fontFamily: 'Gotham-Black' }}>Add Description</Text>
<View style={{ margin: 10 }}>
<TextInput
style={styles.textInput}
onChangeText={(description) => this.setState({ description })}
value={this.state.description}
textAlign='center'
/>
</View>
<TouchableOpacity onPress={() => this.setState({ modalVisible: false })}>
<View style={styles.button}>
<Text style={{ color: 'white', fontWeight: 'bold', fontSize: 22 }}>Confirm</Text>
</View>
</TouchableOpacity>
</View>
</View>
</Modal>
<ScrollView ref={view => this._scrollView = view}> <ScrollView ref={view => this._scrollView = view}>
{item.code == 'CATEGORY' ? ( {item.code == 'CATEGORY' ? (
<Text style={{ fontSize: 15, color: '#c9af6d', fontFamily: 'Gotham-Black' }}>{item.name}</Text> <Text style={{ fontSize: 15, color: '#c9af6d', fontFamily: 'Gotham-Black' }}>{item.name}</Text>
...@@ -46,7 +82,7 @@ class Item extends React.Component { ...@@ -46,7 +82,7 @@ class Item extends React.Component {
<View style={{ flex: 1, flexDirection: 'row', height: 100 }}> <View style={{ flex: 1, flexDirection: 'row', height: 100 }}>
<View style={{ flex: 1, height: 100 }}> <View style={{ flex: 1, height: 100 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', {nameMenu:item.name,desc:item.description,image:item.image})}> <TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { nameMenu: item.name, desc: item.description, image: item.image })}>
<Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 10, }}></Image> <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 10, }}></Image>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
...@@ -56,19 +92,21 @@ class Item extends React.Component { ...@@ -56,19 +92,21 @@ class Item extends React.Component {
<NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} /> <NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color: 'grey' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
</View> </View>
<View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}> <View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
<View style={styles.shadowEdit}> <TouchableOpacity onPress={() => this.handleAddDescription()}>
<Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image> <View style={styles.shadowEdit}>
</View> <Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image>
</View>
</TouchableOpacity>
<View style={styles.shadowAdd}> <View style={styles.shadowAdd}>
<TouchableOpacity onPress={() => this.props.handleMin()}> <TouchableOpacity onPress={() => this.props.handleMin()}>
<Text style={{ fontSize:25,alignSelf:'center' }}> - </Text> <Text style={{ fontSize: 25, alignSelf: 'center' }}> - </Text>
</TouchableOpacity> </TouchableOpacity>
<TextInput <TextInput
style={{ padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black',fontSize:15,marginRight:5,marginLeft:5 }} style={{ padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black', fontSize: 15, marginRight: 5, marginLeft: 5 }}
keyboardType={'numeric'} keyboardType={'numeric'}
onChangeText={(qty) => this.handleChangeQuantity(item, qty)}>{item.qty}</TextInput> onChangeText={(qty) => this.handleChangeQuantity(item, qty)}>{item.qty}</TextInput>
<TouchableOpacity style={{alignSelf:'center'}} onPress={() => this.props.handleAdd()}> <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}>
<Text style={{ fontSize: 25,alignSelf:'center' }}> + </Text> <Text style={{ fontSize: 25, alignSelf: 'center' }}> + </Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -130,7 +168,36 @@ const styles = StyleSheet.create({ ...@@ -130,7 +168,36 @@ const styles = StyleSheet.create({
marginLeft: 5, marginLeft: 5,
marginRight: 5, marginRight: 5,
marginTop: 5, marginTop: 5,
} },
centerViewModal: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
modalView: {
backgroundColor: "white",
borderRadius: 10,
borderWidth: 1,
borderColor: 'grey',
padding: 20,
alignItems: "center",
},
textInput: {
height: 40,
width: 250,
borderColor: 'gray',
borderWidth: 1,
marginHorizontal: 30,
borderRadius: 10
},
button: {
backgroundColor: '#CFB368',
padding:20,
borderRadius: 10,
paddingVertical: 5,
alignItems: 'center',
justifyContent: 'center'
},
}) })
const mapDispatchToProps = (dispacth) => { const mapDispatchToProps = (dispacth) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment