@solidstarters/solid-core-ui 1.1.47 → 1.1.50

package/src/components/core/form/fields/SolidEmailField.tsx

@@ -4,6 +4,7 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidEmailField implements ISolidField {
 
@@ -78,36 +79,51 @@ export class SolidEmailField implements ISolidField {
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         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">
-                                {fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <InputText
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            name={fieldMetadata.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            // onChange={formik.handleChange}
-                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
-                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        />
+            <>
+               {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" && (
+                    <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">
+                                        {fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <InputText
+                                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                    disabled={formDisabled || fieldDisabled}
+                                    id={fieldLayoutInfo.attrs.name}
+                                    name={fieldMetadata.name}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    // onChange={formik.handleChange}
+                                    onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                                    onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                                />
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                )}
+            </>
         );
     }
 }

package/src/components/core/form/fields/SolidIntegerField.tsx

@@ -4,6 +4,7 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidIntegerField implements ISolidField {
 
@@ -71,34 +72,50 @@ export class SolidIntegerField implements ISolidField {
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
+
         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">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <InputNumber
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                            disabled={formDisabled || fieldDisabled}
-                            id={fieldLayoutInfo.attrs.name}
-                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                            onChange={(e: any) => {
-                                formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
-                            }}
-                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        />
+            <>
+               {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" && (
+                    <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">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <InputNumber
+                                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                    disabled={formDisabled || fieldDisabled}
+                                    id={fieldLayoutInfo.attrs.name}
+                                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                                    onChange={(e: any) => {
+                                        formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                                    }}
+                                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                                />
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                )}
+            </>
         );
     }
 }

package/src/components/core/form/fields/SolidJsonField.tsx

@@ -4,6 +4,7 @@ import { Message } from "primereact/message";
 import * as Yup from 'yup';
 import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidJsonField implements ISolidField {
 
@@ -55,32 +56,48 @@ export class SolidJsonField implements ISolidField {
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldJsonViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
+
         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">{fieldLabel}
-                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                            </label>
-                        }
-                        <CodeEditor
-                            formik={formik}
-                            field={fieldLayoutInfo.attrs.name}
-                            height={fieldLayoutInfo.attrs?.height}
-                            fontSize={fieldLayoutInfo.attrs?.fontSize}
-                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        >
-                        </CodeEditor>
+            <>
+               {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
                     </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                }
+                {viewMode === "edit" && (
+                    <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">{fieldLabel}
+                                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                                    </label>
+                                }
+                                <CodeEditor
+                                    formik={formik}
+                                    field={fieldLayoutInfo.attrs.name}
+                                    height={fieldLayoutInfo.attrs?.height}
+                                    fontSize={fieldLayoutInfo.attrs?.fontSize}
+                                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                >
+                                </CodeEditor>
+                            </div>
+                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                <div className="absolute mt-1">
+                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                </div>
+                            )}
                         </div>
-                    )}
-                </div>
-            </div>
+                    </div>
+                )}
+            </>
         );
     }
 }

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -6,6 +6,7 @@ import { Schema } from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { Editor } from "primereact/editor";
 import { useState } from "react";
+import { getExtensionComponent } from "@/helpers/registry";
 
 export class SolidLongTextField implements ISolidField {
 
@@ -65,16 +66,16 @@ export class SolidLongTextField implements ISolidField {
         const className = fieldLayoutInfo.attrs?.className || 'field col-12';
         return (
             <>
-            {(!fieldLayoutInfo.attrs.renderMode ||fieldLayoutInfo.attrs.renderMode === 'longText') && 
-                <div className={className}>
-                    {this.renderLongText(formik)}
-                </div>
-            }
-            {fieldLayoutInfo.attrs.renderMode === 'richText' && 
-                <div className={className}>
-                    {this.renderRichText(formik)}
-                </div>
-            }
+                {(!fieldLayoutInfo.attrs.renderMode || fieldLayoutInfo.attrs.renderMode === 'longText') &&
+                    <div className={className}>
+                        {this.renderLongText(formik)}
+                    </div>
+                }
+                {fieldLayoutInfo.attrs.renderMode === 'richText' &&
+                    <div className={className}>
+                        {this.renderRichText(formik)}
+                    </div>
+                }
             </>
         );
     }
@@ -88,33 +89,49 @@ export class SolidLongTextField implements ISolidField {
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
         const readOnlyPermission = this.fieldContext.readOnly;
-    
+
         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;
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <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>({fieldDescription}) </span>} */}
-                    </label>
+            <>
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </div>
                 }
-                <InputTextarea
-                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                    disabled={formDisabled || fieldDisabled}
-                    id={fieldLayoutInfo.attrs.name}
-                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                    onChange={formik.handleChange}
-                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    rows={5}
-                    cols={30}
-                />
-            </div>
+                {viewMode === "edit" && (
+
+                    <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>({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <InputTextarea
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={formik.handleChange}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                            rows={5}
+                            cols={30}
+                        />
+                    </div>
+                )}
+            </>
         )
     }
 
@@ -138,31 +155,47 @@ export class SolidLongTextField implements ISolidField {
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
+        const viewMode: string = this.fieldContext.viewMode;
+        let DynamicWidget = getExtensionComponent("SolidFormFieldRichTextViewModeWidget");
+        const widgetProps = {
+            label: fieldLabel,
+            value: formik.values[fieldLayoutInfo.attrs.name],
+        }
         return (
-            <div className={className}>
-                <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>
-                    }
-                    <Editor
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
-                        id={fieldLayoutInfo.attrs.name}
-                        value={formik.values[fieldLayoutInfo.attrs.name]}
-                        onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
-                        style={{ height: "320px" }}
-                    />
-                </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <div className="absolute mt-1">
-                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+            <>
+                {viewMode === "view" &&
+                    <div className={className}>
+                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
+                    </div>
+                }
+                {viewMode === "edit" && (
+
+                    <div className={className}>
+                        <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>
+                            }
+                            <Editor
+                                readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                                disabled={formDisabled || fieldDisabled}
+                                key={fieldLayoutInfo.attrs.name}  // React will re-render the component whenever this value changes
+                                id={fieldLayoutInfo.attrs.name}
+                                value={formik.values[fieldLayoutInfo.attrs.name]}
+                                onTextChange={e => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.htmlValue)}
+                                style={{ height: "320px" }}
+                            />
                         </div>
-                    )}
-            </div>
+                        {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                            <div className="absolute mt-1">
+                                <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            </div>
+                        )}
+                    </div>
+                )}
+            </>
         );
     }
 }