react-autonumeric/dist/AutoNumericInput.js

AutoNumeric-Powered React Components. AutoNumeric is a powerful library that automatically format numbers and currencies. React-AutoNumeric brings that power to React.

import { jsx as _jsx } from "react/jsx-runtime";
import { AutoNumericComponent } from "./AutoNumericComponent.js";
/** React {@link JSX!IntrinsicElements.input} component integrated with {@link !AutoNumeric} and
 * permits interaction with a React state.
 *
 * @param options - Options of the component.
 * @param options.inputProps - Options passed to {@link JSX!IntrinsicElements.input}. Same as {@link
 * JSX!IntrinsicElements.input.props}.
 * @param options.autoNumericOptions - Options passed to {@link !AutoNumeric}. Same as {@link
 * AutoNumeric!Options}.
 * @param options.valueState - The state and state setter from the parent component to be passed
 * into this component.
 * @param options.valueState.state - The state from the parent component to be passed in.
 * @param options.valueState.stateSetter - The callback function that sets
 * `options.valueState.state`.
 * @returns The React component.
 */
export function AutoNumericInput({ inputProps, autoNumericOptions, valueState, }) {
    const stateProps = valueState !== undefined
        ? {
            value: valueState.state,
            // For input, it is required set value in onChange.
            onChange: (e) => {
                valueState.stateSetter(e.currentTarget.value);
                if (inputProps?.onChange !== undefined) {
                    inputProps.onChange(e);
                }
            },
            // Some autoNumeric options such as emptyInputBehavior='zero' would not function properly
            // without onBlur.
            onBlur: (e) => {
                valueState.stateSetter(e.currentTarget.value);
                if (inputProps?.onBlur !== undefined) {
                    inputProps.onBlur(e);
                }
            },
        }
        : {};
    return (_jsx(AutoNumericComponent, { element: "input", refKey: "ref", props: { ...inputProps, ...stateProps }, autoNumericOptions: autoNumericOptions, state: valueState?.state }));
}