Skip to content

E
eCartPro-Customer
Commit a20fb561 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

filterrrrrrrrrrr

parent 802e12ca
Show whitespace changes
Inline Side-by-side
Showing with 520 additions and 79 deletions
App/Components/BaseHeader.js
View file @ a20fb561
......@@ -22,6 +22,9 @@ export default class BaseHeader extends Component {
withBack: PropTypes.bool,
complain: PropTypes.bool,
complainPress: PropTypes.func,
filterText: PropTypes.string,
filter: PropTypes.bool,
filterPress: PropTypes.func,
notification: PropTypes.bool,
notificationPress: PropTypes.func,
onSubmitEditing: PropTypes.func,
......@@ -29,7 +32,7 @@ export default class BaseHeader extends Component {
value: PropTypes.string,
placeholder: PropTypes.string,
onClose: PropTypes.func,
onCancel: PropTypes.func
onCancel: PropTypes.func,
}
// Defaults for props
......@@ -44,7 +47,7 @@ export default class BaseHeader extends Component {
render() {
return (
<View>
{!this.props.typeSearch && !this.props.complain && !this.props.notification && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
{!this.props.typeSearch && !this.props.complain && !this.props.notification && !this.props.filter && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: this.props.rightText == '' ? 'flex-start' : 'space-between', backgroundColor: '#4cc9f0' }}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{this.props.withBack && <TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3 }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15 }} />
......@@ -92,6 +95,16 @@ export default class BaseHeader extends Component {
<BaseText type={"bold"} text={'Baca Semua'} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
</TouchableOpacity>
</View>}
{this.props.filter && <View style={{ alignItems: 'center', width: '100%', paddingBottom: 10, paddingHorizontal: 20, height: STATUSBAR_HEIGHT + 60, paddingTop: 50, flexDirection: 'row', justifyContent: 'space-between', backgroundColor: '#4cc9f0' }}>
<TouchableOpacity onPress={this.props.onBackPress} style={{ marginBottom: -3, flexDirection: 'row' }}>
<Image source={Images.icon_backwhite} style={{ width: 20, height: 15, alignSelf: 'center' }} />
<BaseText text={this.props.leftText} type={'bold'} style={{ marginLeft: 10, color: 'white', fontSize: 16, alignSelf: 'center' }} />
</TouchableOpacity>
<TouchableOpacity style={{ justifyContent: 'center', alignSelf: 'center', marginBottom: -3, }} onPress={this.props.filterPress}>
<BaseText type={"bold"} text={this.props.filterText} style={{ fontSize: 12, color: '#fff', textAlign: 'center' }} />
</TouchableOpacity>
</View>}
</View>
)
}
......
App/Containers/ChatScreen.js
View file @ a20fb561
......@@ -37,7 +37,8 @@ class ChatScreen extends Component {
],
currency: '',
intent: '',
product: null
product: null,
varient: null
}
}
......@@ -49,7 +50,10 @@ class ChatScreen extends Component {
if (this.props.navigation.state.params.intent == 'chat') {
this.setState({
intent: 'chat',
product: this.props.navigation.state.params.product
product: this.props.navigation.state.params.product,
varient: this.props.navigation.state.params.varient
}, ()=> {
console.log(JSON.stringify(this.state.product))
})
}
}
......@@ -142,10 +146,10 @@ class ChatScreen extends Component {
{this.state.intent == 'chat' ?
<View style={{ alignSelf: 'flex-end', backgroundColor: '#ededed', width: '100%', flexDirection: 'row' }}>
<View style={{ elevation: 3, borderRadius: 10, margin: 5, backgroundColor: '#fff', padding: 10, flexDirection: 'row', width: '60%', }}>
<Image source={{ uri: this.state.product.image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
<Image source={{ uri: this.state.product.product_image }} style={{ height: 64, width: 64, borderRadius: 15, marginRight: 10 }} />
<View style={{ flex: 1 }}>
<BaseText text={this.state.product.imageName} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
<BaseText text={formatRp(this.state.currency, this.state.product.itemHarga)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
<BaseText text={this.state.product.product_name} type={'regular'} style={{ fontSize: 12, color: 'black' }} ellipsizeMode={'tail'} numberOfLines={2} />
<BaseText text={formatRp(this.state.currency, this.state.product.price)} type={'bold'} style={{ fontSize: 12, color: 'black' }} />
</View>
</View>
<TouchableOpacity style={{ backgroundColor: 'white', borderRadius: 10, width: 20, height: 20, justifyContent: 'center', marginLeft: -20, elevation: 5 }} onPress={()=> this.setState({ intent: ""})}>
......
App/Containers/DetailProductScreen.js
View file @ a20fb561
......@@ -264,11 +264,8 @@ class DetailProductScreen extends Component {
<View style={{flexDirection: 'row', justifyContent: 'space-between',}}>
<TouchableOpacity style={{width: '10%', alignItems:'center'}}
onPress={()=> this.props.navigation.navigate('ChatScreen', {
product: {
imageName: this.state.dataProduct.product_name,
itemHarga: this.state.dataProduct.price,
image: this.state.varient[0].varient_image
},
product: this.state.dataProduct,
varient: this.state.varient,
intent: 'chat'
})}>
<Image source={Images.icon_chat} style={{width: 50, height: 50}}/>
......
App/Containers/FilterScreen.js 0 → 100644
View file @ a20fb561
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, View, TouchableOpacity, Animated, Image, TextInput, BackHandler } from 'react-native'
import { connect } from 'react-redux'
import { Collapse, CollapseHeader, CollapseBody } from "accordion-collapse-react-native";
import RangeSlider from 'rn-range-slider';
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
// Styles
import styles from './Styles/FilterScreenStyle'
import BaseHeader from '../Components/BaseHeader'
import { Images } from '../Themes';
import BaseText from '../Components/BaseText';
import Modal from 'react-native-modal';
import { titleCase } from '../Lib/Utils';
import R from 'ramda';
import BaseButton from '../Components/BaseButton';
class FilterScreen extends Component {
constructor(props) {
super(props);
this.state = {
collapsed: false,
collapsedCategory: false,
minPrice: 'Rp. 0',
maxPrice: 'Rp. 2.500.000',
lowPrice: 0,
highPrice: 2500000,
min: 0,
max: 0,
option1: false,
option2: false,
option3: false,
option4: false,
dataSorting: [],
dataCategory: [],
category: false,
categoryId: [],
categoryLabel: [],
filterPria: ["Kaos", "Kemeja", "Celana Panjang", "Celana Pendek"],
filterWanita: ["Kaos", "Daster", "Rok", "Tas", "Perhiasan"],
filterAnak: ["0-2 Tahun", "2-5 Tahun", "Atasan", "Bawahan"],
pickItemPria: "",
pickItemWanita: "",
pickItemAnak: "",
anak: false,
wanita: false,
pria: false,
type: "",
urutan: ""
};
}
componentDidMount() {
console.log(this.props.navigation.state.params.kategori)
let dataCategory = this.props.navigation.state.params.kategori
let dataSorting = this.props.navigation.state.params.dataSorting
this.setState({
dataCategory,
dataSorting,
urutan: this.props.navigation.state.params.urutan,
categoryId: this.props.navigation.state.params.categoryId,
categoryLabel: this.props.navigation.state.params.categoryLabel,
type: this.props.navigation.state.params.type,
lowPrice: this.props.navigation.state.params.min,
highPrice: this.props.navigation.state.params.max,
option1: this.props.navigation.state.params.option == 1 ? true : false,
option2: this.props.navigation.state.params.option == 2 ? true : false,
option3: this.props.navigation.state.params.option == 3 ? true : false,
option4: this.props.navigation.state.params.option == 4 ? true : false,
}, ()=> {
console.log(this.state.lowPrice);
})
BackHandler.addEventListener("hardwareBackPress", this.backAction);
}
handleCategory(item) {
let categoryId = this.state.categoryId
let categoryLabel = this.state.categoryLabel
let indexId = this.state.categoryId.findIndex((val) => val == item.cat_id)
if (indexId == -1) {
categoryId.push(item.cat_id)
categoryLabel.push(String(item.title).toLocaleLowerCase())
} else {
categoryId.splice(indexId, 1)
categoryLabel.splice(indexId, 1)
}
this.setState({ categoryId, category: false, categoryLabel }, () => {
// this.refreshState()
// this.getAllProduct()
})
}
validasi() {
this.props.navigation.state.params.onSelect({
categoryId: this.state.categoryId,
min: this.state.lowPrice,
max: this.state.highPrice,
urutan: this.state.urutan,
option: this.state.option1 ? 1 : this.state.option2 ? 2 : this.state.option3 ? 3 : this.state.option4 ? 4 : 0
})
this.props.navigation.goBack()
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.backAction);
}
backAction = () => {
this.props.navigation.goBack()
return true;
};
render() {
return (
this.state.type == 'sorting' ?
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Filter'} filterText={'Urutan'} onBackPress={() => this.props.navigation.goBack()} />
<View style={styles.containerView}>
{this.state.dataSorting.map((item, index) => {
return (
<TouchableOpacity
key={index}
style={{ flexDirection: 'row', justifyContent: this.state.urutan == item ? 'space-between' : 'flex-start', alignItems: 'center', backgroundColor: this.state.urutan == item ? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataSorting.length - 1 == index ? 0 : .4, }}
onPress={() => {
this.setState({ urutan: item })
}}>
<BaseText type={"regular"} text={titleCase(item)} style={{ fontSize: 16, color: 'black' }} />
{this.state.urutan == item && <Image source={Images.radioOn} style={{ width: 20, height: 20, }} />}
</TouchableOpacity>)
})}
</View>
<View style={{ alignSelf: 'flex-end', padding: 10, backgroundColor: '#4cc9f0', width: '100%', borderTopColor: '#d8d8d8', borderTopWidth: .6, elevation: 6, paddingHorizontal: 20, height: 40 }}>
<TouchableOpacity onPress={() => this.validasi()}>
<BaseText type={"regular"} text={'Simpan'} style={{ fontSize: 14, color: 'white', alignSelf: 'center' }} />
</TouchableOpacity>
</View>
</View>
:
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Filter'} filterText={'Reset Filter'} onBackPress={() => this.props.navigation.goBack()} filter={true} filterPress={() => null} />
<Modal
animationOut='slideOutDown'
// animationOutTiming={1000}
isVisible={this.state.category} onBackButtonPress={() => this.setState({ category: false })} onBackdropPress={() => this.setState({ category: false })} style={{ paddingHorizontal: 10 }}>
<View style={{ backgroundColor: 'white', width: '90%', alignSelf: 'center', borderRadius: 5 }}>
<View style={{ height: 50, borderBottomColor: '#4cc9f0', borderBottomWidth: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
<BaseText type={"bold"} text={'Kategori By'} style={{ fontSize: 16, color: '#4cc9f0' }} />
</View>
{this.state.dataCategory.map((item, index) => {
return (
<TouchableOpacity
key={index}
style={{ flexDirection: 'row', justifyContent: this.state.categoryId.includes(item.cat_id) ? 'space-between' : 'flex-start', alignItems: 'center', backgroundColor: this.state.categoryId.includes(item.cat_id) ? 'rgba(76, 201, 240, .1)' : 'transparent', paddingHorizontal: 20, paddingVertical: 15, borderBottomColor: 'black', borderBottomWidth: this.state.dataCategory.length - 1 == index ? 0 : .4, }}
onPress={() => this.handleCategory(item)}>
<BaseText type={"regular"} text={titleCase(String(item.title).toLocaleLowerCase())} style={{ fontSize: 16, color: 'black' }} />
{this.state.categoryId.includes(item.cat_id) && <Image source={Images.radioOn} style={{ width: 20, height: 20, }} />}
</TouchableOpacity>)
})}
</View>
</Modal>
<View style={styles.containerView}>
<ScrollView showsVerticalScrollIndicator={false}>
<Collapse
isCollapsed={this.state.collapsed}
onToggle={(isCollapsed) => this.setState({ collapsed: isCollapsed })} >
<CollapseHeader style={{ backgroundColor: 'white', marginTop: 30, paddingHorizontal: 20 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row' }}>
<Image source={Images.dropdown} style={{ height: 10, width: 15, alignSelf: 'center', rotation: this.state.collapsed ? 180 : 0 }} />
<BaseText type={"regular"} text={'Harga'} style={{ fontSize: 14, color: 'black', alignSelf: 'center', marginLeft: 10 }} />
</View>
<View style={{ justifyContent: 'center' }}>
<Image source={Images.radioOff} style={{ height: 20, width: 20, alignSelf: 'center' }} />
</View>
</View>
</CollapseHeader>
<CollapseBody style={{ paddingHorizontal: 20, marginBottom: 20 }}>
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<BaseText type={"regular"} text={this.state.minPrice} style={{ fontSize: 14, color: 'black', alignSelf: 'center' }} />
<BaseText type={"regular"} text={this.state.maxPrice} style={{ fontSize: 14, color: 'black', alignSelf: 'center' }} />
</View>
<RangeSlider
ref={component => this._rangeSlider = component}
style={{ width: '100%', height: 80, marginTop: -40 }}
gravity={'center'}
min={0}
initialLowValue={this.state.lowPrice == 0 ? null :this.state.lowPrice}
initialHighValue={this.state.highPrice == 0 ? null : this.state.highPrice}
max={2500000}
step={20}
selectionColor="#91ffaf"
blankColor="#9eb8a5"
onValueChanged={(low, high, fromUser) => {
console.log('low: ', low, 'high: ', high)
}} />
</View>
<View style={{ flexDirection: 'row', marginTop: 15 }}>
<TouchableOpacity onPress={() => this.setState({ option1: !this.state.option1, option2: false, option3: false, option4: false, lowPrice: 0, highPrice: 300000 }, () => {
if (this.state.option1) {
this._rangeSlider.setLowValue(0)
this._rangeSlider.setHighValue(300000)
} else {
this._rangeSlider.setLowValue(this.state.lowPrice)
this._rangeSlider.setHighValue(this.state.highPrice)
}
})}>
<Image source={this.state.option1 ? Images.radioOn : Images.radioOff} style={{ height: 20, width: 20, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={'Rp. 0 - Rp. 300.000'} style={{ marginLeft: 10, fontSize: 14, color: 'black', alignSelf: 'center' }} />
</View>
<View style={{ flexDirection: 'row', marginTop: 15 }}>
<TouchableOpacity onPress={() => this.setState({ option2: !this.state.option2, option1: false, option3: false, option4: false, lowPrice: 300000, highPrice: 600000 }, () => {
if (this.state.option2) {
this._rangeSlider.setLowValue(300000)
this._rangeSlider.setHighValue(600000)
} else {
this._rangeSlider.setLowValue(this.state.lowPrice)
this._rangeSlider.setHighValue(this.state.highPrice)
}
})}>
<Image source={this.state.option2 ? Images.radioOn : Images.radioOff} style={{ height: 20, width: 20, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={'Rp. 300.000 - Rp. 600.000'} style={{ marginLeft: 10, fontSize: 14, color: 'black', alignSelf: 'center' }} />
</View>
<View style={{ flexDirection: 'row', marginTop: 15 }}>
<TouchableOpacity onPress={() => this.setState({ option3: !this.state.option3, option2: false, option1: false, option4: false, lowPrice: 600000, highPrice: 1000000 }, () => {
if (this.state.option3) {
this._rangeSlider.setLowValue(600000)
this._rangeSlider.setHighValue(1000000)
} else {
this._rangeSlider.setLowValue(this.state.lowPrice)
this._rangeSlider.setHighValue(this.state.highPrice)
}
})}>
<Image source={this.state.option3 ? Images.radioOn : Images.radioOff} style={{ height: 20, width: 20, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={'Rp. 600.000 - Rp. 1.000.000 '} style={{ marginLeft: 10, fontSize: 14, color: 'black', alignSelf: 'center' }} />
</View>
<View style={{ flexDirection: 'row', marginTop: 15 }}>
<TouchableOpacity onPress={() => this.setState({ option4: !this.state.option4, option2: false, option3: false, option1: false, lowPrice: 1000000, highPrice: 2500000 }, () => {
if (this.state.option4) {
this._rangeSlider.setLowValue(1000000)
this._rangeSlider.setHighValue(2500000)
} else {
this._rangeSlider.setLowValue(this.state.lowPrice)
this._rangeSlider.setHighValue(this.state.highPrice)
}
})}>
<Image source={this.state.option4 ? Images.radioOn : Images.radioOff} style={{ height: 20, width: 20, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={'Rp. 1.000.000 - Rp. 2.500.000 '} style={{ marginLeft: 10, fontSize: 14, color: 'black', alignSelf: 'center' }} />
</View>
</CollapseBody>
</Collapse>
<View style={{ borderTopColor: '#4b4b4b', borderTopWidth: .3, marginTop: 10, paddingHorizontal: 20 }}>
<Collapse
isCollapsed={this.state.collapsedCategory}
onToggle={(isCollapsed) => this.setState({ collapsedCategory: isCollapsed })} >
<CollapseHeader style={{ backgroundColor: 'white', marginTop: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flexDirection: 'row' }}>
<Image source={Images.dropdown} style={{ height: 10, width: 15, alignSelf: 'center', rotation: this.state.collapsedCategory ? 180 : 0 }} />
<BaseText type={"regular"} text={'Kategori'} style={{ fontSize: 14, color: 'black', alignSelf: 'center', marginLeft: 10 }} />
</View>
<View style={{ justifyContent: 'center' }}>
<Image source={this.state.pickItemAnak != "" || this.state.pickItemPria != "" || this.state.pickItemWanita != "" || !R.isEmpty(this.state.categoryLabel) ? Images.radioOn : Images.radioOff} style={{ height: 20, width: 20, alignSelf: 'center' }} />
</View>
</View>
</CollapseHeader>
<CollapseBody>
<View style={{ marginTop: 20 }}>
<BaseText type={"regular"} text={'Jenis Kategori'} style={{ fontSize: 10, color: '#4b4b4b', opacity: .5 }} />
<TouchableOpacity style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10, borderBottomColor: "#4b4b4b", borderBottomWidth: .3, paddingVertical: 5 }} onPress={() => this.setState({ category: true })}>
<BaseText type={"regular"} text={R.isEmpty(this.state.categoryLabel) ? "Pilih Kategori" : this.state.categoryLabel.toString()} style={{ fontSize: 12, color: 'black', opacity: .5 }} />
<Image source={Images.dropdown} style={{ height: 10, width: 15, alignSelf: 'center', rotation: this.state.collapsedCategory ? 180 : 0 }} />
</TouchableOpacity>
</View>
<View style={{ marginTop: 20 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity style={{ justifyContent: 'center' }} onPress={() => !this.state.pria ? this.setState({ pria: true, wanita: false, anak: false, pickItemWanita: "", pickItemAnak: "" }) : null} activeOpacity={!this.state.pria ? 0 : 1}>
<Image source={this.state.pria ? Images.radioButtonOn : Images.radioButtonOff} style={{ height: 20, width: 20, marginRight: 10, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={"Pria"} style={{ fontSize: 12, color: 'black', opacity: .5, alignSelf: 'center' }} />
</View>
<ScrollView horizontal={true} style={{ marginTop: 10 }}>
{this.state.filterPria.map((item, index) => {
return (
<TouchableOpacity style={{ backgroundColor: this.state.pickItemPria != item ? 'white' : "#ebfaff", padding: 6, paddingHorizontal: 10, borderRadius: 20, borderColor: this.state.pickItemPria != item ? '#4b4b4b' : "#4cc9f0", borderWidth: .5, marginRight: 10 }} onPress={() => this.state.pria ? this.setState({ pickItemPria: item }) : null} activeOpacity={this.state.pria ? 0 : 1}>
<BaseText type={"regular"} text={item} style={{ fontSize: 12, color: this.state.pickItemPria != item ? '#4b4b4b' : "#4cc9f0", opacity: .5 }} />
</TouchableOpacity>
)
})}
</ScrollView>
</View>
<View style={{ marginTop: 20 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity style={{ justifyContent: 'center' }} onPress={() => !this.state.wanita ? this.setState({ wanita: true, anak: false, pria: false, pickItemPria: "", pickItemAnak: "" }) : null} activeOpacity={!this.state.wanita ? 0 : 1}>
<Image source={this.state.wanita ? Images.radioButtonOn : Images.radioButtonOff} style={{ height: 20, width: 20, marginRight: 10, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={"Wanita"} style={{ fontSize: 12, color: 'black', opacity: .5, alignSelf: 'center' }} />
</View>
<ScrollView horizontal={true} style={{ marginTop: 10 }}>
{this.state.filterWanita.map((item, index) => {
return (
<TouchableOpacity style={{ backgroundColor: this.state.pickItemWanita != item ? 'white' : "#ebfaff", paddingVertical: 6, paddingHorizontal: 10, borderRadius: 20, borderColor: this.state.pickItemWanita != item ? '#4b4b4b' : "#4cc9f0", borderWidth: .5, marginRight: 10 }} onPress={() => this.state.wanita ? this.setState({ pickItemWanita: item }) : null} activeOpacity={this.state.wanita ? 0 : 1}>
<BaseText type={"regular"} text={item} style={{ fontSize: 12, color: this.state.pickItemWanita != item ? '#4b4b4b' : "#4cc9f0", opacity: .5 }} />
</TouchableOpacity>
)
})}
</ScrollView>
</View>
<View style={{ marginTop: 20, marginBottom: 20 }}>
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity style={{ justifyContent: 'center' }} onPress={() => !this.state.anak ? this.setState({ anak: true, wanita: false, pria: false, pickItemPria: "", pickItemWanita: "" }) : null} activeOpacity={!this.state.anak ? 0 : 1}>
<Image source={this.state.anak ? Images.radioButtonOn : Images.radioButtonOff} style={{ height: 20, width: 20, marginRight: 10, alignSelf: 'center' }} />
</TouchableOpacity>
<BaseText type={"regular"} text={"Anak"} style={{ fontSize: 12, color: 'black', opacity: .5, alignSelf: 'center' }} />
</View>
<ScrollView horizontal={true} style={{ marginTop: 10 }}>
{this.state.filterAnak.map((item, index) => {
return (
<TouchableOpacity style={{ backgroundColor: this.state.pickItemAnak != item ? 'white' : "#ebfaff", paddingVertical: 6, paddingHorizontal: 10, borderRadius: 20, borderColor: this.state.pickItemAnak != item ? '#4b4b4b' : "#4cc9f0", borderWidth: .5, marginRight: 10 }} onPress={() => this.state.anak ? this.setState({ pickItemAnak: item }) : null} activeOpacity={this.state.anak ? 0 : 1}>
<BaseText type={"regular"} text={item} style={{ fontSize: 12, color: this.state.pickItemAnak != item ? '#4b4b4b' : "#4cc9f0", opacity: .5 }} />
</TouchableOpacity>
)
})}
</ScrollView>
</View>
</CollapseBody>
</Collapse>
</View>
</ScrollView>
</View>
<View style={{ alignSelf: 'flex-end', padding: 10, backgroundColor: '#4cc9f0', width: '100%', borderTopColor: '#d8d8d8', borderTopWidth: .6, elevation: 6, paddingHorizontal: 20, height: 40 }}>
<TouchableOpacity onPress={() => this.validasi()}>
<BaseText type={"regular"} text={'Simpan'} style={{ fontSize: 14, color: 'white', alignSelf: 'center' }} />
</TouchableOpacity>
</View>
</View>
)
}
}
const mapStateToProps = (state) => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(FilterScreen)
App/Containers/ListSearchScreen.js
View file @ a20fb561
......@@ -14,6 +14,7 @@ import { formatRp, titleCase } from '../Lib/Utils'
import Constant from '../Lib/Constant'
import Modal from 'react-native-modal';
import { BarIndicator } from 'react-native-indicators'
import { NavigationEvents } from 'react-navigation';
class ListSearchScreen extends Component {
constructor(props) {
......@@ -32,13 +33,17 @@ class ListSearchScreen extends Component {
dataSorting: ['termurah', 'termahal'],
dataCategory: [],
categoryId: [],
categoryLabel: [],
currency: '',
offset: 0,
search: '',
urutan: '',
sorting: false,
category: false,
loading: false
loading: false,
min: 0,
max: 0,
option: 0
}
}
......@@ -47,7 +52,7 @@ class ListSearchScreen extends Component {
if (catID != '') {
let categoryId = []
categoryId.push(catID)
this.setState({ categoryId }, ()=> this.getAllProduct())
this.setState({ categoryId }, () => this.getAllProduct())
} else {
this.getAllProduct()
}
......@@ -57,27 +62,31 @@ class ListSearchScreen extends Component {
}
getAllProduct(type) {
if (type != 'scroll') this.setState({loading: true})
if (type != 'scroll') this.setState({ loading: true })
let payload = {
"offset": this.state.offset,
"limit": 10,
"sorting": this.state.urutan,
"category": this.state.categoryId,
"search": this.state.search,
"min": 0,
"max": 0
"min": this.state.min,
"max": this.state.max
}
Api.create().getAllProduct(payload).then((response) => {
console.log(payload)
// console.log(response.data)
console.log('masukkk', response.data.data)
if (response.data.status == 'success') {
this.setState({ listData: this.state.listData.concat(response.data.data), loading: false })
this.setState({ listData: response.data.data, loading: false })
} else {
this.setState({ loading: false })
}
})
}
onSelect = (data) => {
this.setState(data)
}
getCategory() {
Api.create().getCategory().then((response) => {
console.log(response.data)
......@@ -116,13 +125,16 @@ class ListSearchScreen extends Component {
handleCategory(item) {
let categoryId = this.state.categoryId
let categoryLabel = this.state.categoryLabel
let indexId = this.state.categoryId.findIndex((val) => val == item.cat_id)
if (indexId == -1) {
categoryId.push(item.cat_id)
categoryLabel.push(String(item.title).toLocaleLowerCase())
} else {
categoryId.splice(indexId, 1)
categoryLabel.splice(indexId, 1)
}
this.setState({ listData: [], categoryId, category: false }, () => {
this.setState({ listData: [], categoryId, category: false, categoryLabel }, () => {
this.refreshState()
this.getAllProduct()
})
......@@ -131,6 +143,10 @@ class ListSearchScreen extends Component {
render() {
return (
<View style={{ flex: 1 }}>
<NavigationEvents onDidFocus={() => {
this.getAllProduct()
}} />
<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'light-content'} />
<BaseHeader
// onSubmitEditing={() => {
......@@ -210,8 +226,8 @@ class ListSearchScreen extends Component {
</View>
{!this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 10 }}>
{this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
{this.state.loading ? <View style={{ alignSelf: 'center' }}>
<BarIndicator count={5} color='#4cc9f0' size={25} />
</View> :
<FlatList
showsVerticalScrollIndicator={false}
......@@ -222,7 +238,7 @@ class ListSearchScreen extends Component {
}
}}
renderItem={({ item, index }) => (
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', { productId: item.product_id })} style={{ flex: 1/2, borderRadius: 15 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('DetailProductScreen', { productId: item.product_id })} style={{ flex: 1 / 2, borderRadius: 15 }}>
<ImageBackground source={{ uri: item.product_image }} imageStyle={{ resizeMode: 'cover', borderRadius: 15 }} style={{ flex: 1, flexDirection: 'column', margin: 10, borderRadius: 15, marginTop: index == 0 ? 20 : index == 1 ? 20 : 0 }}>
<View style={{ width: '100%', height: 270, justifyContent: 'flex-end' }}>
<View style={{ backgroundColor: 'rgba(255,255,255,.5)', padding: 20 }}>
......@@ -241,9 +257,9 @@ class ListSearchScreen extends Component {
)}
{this.state.thumbnail && (
<View style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, width: '100%', paddingHorizontal: 20 }}>
{this.state.loading? <View style={{alignSelf: 'center'}}>
<BarIndicator count={5} color='#4cc9f0' size={25}/>
</View> :<FlatList
{this.state.loading ? <View style={{ alignSelf: 'center' }}>
<BarIndicator count={5} color='#4cc9f0' size={25} />
</View> : <FlatList
showsVerticalScrollIndicator={false}
data={this.state.listData}
onScroll={({ nativeEvent }) => {
......@@ -273,17 +289,16 @@ class ListSearchScreen extends Component {
)}
<View style={{ width: '60%', backgroundColor: 'white', position: 'absolute', bottom: 25, alignSelf: 'center', borderRadius: 20, justifyContent: 'space-between', flexDirection: 'row', elevation: 5 }}>
<TouchableOpacity onPress={() => this.setState({ category: true })} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.categoryId.length > 0 ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopLeftRadius: 20, borderBottomLeftRadius: 20 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('FilterScreen', { kategori: this.state.dataCategory, onSelect: this.onSelect.bind(this), getAllProduct: this.getAllProduct.bind(this), categoryId: this.state.categoryId, categoryLabel: this.state.categoryLabel, type: 'kategori', dataSorting: this.state.dataSorting, urutan: this.state.urutan, min: this.state.min, max: this.state.max, option: this.state.option })} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.categoryId.length > 0 ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopLeftRadius: 20, borderBottomLeftRadius: 20 }}>
<Image source={Images.kategori} style={{ height: 16, width: 16, tintColor: this.state.categoryId.length > 0 ? 'white' : null }} />
<BaseText type={"bold"} text={'Kategori'} style={{ fontSize: 12, color: this.state.categoryId.length > 0 ? 'white' : '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
<View style={{ borderWidth: .4, borderColor: this.state.categoryId.length > 0 && this.state.urutan != '' ? 'white' : '#4cc9f0' }} />
<TouchableOpacity onPress={() => this.setState({ sorting: true })} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.urutan != '' ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopRightRadius: 20, borderBottomRightRadius: 20 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('FilterScreen', { kategori: this.state.dataCategory, onSelect: this.onSelect.bind(this), getAllProduct: this.getAllProduct.bind(this), categoryId: this.state.categoryId, categoryLabel: this.state.categoryLabel, type: 'sorting', dataSorting: this.state.dataSorting, urutan: this.state.urutan, min: this.state.min, max: this.state.max, option: this.state.option })} style={{ height: '100%', flexDirection: 'row', alignItems: 'center', width: '50%', paddingHorizontal: 20, backgroundColor: this.state.urutan != '' ? '#4cc9f0' : 'transparent', paddingVertical: 10, borderTopRightRadius: 20, borderBottomRightRadius: 20 }}>
<Image source={Images.urutan} style={{ height: 16, width: 16, tintColor: this.state.urutan != '' ? 'white' : null }} />
<BaseText type={"regular"} text={'Urutan'} style={{ fontSize: 12, color: this.state.urutan != '' ? 'white' : '#4cc9f0', marginLeft: 10 }} />
</TouchableOpacity>
</View>
</View>
</View>
)
......
App/Containers/NotificationScreen.js
View file @ a20fb561
......@@ -54,14 +54,17 @@ class NotificationScreen extends Component {
}
readAllNotif(){
Api.create().readAllNotification()
Api.create().readAllNotification().then(response => {
alert(JSON.stringify(response.data))
this.getNotif()
})
}
render() {
return (
<View style={{ flex: 1, backgroundColor: '#4cc9f0' }}>
<BaseHeader leftText={'Notifikasi'} withBack={false} onBackPress={this.backAction} notification={true} notificationPress={()=> this.readAllNotif()}/>
<ScrollView style={{ flex: 1, backgroundColor: '#fff', borderTopLeftRadius: 30, borderTopRightRadius: 30, }}>
<ScrollView style={{ flex: 1, backgroundColor: '#fff' }}>
<View style={{ borderTopLeftRadius: 30, borderTopRightRadius: 30, backgroundColor: 'white' }}>
{this.state.listNotif.map((item, index) => {
return (
......
App/Containers/Styles/FilterScreenStyle.js 0 → 100644
View file @ a20fb561
import { StyleSheet } from 'react-native'
import { ApplicationStyles } from '../../Themes/'
export default StyleSheet.create({
...ApplicationStyles.screen,
containerView: {
flex: 1,
backgroundColor: 'white',
borderTopLeftRadius: 32,
borderTopRightRadius: 32,
},
collapseView: {
marginBottom: 20
},
body: {
padding: 10,
paddingTop: 0
},
collapseConatiner: {
backgroundColor: '#fff',
margin:10,
overflow:'hidden'
}
})
App/Navigation/AppNavigation.js
View file @ a20fb561
import { createAppContainer } from 'react-navigation'
import FilterScreen from '../Containers/FilterScreen'
import UseCouponScreen from '../Containers/UseCouponScreen'
import DetailNotificationScreen from '../Containers/DetailNotificationScreen'
import ChatScreen from '../Containers/ChatScreen'
......@@ -47,6 +48,7 @@ import HomeNavigation from './HomeNavigation'
// Manifest of possible screens
const PrimaryNav = createStackNavigator({
FilterScreen: { screen: FilterScreen },
UseCouponScreen: { screen: UseCouponScreen },
DetailNotificationScreen: { screen: DetailNotificationScreen },
ChatScreen: { screen: ChatScreen },
......
App/Themes/Images.js
View file @ a20fb561
......@@ -32,12 +32,15 @@ const images = {
urutan: require('../Images/Icons/urutan.png'),
radioOff: require('../Images/Icons/radiobutton-off.png'),
radioOn: require('../Images/Icons/radiobutton-on.png'),
radioButtonOff: require('../Images/Icons/radio-off.png'),
radioButtonOn: require('../Images/Icons/radio-on.png'),
berhasil: require('../Images/Icons/berhasil.png'),
add: require('../Images/Icons/add.png'),
map: require('../Images/Icons/map.png'),
read: require('../Images/Icons/read.png'),
mapgray: require('../Images/Icons/mapgray.png'),
filter: require('../Images/Icons/filter.png'),
dropdown: require('../Images/Icons/dropdown.png'),
icon_pesanansaya_gray: require('../Images/Icons/icon_pesanansaya_gray.png'),
icon_close: require('../Images/Icons/icon_close.png'),
map_addpin: require('../Images/Icons/map_addpin.png'),
......
package.json
View file @ a20fb561
......@@ -32,6 +32,7 @@
"@react-native-firebase/messaging": "^7.4.2",
"@react-navigation/bottom-tabs": "^5.6.1",
"@react-navigation/native": "^5.6.1",
"accordion-collapse-react-native": "^0.3.1",
"apisauce": "^1.1.1",
"curved-bottom-navigation-bar": "^1.0.5",
"format-json": "^1.0.3",
......@@ -79,6 +80,7 @@
"redux-persist": "^5.10.0",
"redux-saga": "^1.1.3",
"reduxsauce": "^1.1.1",
"rn-range-slider": "1.3.0",
"rn-wave-bottom-bar": "^1.0.2",
"seamless-immutable": "^7.1.4"
},
......
yarn.lock
View file @ a20fb561
......@@ -2360,6 +2360,13 @@ accepts@~1.3.5, accepts@~1.3.7:
mime-types "~2.1.24"
negotiator "0.6.2"
accordion-collapse-react-native@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/accordion-collapse-react-native/-/accordion-collapse-react-native-0.3.1.tgz#64307b77c9fbfc93c4eb3458c187918cee5cda95"
integrity sha512-aZ1VfA4MHmysiutidIejzWsRS7iWgAHV8OCk6hfHrm0DIOVlGyVmsmVJroXjkpjHpFBxVIn8BoAEMDN2ehkATw==
dependencies:
lodash.get "4.4.2"
acorn-globals@^4.1.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
......@@ -8872,6 +8879,11 @@ lodash.cond@^4.3.0:
resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
integrity sha1-9HGh2khr5g9quVXRcRVSPdHSVdU=
lodash.get@4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
......@@ -12080,6 +12092,11 @@ rn-host-detect@1.2.0:
resolved "https://registry.yarnpkg.com/rn-host-detect/-/rn-host-detect-1.2.0.tgz#8b0396fc05631ec60c1cb8789e5070cdb04d0da0"
integrity sha512-btNg5kzHcjZZ7t7mvvV/4wNJ9e3MPgrWivkRgWURzXL0JJ0pwWlU4zrbmdlz3HHzHOxhBhHB4D+/dbMFfu4/4A==
rn-range-slider@1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/rn-range-slider/-/rn-range-slider-1.3.0.tgz#8cebcb26645e8c6e6aff602a7d66ab75a687e75d"
integrity sha512-iSrr/jX2igPg7RtU9EbAJ6xklgJ8C+jh58pwwtXqvrGHeO6HUj2QzOTMJDecW9Y6PFI07R9sKKH1oLnh7v7bxA==
rn-wave-bottom-bar@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/rn-wave-bottom-bar/-/rn-wave-bottom-bar-1.0.2.tgz#03acb00a431a7db02be0f1f1cc81e2249c1c90c6"
......
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