Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import { connect } from 'react-redux';
- import { View, Text, StyleSheet, TouchableOpacity, ScrollView, FlatList } from 'react-native';
- import COLORS from '../utils/colors';
- import IMAGES from '../utils/images';
- import LabelCard from '../components/LabelCard';
- import ButtonWithBackground from '../components/ButtonWithBackground';
- import SubjectModal from './SubjectModal';
- import AddLabel from './AddLabel';
- import I18n from '../utils/strings';
- import LinearGradient from 'react-native-linear-gradient';
- import BoxView from '../components/BoxView';
- class SubjectTab extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- showModal: false,
- labels: [
- {
- title: 'Alergeens',
- description: 'At vim iudico vivendo, ex ius ornatus molestie vituperatoribus.Ius legimus alienum suscipit ei, ridens delectus an ius, at pro suas accusam.'
- },
- {
- title: 'Nutrition facts',
- backgroundImage: IMAGES.NUTRITION_LABEL,
- },
- {
- title: 'Granada',
- description: 'At vim iudico vivendo, ex ius ornatus molestie vituperatoribus.Ius legimus alienum suscipit ei, ridens delectus an ius, at pro suas accusam.'
- }
- ],
- itemSelected: null,
- selectedIndex: -1,
- }
- }
- labelSubmitHandler = (title, description, backgroundImage) => {
- if (title.trim() === "") {
- return;
- }
- if (description.trim() === "") {
- return;
- }
- this.setState(prevState => {
- return {
- labels: prevState.labels.concat({ title, description, backgroundImage })
- }
- })
- };
- itemSelectHandler = (index) => {
- this.setState(prevState => {
- return {
- itemSelected: prevState.labels[index],
- selectedIndex: index
- };
- });
- };
- togglePositionForward = () => {
- let index = this.state.selectedIndex;
- if (index < this.state.labels.length - 1) {
- this.setState(prevState => {
- return {
- selectedIndex: index + 1
- };
- });
- }
- };
- getSelectedItem = () => this.state.selectedIndex < 0 ? null : this.state.labels[this.state.selectedIndex];
- togglePositionBackward = () => {
- let index = this.state.selectedIndex;
- if ((index > 0) && (index <= this.state.labels.length)) {
- this.setState(prevState => {
- return {
- itemSelected: prevState.labels[index - 1],
- selectedIndex: index - 1
- };
- });
- }
- };
- toggleModalHandler = () => {
- this.setState({
- selectedIndex: -1
- });
- };
- addLabelPressed = () => {
- this.setState({ showModal: true });
- }
- render() {
- const labelsOuput = this.state.labels.map((label, index) => (
- <LabelCard
- title={label.title}
- description={label.description}
- backgroundImage={label.backgroundImage}
- onItemPressed={this.itemSelectHandler.bind(this)}
- key={index}
- />
- ));
- const { data = {} } = this.props;;
- // extracting the key:value pairs for the scn data.
- var dataArray = new Array();
- for (var key in data.labels.columns) {
- dataArray.push(key);
- }
- var temp = " ";
- var searchedStr = dataArray.filter(function (name) {
- temp = name.substr(0, name.indexOf('.')).localeCompare("scn") && name.substr(0, name.indexOf('.')).localeCompare("sub") === 0;
- return temp
- });
- var results = searchedStr.map(function (key) {
- var val = key.split('.');
- var newVal = (val.splice(val.length - 1, 1));
- return newVal[0];
- });
- var indexToRemove = 0;
- results.splice(indexToRemove, 2)
- var contenScn = results.map((item, index) => {
- return {
- title: item.toUpperCase(),
- value: data.labels.columns['scn.' + item] || data.labels.columns['sub.' + item] || data.labels.columns['sub.nutrition facts.' + item]
- }
- })
- var contentScnObj = contenScn.map((item, index) => {
- return (
- <BoxView
- title={item.title}
- value={item.value}
- key={index}
- />
- )
- })
- return (
- <View style={styles.container}>
- <SubjectModal
- itemSelected={this.getSelectedItem()}
- closeModal={this.toggleModalHandler.bind(this)}
- forwardModal={this.togglePositionForward.bind(this)}
- backwardModal={this.togglePositionBackward.bind(this)}
- />
- <View style={{ flex: 0.5}}>
- <View style={styles.labelsRow}>
- {contenScn.length > 0 ?
- <FlatList
- data={contentScnObj}
- numColumns={3}
- horizontals={false}
- keyExtractor={(item, index) => index.toString()}
- renderItem={({ item, index }) => (item)}
- /> :
- <Text>no Value </Text>
- }
- </View>
- </View>
- <View tyle={{ flex: 0.3}}>
- <View style={styles.labelsSection}>
- <Text style={styles.dataText}>LABELS </Text>
- <View style={styles.labelsRow}>
- {this.state.labels.length > 0 ?
- <FlatList
- style={{ marginTop: 10, marginBottom: 10 }}
- data={labelsOuput}
- horizontal
- keyExtractor={(item, index) => index.toString()}
- renderItem={({ item, index }) => (item)}
- />
- :
- <Text style={styles.dataText}>No labels registered</Text>
- }
- </View>
- </View>
- </View>
- <LinearGradient
- colors={['transparent', 'rgba(0,0,0,0.3)']}
- style={{ height: 20, bottom: -20, marginLeft: -20, marginRight: -20, }}
- />
- <LinearGradient
- colors={[COLORS.BACKGROUND_LIGHT, '#353746']}
- style={styles.bottomBar}
- start={{ x: 0.0, y: 0.0 }} end={{ x: 1.0, y: 0.0 }}
- locations={[0, 0.5]}
- >
- <View style={styles.buttonView}>
- <ButtonWithBackground
- label={I18n.t('EDIT')} />
- </View>
- <View style={styles.buttonView}>
- <ButtonWithBackground
- label={I18n.t('ADD_NEW')}
- onPress={this.addLabelPressed} />
- <AddLabel
- header={this.state.title}
- body={this.state.description}
- visible={this.state.showModal}
- closeModal={() => this.setState({ showModal: false })}
- submitLabel={this.labelSubmitHandler}
- />
- </View>
- </LinearGradient>
- </View>
- )
- }
- }
- export default SubjectTab;
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- flexDirection: 'column',
- },
- dataText: {
- fontSize: 14.4,
- color: 'white',
- lineHeight: 20
- },
- descriptionSection: {
- marginTop: 18,
- flexDirection: 'column'
- },
- labelsSection: {
- marginTop: 20,
- flexDirection: 'column'
- },
- labelsRow: {
- flexDirection: 'row',
- justifyContent: 'space-between'
- },
- bottomBar: {
- height: 63,
- bottom: -20,
- marginLeft: -20,
- marginRight: -20,
- padding: 14,
- flexDirection: 'row',
- justifyContent: 'flex-end',
- alignItems: 'center',
- backgroundColor: '#353746'
- },
- buttonView: {
- marginLeft: 7,
- marginRight: 7
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement