@stoker-platform/web-app 0.5.29 → 0.5.31

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stoker-platform/web-app
 
+## 0.5.31
+
+### Patch Changes
+
+- fix: treat modified display value as Computed field type
+
+## 0.5.30
+
+### Patch Changes
+
+- fix: wait for conditional fields to render
+
 ## 0.5.29
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.29",
+    "version": "0.5.31",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Form.tsx

@@ -301,7 +301,6 @@ const RecordFormField = (props: FieldProps) => {
             setCondition(!!condition)
 
             const [
-                readOnly,
                 label,
                 description,
                 descriptionCondition,
@@ -316,7 +315,6 @@ const RecordFormField = (props: FieldProps) => {
                 isRadio,
                 icon,
             ] = await Promise.all([
-                tryPromise(admin?.readOnly, [operation, record]),
                 tryFunction(admin?.label),
                 tryFunction(admin?.description?.message, [record]),
                 tryPromise(admin?.description?.condition, [record]),
@@ -362,6 +360,10 @@ const RecordFormField = (props: FieldProps) => {
             return
         }
         setCondition(true)
+        setTimeout(() => {
+            const readOnly = tryFunction(admin?.readOnly, [operation, form.getValues()])
+            setReadOnly(!!readOnly)
+        }, 0)
     }, [form.watch()])
 
     const hasUpdateAccess = useMemo(() => {
@@ -3453,19 +3455,21 @@ function RecordForm({
             }
         }
 
-        if (isInitialized && (operation === "create" || operation === "update") && customization.admin?.onChange) {
-            tryPromise(customization.admin.onChange, [
-                operation,
-                cloneDeep(formValues) as StokerRecord,
-                prevState as StokerRecord,
-            ]).then((updatedRecord: StokerRecord) => {
-                if (updatedRecord && !isEqual(updatedRecord, formValues)) {
-                    Object.entries(updatedRecord).forEach(([key, value]) => {
-                        form.setValue(key, value)
-                    })
-                }
-            })
-        }
+        setTimeout(() => {
+            if (isInitialized && (operation === "create" || operation === "update") && customization.admin?.onChange) {
+                tryPromise(customization.admin.onChange, [
+                    operation,
+                    cloneDeep(form.getValues()) as StokerRecord,
+                    prevState as StokerRecord,
+                ]).then((updatedRecord: StokerRecord) => {
+                    if (updatedRecord && !isEqual(updatedRecord, formValues)) {
+                        Object.entries(updatedRecord).forEach(([key, value]) => {
+                            form.setValue(key, value)
+                        })
+                    }
+                })
+            }
+        }, 0)
     }, [form.watch()])
 
     const recordLoaded = useRef(false)

package/src/utils/getFormattedFieldValue.tsx

@@ -67,7 +67,9 @@ export const getFormattedFieldValue = (
     }
 
     let value = record[field.name]
+    let modified = false
     if (fieldCustomization?.admin?.modifyDisplayValue) {
+        modified = true
         value = tryFunction(fieldCustomization.admin.modifyDisplayValue, [
             record,
             card ? "card" : form ? "form" : "list",
@@ -134,7 +136,23 @@ export const getFormattedFieldValue = (
         )
     }
 
-    if (isRelationField(field)) {
+    if (modified) {
+        if (value === "tick") {
+            return (
+                <div className="w-full flex justify-start">
+                    <Check />
+                </div>
+            )
+        } else if (value === "cross") {
+            return (
+                <div className="w-full flex justify-start">
+                    <X />
+                </div>
+            )
+        } else {
+            return getStandardDisplay()
+        }
+    } else if (isRelationField(field)) {
         const titleField = field.titleField
         const relationCollection = schema.collections[field.collection]
         if (["OneToOne", "OneToMany"].includes(field.type)) {