@nouance/payload-better-fields-plugin/dist/fields/Telephone/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 'react-phone-number-input/style.css';
import { FieldDescription, FieldLabel, RenderCustomComponent, useField } from '@payloadcms/ui';
import { useCallback } from 'react';
import PhoneInput from 'react-phone-number-input';
export const TelephoneComponent = (props)=>{
    const { config, field, path, readOnly, validate } = props;
    const { admin: { className, description, placeholder, readOnly: adminReadOnly, style, width } = {}, 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 } = {}, 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 isReadonly = Boolean(readOnly) || Boolean(adminReadOnly);
    return /*#__PURE__*/ _jsxs("div", {
        className: `bfTelephoneFieldWrapper field-type`,
        children: [
            /*#__PURE__*/ _jsx(RenderCustomComponent, {
                CustomComponent: Label,
                Fallback: /*#__PURE__*/ _jsx(FieldLabel, {
                    label: label,
                    path: path,
                    required: required
                })
            }),
            BeforeInput,
            /*#__PURE__*/ _jsx("div", {
                className: classes,
                children: /*#__PURE__*/ _jsx(PhoneInput, {
                    className: "telephoneInput",
                    id: `field-${path.replace(/\./g, '__')}`,
                    name: path,
                    onChange: (value)=>{
                        if (!value) {
                            setValue(undefined);
                        }
                        setValue(value);
                    },
                    placeholder: typeof placeholder === 'string' ? placeholder : '',
                    readOnly: isReadonly,
                    required: required,
                    style: {
                        width,
                        ...style
                    },
                    value: value,
                    ...config
                })
            }),
            /*#__PURE__*/ _jsx(RenderCustomComponent, {
                CustomComponent: Description,
                Fallback: /*#__PURE__*/ _jsx(FieldDescription, {
                    className: `field-description-${path.replace(/\./g, '__')}`,
                    description: description ?? '',
                    path: path
                })
            }),
            AfterInput
        ]
    });
};

//# sourceMappingURL=Component.js.map