@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.
84 lines (83 loc) • 4.15 kB
JavaScript
'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { htmlAttributes, setWarning } from '../../../editor/widget-framework/attributes';
import { getChoiceItems } from './dynamic-list.view-props';
import { useEffect, useState } from 'react';
import { DropdownDefaultView } from '../dropdown/dropdown.view';
import { CheckboxesDefaultView } from '../checkboxes/checkboxes.view';
import { StylingConfig } from '../../styling/styling-config';
import { classNames } from '../../../editor/utils/classNames';
import { SelectionMode } from './selection-modes';
export function DynamicListCSR(props) {
const entity = props.model.Properties;
const requestContext = props.requestContext;
const hasContent = entity.SelectedContent != null && entity.SelectedContent.Content != null && entity.SelectedContent.Content[0].Type != null;
const hasClassifications = entity.ClassificationSettings != null && entity.ClassificationSettings.selectionMode != null && entity.ClassificationSettings.selectedTaxonomyName != null;
const [dataAttributes, setDataAttributes] = useState(htmlAttributes(props));
const [defaultRender, setRender] = useState(null);
if (props.requestContext.isEdit) {
if ((entity.ListType === SelectionMode.Content && !hasContent) ||
(entity.ListType === SelectionMode.Classification && !hasClassifications)) {
setWarning(dataAttributes, 'No list type have been selected');
}
}
useEffect(() => {
getChoiceItems(entity, requestContext).then(choices => {
if (props.requestContext.isEdit && (hasContent || hasClassifications) && choices.length === 0) {
setWarning(dataAttributes, 'Selected list is empty');
setDataAttributes(dataAttributes);
}
if (entity.SfViewName === 'Dropdown') {
if (choices.length > 0) {
choices.unshift({ Name: 'Select', Value: '', Selected: true });
}
const cssClass = entity.CssClass || '';
const viewProps = {
choices: choices || [],
cssClass: classNames(cssClass, StylingConfig.FieldSizeClasses[('Width' + entity.FieldSize)]) || '',
instructionalText: entity.InstructionalText,
label: entity.Label || '',
required: entity.Required,
requiredErrorMessage: entity.RequiredErrorMessage || '',
fieldSize: entity.FieldSize,
sorting: 'Manual',
sfFieldName: entity.SfFieldName,
attributes: {},
widgetContext: {
requestContext: props.requestContext,
model: {
Id: props.model.Id
}
}
};
setRender(_jsx(DropdownDefaultView, { ...viewProps }));
}
else {
const viewProps = {
choices: choices || [],
cssClass: entity.CssClass || '',
hasAdditionalChoice: false,
instructionalText: entity.InstructionalText || '',
label: entity.Label || '',
required: entity.Required,
requiredErrorMessage: entity.RequiredErrorMessage,
columnsNumber: entity.ColumnsNumber,
sfFieldName: entity.SfFieldName,
attributes: {},
widgetContext: {
requestContext: props.requestContext,
model: {
Id: props.model.Id
}
}
};
setRender(_jsx(CheckboxesDefaultView, { ...viewProps }));
}
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (props.requestContext.isEdit) {
return (_jsx("div", { ...dataAttributes, children: defaultRender }));
}
return defaultRender;
}