@nouance/payload-better-fields-plugin/dist/fields/Pattern/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 { FieldError as Error, FieldDescription, FieldLabel, RenderCustomComponent, useField } from '@payloadcms/ui';
import React, { useCallback } from 'react';
import { PatternFormat } from 'react-number-format';
import './styles.css';
export const PatternComponent = (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 classes = [
        'field-type',
        'text',
        className,
        showError && 'error',
        readOnly && 'read-only',
        'container'
    ].filter(Boolean).join(' ');
    const formatValue = useCallback((value)=>{
        const prefix = config.prefix;
        if (type === 'number') {
            let cleanValue = value;
            if (prefix) {
                cleanValue = cleanValue.replaceAll(prefix, '');
            }
            cleanValue = parseFloat(cleanValue);
            return cleanValue;
        } else {
            return value;
        }
    }, [
        type,
        config.prefix
    ]);
    const isReadonly = readOnly || adminReadOnly;
    return /*#__PURE__*/ _jsxs("div", {
        className: `bfPatternFieldWrapper 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(PatternFormat, {
                        className: "patternInput",
                        id: `field-${path.replace(/\./g, '__')}`,
                        name: path,
                        onChange: (e)=>{
                            setValue(formatValue(e.target.value));
                        },
                        placeholder: typeof placeholder === 'string' ? placeholder : '',
                        readOnly: isReadonly,
                        required: config.required,
                        value: value,
                        ...config
                    }),
                    /*#__PURE__*/ _jsx(Error, {
                        message: errorMessage ?? '',
                        showError: showError
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(RenderCustomComponent, {
                CustomComponent: Description,
                Fallback: /*#__PURE__*/ _jsx(FieldDescription, {
                    className: `field-description-${path.replace(/\./g, '__')}`,
                    description: description ?? '',
                    path: path
                })
            }),
            AfterInput
        ]
    });
};

//# sourceMappingURL=Component.js.map