@dxos/react-ui-form 0.7.5-labs.e27f9b9 → 0.7.5-labs.f400bbc

package/src/hooks/useForm.ts

@@ -1,5 +1,5 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -24,6 +24,7 @@ export type FormHandler<T extends BaseObject> = {
   touched: Record<JsonPath, boolean>;
   changed: Record<JsonPath, boolean>;
   canSave: boolean;
+  formIsValid: boolean;
   handleSave: () => void;
 
   //
@@ -129,6 +130,10 @@ export const useForm = <T extends BaseObject>({
     }
   }, [values, schemaDirty]);
 
+  const formIsValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [errors]);
+
   /**
    * NOTE: We can submit if there is no touched field that has an error.
    * Basically, if there's a validation message visible in the form, submit should be disabled.
@@ -136,7 +141,7 @@ export const useForm = <T extends BaseObject>({
   const canSave = useMemo(
     () =>
       !saving &&
-      // Check if any error paths that are touched have errors
+      // Check if any error paths that are touched have errors.
       !Object.entries(touched).some(
         ([path, isTouched]) =>
           isTouched &&
@@ -178,32 +183,38 @@ export const useForm = <T extends BaseObject>({
     [errors],
   );
 
-  const getFormValue = <V>(path: (string | number)[]): V | undefined => {
-    return getValue(values, createJsonPath(path));
-  };
+  const getFormValue = useCallback<FormHandler<T>['getValue']>(
+    <V>(path: (string | number)[]): V | undefined => {
+      return getValue(values, createJsonPath(path));
+    },
+    [values],
+  );
 
-  const onValueChange = (path: (string | number)[], type: SimpleType, value: any) => {
-    const jsonPath = createJsonPath(path);
-    let parsedValue = value;
-    try {
-      if (type === 'number') {
-        parsedValue = parseFloat(value as string) || 0;
+  const onValueChange = useCallback<FormHandler<T>['onValueChange']>(
+    (path: (string | number)[], type: SimpleType, value: any) => {
+      const jsonPath = createJsonPath(path);
+      let parsedValue = value;
+      try {
+        if (type === 'number') {
+          parsedValue = parseFloat(value as string) || 0;
+        }
+      } catch (err) {
+        log.catch(err);
+        parsedValue = undefined;
       }
-    } catch (err) {
-      log.catch(err);
-      parsedValue = undefined;
-    }
 
-    const newValues = { ...setValue(values, jsonPath, parsedValue) };
-    setValues(newValues);
-    setChanged((prev) => ({ ...prev, [jsonPath]: true }));
-    onValuesChanged?.(newValues);
+      const newValues = { ...setValue(values, jsonPath, parsedValue) };
+      setValues(newValues);
+      setChanged((prev) => ({ ...prev, [jsonPath]: true }));
+      onValuesChanged?.(newValues);
 
-    const isValid = validate(newValues);
-    if (isValid && onValid) {
-      onValid(newValues, { changed });
-    }
-  };
+      const isValid = validate(newValues);
+      if (isValid && onValid) {
+        onValid(newValues, { changed });
+      }
+    },
+    [values, onValuesChanged, validate, onValid, changed],
+  );
 
   const onTouched = useCallback(
     (path: (string | number)[]) => {
@@ -214,21 +225,39 @@ export const useForm = <T extends BaseObject>({
     [validate, values],
   );
 
-  return {
-    // State.
-    values,
-    errors,
-    touched,
-    changed,
-    canSave,
-    handleSave,
-
-    // Field utils.
-    getStatus,
-    getValue: getFormValue,
-    onValueChange,
-    onTouched,
-  } satisfies FormHandler<T>;
+  return useMemo(
+    () => ({
+      // State.
+      values,
+      errors,
+      touched,
+      changed,
+      canSave,
+      formIsValid,
+
+      // Actions.
+      handleSave,
+
+      // Field utils.
+      getStatus,
+      getValue: getFormValue,
+      onValueChange,
+      onTouched,
+    }),
+    [
+      values,
+      errors,
+      touched,
+      changed,
+      canSave,
+      formIsValid,
+      handleSave,
+      getStatus,
+      getFormValue,
+      onValueChange,
+      onTouched,
+    ],
+  );
 };
 
 const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPath, V> => {
@@ -239,7 +268,7 @@ const createKeySet = <T extends BaseObject, V>(obj: T, value: V): Record<JsonPat
 const flatMap = (errors: ValidationError[]) => {
   return errors.reduce(
     (result, { path, message }) => {
-      // Convert the validation error path format to our JsonPath format
+      // Convert the validation error path format to our JsonPath format.
       const jsonPath = fromEffectValidationPath(path);
       if (!(jsonPath in result)) {
         result[jsonPath] = message;

package/src/translations.ts

@@ -36,7 +36,7 @@ export default [
         'format hostname': 'Hostname',
         'format integer': 'Integer',
         'format json': 'JSON',
-        'format latlng': 'LatLng',
+        'format latlng': 'Geopoint',
         'format markdown': 'Markdown',
         'format percent': 'Percent',
         'format ref': 'Reference',

package/src/util/field.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 import { type ValidationError } from '@dxos/schema';
 
 /**
@@ -81,6 +81,24 @@ export const parseValue = ({ type, format, value }: ParseProps) => {
       return isNaN(date.getTime()) ? null : date;
     }
 
+    case FormatEnum.GeoPoint: {
+      // Parse string in format "lat,long" to GeoPoint [longitude, latitude].
+      if (typeof value === 'string') {
+        // Only keep digits, decimal points, minus signs, and commas.
+        const cleaned = value.replace(/[^0-9.,-]+/g, '');
+        const parts = cleaned.split(',');
+        if (parts.length === 2) {
+          const lat = parseFloat(parts[0]);
+          const long = parseFloat(parts[1]);
+          if (!isNaN(lat) && !isNaN(long)) {
+            return GeoLocation.toGeoPoint({ latitude: lat, longitude: long });
+          }
+        }
+      }
+
+      return [0, 0];
+    }
+
     default: {
       return value;
     }

package/src/util/formatting.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { FormatEnum, TypeEnum } from '@dxos/echo-schema';
+import { FormatEnum, GeoLocation, TypeEnum } from '@dxos/echo-schema';
 
 type ValueFormatProps = {
   type: TypeEnum;
@@ -73,6 +73,19 @@ export const formatForDisplay = ({ type, format, value, locale = undefined }: Va
         return date.toLocaleTimeString(locale);
       }
     }
+    case FormatEnum.GeoPoint: {
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // For GeoPoint format [longitude, latitude].
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation.fromGeoPoint(value as [number, number]);
+        return `${latitude},${longitude}`;
+      }
+
+      return String(value);
+    }
     default: {
       if (value === null || value === 'undefined') {
         return '';
@@ -125,6 +138,21 @@ export const formatForEditing = ({ type, format, value, locale = undefined }: Va
       const date = new Date(value as number);
       return date.toISOString().split('T')[1].split('.')[0];
     }
+    case FormatEnum.GeoPoint: {
+      // Handle null or undefined
+      if (value === null || value === undefined) {
+        return '';
+      }
+
+      // For GeoPoint format [longitude, latitude].
+      if (Array.isArray(value) && value.length >= 2 && value.every(Number.isFinite)) {
+        const { latitude, longitude } = GeoLocation.fromGeoPoint(value as [number, number]);
+        return `${latitude},${longitude}`;
+      }
+
+      return String(value);
+    }
+
     default: {
       return String(value);
     }