@selfcommunity/react-ui/lib/cjs/shared/UrlTextField/index.js

React UI Components to integrate a Community created with SelfCommunity Platform.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styles_1 = require("@mui/material/styles");
const material_1 = require("@mui/material");
const react_intl_1 = require("react-intl");
const messages = (0, react_intl_1.defineMessages)({
    urlError: {
        id: 'ui.common.error.url',
        defaultMessage: 'ui.common.error.url'
    }
});
const PREFIX = 'SCUrlTextField';
const Root = (0, styles_1.styled)(material_1.TextField, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({}));
const URL_REGEX = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
const UrlTextField = (props) => {
    // PROPS
    const { onChange, error = false, helperText = null } = props, rest = tslib_1.__rest(props, ["onChange", "error", "helperText"]);
    // STATE
    const [errorMsg, setErrorMsg] = (0, react_1.useState)(null);
    // HOOKS
    const intl = (0, react_intl_1.useIntl)();
    // HANDLERS
    const handleChange = (event) => {
        if (event.target.value && !URL_REGEX.test(event.target.value)) {
            setErrorMsg(intl.formatMessage(messages.urlError));
        }
        else if (error !== null) {
            setErrorMsg(null);
        }
        onChange && onChange(event);
    };
    // RENDER
    return (0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { onChange: handleChange, error: Boolean(errorMsg) || error, helperText: errorMsg || helperText }));
};
exports.default = UrlTextField;