@opengeoweb/form-fields 14.0.0 → 14.1.0

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
-import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
+import { useFormContext, useController, useForm, FormProvider, Controller } from 'react-hook-form';
 import { isEqual } from 'lodash';
 import { dateUtils } from '@opengeoweb/shared';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
-import React from 'react';
+import React, { useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import { CalendarToday } from '@opengeoweb/theme';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -940,6 +940,131 @@ var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_ref) {
   }, props)) : null;
 };
 
+function decimalToDegreesMinutes(value) {
+  var sign = value < 0 ? '-' : '';
+  var abs = Math.abs(value);
+  var degrees = Math.floor(abs);
+  var minutes = Math.round((abs - degrees) * 60);
+  // normalize rounding overflow (e.g. 59.9 min → +1 degree)
+  if (minutes === 60) {
+    abs += 1;
+    return decimalToDegreesMinutes(sign === '-' ? -abs : abs);
+  }
+  return "" + sign + degrees + "\xB0" + minutes.toString().padStart(2, '0') + "\u2032";
+}
+function degreesMinutesToDecimal(input) {
+  var raw = input.toString().trim();
+  var negative = raw.startsWith('-');
+  var digits = raw.replace(/[^0-9]/g, '');
+  var sign = negative ? -1 : 1;
+  if (digits.length <= 2) {
+    var _deg = parseInt(digits || '0', 10);
+    return sign * _deg;
+  }
+  // split into degrees + minutes
+  var deg = parseInt(digits.slice(0, digits.length - 2), 10);
+  var min = parseInt(digits.slice(-2), 10);
+  // normalize minutes overflow (e.g. 65 → 1°05′)
+  var extraDeg = Math.floor(min / 60);
+  min %= 60;
+  return sign * (deg + extraDeg + min / 60);
+}
+var DegreesMinutesField = function DegreesMinutesField(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$isLongitude = _ref.isLongitude,
+    isLongitude = _ref$isLongitude === void 0 ? false : _ref$isLongitude,
+    t = _ref.t;
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control;
+  var _useState = useState(null),
+    localInput = _useState[0],
+    setLocalInput = _useState[1];
+  var _useState2 = useState(false),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  return jsx(Controller, {
+    control: control,
+    name: name,
+    render: function render(_ref2) {
+      var _fieldState$error;
+      var field = _ref2.field,
+        fieldState = _ref2.fieldState;
+      var value = field.value,
+        onChange = field.onChange;
+      var handleChange = function handleChange(e) {
+        setLocalInput(e.target.value);
+        setIsEditing(true);
+      };
+      var handleBlur = function handleBlur() {
+        if (localInput != null && localInput !== '-' && localInput !== '') {
+          var input = localInput.replace(/[^\d-]/g, '');
+          var negative = input.startsWith('-');
+          var digits = input.replace(/[^0-9]/g, '');
+          // Latitude: 4 digits (DDMM), Longitude: 5 (DDDMM)
+          var maxLen = isLongitude ? 5 : 4;
+          if (digits.length > maxLen) {
+            digits = digits.slice(0, maxLen);
+          }
+          var normalized = negative ? "-" + digits : digits;
+          try {
+            var decimal = degreesMinutesToDecimal(normalized);
+            onChange(decimal);
+          } catch (_unused) {
+            // Invalid, do not update form value
+          }
+        }
+        setIsEditing(false);
+        setLocalInput(null);
+      };
+      var displayValue;
+      if (isEditing) {
+        displayValue = localInput != null ? localInput : '';
+      } else if (value != null) {
+        displayValue = decimalToDegreesMinutes(value);
+      } else {
+        displayValue = '';
+      }
+      return jsx(TextField, {
+        disabled: disabled,
+        error: !!fieldState.error,
+        helperText: (_fieldState$error = fieldState.error) == null ? void 0 : _fieldState$error.message,
+        label: label,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        placeholder: isLongitude ? 'DDD°MM′' : 'DD°MM′',
+        size: size,
+        slotProps: {
+          input: {
+            readOnly: isReadOnly
+          }
+        },
+        value: displayValue
+      });
+    },
+    rules: {
+      validate: function validate(value) {
+        if (value == null || isNaN(value)) {
+          return true;
+        } // let empty pass
+        if (!isLongitude && (value < -90 || value > 90)) {
+          return t('form-fields-error-latitude-minutes');
+        }
+        if (isLongitude && (value < -180 || value > 180)) {
+          return t('form-fields-error-longitude-minutes');
+        }
+        return true;
+      }
+    }
+  });
+};
+
 // hidden input helpers, should not be part of send formdata
 var HIDDEN_INPUT_HELPER_IS_DRAFT = 'IS_DRAFT';
 var useDraftFormHelpers = function useDraftFormHelpers(isDefaultDraft) {
@@ -983,4 +1108,4 @@ var useDraftFormHelpers = function useDraftFormHelpers(isDefaultDraft) {
   };
 };
 
-export { FORM_FIELDS_NAMESPACE, HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, countIntersectionPoints, defaultFormOptions, errorMessages, formFieldsTranslations, getDateValue, getDeepProperty, getFormattedValueForDatePicker, hasIntersectionWithFIR, hasMulitpleIntersections, hasValidGeometry, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };
+export { DegreesMinutesField, FORM_FIELDS_NAMESPACE, HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, countIntersectionPoints, defaultFormOptions, errorMessages, formFieldsTranslations, getDateValue, getDeepProperty, getFormattedValueForDatePicker, hasIntersectionWithFIR, hasMulitpleIntersections, hasValidGeometry, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "14.0.0",
+  "version": "14.1.0",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,11 +8,11 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/theme": "14.0.0",
+    "@opengeoweb/theme": "14.1.0",
     "react-hook-form": "^7.50.1",
     "@mui/x-date-pickers": "^8.11.2",
     "lodash": "^4.17.21",
-    "@opengeoweb/shared": "14.0.0",
+    "@opengeoweb/shared": "14.1.0",
     "react-i18next": "^15.1.1",
     "@mui/material": "^7.0.1",
     "i18next": "^25.0.1",

package/src/lib/components/DegreesMinutesField.d.ts

@@ -0,0 +1,15 @@
+import type { TFunction } from 'i18next';
+import React from 'react';
+export declare function decimalToDegreesMinutes(value: number): string;
+export declare function degreesMinutesToDecimal(input: string | number): number;
+interface Props {
+    name: string;
+    label: string;
+    disabled?: boolean;
+    isReadOnly?: boolean;
+    size?: 'small' | 'medium';
+    isLongitude?: boolean;
+    t: TFunction;
+}
+export declare const DegreesMinutesField: React.FC<Props>;
+export {};

package/src/lib/components/DegreesMinutesField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/index.d.ts

@@ -7,6 +7,7 @@ export { default as ReactHookFormDateTime } from './ReactHookFormDateTime';
 export * from './ReactHookFormDateTime';
 export { default as ReactHookFormProvider } from './ReactHookFormProvider';
 export { default as ReactHookFormHiddenInput } from './ReactHookFormHiddenInput';
+export { DegreesMinutesField } from './DegreesMinutesField';
 export { defaultFormOptions } from './ReactHookFormProvider';
 export { errorMessages, isMaximumOneDrawing, hasValidGeometry, isGeometryDirty, isValidGeoJsonCoordinates, hasIntersectionWithFIR, countIntersectionPoints, isValidMax, isValidMin, isInteger, hasMulitpleIntersections, isLatitude, isLongitude, isNonOrBothCoordinates, isEmpty, isXHoursAfter, isXHoursBefore, } from './utils';
 export { getDeepProperty } from './formUtils';