@progress/sitefinity-nextjs-sdk/widgets/form-widgets/textfield/textfield.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 } from "react/jsx-runtime";
import { TextType } from './interfaces/text-type';
import { StylingConfig } from '../../styling/styling-config';
import { classNames } from '../../../editor/utils/classNames';
import { htmlAttributes } from '../../../editor/widget-framework/attributes';
import { getMinimumWidgetContext } from '../../../editor/widget-framework/widget-context';
import { Tracer } from '@progress/sitefinity-nextjs-sdk/diagnostics/empty';
import { RenderView } from '../../common/render-view';
import { TextFieldDefaultView } from './text-field.view';
const InvalidDefaultValidationMessageWithLabel = '{0} field is invalid';
const InvalidDefaultValidationMessage = 'Field is invalid';
export function TextField(props) {
    const { span } = Tracer.traceWidget(props, false);
    const entity = props.model.Properties;
    const viewProps = {
        cssClass: classNames(entity.CssClass, StylingConfig.FieldSizeClasses[('Width' + entity.FieldSize)]) || null,
        fieldName: entity.SfFieldName,
        hasDescription: !entity.InstructionalText,
        inputType: entity.InputType === TextType.Phone ? 'tel' : entity.InputType.toLowerCase(),
        label: entity.Label,
        placeholderText: entity.PlaceholderText,
        instructionalText: entity.InstructionalText,
        predefinedValue: entity.PredefinedValue,
        validationAttributes: buildValidationAttributes(entity),
        violationRestrictionsJson: {
            maxLength: entity.Range?.Max || null,
            minLength: entity.Range?.Min || null
        },
        violationRestrictionsMessages: {
            invalid: InvalidDefaultValidationMessage,
            invalidLength: entity.TextLengthViolationMessage,
            regularExpression: entity.RegularExpressionViolationMessage,
            required: entity.RequiredErrorMessage
        },
        attributes: { ...htmlAttributes(props) },
        widgetContext: getMinimumWidgetContext(props)
    };
    if (entity.Label) {
        if (entity.TextLengthViolationMessage) {
            viewProps.violationRestrictionsMessages.invalidLength = entity.TextLengthViolationMessage?.replace('{0}', entity.Label);
        }
        if (entity.RequiredErrorMessage) {
            viewProps.violationRestrictionsMessages.required = entity.RequiredErrorMessage.replace('{0}', entity.Label);
        }
        if (entity.RegularExpressionViolationMessage) {
            viewProps.violationRestrictionsMessages.regularExpression = entity.RegularExpressionViolationMessage.replace('{0}', entity.Label);
        }
        viewProps.violationRestrictionsMessages.invalid = InvalidDefaultValidationMessageWithLabel.replace('{0}', entity.Label);
    }
    return (_jsx(RenderView, { viewName: entity.SfViewName, widgetKey: props.model.Name, traceSpan: span, viewProps: viewProps, children: _jsx(TextFieldDefaultView, { ...viewProps }) }));
}
function buildValidationAttributes(entity) {
    const validationAttributes = {};
    if (entity.Required) {
        validationAttributes['required'] = 'required';
    }
    if (entity.RegularExpression) {
        validationAttributes['pattern'] = entity.RegularExpression;
    }
    return validationAttributes;
}