cascnauipackages/lib/src/customSegmentControl/index.js

Repo for Common Components for CASCNA

/* Index file for Segment control creation to be used in different components */

/* Imports files and packages */
import React, { Component } from 'react';
import { View, ViewPropTypes, FlatList } from 'react-native';
import PropTypes from 'prop-types';
import _ from 'lodash';
import styles from './styles';
import TitledSegment from './TitledSegment';

export default class CustomSegmentControl extends Component {
  /* Props assigemnts (constructor) */
  constructor(props) {
    super(props);
    const { data } = props;
    const values = data.map(d => d.subTitle);
    this.state = { itemWidth: 0, values };
  }

  /**
   * Verifying components mount correctly
   *
   * @memberof CustomSegmentControl
   */
  componentDidMount() {
    const { onRef } = this.props;
    if (onRef) {
      onRef(this);
    }
  }


  /**
   * Checking whether props are updated for further rendering
   *
   * @param {*} nextProps
   * @returns
   * @memberof CustomSegmentControl
   */
  shouldComponentUpdate(nextProps) {
    const { data } = this.props;
    if (nextProps.data !== data) {
      const values = nextProps.data.map(d => d.subTitle);
      this.setState({ values });
      return false;
    }
    return true;
  }


  /**
   * Checking the index of text changed to set the value for state
   *
   * @memberof CustomSegmentControl
   */
  textChangedAtIndex = (index, value) => {
    const { values } = this.state;
    const tempStore = [...values];
    tempStore[index] = value;
    if (index === 1 && tempStore[2] && tempStore[0]) {
      const updatedValue = (_.ceil(value, 4) + _.ceil(tempStore[0], 4)).toFixed(4);
      tempStore[2] = `${updatedValue}`;
    } else if (index === 0 && tempStore[2] && tempStore[1]) {
      const updatedValue = (_.ceil(value, 4) + _.ceil(tempStore[1], 4)).toFixed(4);
      tempStore[2] = `${updatedValue}`;
    }
    this.setState({ values: tempStore });
  };


  /**
   * Render Item method for class for rendering Titled Segments
   *
   * @memberof CustomSegmentControl
   */
  renderItem = (item, index, itemCount) => {
    const {
      titleTextStyle,
      subTitleTextStyle,
      enabledSegmentStyle,
      disabledSegmentStyle,
      data,
    } = this.props;

    const {
      itemWidth,
      values,
    } = this.state;

    const segmentValue = values[index];

    return (
      <TitledSegment
        key={index}
        index={index}
        isLocked={item.isLocked}
        isEnabled={item.isEnabled}
        canGoNegiative={item.canGoNegiative}
        title={item.title}
        subTitle={segmentValue}
        startValue={item.subTitle}
        textChangedAtIndex={this.textChangedAtIndex}
        titleTextStyle={titleTextStyle}
        subTitleTextStyle={subTitleTextStyle}
        width={itemWidth / itemCount}
        enabledSegmentStyle={enabledSegmentStyle}
        disabledSegmentStyle={disabledSegmentStyle}
        applyBorder={index !== data.length - 1}
      />
    );
  }

  keyExtractor = (_, index) => index.toString();


  /**
   * Render method of the class
   *
   * @returns
   * @memberof CustomSegmentControl
   */
  render() {
    const {
      children,
      data,
      containerStyle,
    } = this.props;
    const {
      innerContainer,
    } = styles;
    const { values } = this.state;
    return (
      <View>
        {children || (data && data.length > 0 ? (
          <FlatList
            onLayout={(event) => {
              const { width } = event.nativeEvent.layout;
              this.setState({ itemWidth: width });
            }}
            style={containerStyle || innerContainer}
            horizontal
            renderItem={({ item, index }) => this.renderItem(item, index, data.length)}
            data={data}
            extraData={values}
            keyExtractor={this.keyExtractor}
            scrollEnabled={false}
          />
        ) : null)}
      </View>
    );
  }
}

CustomSegmentControl.propTypes = {
  children: PropTypes.element,
  data: PropTypes.arrayOf(Object),
  containerStyle: ViewPropTypes.style,
  titleTextStyle: ViewPropTypes.style,
  subTitleTextStyle: ViewPropTypes.style,
  enabledSegmentStyle: ViewPropTypes.style,
  disabledSegmentStyle: ViewPropTypes.style,
  onRef: PropTypes.func,
};

CustomSegmentControl.defaultProps = {
  children: null,
  data: [],
  containerStyle: null,
  titleTextStyle: null,
  subTitleTextStyle: null,
  enabledSegmentStyle: null,
  disabledSegmentStyle: null,
  onRef: null,
};