@sphereon/ui-components.ssi-react 0.3.1-unstable.20 → 0.3.1-unstable.22

package/dist/components/views/FormView/index.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, FC } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import { JsonFormsCellRendererRegistryEntry, JsonFormsRendererRegistryEntry, JsonSchema, Middleware, UISchemaElement, ValidationMode } from '@jsonforms/core';
 import { JSONFormState } from '../../../types';
 import Ajv from 'ajv';
@@ -16,5 +16,5 @@ type Props<DataType = Record<any, any>> = {
     readonly?: boolean;
     config?: any;
 };
-declare const FormView: FC<Props>;
+declare const FormView: (props: Props) => ReactElement;
 export default FormView;

package/dist/components/views/FormView/index.js

@@ -1,12 +1,57 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { JsonForms } from '@jsonforms/react';
 import { materialCells } from '@jsonforms/material-renderers';
 import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
+import { formatDateToISO } from '../../../helpers/date/DateHelper';
+const initializeDefaultValues = (schema, currentData = {}) => {
+    const result = { ...currentData };
+    if (!schema.properties) {
+        return result;
+    }
+    Object.entries(schema.properties).forEach(([key, property]) => {
+        if (typeof property === 'object') {
+            if (property.const && (!(key in result) || !result[key])) {
+                result[key] = property.const;
+            }
+            if (property.default && (!(key in result) || !result[key])) {
+                if (property.format?.startsWith('date') || property.format?.startsWith('time')) {
+                    result[key] = formatDateToISO(property.default, property.format);
+                }
+                else {
+                    result[key] = property.default;
+                }
+            }
+            if (property.properties) {
+                if (!result[key]) {
+                    result[key] = {};
+                }
+                result[key] = initializeDefaultValues(property, result[key]);
+            }
+        }
+    });
+    return result;
+};
 const FormView = (props) => {
     const { data, schema, uiSchema, validationMode = 'ValidateAndShow', renderers = jsonFormsMaterialRenderers, cells = materialCells, style, middleware, ajv, onFormStateChange, readonly = false, config, } = props;
+    const [formData, setFormData] = useState(data ?? {});
+    useEffect(() => {
+        const initializedData = initializeDefaultValues(schema, formData);
+        setFormData(initializedData);
+    }, [schema]);
     const onFormStateChanged = (state) => {
-        void onFormStateChange?.(state);
+        const updatedData = initializeDefaultValues(schema, state.data);
+        if (JSON.stringify(updatedData) !== JSON.stringify(state.data)) {
+            setFormData(updatedData);
+            void onFormStateChange?.({
+                ...state,
+                data: updatedData,
+            });
+        }
+        else {
+            void onFormStateChange?.(state);
+        }
     };
-    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: data, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
+    return (_jsx("div", { style: style, children: _jsx(JsonForms, { schema: schema, uischema: uiSchema, data: formData, renderers: renderers, cells: cells, onChange: onFormStateChanged, validationMode: validationMode, middleware: middleware, ajv: ajv, readonly: readonly, config: config }) }));
 };
 export default FormView;

package/dist/helpers/date/DateHelper/index.d.ts

@@ -0,0 +1,3 @@
+export type DateFormat = 'date-time' | 'date' | 'time' | undefined;
+export declare const formatDate: (dateString?: string, format?: DateFormat) => string;
+export declare const formatDateToISO: (dateString?: string, format?: DateFormat) => string;

package/dist/helpers/date/DateHelper/index.js

@@ -0,0 +1,45 @@
+export const formatDate = (dateString, format = 'date-time') => {
+    const userDateTimeOpts = Intl.DateTimeFormat().resolvedOptions();
+    if (!dateString) {
+        return '';
+    }
+    const date = dateString === 'now' ? new Date() : new Date(dateString);
+    if (isNaN(date.getTime())) {
+        console.error('Invalid date:', dateString);
+        return 'Invalid date';
+    }
+    const formatOptions = {
+        timeZone: userDateTimeOpts.timeZone
+    };
+    if (format === 'date-time') {
+        formatOptions.dateStyle = 'short';
+        formatOptions.timeStyle = 'short';
+    }
+    else if (format === 'date') {
+        formatOptions.dateStyle = 'short';
+    }
+    else if (format === 'time') {
+        formatOptions.timeStyle = 'short';
+    }
+    return new Intl.DateTimeFormat(userDateTimeOpts.locale, formatOptions).format(date);
+};
+export const formatDateToISO = (dateString, format = 'date-time') => {
+    if (!dateString) {
+        return '';
+    }
+    const date = dateString === 'now' ? new Date() : new Date(dateString);
+    if (isNaN(date.getTime())) {
+        console.error('Invalid date:', dateString);
+        return 'Invalid date';
+    }
+    const isoString = date.toISOString();
+    if (format === 'date-time') {
+        return isoString.slice(0, 19).replace('T', ' ');
+    }
+    else if (format === 'date') {
+        return isoString.slice(0, 10);
+    }
+    else {
+        return isoString.slice(11, 19);
+    }
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.3.1-unstable.20+b2ea3fd",
+  "version": "0.3.1-unstable.22+589aa0e",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -41,7 +41,7 @@
     "@mui/system": "^5.15.12",
     "@mui/x-date-pickers": "^6.19.5",
     "@sphereon/ssi-sdk.data-store": "0.29.1-next.47",
-    "@sphereon/ui-components.core": "0.3.1-unstable.20+b2ea3fd",
+    "@sphereon/ui-components.core": "0.3.1-unstable.22+589aa0e",
     "@tanstack/react-table": "^8.9.3",
     "react-json-tree": "^0.18.0",
     "react-loader-spinner": "5.4.5",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "b2ea3fde08adff18b73362423e6091cdd6a98a4a"
+  "gitHead": "589aa0e67cae7fef01bb063df03d46f02bc6c723"
 }