@progress/sitefinity-nextjs-sdk/widgets/form-widgets/section/section.js

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.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { htmlAttributes } from '../../../editor/widget-framework/attributes';
import { getMinimumMetadata } from '../../../editor/widget-framework/widget-metadata';
import { RenderWidgetService } from '../../../services/render-widget-service';
import { Tracer } from '@progress/sitefinity-nextjs-sdk/diagnostics/empty';
const ColumnNamePrefix = 'Column';
export function FormSection(props) {
    const { span, ctx } = Tracer.traceWidget(props, true);
    props.model.Properties.ColumnProportionsInfo = props.model.Properties.ColumnProportionsInfo || ['12'];
    const columns = populateColumns(props);
    const dataAttributes = htmlAttributes(props);
    return (_jsxs(_Fragment, { children: [_jsx("section", { className: "row", ...dataAttributes, children: columns.map((x, i) => {
                    return (_jsx("div", { ...x.attributes, children: x.children.map(y => {
                            return RenderWidgetService.createComponent(y.model, props.requestContext, ctx);
                        }) }, i));
                }) }), Tracer.endSpan(span)] }));
}
function populateColumns(context) {
    const columns = [];
    const properties = context.model.Properties;
    for (let i = 0; i < properties.ColumnsCount; i++) {
        const currentName = `${ColumnNamePrefix}${i + 1}`;
        let children = [];
        if (context.model.Children) {
            children = context.model.Children.filter(x => x.PlaceHolder === currentName).map((x => {
                const ret = {
                    model: x,
                    metadata: getMinimumMetadata(RenderWidgetService.widgetRegistry.widgets[x.Name], context.requestContext.isEdit),
                    requestContext: context.requestContext
                };
                return ret;
            }));
        }
        const column = {
            attributes: {
                className: `col-md-${properties.ColumnProportionsInfo[i]}`
            },
            children: children
        };
        if (context.requestContext.isEdit) {
            column.attributes['data-sfcontainer'] = currentName;
            column.attributes['data-sfplaceholderlabel'] = currentName;
        }
        columns.push(column);
    }
    return columns;
}