{"size": 3071, "ext": "js", "max_stars_repo_path": "src/components/CostInput/CostInput.js", "max_stars_repo_name": "dwong-brighter/bc-pst-aws-calc-reactjs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/CostInput/CostInput.js", "max_issues_repo_name": "dwong-brighter/bc-pst-aws-calc-reactjs", "max_issues_repo_issues_event_min_datetime": "2018-07-05T20:32:59.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T04:26:29.000Z", "max_forks_repo_path": "src/components/CostInput/CostInput.js", "max_forks_repo_name": "dwong-brighter/bc-pst-aws-calc-reactjs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 11, "max_forks_count": null, "avg_line_length": 26.0254237288, "max_line_length": 76, "alphanum_fraction": 0.6385542169}
import React, { useState } from 'react';
import NumberFormat from 'react-number-format';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/styles';
import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    width: '100%',
  },
  currencyAmountField: {
    margin: '0.5rem',
    minWidth: '20rem',
  }
});

/**
 * Formatter for a text field to become a currency field.
 * 
 * @param {*} props 
 */
function NumberFormatCurrency (props) {
  const { currencyCode, inputRef, onChange, ...other } = props;

  return (
    <NumberFormat
      {...other}
      getInputRef={inputRef}
      onValueChange={values => {
        onChange({
          target: {
            value: values.value,
          },
        });
      }}
      prefix="$"
      thousandSeparator
      decimalScale={2}
      fixedDecimalScale
      suffix={' ' + currencyCode}
    />
  );
}

NumberFormatCurrency.propTypes = {
  currencyCode: PropTypes.string.isRequired,
  inputRef: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
};

function CostInput(props) {
  const {
    name,
    description,
    currencyCode,
    initialMainAmount,
    initialCadRounding,
    onMainAmountChange,
    onCadRoundingChange,
  } = props;

  const classes = useStyles();

  const [mainAmount, setMainAmount] = useState(initialMainAmount);
  const [cadRounding, setCadRounding] = useState(initialCadRounding);

  let cadRoundingName = name + 'CadRounding';
  return (
    <Box className={classes.container}>
      <TextField
        className={classes.currencyAmountField}
        label={description}
        value={mainAmount}
        onChange={(event) => {
          let newAmount = parseFloat(event.target.value);
          setMainAmount(newAmount); // update our state
          onMainAmountChange(newAmount); // update the app's state
        }}
        id={name}
        InputProps={{
          inputComponent: (props) =>
            <NumberFormatCurrency currencyCode={currencyCode} {...props} />,
        }}
      />
      <TextField
        className={classes.currencyAmountField}
        label="Rounding"
        value={cadRounding}
        onChange={(event) => {
          let newRounding = parseFloat(event.target.value);
          setCadRounding(newRounding); // update our state
          onCadRoundingChange(newRounding); // update the app's state
        }}
        id={cadRoundingName}
        InputProps={{
          inputComponent: (props) =>
            <NumberFormatCurrency currencyCode="CAD" {...props} />,
        }}
      />
    </Box>
  );
}

CostInput.propTypes = {
  name: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  currencyCode: PropTypes.string.isRequired,
  initialMainAmount: PropTypes.number.isRequired,
  initialCadRounding: PropTypes.number.isRequired,
  onMainAmountChange: PropTypes.func.isRequired,
  onCadRoundingChange: PropTypes.func.isRequired
};

export default CostInput;
