cascnauipackages/lib/src/customSegmentControl/TitledSegment.js

Repo for Common Components for CASCNA

/* Imports for React, React-Native and relative file imports */

import React, { Component } from 'react';
import {
  View,
  ViewPropTypes,
  TouchableOpacity,
  Text,
  TextInput,
} from 'react-native';
import _ from 'lodash';
import PropTypes from 'prop-types';
import MaterialIcon from '../materialIcon';
import styles from './styles';
import STRING_CONSTANTS from '../../constants/stringConstants';
import MATERIAL_ICONS from '../../constants/imageConstants';
import PriceStepper from '../priceStepper';
import COLOR_CONSTANTS from '../../constants/colorConstants';

/**
 * This class is used to show bid box for future, flat and basic price.
 *
 * @export
 * @class TitledSegment
 * @extends {Component}
 */
export default class TitledSegment extends Component {
  /**
   * Creates an instance of TitledSegment.
   * @param {*} props
   * @memberof TitledSegment
   */
  constructor(props) {
    super(props);
    const { index } = props;
    this.state = { index };
  }

  /**
   * This method is called on user tapping on stepper button to increase/decrease bid value.
   *
   * @memberof TitledSegment
   */
  textChanged = (step) => {
    const {
      textChangedAtIndex,
      canGoNegiative,
      subTitle,
      startValue,
    } = this.props;
    const { index } = this.state;
    let priceValue = _.ceil(subTitle, 4);
    priceValue += step;
    const updatedValue = `${priceValue.toFixed(4)}`;
    const updatedValueNum = _.ceil(updatedValue, 4);
    const subTitleNum = _.ceil(startValue, 4);
    if (!canGoNegiative || updatedValueNum >= subTitleNum) {
      textChangedAtIndex(index, updatedValue);
    }
  }

  /**
   * This method is used to render lock or stepper view below the price box.
   *
   * @memberof TitledSegment
   */
  renderBottomView = () => {
    const {
      isLocked,
      isEnabled,
    } = this.props;
    const {
      iconStyle,
      lockIconContainer,
      stepper,
      emptyLock,
    } = styles;
    const {
      LOCK,
    } = MATERIAL_ICONS;
    /*
    isLocaked: Show lock icon, user can see price but not able to edit it.
    isEnabled: Show price stepper, User can see price and can edit using stepper.
    Otherwise user can not see price, stepper and lock on screen.
    */
    if (isLocked) {
      return (
        <View style={lockIconContainer}>
          <MaterialIcon
            name={LOCK}
            size={iconStyle.size}
            color={iconStyle.color}
          />
        </View>
      );
    }
    if (isEnabled) {
      return (
        <PriceStepper
          stepVisible={false}
          borderVisible={false}
          enabled
          stepperSelected={this.textChanged}
          width={112}
          step={0.25}
          stepperControl={stepper}
        />
      );
    }
    return (<View style={emptyLock} />);
  }

  /**
   * This is input method for rendering UI.
   *
   * @returns
   * @memberof TitledSegment
   */
  render() {
    const {
      titleText,
      subTitleText,
      firstRowStyle,
      segment,
      removeIconStyle,
      borderedSegment,
      titleSegmentContainer,
    } = styles;
    const {
      isEnabled,
      title,
      titleTextStyle,
      subTitleTextStyle,
      enabledSegmentStyle,
      disabledSegmentStyle,
      width,
      applyBorder,
      subTitle,
    } = this.props;
    const {
      REMOVE,
    } = MATERIAL_ICONS;

    const {
      WHITE,
      NO_PRICE_BID,
    } = COLOR_CONSTANTS;

    let segmentStyle = (isEnabled
      ? (enabledSegmentStyle || [segment, { backgroundColor: WHITE }])
      : (disabledSegmentStyle || segment));
    segmentStyle = [segmentStyle, { width }];
    return (
      <TouchableOpacity
        accessible={false}
        style={segmentStyle}
        disabled={!isEnabled}
        activeOpacity={1}
      >
        {width > 0 ? (
          <View style={{ flexDirection: 'row' }}>
            <View style={titleSegmentContainer}>
              <View style={firstRowStyle}>
                <Text style={titleTextStyle || titleText}>
                  {title}
                </Text>
              </View>
              {subTitle !== null && subTitle.length > 0 ? (
                <TextInput
                  editable={false}
                  style={subTitleTextStyle || subTitleText}
                  value={subTitle}
                />
              ) : (
                <MaterialIcon
                  name={REMOVE}
                  color={NO_PRICE_BID}
                  size={removeIconStyle.size}
                />
              )}
              { this.renderBottomView()}
            </View>
            {applyBorder ? <View style={borderedSegment} /> : null}
          </View>
        ) : null}
      </TouchableOpacity>
    );
  }
}

/* PropsTypes assignments */

TitledSegment.propTypes = {
  index: PropTypes.number,
  isLocked: PropTypes.bool,
  isEnabled: PropTypes.bool,
  title: PropTypes.string,
  subTitle: PropTypes.string,
  startValue: PropTypes.string,
  textChangedAtIndex: PropTypes.func,
  titleTextStyle: ViewPropTypes.style,
  subTitleTextStyle: ViewPropTypes.style,
  enabledSegmentStyle: ViewPropTypes.style,
  disabledSegmentStyle: ViewPropTypes.style,
  applyBorder: PropTypes.bool,
  canGoNegiative: PropTypes.bool,
  width: PropTypes.number,
};

/* Default Props */
TitledSegment.defaultProps = {
  index: 0,
  isLocked: true,
  isEnabled: false,
  title: STRING_CONSTANTS.EMPTY,
  subTitle: STRING_CONSTANTS.EMPTY,
  startValue: STRING_CONSTANTS.EMPTY,
  textChangedAtIndex: () => {},
  titleTextStyle: null,
  subTitleTextStyle: null,
  enabledSegmentStyle: null,
  disabledSegmentStyle: null,
  canGoNegiative: false,
  applyBorder: false,
  width: 0,
};