I have the below code on my current component. The requirement is when a user enters the negative number it should convert to positive number and surrounded with braces. For example if a user enters -200 it should be converted to (200).

The current code is adding the brackets '(' when entered negative number but the negative symbol is not being removed.

I need help with how to remove the negative '-' symbol

const CurrencyFormat: React.FC<CurrencyFieldProps> = ({
  includePrefix,
  ...otherProps
}) => {
  const prefix: string | undefined =
    includePrefix === true || includePrefix === undefined ? '$' : undefined;
  return (
    <NumberFormat
      autoComplete="off"
      thousandSeparator
      isNumericString
      prefix={Number(otherProps.value) < 0 ? `(${prefix || ''}` : prefix}
      suffix={Number(otherProps.value) < 0 ? ')' : ''}
      decimalScale={2}
      fixedDecimalScale
      allowNegative
      isAllowed={(values) => {
        const { formattedValue, floatValue } = values;
        return formattedValue === '' || floatValue <= MAX_CURRENCY_NUMBER;
      }}
      {...otherProps}
    />
  );
};

/// <reference types="react" />

//exclude types from the InputHTMLAttributes
declare const {defaultValue, value, ...inputAttributes}: React.InputHTMLAttributes<HTMLInputElement>;
type InputAttributes = typeof inputAttributes;


declare module "react-number-format" {

  export interface NumberFormatState {
    value?: string;
    numAsString?: string;
  }

  export interface NumberFormatValues {
    floatValue: number;
    formattedValue: string;
    value: string;
  }

  export type FormatInputValueFunction = (inputValue: string) => string;

  export interface SyntheticInputEvent
    extends React.SyntheticEvent<HTMLInputElement> {
    readonly target: HTMLInputElement;
    data: any;
  }

  export interface NumberFormatProps
    extends InputAttributes {
    thousandSeparator?: boolean | string;
    decimalSeparator?: boolean | string;
    thousandsGroupStyle?: 'thousand' | 'lakh' | 'wan';
    decimalScale?: number;
    fixedDecimalScale?: boolean;
    displayType?: 'input' | 'text';
    prefix?: string;
    suffix?: string;
    format?: string | FormatInputValueFunction;
    removeFormatting?: (formattedValue: string) => string;
    mask?: string | string[];
    value?: number | string;
    defaultValue?: number | string;
    isNumericString?: boolean;
    customInput?: React.ComponentType<any>;
    allowNegative?: boolean;
    allowEmptyFormatting?: boolean;
    onValueChange?: (values: NumberFormatValues) => void;
    /**
     * these are already included in React.HTMLAttributes<HTMLInputElement>
     * onKeyDown: Function;
     * onm ouseUp: Function;
     * onChange: Function;
     * onFocus: Function;
     * onBlur: Function;
     */
    type?: 'text' | 'tel'  | 'password';
    isAllowed?: (values: NumberFormatValues) => boolean;
    renderText?: (formattedValue: string) => React.ReactNode;
    getInputRef?: ((el: HTMLInputElement) => void) | React.Ref<any>;
    allowedDecimalSeparators?: Array<string>;
    [key: string]: any;
  }

  class NumberFormat extends React.Component<NumberFormatProps, any> {}
  export default NumberFormat;
}

CodePudding user response：

Try this

prefix={Number(otherProps.value) < 0 ? `(${-prefix || ''}` : prefix}

CodePudding user response：

Why dont you destructure the value prop like so?

const CurrencyFormat: React.FC<CurrencyFieldProps> = ({
  includePrefix,
  value,
  ...otherProps
}) => {
  const prefix: string | undefined =
    includePrefix === true || includePrefix === undefined ? '$' : undefined;
  return (
    <NumberFormat
      autoComplete="off"
      thousandSeparator
      isNumericString
      prefix={Number(value) < 0 ? `(${prefix || ''}` : prefix}
      suffix={Number(value) < 0 ? ')' : ''}
      decimalScale={2}
      fixedDecimalScale
      allowNegative
      isAllowed={(values) => {
        const { formattedValue, floatValue } = values;
        return formattedValue === '' || floatValue <= MAX_CURRENCY_NUMBER;
      }}
      value={String(Math.abs(Number(value)))} // Make it positive
      {...otherProps}
    />
  );
};

Check this link.