@uxf/form 11.88.1 → 11.88.3

package/gps-input/gps-input.d.ts

@@ -13,7 +13,7 @@ export type GpsInputProps<FormData extends FieldValues> = ControlProps<FormData>
     requiredMessage?: string;
 };
 export type GpsInputValue = Gps;
-export declare function GpsInput<FormData extends Record<string, Gps | null | undefined>>(props: GpsInputProps<FormData>): React.JSX.Element;
+export declare function GpsInput<FormData extends FieldValues>(props: GpsInputProps<FormData>): React.JSX.Element;
 export declare namespace GpsInput {
     var displayName: string;
 }

package/gps-input/gps-input.js

@@ -39,6 +39,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GpsInput = GpsInput;
 const translations_1 = require("@uxf/core-react/translations");
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
 const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const text_input_1 = require("@uxf/ui/text-input");
 const tooltip_1 = require("@uxf/ui/tooltip");
@@ -102,7 +105,7 @@ function GpsInput(props) {
     const t = (0, translations_1.useUxfTranslation)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
     const [visualValue, setVisualValue] = (0, react_1.useState)("");
-    const [coordsFormatError, setCoordsFormatError] = (0, react_1.useState)(false);
+    const [hasCoordsFormatError, setHasCoordsFormatError] = (0, react_1.useState)(false);
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
         name: props.name,
@@ -112,12 +115,12 @@ function GpsInput(props) {
                 ...(_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate,
                 req: (value) => {
                     var _a;
-                    return props.isRequired && value === undefined
+                    return ((0, is_nil_1.isNil)(value) || (0, is_empty_1.isEmpty)(value)) && props.isRequired
                         ? ((_a = props.requiredMessage) !== null && _a !== void 0 ? _a : t("uxf-form-gps-input:validation.required", { value: value }))
                         : undefined;
                 },
                 format: (value) => {
-                    return value === null
+                    return value === null && hasCoordsFormatError
                         ? t("uxf-form-gps-input:validation.invalid-coordinates", { value: value })
                         : undefined;
                 },
@@ -136,23 +139,28 @@ function GpsInput(props) {
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
     const onChange = (value, event) => {
-        var _a, _b;
+        var _a, _b, _c;
         setVisualValue(value);
-        try {
-            const coords = new coordinate_parser_1.default(value);
-            setCoordsFormatError(false);
-            field.onChange({ lat: coords.getLatitude(), lng: coords.getLongitude() });
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        if ((0, is_not_empty_1.isNotEmpty)(value)) {
+            try {
+                const coords = new coordinate_parser_1.default(value);
+                setHasCoordsFormatError(false);
+                field.onChange({ lat: coords.getLatitude(), lng: coords.getLongitude() });
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+            }
+            catch {
+                setHasCoordsFormatError(true);
+                field.onChange(null);
+                (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+            }
         }
-        catch (e) {
-            setCoordsFormatError(true);
-            field.onChange(null);
-            (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
+        else {
+            field.onChange(value);
+            (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, value, event);
         }
     };
     const composedHelperText = (react_1.default.createElement(react_1.default.Fragment, null,
-        fieldState.error && !coordsFormatError && !field.value
+        fieldState.error && !hasCoordsFormatError && !field.value
             ? `${fieldState.error.message}`
             : field.value
                 ? `${field.value.lat}N, ${field.value.lng}E`
@@ -161,6 +169,6 @@ function GpsInput(props) {
                     : t("uxf-form-gps-input:validation.empty-coordinates"),
         " ",
         getSupportedFormatsTooltip(t)));
-    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: composedHelperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: ((0, is_not_nil_1.isNotNil)(fieldState.error) && !field.value) || coordsFormatError, isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, type: "text", value: visualValue, variant: props.variant }));
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: composedHelperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: ((0, is_not_nil_1.isNotNil)(fieldState.error) && !field.value) || hasCoordsFormatError, isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, type: "text", value: visualValue, variant: props.variant }));
 }
 GpsInput.displayName = "UxfFormGpsInput";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/form",
-    "version": "11.88.1",
+    "version": "11.88.3",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -18,7 +18,7 @@
     "dependencies": {
         "@uxf/core": "11.88.0",
         "@uxf/core-react": "11.88.0",
-        "@uxf/ui": "11.88.1",
+        "@uxf/ui": "11.88.2",
         "coordinate-parser": "1.0.7",
         "dayjs": "1.11.19",
         "react-hook-form": "7.66.0"