@progress/sitefinity-nextjs-sdk
Version:
Provides OOB widgets developed using the Next.js framework, which includes an abstraction layer for Sitefinity communication. Additionally, it offers an expanded API, typings, and tools for further development and integration.
95 lines (94 loc) • 4.92 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useContext, useState } from 'react';
import { StylingConfig } from '../../styling/styling-config';
import { VisibilityStyle } from '../../styling/visibility-style';
import { classNames } from '../../../editor/utils/classNames';
import { FormContext } from '../../form/form-context';
import { getUniqueId } from '../../../editor/utils/getUniqueId';
export function ParagraphClient(props) {
const paragraphUniqueId = props.widgetContext.model.Properties.SfFieldName;
const paragraphErrorMessageId = getUniqueId('ParagraphErrorMessage', props.widgetContext.model.Id);
const paragraphInfoMessageId = getUniqueId('ParagraphInfo', props.widgetContext.model.Id);
let ariaDescribedByAttribute = '';
if (props.instructionalText) {
if (props.instructionalText) {
ariaDescribedByAttribute = `${paragraphUniqueId} ${paragraphErrorMessageId}`;
}
else {
ariaDescribedByAttribute = paragraphErrorMessageId;
}
}
const inputRef = React.useRef(null);
const [inputValue, setInputValue] = React.useState(props.predefinedValue || '');
const { formViewProps, sfFormValueChanged, dispatchValidity, hiddenInputs, skippedInputs, formSubmitted } = useContext(FormContext);
const isHidden = hiddenInputs[paragraphUniqueId];
const isSkipped = skippedInputs[paragraphUniqueId];
const [errorMessageText, setErrorMessageText] = useState('');
let delayTimer;
function dispatchValueChanged() {
clearTimeout(delayTimer);
delayTimer = setTimeout(function () {
sfFormValueChanged();
}, 300);
}
function setErrorMessage(_input, message) {
if (message) {
setErrorMessageText(message);
}
}
function clearErrorMessage() {
setErrorMessageText('');
}
const handleTextValidation = () => {
const target = inputRef.current;
const validationMessages = props.violationRestrictionsMessages;
const validationRestrictions = props.violationRestrictionsJson;
setInputValue(target.value);
if (validationRestrictions) {
let isValidLength = true;
if (validationRestrictions.minLength) {
isValidLength = target.value.length >= validationRestrictions.minLength;
}
if (isValidLength && validationRestrictions.maxLength && validationRestrictions.maxLength > 0) {
isValidLength = target.value.length <= validationRestrictions.maxLength;
}
if (!isValidLength) {
setErrorMessage(target, validationMessages.invalidLength);
return false;
}
}
if (target.required && target.validity.valueMissing) {
setErrorMessage(target, validationMessages.required);
return false;
}
else if (!target.validity.valid) {
setErrorMessage(target, validationMessages.invalid);
return false;
}
else {
clearErrorMessage();
return true;
}
};
const handleInputEvent = (e) => {
setInputValue(e.target.value);
handleTextValidation();
dispatchValueChanged();
};
React.useEffect(() => {
let isValid = false;
if (formSubmitted) {
isValid = handleTextValidation();
}
dispatchValidity(paragraphUniqueId, isValid);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [formSubmitted]);
const rootClass = classNames('mb-3', props.cssClass, isHidden
? StylingConfig.VisibilityClasses[VisibilityStyle.Hidden]
: StylingConfig.VisibilityClasses[VisibilityStyle.Visible]);
return (_jsxs("div", { className: rootClass, "data-sf-role": "paragraph-text-field-container", children: [_jsx("label", { className: "h6", htmlFor: paragraphUniqueId, children: props.label }), _jsx("textarea", { id: paragraphUniqueId, ref: inputRef, className: classNames('form-control', {
[formViewProps.invalidClass]: formViewProps.invalidClass && errorMessageText
}), name: props.fieldName, placeholder: props.placeholderText || undefined, value: inputValue, "data-sf-role": "paragraph-text-field-textarea", disabled: isHidden || isSkipped, "aria-describedby": ariaDescribedByAttribute, onChange: handleTextValidation, onInput: handleInputEvent, onInvalid: handleTextValidation, ...props.validationAttributes }), props.instructionalText &&
_jsx("div", { id: paragraphInfoMessageId, className: "form-text", children: props.instructionalText }), errorMessageText && _jsx("div", { id: paragraphErrorMessageId, "data-sf-role": "error-message", role: "alert", "aria-live": "assertive", className: "invalid-feedback", children: errorMessageText })] }));
}