API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 23rd, 2017
67
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.15 KB | None | 0 0
raw download clone embed print report
  1. import React, { Component } from 'react'
  2. import {
  3. View,
  4. Text,
  5. AppRegistry,
  6. Image,
  7. StyleSheet,
  8. TextInput,
  9. TouchableOpacity,
  10. Dimensions,
  11. KeyboardAvoidingView,
  12. StatusBar,
  13. ScrollView,
  14. Slider,
  15. ListView,
  16.  
  17. }
  18. from 'react-native';
  19. import { Card } from 'react-native-material-design';
  20.  
  21.  
  22.  
  23. const { width, height } = Dimensions.get("window");
  24. import MultiSlider from '@ptomasroos/react-native-multi-slider';
  25.  
  26. import Checkbox from 'react-native-custom-checkbox';
  27. import { RadioButtons } from 'react-native-radio-buttons'
  28. var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  29.  
  30. export default class Filter extends Component {
  31. constructor(props) {
  32. super(props);
  33. this.CheckRoom = this.CheckRoom.bind(this)
  34. this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  35.  
  36. }
  37.  
  38. onNavigatorEvent(event) {
  39.  
  40. if (event.id === 'done') {
  41. this.props.navigator.dismissModal({
  42. animationType: 'slide-down' ,
  43. });
  44. }
  45. }
  46.  
  47. componentWillMount() {
  48. this.setState({
  49. Price_range : '',
  50. Property: [
  51. ],
  52. Room: [
  53. ],
  54. Amenity : [
  55.  
  56. ],
  57. sliderOneChanging: false,
  58. checked: false,
  59. Ameneties_Array : ds.cloneWithRows([]),
  60.        });
  61. this.Aminity();
  62.  
  63. }
  64.  
  65.  
  66.  
  67. async Aminity(){
  68. let response = await fetch('http://api.yohobed.com/api/amenity');
  69. let body = await response.json();
  70. this.setState({
  71. Ameneties_Array: this.state.Ameneties_Array.cloneWithRows(body.amenity),
  72. isLoading : true,
  73. });
  74.  
  75.  
  76.  
  77. }
  78.  
  79.  
  80. CheckRoom = (room_category,checked) =>{
  81.  
  82. if(checked === true){
  83. this.state.Room.push({room_category});
  84.  
  85. }else {
  86. this.state.Room.pop({room_category});
  87. }
  88. }
  89.  
  90. Check = (property_type,checked) => {
  91. if(checked === true){
  92. this.state.Property.push({property_type});
  93.  
  94. }else {
  95. this.state.Property.pop({property_type});
  96. }
  97. }
  98.  
  99. CheckAmenity(Amenity_type, checked){
  100. if(checked === true){
  101. this.state.Amenity.push({Amenity_type});
  102.  
  103. }else {
  104. this.state.Amenity.pop({Amenity_type});
  105. }
  106. }
  107.  
  108.  
  109. renderRow(rowData: {}, sectionID: number, rowID: number){
  110. return (
  111. <View >
  112. <View style={styles.amenty}>
  113. <Text style={styles.checkboxTextWrpr}>{rowData.name}</Text>
  114. <Checkbox name={rowData.name} style={{color:'#666', borderWidth: 1}} onChange={(Amenity_type,checked) => this.CheckAmenity(Amenity_type, checked)}/>
  115. </View>
  116.  
  117. </View>
  118. );
  119. }
  120.  
  121.  
  122. componentWillUnmount () {
  123.  
  124. if (this.props.callback){
  125.  
  126.  
  127. var Price_range =this.state.Price_range;
  128. var Property =this.state.Property;
  129. var Room =this.state.Room;
  130. var Aminity =this.state.Amenity;
  131.  
  132. var Filters={};
  133. Filters={Price_range,Property,Room,Aminity};
  134. this.props.callback(Filters);
  135. }
  136. }
  137.  
  138. render(){
  139. const options = [
  140. "Below 2,499 LKR",
  141. "2,500 - 4,499 LKR",
  142. "4,500 - 7,499 LKR",
  143. "7,500 - 9,999 LKR",
  144. "Above 10,000 LKR",
  145. ];
  146.  
  147. function setSelectedOption(selectedOption){
  148. if(selectedOption === "Below 2,499 LKR"){
  149. this.state.Price_range = 'A';
  150. }else if(selectedOption === "2,500 - 4,499 LKR"){
  151. this.state.Price_range = 'B';
  152. }else if(selectedOption === "4,500 - 7,499 LKR"){
  153. this.state.Price_range = 'C';
  154. }else if (selectedOption === "7,500 - 9,999 LKR") {
  155. this.state.Price_range = 'D';
  156. }else if (selectedOption === "Above 10,000 LKR") {
  157. this.state.Price_range = 'E';
  158. }else {
  159. this.state.Price_range = 'F';
  160. }
  161.  
  162. }
  163.  
  164. function renderOption(option, selected, onSelect, index){
  165. const style = selected ? { color:'#00b0bf', paddingBottom:10, fontFamily:'Lato-Light', fontSize:14} :{color:'#666', paddingBottom:10, fontFamily:'Lato-Light', fontSize:14};
  166.  
  167. return (
  168. <TouchableOpacity onPress={onSelect} key={index}>
  169. <Text style={style}>{option}</Text>
  170. </TouchableOpacity>
  171. );
  172. }
  173.  
  174. function renderContainer(optionNodes){
  175. return <View>{optionNodes}</View>;
  176. }
  177. return(
  178. <View style= {{flex : 1, backgroundColor : "#FFFFFF"}}>
  179. <StatusBar backgroundColor="#078f99" barStyle="light-content" />
  180. <ScrollView>
  181. <View style={styles.mainWraprFilter}>
  182. <View style={styles.roomTypeWrpr}>
  183. <Text style={styles.mainTextWrpr}>Room Type</Text>
  184. <Card style={{margin:0, marginTop:10, paddingTop:4, shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8, paddingRight:10, paddingLeft:10}}>
  185. <Card.Body>
  186. <View style={{justifyContent:"space-between", flexDirection:'row'}}>
  187. <Text style={styles.checkboxTextWrpr}>Premium</Text>
  188. <Checkbox name='Premium' style={{color:'#666', borderWidth: 1}} onChange={(room_category,checked) => this.CheckRoom(room_category, checked)}/>
  189. </View>
  190. <View style={{justifyContent:"space-between", flexDirection:'row', marginTop:10}}>
  191. <Text style={styles.checkboxTextWrpr}>Standard</Text>
  192. <Checkbox name='Standard' style={{color:'#666', borderWidth: 1}} onChange={(room_category,checked) => this.CheckRoom(room_category, checked)}/>
  193. </View>
  194.  
  195. <View style={{justifyContent:"space-between", flexDirection:'row', marginTop:10, marginBottom:4}}>
  196. <Text style={styles.checkboxTextWrpr}>Alternative</Text>
  197. <Checkbox name='Alternative' style={{color:'#666', borderWidth: 1}} onChange={(room_category,checked) => this.CheckRoom(room_category, checked)}/>
  198. </View>
  199. </Card.Body>
  200. </Card>
  201. </View>
  202.  
  203. <View>
  204. <Text style={{flexDirection:'row',fontSize:15,marginTop:10,fontFamily:'Lato-Regular',color:'#666'}}>Price Range</Text>
  205. <Card style={{margin:0, marginTop:10, paddingTop:10, paddingBottom:5,shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8, paddingRight:10, paddingLeft:10}}>
  206. <Card.Body>
  207.  
  208. <RadioButtons
  209. options={ options }
  210. onSelection={ setSelectedOption.bind(this) }
  211. selectedOption={this.state.selectedOption }
  212. renderOption={ renderOption }
  213. renderContainer={ renderContainer }
  214. />
  215. </Card.Body>
  216. </Card>
  217. </View>
  218.  
  219. <View style={styles.propertyWrpr}>
  220. <Text style={styles.mainTextWrpr}>Property Type</Text>
  221. <Card style={{margin:0, marginTop:10, paddingTop:10, paddingBottom:10, shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8, paddingRight:10, paddingLeft:10}}>
  222. <Card.Body>
  223. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  224. <Text style={styles.checkboxTextWrpr}>Home stay</Text>
  225. <Checkbox name='Home stay'style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  226. </View>
  227. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  228. <Text style={styles.checkboxTextWrpr}>Apartment</Text>
  229. <Checkbox name='Apartment' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  230. </View>
  231. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  232. <Text style={styles.checkboxTextWrpr}>Hotel</Text>
  233. <Checkbox name='Hotel' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  234. </View>
  235. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  236. <Text style={styles.checkboxTextWrpr}>Hostel</Text>
  237. <Checkbox name='Hostel' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  238. </View>
  239. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  240. <Text style={styles.checkboxTextWrpr}>Villa</Text>
  241. <Checkbox name='Villa' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  242. </View>
  243. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  244. <Text style={styles.checkboxTextWrpr}>Guest House</Text>
  245. <Checkbox name='Guest House' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  246. </View>
  247. <View style={{justifyContent:"space-between", flexDirection:'row', marginBottom:10}}>
  248. <Text style={styles.checkboxTextWrpr}>Motor Home</Text>
  249. <Checkbox name='Motor Home' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  250. </View>
  251. <View style={{justifyContent:"space-between", flexDirection:'row'}}>
  252. <Text style={styles.checkboxTextWrpr}>Bungalow</Text>
  253. <Checkbox name='Bungalow' style={{color:'#666', borderWidth: 1}} onChange={(property_type,checked) => this.Check(property_type, checked)}/>
  254. </View>
  255. </Card.Body>
  256. </Card>
  257. </View>
  258.  
  259. <View style={styles.propertyWrpr}>
  260. <Text style={styles.mainTextWrpr}>Ameneties</Text>
  261. <Card style={{margin:0, marginTop:10, shadowColor:"#ccc", shadowOffset:{width:1, height:1}, shadowOpacity:0.8, paddingRight:10, paddingLeft:10, paddingTop:10}}>
  262. <Card.Body>
  263.  
  264. <ListView
  265. dataSource={this.state.Ameneties_Array}
  266. renderRow={(rowData) => this.renderRow(rowData)}
  267. navigator={this.props.navigator}
  268.  
  269. />
  270.  
  271. </Card.Body>
  272. </Card>
  273. </View>
  274.  
  275.  
  276. </View>
  277. </ScrollView>
  278. </View>
  279. );
  280.  
  281.  
  282. }
  283.  
  284.  
  285.  
  286.  
  287.  
  288. }
  289.  
  290.  
  291. const styles = StyleSheet.create({
  292. slider: {
  293. height: 5,
  294. margin: 10,
  295. },
  296. mainWraprFilter:{
  297. // padding:20,
  298. paddingLeft:20,
  299. paddingRight:20,
  300. paddingBottom:40
  301. },
  302. roomTypeWrpr:{
  303. marginBottom:15,
  304. marginTop:10
  305. },
  306. mainCheckboxWrpr:{
  307. shadowColor:"#ddd",
  308. shadowOffset:{width:2, height:2},
  309. shadowOpacity:0.8,
  310. paddingTop:5,
  311. paddingRight:15,
  312. paddingLeft:15,
  313. marginTop:20
  314. },
  315. sliderWrapr:{
  316. shadowColor:"#ddd",
  317. shadowOffset:{width:2, height:2},
  318. shadowOpacity:0.8,
  319. paddingTop:5,
  320. paddingRight:15,
  321. paddingLeft:15,
  322. marginTop:20,
  323. paddingBottom:10,
  324. },
  325. mainTextWrpr:{
  326. flexDirection:'row',
  327. fontSize:15,
  328. marginTop:20,
  329. fontFamily:'Lato-Regular',
  330. color:'#666'
  331. },
  332. roomTypeFilterWrpr:{
  333. flexDirection:'row'
  334. },
  335. checkBoxWrpr:{
  336.  
  337. flexDirection:'row',
  338. alignItems:'flex-end',
  339. marginBottom:5,
  340. },
  341. 'checkBoxWrpr:last-child':{
  342. marginBottom:0,
  343. },
  344. checkboxTextWrpr:{
  345. flexDirection:'row',
  346. color:'#666',
  347. fontSize:14,
  348. fontFamily:'Lato-Light',
  349. marginTop:2
  350. },
  351.  
  352. checkBoxNative:{
  353. flexDirection:'row',
  354. },
  355. priceWrpr:{
  356. marginBottom:5
  357. },
  358. propertyWrpr:{
  359. },
  360. amenty:{
  361. justifyContent:"space-between",
  362. flexDirection:'row',
  363. marginBottom:10
  364. },
  365.  
  366.  
  367. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!