@open-mercato/ui 0.8.1-develop.7452.1.5e211edd51 → 0.8.1-develop.7455.1.8f7e53badb
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/backend/CrudForm.js +17 -7
- package/dist/backend/CrudForm.js.map +2 -2
- package/dist/backend/confirm-dialog/ConfirmDialog.js +11 -0
- package/dist/backend/confirm-dialog/ConfirmDialog.js.map +2 -2
- package/dist/backend/inputs/PhoneNumberField.js +17 -5
- package/dist/backend/inputs/PhoneNumberField.js.map +2 -2
- package/package.json +3 -3
- package/src/backend/CrudForm.tsx +27 -7
- package/src/backend/__tests__/CrudForm.fieldChangeRenders.test.tsx +127 -0
- package/src/backend/confirm-dialog/ConfirmDialog.tsx +16 -0
- package/src/backend/confirm-dialog/__tests__/ConfirmDialog.test.tsx +29 -0
- package/src/backend/inputs/PhoneNumberField.tsx +17 -11
- package/src/backend/inputs/__tests__/PhoneNumberField.renders.test.tsx +35 -0
package/dist/backend/CrudForm.js
CHANGED
|
@@ -553,7 +553,13 @@ function CrudForm({
|
|
|
553
553
|
const navigationConfirmPendingRef = React.useRef(false);
|
|
554
554
|
const submitNavigationBypassRef = React.useRef(false);
|
|
555
555
|
const submitNavigationBypassTimeoutRef = React.useRef(null);
|
|
556
|
-
const [hasUnsavedChanges,
|
|
556
|
+
const [hasUnsavedChanges, setHasUnsavedChangesState] = React.useState(false);
|
|
557
|
+
const hasUnsavedChangesRef = React.useRef(false);
|
|
558
|
+
const setHasUnsavedChanges = React.useCallback((next) => {
|
|
559
|
+
if (hasUnsavedChangesRef.current === next) return;
|
|
560
|
+
hasUnsavedChangesRef.current = next;
|
|
561
|
+
setHasUnsavedChangesState(next);
|
|
562
|
+
}, []);
|
|
557
563
|
const popStateRollbackRef = React.useRef(false);
|
|
558
564
|
const shouldBypassUnsavedChangesGuardRef = React.useRef(shouldBypassUnsavedChangesGuard);
|
|
559
565
|
React.useEffect(() => {
|
|
@@ -575,7 +581,7 @@ function CrudForm({
|
|
|
575
581
|
const dirty = currentSnapshot !== snapshot;
|
|
576
582
|
isDirtyRef.current = dirty;
|
|
577
583
|
setHasUnsavedChanges(dirty);
|
|
578
|
-
}, [embedded, trackDirtyWhenEmbedded, values]);
|
|
584
|
+
}, [embedded, trackDirtyWhenEmbedded, values, setHasUnsavedChanges]);
|
|
579
585
|
React.useEffect(() => {
|
|
580
586
|
onDirtyChange?.(hasUnsavedChanges);
|
|
581
587
|
}, [hasUnsavedChanges, onDirtyChange]);
|
|
@@ -619,7 +625,7 @@ function CrudForm({
|
|
|
619
625
|
everEditedFieldIdsRef.current.clear();
|
|
620
626
|
isDirtyRef.current = false;
|
|
621
627
|
setHasUnsavedChanges(false);
|
|
622
|
-
}, []);
|
|
628
|
+
}, [setHasUnsavedChanges]);
|
|
623
629
|
const confirmUnsavedChanges = React.useCallback(async () => {
|
|
624
630
|
if (!isDirtyRef.current || typeof window === "undefined") return true;
|
|
625
631
|
if (navigationPromptBypassRef.current || submitNavigationBypassRef.current) return true;
|
|
@@ -725,7 +731,7 @@ function CrudForm({
|
|
|
725
731
|
window.history.pushState = originalPushState;
|
|
726
732
|
window.history.replaceState = originalReplaceState;
|
|
727
733
|
};
|
|
728
|
-
}, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded]);
|
|
734
|
+
}, [allowNextNavigation, clearDirtyState, confirmUnsavedChanges, embedded, hasUnsavedChanges, router, trackDirtyWhenEmbedded, setHasUnsavedChanges]);
|
|
729
735
|
const { widgets: primaryInjectionWidgets } = useInjectionWidgets(resolvedInjectionSpotId, {
|
|
730
736
|
context: injectionContext,
|
|
731
737
|
triggerOnLoad: true
|
|
@@ -1964,14 +1970,18 @@ function CrudForm({
|
|
|
1964
1970
|
if (activeDispatch?.eventId === dispatchToken.eventId && activeDispatch.formGeneration === dispatchToken.formGeneration) {
|
|
1965
1971
|
activeFieldChangeDispatchRef.current = null;
|
|
1966
1972
|
}
|
|
1967
|
-
if (fieldChangeDispatcherMountedRef.current && fieldChangeFormGenerationRef.current === dispatchToken.formGeneration) {
|
|
1973
|
+
if (fieldChangeDispatcherMountedRef.current && fieldChangeFormGenerationRef.current === dispatchToken.formGeneration && pendingFieldChangeEventsRef.current.length > 0) {
|
|
1968
1974
|
setFieldChangeDispatchVersion((version) => version + 1);
|
|
1969
1975
|
}
|
|
1970
1976
|
});
|
|
1971
1977
|
}, [extendedInjectionEventsEnabled, fieldChangeDispatchVersion, triggerInjectionEvent, values]);
|
|
1972
|
-
const
|
|
1973
|
-
|
|
1978
|
+
const validateFieldOnBlurRef = React.useRef(validateFieldOnBlur);
|
|
1979
|
+
React.useLayoutEffect(() => {
|
|
1980
|
+
validateFieldOnBlurRef.current = validateFieldOnBlur;
|
|
1974
1981
|
}, [validateFieldOnBlur]);
|
|
1982
|
+
const onBlurRequest = React.useCallback((fieldId) => {
|
|
1983
|
+
void validateFieldOnBlurRef.current(fieldId);
|
|
1984
|
+
}, []);
|
|
1975
1985
|
const handleFieldsetSelectionChange = React.useCallback(
|
|
1976
1986
|
(entityId2, nextCode) => {
|
|
1977
1987
|
if (!nextCode) return;
|