@opengeoweb/form-fields 9.16.0 → 9.18.0

package/index.esm.js

@@ -2,13 +2,12 @@ import * as React from 'react';
 import React__default from 'react';
 import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
 import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
-import moment from 'moment';
 import { isEqual } from 'lodash';
-import moment$1 from 'moment-timezone';
+import { dateUtils } from '@opengeoweb/shared';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import { CalendarToday } from '@opengeoweb/theme';
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1666,27 +1665,19 @@ const isEmpty = value => {
   }
   return false;
 };
-const isValidDate = value => value ? moment(value).isValid() : true;
-const isBefore = (ownDate, referenceDate) => ownDate ? moment.utc(ownDate) < moment.utc(referenceDate) : true;
-const isAfter = (ownDate, otherDate) => ownDate ? moment.utc(ownDate).isAfter(moment.utc(otherDate)) : true;
-const isBetween = (ownDate, otherDateStart, otherDateEnd) => {
-  return moment.utc(ownDate) >= moment.utc(otherDateStart) && moment.utc(ownDate) <= moment.utc(otherDateEnd);
-};
 const isXHoursBefore = (ownDate, otherDate, hours = 4) => {
   if (isEmpty(ownDate) || isEmpty(otherDate)) {
     return true;
   }
-  const duration = moment.duration(moment.utc(ownDate).diff(otherDate));
-  const inHours = duration.asHours();
-  return inHours >= -hours;
+  const duration = dateUtils.differenceInHours(dateUtils.utc(otherDate), dateUtils.utc(ownDate), 'ceil');
+  return duration <= hours;
 };
 const isXHoursAfter = (ownDate, otherDate, hours = 4) => {
   if (isEmpty(ownDate) || isEmpty(otherDate)) {
     return true;
   }
-  const duration = moment.duration(moment.utc(ownDate).diff(otherDate));
-  const inHours = duration.asHours();
-  return inHours <= hours;
+  const duration = dateUtils.differenceInHours(dateUtils.utc(ownDate), dateUtils.utc(otherDate), 'ceil');
+  return duration <= hours;
 };
 const isLatitude = lat => {
   if (!lat) {
@@ -2978,9 +2969,11 @@ const ReactHookFormNumberField = _a => {
     const before = inputElement.value.slice(0, inputElement.selectionStart);
     const after = inputElement.value.slice(inputElement.selectionEnd);
     const newValue = before + clipboardText + after;
+    // eslint-disable-next-line no-useless-escape
     if (inputMode === 'numeric' && !newValue.match(/^\-?[0-9]+$/)) {
       event.preventDefault();
     }
+    // eslint-disable-next-line no-useless-escape
     if (inputMode === 'decimal' && !newValue.match(/^\-?[0-9]*(\.[0-9]+)?$/)) {
       event.preventDefault();
     }
@@ -3040,14 +3033,24 @@ const ReactHookFormNumberField = _a => {
   }, otherProps)));
 };
 
-const DEFAULT_DATE_FORMAT = 'DD/MM/YYYY HH:mm';
-const DATE_FORMAT_FNS = 'dd/MM/yyyy HH:mm';
 const OpenPicker = () => /*#__PURE__*/React.createElement(CalendarToday, null);
-// TODO: Place this default setting somewhere more appropriate, should only need to fire once https://gitlab.com/opengeoweb/opengeoweb/-/issues/331
-moment$1.tz.setDefault('Etc/GMT-0');
+const getTimezoneOffset = value => value.getTimezoneOffset() * 60000;
+const makeLocalAppearUTC = value => new Date(value.getTime() + getTimezoneOffset(value));
+const localToUTC = dateTime => new Date(dateTime.getTime() - getTimezoneOffset(dateTime));
 const getFormattedValue = value => {
-  const isMoment = moment$1(value).isValid();
-  return isMoment ? moment$1.utc(value).format() : value;
+  var _a;
+  return (_a = dateUtils.dateToIsoString(value)) !== null && _a !== void 0 ? _a : null;
+};
+const getDateValue = value => {
+  var _a, _b;
+  if (value) {
+    const dateValue = (_b = (_a = dateUtils.stringToDate(value, 'yyyy/MM/dd HH:mm', false)) !== null && _a !== void 0 ? _a : dateUtils.isoStringToDate(value, false)) !== null && _b !== void 0 ? _b : null;
+    if (dateValue) {
+      return makeLocalAppearUTC(dateValue);
+    }
+    return null;
+  }
+  return null;
 };
 const ReactHookKeyboardDateTimePicker = _a => {
   var {
@@ -3055,7 +3058,7 @@ const ReactHookKeyboardDateTimePicker = _a => {
       rules,
       disabled,
       label = 'Select date and time',
-      format = DEFAULT_DATE_FORMAT,
+      format = dateUtils.DATE_FORMAT_DATEPICKER,
       openTo = 'hours',
       defaultNullValue = null,
       helperText = '',
@@ -3064,9 +3067,11 @@ const ReactHookKeyboardDateTimePicker = _a => {
       sx,
       isReadOnly,
       inputAdornment,
-      shouldHideUTC
+      shouldHideUTC,
+      disablePast,
+      disableFuture
     } = _a,
-    otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly", "inputAdornment", "shouldHideUTC"]);
+    otherProps = __rest(_a, ["name", "rules", "disabled", "label", "format", "openTo", "defaultNullValue", "helperText", "onChange", "className", "sx", "isReadOnly", "inputAdornment", "shouldHideUTC", "disablePast", "disableFuture"]);
   const {
     control
   } = useFormContext();
@@ -3086,8 +3091,11 @@ const ReactHookKeyboardDateTimePicker = _a => {
     defaultValue: defaultNullValue
   }, defaultProps));
   const errors = getErrors(name, formErrors);
-  // Ensure value is a Moment object
-  const dateValue = value ? moment$1(value) : null;
+  // Ensure value is a Date object
+  const dateValue = getDateValue(value);
+  const now = makeLocalAppearUTC(dateUtils.utc());
+  const minDateTime = disablePast ? now : null;
+  const maxDateTime = disableFuture ? now : null;
   return /*#__PURE__*/React.createElement(ReactHookFormFormControl, {
     disabled: disabled,
     errors: errors,
@@ -3103,8 +3111,14 @@ const ReactHookKeyboardDateTimePicker = _a => {
     openTo: openTo,
     disabled: disabled,
     onChange: value => {
-      onChangeField(getFormattedValue(value));
-      onChange(getFormattedValue(value));
+      if (!value) {
+        onChange(null);
+        onChangeField(null);
+        return;
+      }
+      const formattedDate = getFormattedValue(localToUTC(value));
+      onChangeField(formattedDate);
+      onChange(formattedDate);
     },
     inputRef: ref,
     slotProps: {
@@ -3143,7 +3157,9 @@ const ReactHookKeyboardDateTimePicker = _a => {
     },
     timeSteps: {
       minutes: 1
-    }
+    },
+    minDateTime: minDateTime,
+    maxDateTime: maxDateTime
   }, otherProps)));
 };
 
@@ -3165,7 +3181,7 @@ const ReactHookFormProviderWrapper = ({
   children,
   options: _options2 = defaultFormOptions
 }) => ( /*#__PURE__*/React__default.createElement(LocalizationProvider, {
-  dateAdapter: AdapterMoment
+  dateAdapter: AdapterDateFns
 }, /*#__PURE__*/React__default.createElement(ReactHookFormProvider, {
   options: _options2
 }, children)));
@@ -3228,4 +3244,4 @@ const useDraftFormHelpers = (isDefaultDraft = false) => {
   };
 };
 
-export { DATE_FORMAT_FNS, HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, defaultFormOptions, errorMessages, getDeepProperty, getFormattedValue, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, isAfter, isBefore, isBetween, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidDate, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };
+export { HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, defaultFormOptions, errorMessages, getDateValue, getDeepProperty, getFormattedValue, hasIntersectionWithFIR, hasMaxFeaturePoints, hasMulitpleIntersections, 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.16.0",
+  "version": "9.18.0",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -11,10 +11,9 @@
     "@mui/material": "~5.15.11",
     "@opengeoweb/theme": "*",
     "react-hook-form": "^7.50.1",
-    "moment": "^2.29.4",
-    "moment-timezone": "^0.5.43",
     "@mui/x-date-pickers": "^6.18.5",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "@opengeoweb/shared": "9.18.0"
   },
   "peerDependencies": {
     "react": "18"

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

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material';
-import { Moment } from 'moment-timezone';
 import { DateTimePickerProps, DateTimePickerSlotsComponentsProps } from '@mui/x-date-pickers';
 import { ReactHookFormInput } from './types';
-export declare const DATE_FORMAT_FNS = "dd/MM/yyyy HH:mm";
-export declare const getFormattedValue: (value: Moment | string) => string | Moment;
-type ReactHookKeyboardDateTimePickerProps = DateTimePickerProps<Moment> & DateTimePickerSlotsComponentsProps<Moment> & ReactHookFormInput<{
+export declare const getFormattedValue: (value: Date) => string | null;
+export declare const getDateValue: (value: string) => Date | null;
+type ReactHookKeyboardDateTimePickerProps = DateTimePickerProps<Date> & DateTimePickerSlotsComponentsProps<Date> & ReactHookFormInput<{
     defaultNullValue?: string | null;
     value?: string;
-    onChange?: (value: string | Moment) => void;
+    onChange?: (value: Date | string | null) => void;
     format?: string;
     sx?: SxProps<Theme>;
 }> & {

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

@@ -8,5 +8,5 @@ export * from './ReactHookFormDateTime';
 export { default as ReactHookFormProvider } from './ReactHookFormProvider';
 export { default as ReactHookFormHiddenInput } from './ReactHookFormHiddenInput';
 export { defaultFormOptions } from './ReactHookFormProvider';
-export { errorMessages, isMaximumOneDrawing, isGeometryDirty, isValidGeoJsonCoordinates, hasIntersectionWithFIR, isValidMax, isValidMin, isInteger, isAfter, isBefore, isBetween, isValidDate, hasMaxFeaturePoints, hasMulitpleIntersections, isXHoursBefore, isXHoursAfter, isLatitude, isLongitude, isNonOrBothCoordinates, isEmpty, } from './utils';
+export { errorMessages, isMaximumOneDrawing, isGeometryDirty, isValidGeoJsonCoordinates, hasIntersectionWithFIR, isValidMax, isValidMin, isInteger, hasMaxFeaturePoints, hasMulitpleIntersections, isLatitude, isLongitude, isNonOrBothCoordinates, isEmpty, isXHoursAfter, isXHoursBefore, } from './utils';
 export { getDeepProperty } from './formUtils';

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

@@ -1,4 +1,3 @@
-import { Moment } from 'moment';
 export declare const defaultProps: {
     shouldUnregister: boolean;
 };
@@ -19,10 +18,6 @@ export declare const errorMessages: {
     isNumeric: string;
 };
 export declare const isEmpty: (value?: number | string | null) => boolean;
-export declare const isValidDate: (value?: Moment | string | null) => boolean;
-export declare const isBefore: (ownDate: string, referenceDate: string) => boolean;
-export declare const isAfter: (ownDate: string, otherDate: string) => boolean;
-export declare const isBetween: (ownDate: string, otherDateStart: string, otherDateEnd: string) => boolean;
 export declare const isXHoursBefore: (ownDate: string, otherDate: string, hours?: number) => boolean;
 export declare const isXHoursAfter: (ownDate: string, otherDate: string, hours?: number) => boolean;
 export declare const isLatitude: (lat?: number | null) => boolean;