@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.
59 lines (58 loc) • 3.58 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React 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';
export function DropdownFieldSet(props) {
const dropdownUniqueId = props.sfFieldName;
const { formViewProps, sfFormValueChanged, dispatchValidity, hiddenInputs, skippedInputs, formSubmitted } = React.useContext(FormContext);
const selectRef = React.useRef(null);
const initiallySelectedItem = props.choices.find((ch) => ch.Selected);
const [selectValue, setSelectValue] = React.useState(initiallySelectedItem ? initiallySelectedItem.Value : '');
const [errorMessageText, setErrorMessageText] = React.useState('');
const isHidden = hiddenInputs[dropdownUniqueId];
const isSkipped = skippedInputs[dropdownUniqueId];
let delayTimer;
function dispatchValueChanged() {
clearTimeout(delayTimer);
delayTimer = setTimeout(function () {
sfFormValueChanged();
}, 300);
}
const handleDropdownChange = (event) => {
handleDropdownValidation();
const selectedItem = props.choices.find(ch => ch.Value?.toString() === event.target.value);
setSelectValue(selectedItem ? selectedItem.Value : '');
dispatchValueChanged();
};
const handleDropdownValidation = () => {
const select = selectRef.current;
if (props.required && select.value === '') {
setErrorMessageText(props.requiredErrorMessage.replace('{0}', props.label));
return false;
}
else {
setErrorMessageText('');
}
return true;
};
React.useEffect(() => {
let isValid = false;
if (formSubmitted) {
isValid = handleDropdownValidation();
}
dispatchValidity(dropdownUniqueId, 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("fieldset", { "data-sf-role": "dropdown-list-field-container", className: rootClass, "aria-labelledby": `choice-field-label-${dropdownUniqueId} choice-field-description-${dropdownUniqueId}`, children: [_jsx("legend", { className: "h6", id: `choice-field-label-${dropdownUniqueId}`, children: props.label }), _jsx("select", { className: classNames('form-select', {
[formViewProps.invalidClass]: formViewProps.invalidClass && props.required && errorMessageText
}), ref: selectRef, "data-sf-role": "dropdown-list-field-select", name: dropdownUniqueId, required: props.required, value: selectValue, disabled: isHidden || isSkipped, onChange: handleDropdownChange, children: props.choices.map((choiceOption, idx) => {
return _jsx("option", { value: choiceOption.Value || '', children: choiceOption.Name }, idx);
}) }), props.instructionalText &&
_jsx("p", { className: "text-muted small mt-1", id: `choice-field-description-${dropdownUniqueId}`, children: props.instructionalText }), errorMessageText && _jsx("div", { "data-sf-role": "error-message", role: "alert", "aria-live": "assertive", className: "invalid-feedback", children: errorMessageText })] }));
}