@navinc/base-react-components/src/_deprecated/percent-input/index.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import { Err, Errors, Field, FieldWrapper, Helper, Label, PercentInput } from '../../form-elements/shared.js'
import Copy from '../../copy.js'
import { deprecationWarning } from '@navinc/utils'

const PercentInputField = ({
  className,
  label,
  value,
  required,
  type,
  hasSpaceForErrors,
  helperText,
  isInvalid,
  errors = [],
  lede = '',
  ...props
}) => {
  deprecationWarning(
    true,
    `PercentInput has been deprecated and will be removed in a future version. Please refactor all uses to use vanilla-masker's \`toPattern\` function instead.`
  )
  return (
    <FieldWrapper className={className}>
      {lede && <Copy bold>{lede}</Copy>}
      <Field isInvalid={isInvalid} isVisited value={value} required={required} type={type}>
        <PercentInput
          isInvalid={isInvalid}
          value={value != null ? value : undefined}
          thousandSeparator=","
          decimalScale={0}
          allowNegative={false}
          suffix="%"
          format="###%"
          required={required}
          placeholder="%"
          {...props}
        />
        <Label required={required} value={value}>
          {label}
        </Label>
      </Field>
      {helperText && <Helper hasSpaceForHelper={hasSpaceForErrors} helperText={helperText} />}
      <Errors hasSpaceForErrors={hasSpaceForErrors}>
        {!!errors.length && errors.map((err, i) => <Err key={`err-${i}`}>{err}</Err>)}
      </Errors>
    </FieldWrapper>
  )
}

export default styled(PercentInputField)``
export { PercentInputField }