@nouance/payload-better-fields-plugin/dist/fields/Number/Component.js

A Payload plugin that aims to provide improved fields for the admin panel

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { FieldDescription, FieldError, FieldLabel, RenderCustomComponent, useField } from '@payloadcms/ui';
import React, { useCallback } from 'react';
import { NumericFormat } from 'react-number-format';
import './styles.css';
export const NumberComponent = (props)=>{
    const { config, field, path, readOnly, validate } = props;
    const { type, admin: { className, description, placeholder, readOnly: adminReadOnly } = {}, label, required } = field;
    const memoizedValidate = useCallback((value, options)=>{
        if (typeof validate === 'function') {
            return validate(value, {
                ...options,
                required
            });
        }
    }, [
        validate,
        required
    ]);
    const { customComponents: { AfterInput, BeforeInput, Description, Label } = {}, errorMessage, setValue, showError, value } = useField({
        path,
        // @ts-expect-error - memoizedValidate is not typed
        validate: memoizedValidate
    });
    const { ...componentProps } = config;
    const formatValue = useCallback((value)=>{
        const prefix = componentProps.prefix;
        const suffix = componentProps.suffix;
        const thousandSeparator = componentProps.thousandSeparator;
        if (type === 'number') {
            let cleanValue = value;
            if (prefix) {
                cleanValue = cleanValue.replaceAll(prefix, '');
            }
            if (suffix) {
                cleanValue = cleanValue.replaceAll(suffix, '');
            }
            if (thousandSeparator) {
                cleanValue = typeof thousandSeparator === 'string' ? cleanValue.replaceAll(thousandSeparator, '') : cleanValue.replaceAll(',', '');
            }
            return cleanValue;
        } else {
            return value;
        }
    }, [
        type,
        componentProps
    ]);
    const classes = [
        'field-type',
        'text',
        className,
        showError && 'error',
        readOnly && 'read-only',
        'container'
    ].filter(Boolean).join(' ');
    const isReadonly = Boolean(readOnly) || Boolean(adminReadOnly);
    return /*#__PURE__*/ _jsxs("div", {
        className: `bfNumericFieldWrapper field-type`,
        children: [
            /*#__PURE__*/ _jsx(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsx(FieldLabel, {
                    label: label,
                    path: path,
                    required: required
                })
            }),
            BeforeInput,
            /*#__PURE__*/ _jsxs("div", {
                className: classes,
                children: [
                    /*#__PURE__*/ _jsx(FieldError, {
                        message: errorMessage ?? '',
                        showError: showError
                    }),
                    /*#__PURE__*/ _jsx(NumericFormat, {
                        className: "numberInput",
                        id: `field-${path.replace(/\./g, '__')}`,
                        name: path,
                        onChange: (e)=>{
                            setValue(formatValue(e.target.value));
                        },
                        placeholder: typeof placeholder === 'string' ? placeholder : '',
                        readOnly: isReadonly,
                        required: required,
                        value: value,
                        ...componentProps
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(RenderCustomComponent, {
                CustomComponent: Description,
                Fallback: /*#__PURE__*/ _jsx(FieldDescription, {
                    className: `field-description-${path.replace(/\./g, '__')}`,
                    description: description ?? '',
                    path: path
                })
            }),
            AfterInput
        ]
    });
};

//# sourceMappingURL=Component.js.map