cascnauipackages/App.js

Repo for Common Components for CASCNA

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
  ScrollView,
  StyleSheet,
  Alert,
  Text,
  KeyboardAvoidingView,
} from 'react-native';
import STRING_CONSTANTS from './lib/constants/stringConstants';
import Title from './lib/src/title';
import Segmentcontrol from './lib/src/segmentControl';
import TextField from './lib/src/textField';
import RangeSlider from './lib/src/slider';
import CustomDropDown from './lib/src/dropDown';
import HeaderText from './lib/src/headerText';
import AddressText from './lib/src/addressText';
import ExpandIcon from './lib/src/expandIcon';
import ListPicker from './lib/src/listPicker';
import SegmentTabControl from './lib/src/segmentTabControl';
import CustomSegmentControl from './lib/src/customSegmentControl';
import Timer from './lib/src/timer';
import PriceStepper from './lib/src/priceStepper';
import DocumentTitle from './lib/src/documentTitle';
import TnCDocumentName from './lib/src/TnCDocumentName';

const data = require('./testData/customSegmentData.json').items;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    margin: 60,
  },
  textStyle: {
    fontSize: 20,
    textAlign: 'center',
    height: 60,
    backgroundColor: 'white',
    borderColor: 'gray',
    borderWidth: 2,
    paddingTop: 15,
  },
});


export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { time: 0, gradeSelected: 0 };
  }

  showSegmentValues = () => {
    const { values } = this.priceSegmentControl.state;
    Alert.alert(`Segment Values are ${values}`);
  }

  setRefForScrollView = (ref) => {
    this.scrollView = ref;
  }

  render() {
    const { time, gradeSelected } = this.state;
    const { textStyle } = styles;
    return (
      <KeyboardAvoidingView style={{ flex: 1 }} behavior={'padding'} enabled>
        <ScrollView
          style={styles.container}
          ref={this.setRefForScrollView}
        >
          <Title title={'Commodity'} />
          <ListPicker pickerButtonStyle={{ width: 300 }} value={'I am testing list picker control with long text value'} />
          <ListPicker pickerButtonStyle={{ width: 300 }}>
            <Text>{'Nested Picker'}</Text>
          </ListPicker>
          <Title title={'Grade'} />
          <Segmentcontrol
            options={['01', '02']}
            grade={gradeSelected}
            enabled
            gradeSelected={index => this.setState({ gradeSelected: index })}
          />
          <PriceStepper
            stepVisible={false}
            borderVisible={false}
            enabled
          />
          <Title title={'Seller'} textStyle={{ color: 'green' }} />
          <Title title={'Error'} type={'error'} />
          <Title title={'Error'} subTitle={'subTitle'} />
          <TextField placeHolder={'Select a Seller'} value={'Govind'} textInputStyle={{ width: 500 }} />
          <RangeSlider />
          <CustomDropDown
            options={[{ key: 'PRICED' }, { key: 'NBE' }, { key: 'UNPRICED_BASIS' }, { key: 'PRICED1' }, { key: 'NBE1' }, { key: 'UNPRICED_BASIS1' }, { key: 'PRICED2' }, { key: 'NBE2' }, { key: 'UNPRICED_BASIS2' }]}
            value={'PRICED'}
            dropIconEnable
            displayKey={'key'}
          />
          <DocumentTitle title={'Document Name'} />
          <TnCDocumentName title={'Buyer\'s Call'} />
          <HeaderText title={'Advance Contract Settings'} />
          <AddressText title={'Omaha, Nebraska'} />
          <ExpandIcon name={STRING_CONSTANTS.EXPANDLESSICON} />
          <ExpandIcon name={STRING_CONSTANTS.EXPANDMOREICON} />
          <SegmentTabControl
            tabs={['Priced', 'NBE', 'Unpriced Basis']}
            selectTab={(index) => {
              Alert.alert((`Tab selected at ${index}`));
            }}
          />
          <CustomSegmentControl
            data={data}
            onRef={(priceSegmentControl) => {
              this.priceSegmentControl = priceSegmentControl;
            }}
          />
          <Text
            style={textStyle}
            onPress={this.showSegmentValues}
          >
            Click to Get Custom Segment Values
          </Text>
          <Text
            style={textStyle}
            onPress={() => {
              this.setState({ time: 30 });
            }}
          >
          Start Timer
          </Text>
          <Timer
            timerStyle={textStyle}
            time={time}
            interval={1000}
            date="00:00"
            onRef={(timer) => {
              this.timer = timer;
            }}
          />
          <Text
            style={textStyle}
            onPress={() => {
              // this.timer.stopTimer();
              this.setState({ time: 0 });
            }}
          >
          Stop Timer
          </Text>
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}