ar-design/dist/components/form/input/phone/Phone.js

AR Design is a (react | nextjs) ui library.

"use client";
import React, { useEffect, useRef, useState } from "react";
import Input from "..";
import Select from "../../select";
import PHONE from "../../../../libs/infrastructure/shared/PHONE";
const Phone = ({ variant, color, options, values, onSelected, validation, ...attributes }) => {
    // refs
    const _input = useRef(null);
    // states
    const [_value, setValue] = useState("");
    const [selected, setSelected] = useState(undefined);
    // methods
    const handleClick = () => {
        const input = _input.current;
        if (!input)
            return;
        const caret = input.selectionStart ?? 0;
        input.setSelectionRange(caret, caret + 1);
    };
    // useEffects
    useEffect(() => {
        setValue(values.value);
        setSelected(options?.find((option) => option.value === values.option));
    }, [values]);
    return (React.createElement("div", { className: "ar-input-phone-wrapper" },
        options && (React.createElement(Select, { style: { width: 130 }, variant: "outlined", color: "light", options: options, value: selected, onChange: (option) => {
                onSelected?.(option);
                setSelected(option);
            } })),
        React.createElement(Input, { ref: _input, ...attributes, ...(!options ? { style: { borderRadius: "var(--border-radius-sm)" } } : {}), variant: variant, color: color, value: PHONE.FormatByMask(selected?.value, _value), type: "tel", inputMode: "decimal", onChange: (event) => {
                if (attributes.disabled)
                    return;
                (() => {
                    if (attributes.onChange) {
                        const { id, name, value, type, dataset } = event.target;
                        attributes.onChange({
                            ...event,
                            target: {
                                ...event.target,
                                id: id,
                                name: name,
                                value: value,
                                type: type,
                                dataset: dataset,
                            },
                        });
                    }
                })();
            }, onClick: handleClick, validation: validation })));
};
export default Phone;