@solidstarters/solid-core-ui 1.1.70 → 1.1.72

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

@@ -5,7 +5,10 @@ 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";
+import { javascript } from '@codemirror/lang-javascript';
+import { oneDark } from '@codemirror/theme-one-dark';
+import CodeMirror, { EditorView } from '@uiw/react-codemirror'; // Correct import
 export class SolidJsonField implements ISolidField {
 
     private fieldContext: SolidFieldProps;
@@ -44,60 +47,127 @@ export class SolidJsonField implements ISolidField {
     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 fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
 
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
-        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],
+        let viewWidget = fieldLayoutInfo.attrs.viewWidget;
+        let editWidget = fieldLayoutInfo.attrs.editWidget;
+        if (!editWidget) {
+            editWidget = 'DefaultJsonFormEditWidget';
         }
-
+        if (!viewWidget) {
+            viewWidget = 'DefaultJsonFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
         return (
             <>
-               {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </div>
-                }
-                {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>
+                <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>
-                    </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 DefaultJsonFormEditWidget = ({ 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 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 fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+    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">{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>
+    );
+}
+
+
+
+export const DefaultJsonFormViewWidget = ({ 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 fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
+
+    return (
+
+
+        <div className="mt-2 flex-column gap-2">
+            <p className="m-0"><span className="form-field-label font-medium">{fieldLabel}</span></p>
+            <CodeMirror
+                id={fieldLabel}
+                value={formik.values[fieldLayoutInfo.attrs.name]}
+                height={'300px'}
+                style={{ fontSize: '10px' }}
+                theme={oneDark}
+                readOnly={true}
+                extensions={[javascript(), EditorView.lineWrapping]}
+            />
+        </div>
+    );
 }

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

@@ -7,6 +7,7 @@ import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { Editor } from "primereact/editor";
 import { useState } from "react";
 import { getExtensionComponent } from "@/helpers/registry";
+import { SolidFormFieldWidgetProps } from "@/types/solid-core";
 
 export class SolidLongTextField implements ISolidField {
 
@@ -64,139 +65,97 @@ export class SolidLongTextField implements ISolidField {
     render(formik: FormikObject) {
         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 = 'DefaultLongTextFormEditWidget';
+        }
+        if (!viewWidget) {
+            viewWidget = 'DefaultShortTextFormViewWidget';
+        }
+        const viewMode: string = this.fieldContext.viewMode;
+
         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>
-                }
+                <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>
             </>
         );
     }
 
-    renderLongText(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 fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        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],
+    renderExtensionRenderMode(widget: string, formik: FormikObject) {
+        let DynamicWidget = getExtensionComponent(widget);
+        const widgetProps: SolidFormFieldWidgetProps = {
+            formik: formik,
+            fieldContext: this.fieldContext,
         }
         return (
             <>
-                {viewMode === "view" &&
-                    <div className={className}>
-                        {DynamicWidget && <DynamicWidget {...widgetProps} />}
-                    </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>
-                )}
+                {DynamicWidget && <DynamicWidget {...widgetProps} />}
             </>
         )
     }
 
-    renderRichText(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 fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
-        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
-        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-        const readOnlyPermission = this.fieldContext.readOnly;
+}
 
-        const [text, setText] = useState();
+export const DefaultLongTextFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
+
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    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;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+    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>
+            }
+            <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>
+    );
+}
 
-        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("SolidFormFieldRichTextViewModeWidget");
-        const widgetProps = {
-            label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
-        }
-        return (
-            <>
-                {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>
-                        {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                            <div className="absolute mt-1">
-                                <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                            </div>
-                        )}
-                    </div>
-                )}
-            </>
-        );
-    }
-}