@solidstarters/solid-core-ui 1.1.74 → 1.1.77

package/dist/components/core/form/fields/ISolidField.tsx

@@ -1,69 +0,0 @@
-'use client';
-import { FieldConfig, FieldHelperProps, FieldInputProps, FieldMetaProps, FormikErrors, FormikState, FormikTouched, FormikValues } from "formik";
-import { Schema } from "yup";
-
-export type SolidFieldProps = {
-    solidFormViewMetaData: any;
-    fieldMetadata: any,
-    field: any,
-    data: any,
-    modelName?: any,
-    readOnly?: any,
-    viewMode? :any
-    onChange?: any,
-    onBlur?: any
-};
-
-export type FormikObject = {
-    initialValues: FormikValues;
-    initialErrors: FormikErrors<unknown>;
-    initialTouched: FormikTouched<unknown>;
-    initialStatus: any;
-    handleBlur: {
-        (e: React.FocusEvent<any, Element>): void;
-        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
-    };
-    handleChange: {
-        (e: React.ChangeEvent<any>): void;
-        <T_1 = string | React.ChangeEvent<any>>(field: T_1): T_1 extends React.ChangeEvent<any> ? void : (e: string | React.ChangeEvent<any>) => void;
-    };
-    handleReset: (e: any) => void;
-    handleSubmit: (e?: React.FormEvent<HTMLFormElement>) => void;
-    resetForm: (nextState?: Partial<FormikState<FormikValues>>) => void;
-    setErrors: (errors: FormikErrors<FormikValues>) => void;
-    setFormikState: (stateOrCb: FormikState<FormikValues> | ((state: FormikState<FormikValues>) => FormikState<FormikValues>)) => void;
-    setFieldTouched: (field: string, touched?: boolean, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
-    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
-    setFieldError: (field: string, value: string | undefined) => void;
-    setStatus: (status: any) => void;
-    setSubmitting: (isSubmitting: boolean) => void;
-    setTouched: (touched: FormikTouched<FormikValues>, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
-    setValues: (values: React.SetStateAction<FormikValues>, shouldValidate?: boolean) => Promise<FormikErrors<FormikValues>> | Promise<void>;
-    submitForm: () => Promise<any>;
-    validateForm: (values?: FormikValues) => Promise<FormikErrors<FormikValues>>;
-    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
-    isValid: boolean;
-    dirty: boolean;
-    unregisterField: (name: string) => void;
-    registerField: (name: string, { validate }: any) => void;
-    getFieldProps: (nameOrOptions: string | FieldConfig<any>) => FieldInputProps<any>;
-    getFieldMeta: (name: string) => FieldMetaProps<any>;
-    getFieldHelpers: (name: string) => FieldHelperProps<any>;
-    validateOnBlur: boolean;
-    validateOnChange: boolean;
-    validateOnMount: boolean;
-    values: FormikValues;
-    errors: FormikErrors<FormikValues>;
-    touched: FormikTouched<FormikValues>;
-    isSubmitting: boolean;
-    isValidating: boolean;
-    status?: any;
-    submitCount: number;
-}
-
-export interface ISolidField {
-    initialValue(): any;
-    validationSchema(): Schema;
-    render(formik: FormikObject): React.JSX.Element;
-    updateFormData(value: any, formData: FormData): any;
-}

package/dist/components/core/form/fields/SolidBooleanField.tsx

@@ -1,269 +0,0 @@
-'use client';
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-import { Message } from "primereact/message";
-import { SelectButton } from "primereact/selectbutton";
-import { classNames } from "primereact/utils";
-import { useEffect } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
-
-
-
-export class SolidBooleanField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(fieldLayoutInfo.attrs.name, value === "true" ? "true" : "");
-        }
-    }
-
-    initialValue(): any {
-        const fieldName = this.fieldContext.field.attrs.name;
-        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-
-        const existingValue = this.fieldContext.data[fieldName];
-
-        // return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
-
-        // Ensure the value is always a string "true" or "false"
-        const result = existingValue
-            ? (existingValue === true || existingValue === "true" ? "true" : "false")
-            : (fieldDefaultValue === true || fieldDefaultValue === "true" ? "true" : "false");
-        return result;
-    }
-
-    validationSchema(): Schema {
-        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
-
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        // 1. required 
-        if (fieldMetadata.required) {
-            schema = schema.required(`${fieldLabel} is required.`);
-        } else {
-            schema = schema.nullable(); // Allow null when not required
-        }
-        // // 2. length (min/max)
-        // if (fieldMetadata.min && fieldMetadata.min > 0) {
-        //     schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
-        // }
-        // if (fieldMetadata.max && fieldMetadata.max > 0) {
-        //     schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
-        // }
-        // 3. regular expression
-        if (fieldMetadata.regexPattern) {
-            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
-            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
-        }
-
-        return schema;
-    }
-
-    render(formik: FormikObject) {
-
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
-
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'booleanSelectbox';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultShortTextFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" &&
-                        (
-                            <>
-                                {
-                                    this.renderExtensionRenderMode(editWidget, formik)
-                                }
-                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                    <div className="absolute mt-1">
-                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                    </div>
-                                )}
-                            </>
-                        )
-                    }
-                </div>
-            </>
-        );
-    }
-
-
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-
-
-}
-
-
-
-export const DefaultBooleanFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const booleanOptions = ["false", "true"];
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
-
-    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
-    return (
-        <div className="relative">
-            <div className="flex flex-column gap-2 mt-4">
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">{fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                    </label>
-                }
-                {/* <InputText
-                    id={fieldLayoutInfo.attrs.name}
-                    className="small-input"
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                /> */}
-                <SelectButton
-                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={(e) => { formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value); console.log("value is", e.value) }} // Custom handling for boolean input
-                    value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
-                    options={booleanOptions}
-                    className={classNames("", {
-                        "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                    })}
-
-                />
-            </div>
-            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <div className="absolute mt-1">
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                </div>
-            )}
-        </div>
-    );
-}
-
-
-export const SolidBooleanCheckboxStyleFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || "field col-12";
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    // Set default value to false on mount
-    useEffect(() => {
-        if (formik.values[fieldLayoutInfo.attrs.name] === undefined) {
-            console.log("Setting default value:", false);
-            formik.setFieldValue(fieldLayoutInfo.attrs.name, false);
-        }
-    }, []);
-
-    const handleChange = (e: CheckboxChangeEvent) => {
-        const newValue = e.checked; // This returns `true` or `false`
-        console.log(`${fieldLayoutInfo.attrs.name}, new value:`, newValue);
-
-        formik.setFieldValue(fieldLayoutInfo.attrs.name, newValue === true ? 'true' : 'false');
-        formik.setTouched({ ...formik.touched, [fieldLayoutInfo.attrs.name]: true }); // Ensure Formik registers the change
-        // ✅ Check if Formik updated the value correctly
-        setTimeout(() => {
-            console.log("Formik values after update:", formik.values);
-        }, 0);
-    };
-
-    const isFormFieldValid = (formik: any, fieldName: any) =>
-        formik.touched[fieldName] && formik.errors[fieldName];
-
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
-
-    return (
-        <div className={className}>
-            <div className="relative">
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel !== false && (
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label font-medium">
-                            {fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        </label>
-                    )}
-
-                    <div className="flex align-items-center">
-                        <Checkbox
-                            id={fieldLayoutInfo.attrs.name}
-                            checked={formik.values[fieldLayoutInfo.attrs.name] === 'true' || formik.initialValues[fieldLayoutInfo.attrs.name] === 'true'}
-                            onChange={handleChange}
-                            disabled={formDisabled || fieldDisabled}
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            className={classNames("", {
-                                "p-invalid": isFormFieldValid(formik, fieldLayoutInfo.attrs.name),
-                            })}
-                        />
-                        <span className="ml-2">{fieldLabel || "Yes"}</span>
-                    </div>
-                </div>
-
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

package/dist/components/core/form/fields/SolidDateField.tsx

@@ -1,153 +0,0 @@
-'use client';
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
-import { useRef } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-
-export class SolidDateField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(fieldLayoutInfo.attrs.name, value);
-        }
-    }
-
-    initialValue(): any {
-        const fieldName = this.fieldContext.field.attrs.name;
-        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-
-        const existingValue = this.fieldContext.data[fieldName];
-
-        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
-    }
-
-    validationSchema(): Schema {
-        let schema: Yup.DateSchema<Date | null | undefined> = Yup.date();
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        // 1. required 
-        if (fieldMetadata.required) {
-            schema = schema.required(`${fieldLabel} is required.`);
-        } else {
-            schema = schema.nullable();
-        }
-        return schema;
-    }
-
-    render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultDateFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultShortTextFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" && (
-                        <>
-                            {editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik)
-                            }
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                </div>
-                            )}
-                        </>
-                    )
-                    }
-                </div>
-            </>
-        );
-    }
-
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-
-}
-
-
-export const DefaultDateFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const calendarRef = useRef<any>(null); // Reference for the Calendar component
-    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
-    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-    return (
-        <div className="relative">
-            <div className="flex flex-column gap-2 mt-4">
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                    </label>
-                }
-                <Calendar
-                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                    ref={calendarRef} // Attach ref to Calendar
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    name={fieldMetadata.name}
-                    // onChange={formik.handleChange}
-                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                    //@ts-ignore
-                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                    // dateFormat="mm/dd/yy"
-                    // placeholder="mm/dd/yyyy hh:mm"
-                    mask="99/99/9999 99:99"
-                    hideOnDateTimeSelect
-                    className=""
-                />
-            </div>
-        </div>
-    );
-}
-

package/dist/components/core/form/fields/SolidDateTimeField.tsx

@@ -1,154 +0,0 @@
-'use client';
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
-import { useRef } from "react";
-import * as Yup from 'yup';
-import { Schema } from "yup";
-import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
-import { getExtensionComponent } from "@/helpers/registry";
-import { SolidFormFieldWidgetProps } from "@/types/solid-core";
-
-export class SolidDateTimeField implements ISolidField {
-
-    private fieldContext: SolidFieldProps;
-
-    constructor(fieldContext: SolidFieldProps) {
-        this.fieldContext = fieldContext;
-    }
-
-    updateFormData(value: any, formData: FormData): any {
-        const fieldLayoutInfo = this.fieldContext.field;
-        if (value) {
-            formData.append(fieldLayoutInfo.attrs.name, value);
-        }
-    }
-
-    initialValue(): any {
-        const fieldName = this.fieldContext.field.attrs.name;
-        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
-
-        const existingValue = this.fieldContext.data[fieldName];
-
-        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
-    }
-
-    validationSchema(): Schema {
-        let schema: Yup.DateSchema<Date | null | undefined> = Yup.date();
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-
-        // 1. required 
-        if (fieldMetadata.required) {
-            schema = schema.required(`${fieldLabel} is required.`);
-        } else {
-            schema = schema.nullable();
-        }
-        return schema;
-    }
-
-    render(formik: FormikObject) {
-        const fieldMetadata = this.fieldContext.fieldMetadata;
-        const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-
-        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
-        let editWidget = fieldLayoutInfo.attrs.editWidget;
-        if (!editWidget) {
-            editWidget = 'DefaultDateTimeFormEditWidget';
-        }
-        if (!viewWidget) {
-            viewWidget = 'DefaultShortTextFormViewWidget';
-        }
-        const viewMode: string = this.fieldContext.viewMode;
-
-        return (
-            <>
-                <div className={className}>
-                    {viewMode === "view" &&
-                        this.renderExtensionRenderMode(viewWidget, formik)
-                    }
-                    {viewMode === "edit" && (
-                        <>
-                            {editWidget &&
-                                this.renderExtensionRenderMode(editWidget, formik)
-                            }
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                                </div>
-                            )}
-                        </>
-                    )
-                    }
-                </div>
-            </>
-        );
-    }
-    renderExtensionRenderMode(widget: string, formik: FormikObject) {
-        let DynamicWidget = getExtensionComponent(widget);
-        const widgetProps: SolidFormFieldWidgetProps = {
-            formik: formik,
-            fieldContext: this.fieldContext,
-        }
-        return (
-            <>
-                {DynamicWidget && <DynamicWidget {...widgetProps} />}
-            </>
-        )
-    }
-}
-
-
-
-
-export const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const className = fieldLayoutInfo.attrs?.className || 'field col-12';
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const calendarRef = useRef<any>(null); // Reference for the Calendar component
-    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
-
-    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
-
-    return (
-        <div className="relative">
-            <div className="flex flex-column gap-2 mt-4">
-                {showFieldLabel != false &&
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                    </label>
-                }
-                <Calendar
-                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                    ref={calendarRef} // Attach ref to Calendar
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    name={fieldMetadata.name}
-                    // onChange={formik.handleChange}
-                    onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                    //@ts-ignore
-                    value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                    // dateFormat="mm/dd/yy"
-                    // placeholder="mm/dd/yyyy hh:mm"
-                    mask="99/99/9999 99:99"
-                    hideOnDateTimeSelect
-                    showTime className=""
-                    hourFormat="24"
-
-                />
-            </div>
-
-        </div>
-    );
-}