Advertisement
Guest User

Untitled

a guest
May 25th, 2018
74
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.46 KB | None | 0 0
  1. import React, { Component } from 'react';
  2. import { connect } from 'react-redux';
  3. import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from 'react-native';
  4. import COLORS from '../utils/colors';
  5. import IMAGES from '../utils/images';
  6. import LabelCard from '../components/LabelCard';
  7. import ButtonWithBackground from '../components/ButtonWithBackground';
  8. import SubjectModal from './SubjectModal';
  9. import AddLabel from './AddLabel';
  10. import I18n from '../utils/strings';
  11. import LinearGradient from 'react-native-linear-gradient';
  12. import BoxView from '../components/BoxView';
  13.  
  14.  
  15. class SubjectTab extends React.Component {
  16.  
  17. constructor(props) {
  18. super(props);
  19.  
  20. this.state = {
  21. showModal: false,
  22. labels: [
  23. {
  24. title: 'Alergeens',
  25. description: 'At vim iudico vivendo, ex ius ornatus molestie vituperatoribus.Ius legimus alienum suscipit ei, ridens delectus an ius, at pro suas accusam.'
  26. },
  27. {
  28. title: 'Nutrition facts',
  29. backgroundImage: IMAGES.NUTRITION_LABEL,
  30. },
  31. {
  32. title: 'Granada',
  33. description: 'At vim iudico vivendo, ex ius ornatus molestie vituperatoribus.Ius legimus alienum suscipit ei, ridens delectus an ius, at pro suas accusam.'
  34. }
  35. ],
  36. itemSelected: null,
  37. selectedIndex: -1,
  38.  
  39. }
  40. }
  41.  
  42. labelSubmitHandler = (title, description, backgroundImage) => {
  43. if (title.trim() === "") {
  44. return;
  45. }
  46. if (description.trim() === "") {
  47. return;
  48. }
  49. this.setState(prevState => {
  50. return {
  51. labels: prevState.labels.concat({ title, description, backgroundImage })
  52. }
  53. })
  54. };
  55. itemSelectHandler = (index) => {
  56. this.setState(prevState => {
  57. return {
  58. itemSelected: prevState.labels[index],
  59. selectedIndex: index
  60. };
  61. });
  62. };
  63. togglePositionForward = () => {
  64. let index = this.state.selectedIndex;
  65. if (index < this.state.labels.length - 1) {
  66. this.setState(prevState => {
  67. return {
  68. selectedIndex: index + 1
  69. };
  70. });
  71. }
  72. };
  73. getSelectedItem = () => this.state.selectedIndex < 0 ? null : this.state.labels[this.state.selectedIndex];
  74. togglePositionBackward = () => {
  75. let index = this.state.selectedIndex;
  76. if ((index > 0) && (index <= this.state.labels.length)) {
  77. this.setState(prevState => {
  78. return {
  79. itemSelected: prevState.labels[index - 1],
  80. selectedIndex: index - 1
  81. };
  82. });
  83. }
  84. };
  85. toggleModalHandler = () => {
  86. this.setState({
  87. selectedIndex: -1
  88. });
  89. };
  90. addLabelPressed = () => {
  91. this.setState({ showModal: true });
  92. }
  93. render() {
  94. const labelsOuput = this.state.labels.map((label, index) => (
  95. <LabelCard
  96. title={label.title}
  97. description={label.description}
  98. backgroundImage={label.backgroundImage}
  99. onItemPressed={this.itemSelectHandler.bind(this)}
  100. key={index}
  101. />
  102. ));
  103.  
  104. const { data = {} } = this.props;;
  105. // extracting the key:value pairs for the scn data.
  106. var dataArray = new Array();
  107. for (var key in data.labels.columns) {
  108. dataArray.push(key);
  109. }
  110. var temp = " ";
  111. var searchedStr = dataArray.filter(function (name) {
  112. temp = name.substr(0, name.indexOf('.')).localeCompare("scn") && name.substr(0, name.indexOf('.')).localeCompare("sub") === 0;
  113. return temp
  114. });
  115. var results = searchedStr.map(function (key) {
  116. var val = key.split('.');
  117. var newVal = (val.splice(val.length - 1, 1));
  118. return newVal[0];
  119. });
  120. var indexToRemove = 0;
  121. results.splice(indexToRemove, 2)
  122. var contenScn = results.map((item, index) => {
  123. return {
  124. title: item.toUpperCase(),
  125. value: data.labels.columns['scn.' + item] || data.labels.columns['sub.' + item] || data.labels.columns['sub.nutrition facts.' + item]
  126. }
  127. })
  128. var contentScnObj = contenScn.map((item, index) => {
  129. return (
  130. <BoxView
  131. title={item.title}
  132. value={item.value}
  133. key={index}
  134. />
  135. )
  136. })
  137. return (
  138. <View style={styles.container}>
  139. <SubjectModal
  140. itemSelected={this.getSelectedItem()}
  141. closeModal={this.toggleModalHandler.bind(this)}
  142. forwardModal={this.togglePositionForward.bind(this)}
  143. backwardModal={this.togglePositionBackward.bind(this)}
  144. />
  145. <View style={{ flex: 0.5}}>
  146. <View style={styles.labelsRow}>
  147. {contenScn.length > 0 ?
  148. <FlatList
  149. data={contentScnObj}
  150. numColumns={3}
  151. horizontals={false}
  152. keyExtractor={(item, index) => index.toString()}
  153. renderItem={({ item, index }) => (item)}
  154. /> :
  155. <Text>no Value </Text>
  156. }
  157. </View>
  158. </View>
  159. <View tyle={{ flex: 0.3}}>
  160. <View style={styles.labelsSection}>
  161. <Text style={styles.dataText}>LABELS </Text>
  162. <View style={styles.labelsRow}>
  163. {this.state.labels.length > 0 ?
  164. <FlatList
  165. style={{ marginTop: 10, marginBottom: 10 }}
  166. data={labelsOuput}
  167. horizontal
  168. keyExtractor={(item, index) => index.toString()}
  169. renderItem={({ item, index }) => (item)}
  170. />
  171. :
  172. <Text style={styles.dataText}>No labels registered</Text>
  173. }
  174. </View>
  175. </View>
  176. </View>
  177. <LinearGradient
  178. colors={['transparent', 'rgba(0,0,0,0.3)']}
  179. style={{ height: 20, bottom: -20, marginLeft: -20, marginRight: -20, }}
  180. />
  181. <LinearGradient
  182. colors={[COLORS.BACKGROUND_LIGHT, '#353746']}
  183. style={styles.bottomBar}
  184. start={{ x: 0.0, y: 0.0 }} end={{ x: 1.0, y: 0.0 }}
  185. locations={[0, 0.5]}
  186. >
  187. <View style={styles.buttonView}>
  188. <ButtonWithBackground
  189. label={I18n.t('EDIT')} />
  190. </View>
  191. <View style={styles.buttonView}>
  192. <ButtonWithBackground
  193. label={I18n.t('ADD_NEW')}
  194. onPress={this.addLabelPressed} />
  195. <AddLabel
  196. header={this.state.title}
  197. body={this.state.description}
  198. visible={this.state.showModal}
  199. closeModal={() => this.setState({ showModal: false })}
  200. submitLabel={this.labelSubmitHandler}
  201. />
  202. </View>
  203. </LinearGradient>
  204. </View>
  205. )
  206. }
  207. }
  208.  
  209. export default SubjectTab;
  210. const styles = StyleSheet.create({
  211. container: {
  212. flex: 1,
  213. flexDirection: 'column',
  214. },
  215. dataText: {
  216. fontSize: 14.4,
  217. color: 'white',
  218. lineHeight: 20
  219. },
  220. descriptionSection: {
  221. marginTop: 18,
  222. flexDirection: 'column'
  223. },
  224. labelsSection: {
  225. marginTop: 20,
  226. flexDirection: 'column'
  227. },
  228. labelsRow: {
  229. flexDirection: 'row',
  230. justifyContent: 'space-between'
  231. },
  232. bottomBar: {
  233. height: 63,
  234. bottom: -20,
  235. marginLeft: -20,
  236. marginRight: -20,
  237. padding: 14,
  238. flexDirection: 'row',
  239. justifyContent: 'flex-end',
  240. alignItems: 'center',
  241. backgroundColor: '#353746'
  242. },
  243. buttonView: {
  244. marginLeft: 7,
  245. marginRight: 7
  246. }
  247. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement