@opengeoweb/form-fields 9.21.0 → 9.23.1

package/index.esm.js

@@ -3,12 +3,85 @@ import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField,
 import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
 import { isEqual } from 'lodash';
 import { dateUtils } from '@opengeoweb/shared';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 import * as React from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import { CalendarToday } from '@opengeoweb/theme';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 
+var en = {
+	"form-fields-error-required": "This field is required",
+	"form-fields-error-date-valid": "Not a valid date",
+	"form-fields-error-date-after": "Date should not be before",
+	"form-fields-error-date-hours-before": "Date is too far in the past",
+	"form-fields-error-date-hours-after": "Date is too far in the future",
+	"form-fields-error-date-before": "Timestamp too late",
+	"form-fields-error-min-level": "The minimum level is 1",
+	"form-fields-error-latitude": "Invalid latitude, expected number with maximum two decimal degrees between -90.00 and 90.00",
+	"form-fields-error-longitude": "Invalid longitude, expected number with maximum two decimal degrees between -180.00 and 180.00",
+	"form-fields-error-valid-max": "The maximum value is exceeded",
+	"form-fields-error-level-lower": "The lower level has to be below the upper level",
+	"form-fields-error-non-or-both-cooordinates": "Please enter both coordinates",
+	"form-fields-error-integer": "Invalid entry, enter a non-decimal number",
+	"form-fields-error-numeric": "Invalid entry, enter a numeric value"
+};
+var fi = {
+	"form-fields-error-required": "Tämä kenttä vaaditaan",
+	"form-fields-error-date-valid": "Epäkelpo päivämäärä",
+	"form-fields-error-date-after": "Päivämäärä ei voi olla aiemmin valittua ajanhetkeä",
+	"form-fields-error-date-hours-before": "Päivämäärä on liian kaukanan menneisyydessä",
+	"form-fields-error-date-hours-after": "Päivämäärä on liian kaukana tulevaisuudessa",
+	"form-fields-error-date-before": "Aikaleima on ajallisesti liian myöhään",
+	"form-fields-error-min-level": "Pienin sallittu taso on 1",
+	"form-fields-error-latitude": "Virheellinen leveysaste, odotettu arvo on kahden desimaalin tarkkuudella -90.00 ja 90.00 asteen välissä",
+	"form-fields-error-longitude": "Virheellinen pituusaste, odotettu arvo on kahden desimaalin tarkkuudella -180 ja 180 asteen välissä",
+	"form-fields-error-valid-max": "Maksimiarvo on ylitetty",
+	"form-fields-error-level-lower": "Alemman tason arvon on oltava ylemmän tason alla",
+	"form-fields-error-non-or-both-cooordinates": "Lisää molemmat kordinaatit",
+	"form-fields-error-integer": "Epäkelpo arvo, lisää kokonaisluku",
+	"form-fields-error-numeric": "Epäkelpo arvo, lisää numeerinen arvo"
+};
+var no = {
+	"form-fields-error-required": "Dette feltet er påkrevet",
+	"form-fields-error-date-valid": "Ingen gyldig dato",
+	"form-fields-error-date-after": "Dato skal ikke vere før",
+	"form-fields-error-date-hours-before": "Dato er for langt tilbake i tid",
+	"form-fields-error-date-hours-after": "Dato er for langt fram i tid",
+	"form-fields-error-date-before": "Tidspunktet er for seint",
+	"form-fields-error-min-level": "Mimimumsgrensen er 1",
+	"form-fields-error-latitude": "Ikke gyldig breddegrad, forventet et tall med to desimaler mellom -90.00 og 90.00",
+	"form-fields-error-longitude": "Ikke gyldig lengdegrad, forventet et tall med to desimaler mellom -180.00 og 180.00",
+	"form-fields-error-valid-max": "Maksimalverdien er overskredet",
+	"form-fields-error-level-lower": "Den laveste verdien må vere mindre enn den høyeste",
+	"form-fields-error-non-or-both-cooordinates": "Vennligst skriv inn begge koordinatene",
+	"form-fields-error-integer": "Ikke gyldig input, skriv inn et heltall",
+	"form-fields-error-numeric": "Ikke gyldig input, skriv inn et tall"
+};
+var nl = {
+	"form-fields-error-required": "Dit veld is verplicht",
+	"form-fields-error-date-valid": "Geen geldige datum",
+	"form-fields-error-date-after": "Datum mag niet in het verleden liggen",
+	"form-fields-error-date-hours-before": "Datum ligt te ver in het verleden",
+	"form-fields-error-date-hours-after": "Datum ligt te ver in de toekomst",
+	"form-fields-error-date-before": "Tijdsaanduiding is te laat",
+	"form-fields-error-min-level": "Het minimum niveau is 1",
+	"form-fields-error-latitude": "Ongeldige breedtegraad, er wordt een getal verwacht van maximaal 2 decimalen in graden tussen -90.00 en 90.00",
+	"form-fields-error-longitude": "Ongeldige lengtegraad, er wordt een getal verwacht van maximaal 2 decimalen in graden tussen -180.00 en 180.00",
+	"form-fields-error-valid-max": "Het maximum niveau is bereikt",
+	"form-fields-error-level-lower": "Het lage niveau moet onder het hoge niveau zijn",
+	"form-fields-error-non-or-both-cooordinates": "Voer beide coördinaten in",
+	"form-fields-error-integer": "Ongeldige invoer, voer een niet decimaal getal in",
+	"form-fields-error-numeric": "Ongeldige invoer, voor een numerieke waarde in"
+};
+var formFieldsTranslations = {
+	en: en,
+	fi: fi,
+	no: no,
+	nl: nl
+};
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var check = function (it) {
@@ -2080,20 +2153,20 @@ const defaultProps = {
   shouldUnregister: false
 };
 const errorMessages = {
-  required: 'This field is required',
-  isValidDate: 'Not a valid date',
-  isAfter: 'Date should not be before',
-  isXHoursBefore: 'Date is too far in the past',
-  isXHoursAfter: 'Date is too far in the future',
-  isBefore: 'Timestamp too late',
-  minLevel: 'The minimum level is 1',
-  isLatitude: 'Invalid latitude, expected number with maximum two decimal degrees between -90.00 and 90.00',
-  isLongitude: 'Invalid longitude, expected number with maximum two decimal degrees between -180.00 and 180.00',
-  isValidMax: 'The maximum value is exceeded',
-  isLevelLower: 'The lower level has to be below the upper level',
-  isNonOrBothCoordinates: 'Please enter both coordinates',
-  isInteger: 'Invalid entry, enter a non-decimal number',
-  isNumeric: 'Invalid entry, enter a numeric value'
+  required: 'form-fields-error-required',
+  isValidDate: 'form-fields-error-date-valid',
+  isAfter: 'form-fields-error-date-after',
+  isXHoursBefore: 'form-fields-error-date-hours-before',
+  isXHoursAfter: 'form-fields-error-date-hours-after',
+  isBefore: 'form-fields-error-date-before',
+  minLevel: 'form-fields-error-min-level',
+  isLatitude: 'form-fields-error-latitude',
+  isLongitude: 'form-fields-error-longitude',
+  isValidMax: 'form-fields-error-valid-max',
+  isLevelLower: 'form-fields-error-level-lower',
+  isNonOrBothCoordinates: 'form-fields-error-non-or-both-cooordinate',
+  isInteger: 'form-fields-error-integer',
+  isNumeric: 'form-fields-error-numeric'
 };
 const regexMaxTwoDecimals = /^\s*-?\d+(\.\d{1,2})?\s*$/;
 // validations
@@ -2279,6 +2352,33 @@ const isNonOrBothCoordinates = (coordinate, otherCoordinate) => {
   return false;
 };
 
+const FORM_FIELDS_NAMESPACE = 'form-fields';
+i18n.use(initReactI18next).init({
+  lng: 'en',
+  ns: FORM_FIELDS_NAMESPACE,
+  interpolation: {
+    escapeValue: false
+  },
+  resources: {
+    en: {
+      [FORM_FIELDS_NAMESPACE]: formFieldsTranslations.en
+    },
+    fi: {
+      [FORM_FIELDS_NAMESPACE]: formFieldsTranslations.fi
+    },
+    no: {
+      [FORM_FIELDS_NAMESPACE]: formFieldsTranslations.no
+    },
+    nl: {
+      [FORM_FIELDS_NAMESPACE]: formFieldsTranslations.nl
+    }
+  }
+});
+const ns = [FORM_FIELDS_NAMESPACE];
+const translateKeyOutsideComponents = (key, params = undefined) => i18n.t(key, Object.assign({
+  ns
+}, params));
+
 const radioCheckboxStyle = {
   // hides unchecked values
   display: 'none',
@@ -2301,10 +2401,10 @@ const radioCheckboxStyle = {
 };
 const getErrorMessage = errors => {
   if (errors && errors.message && typeof errors.message === 'string') {
-    return errors.message;
+    return translateKeyOutsideComponents(errors.message);
   }
   if (errors && errors.type && typeof errors.type === 'string') {
-    return errorMessages[errors.type];
+    return translateKeyOutsideComponents(errorMessages[errors.type]);
   }
   return '';
 };
@@ -3294,4 +3394,4 @@ const useDraftFormHelpers = (isDefaultDraft = false) => {
   };
 };
 
-export { HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, countIntersectionPoints, defaultFormOptions, errorMessages, getDateValue, getDeepProperty, getFormattedValueForDatePicker, hasIntersectionWithFIR, hasMulitpleIntersections, hasValidGeometry, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "9.21.0",
+  "version": "9.23.1",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,12 +8,14 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@mui/material": "~5.15.11",
+    "@mui/material": "^5.16.0",
     "@opengeoweb/theme": "*",
     "react-hook-form": "^7.50.1",
     "@mui/x-date-pickers": "^6.18.5",
     "lodash": "^4.17.21",
-    "@opengeoweb/shared": "9.21.0"
+    "@opengeoweb/shared": "9.23.1",
+    "react-i18next": "^14.1.2",
+    "i18next": "^23.11.5"
   },
   "peerDependencies": {
     "react": "18"

package/src/index.d.ts

@@ -1,2 +1,5 @@
+import formFieldsTranslations from '../locales/formFields.json';
 export * from './lib/components';
 export * from './lib/hooks/useDraftFormHelpers/useDraftFormHelpers';
+export { FORM_FIELDS_NAMESPACE } from './lib/utils/i18n';
+export { formFieldsTranslations };

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

@@ -13,3 +13,6 @@ export interface FormFieldsWrapperProps {
     isDarkTheme?: boolean;
 }
 export declare const FormFieldsWrapper: React.FC<FormFieldsWrapperProps>;
+export declare const FormFieldsI18nProvider: React.FC<{
+    children?: React.ReactNode;
+}>;

package/src/lib/utils/i18n.d.ts

@@ -0,0 +1,4 @@
+import i18n from 'i18next';
+export declare const FORM_FIELDS_NAMESPACE = "form-fields";
+export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
+export { i18n };