@jsenv/navi 0.0.1 → 0.1.1

package/src/components/{input → field}/select.jsx

@@ -1,18 +1,16 @@
-import { requestAction } from "@jsenv/validation";
 import { forwardRef } from "preact/compat";
 import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
+
 import { useNavState } from "../../browser_integration/browser_integration.js";
 import { useActionStatus } from "../../use_action_status.js";
+import { requestAction } from "../../validation/custom_constraint_validation.js";
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
-import {
-  useActionBoundToOneParam,
-  useOneFormParam,
-} from "../action_execution/use_action.js";
+import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
 import { LoaderBackground } from "../loader/loader_background.jsx";
-import { useActionEvents } from "../use_action_events.js";
 import { useRefArray } from "../use_ref_array.js";
-import { useFormEvents } from "./use_form_event.js";
+import { useActionEvents } from "./use_action_events.js";
+import { useFormEvents } from "./use_form_events.js";
 
 import.meta.css = /* css */ `
   .navi_select[data-readonly] {
@@ -21,11 +19,12 @@ import.meta.css = /* css */ `
 `;
 
 export const Select = forwardRef((props, ref) => {
-  return renderActionableComponent(props, ref, {
+  const select = renderActionableComponent(props, ref, {
     Basic: SelectBasic,
     WithAction: SelectWithAction,
     InsideForm: SelectInsideForm,
   });
+  return select;
 });
 
 const SelectControlled = forwardRef((props, ref) => {
@@ -137,7 +136,7 @@ const SelectWithAction = forwardRef((props, ref) => {
   useImperativeHandle(ref, () => innerRef.current);
 
   const [navState, setNavState, resetNavState] = useNavState(id);
-  const [boundAction, value, setValue, resetValue] = useActionBoundToOneParam(
+  const [boundAction, value, setValue, initialValue] = useActionBoundToOneParam(
     action,
     name,
     valueSignal ? valueSignal : externalValue,
@@ -155,7 +154,7 @@ const SelectWithAction = forwardRef((props, ref) => {
   useActionEvents(innerRef, {
     onCancel: (e, reason) => {
       resetNavState();
-      resetValue();
+      setValue(initialValue);
       onCancel?.(e, reason);
     },
     onPrevented: onActionPrevented,
@@ -165,11 +164,11 @@ const SelectWithAction = forwardRef((props, ref) => {
     },
     onStart: onActionStart,
     onAbort: (e) => {
-      resetValue();
+      setValue(initialValue);
       onActionAbort?.(e);
     },
     onError: (error) => {
-      resetValue();
+      setValue(initialValue);
       onActionError?.(error);
     },
     onEnd: () => {
@@ -194,10 +193,10 @@ const SelectWithAction = forwardRef((props, ref) => {
         const optionSelected = select.querySelector(
           `option[value="${selectedValue}"]`,
         );
-        requestAction(boundAction, {
+        requestAction(radioListContainer, boundAction, {
           event,
-          target: radioListContainer,
           requester: optionSelected,
+          actionOrigin: "action_prop",
         });
       }}
       {...rest}
@@ -218,26 +217,13 @@ const SelectWithAction = forwardRef((props, ref) => {
 });
 
 const SelectInsideForm = forwardRef((props, ref) => {
-  const {
-    formContext,
-    id,
-    name,
-    readOnly,
-    value: externalValue,
-    children,
-    ...rest
-  } = props;
-  const { formIsReadOnly } = formContext;
+  const { id, name, value: externalValue, children, ...rest } = props;
 
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
   const [navState, setNavState] = useNavState(id);
-  const [value, setValue, resetValue] = useOneFormParam(
-    name,
-    externalValue,
-    navState,
-  );
+  const [value, setValue, initialValue] = [name, externalValue, navState];
   useEffect(() => {
     setNavState(value);
   }, [value]);
@@ -247,10 +233,10 @@ const SelectInsideForm = forwardRef((props, ref) => {
       setValue(undefined);
     },
     onFormActionAbort: () => {
-      resetValue();
+      setValue(initialValue);
     },
     onFormActionError: () => {
-      resetValue();
+      setValue(initialValue);
     },
   });
 
@@ -259,7 +245,6 @@ const SelectInsideForm = forwardRef((props, ref) => {
       ref={innerRef}
       name={name}
       value={value}
-      readOnly={readOnly || formIsReadOnly}
       onChange={(event) => {
         const select = event.target;
         const selectedValue = select.checked;

package/src/components/field/use_action_events.js

@@ -0,0 +1,132 @@
+import { useLayoutEffect, useState } from "preact/hooks";
+
+import { addManyEventListeners } from "../../utils/add_many_event_listeners.js";
+import { useStableCallback } from "../use_stable_callback.js";
+
+export const useActionEvents = (
+  elementRef,
+  {
+    actionOrigin = "action_prop",
+    /**
+     * @param {Event} e - L'événement original
+     * @param {"form_reset" | "blur_invalid" | "escape_key"} reason - Raison du cancel
+     */
+    onCancel,
+    onRequested,
+    onPrevented,
+    onAction,
+    onStart,
+    onAbort,
+    onError,
+    onEnd,
+  },
+) => {
+  onCancel = useStableCallback(onCancel);
+  onRequested = useStableCallback(onRequested);
+  onPrevented = useStableCallback(onPrevented);
+  onAction = useStableCallback(onAction);
+  onStart = useStableCallback(onStart);
+  onAbort = useStableCallback(onAbort);
+  onError = useStableCallback(onError);
+  onEnd = useStableCallback(onEnd);
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return null;
+    }
+
+    return addManyEventListeners(element, {
+      cancel: (e) => {
+        // cancel don't need to check for actionOrigin because
+        // it's actually unrelated to a specific actions
+        // in that sense it should likely be moved elsewhere as it's related to
+        // interaction and constraint validation, not to a specific action
+        onCancel?.(e, e.detail.reason);
+      },
+      actionrequested: (e) => {
+        if (e.detail.actionOrigin !== actionOrigin) {
+          return;
+        }
+        onRequested?.(e);
+      },
+      actionprevented: (e) => {
+        if (e.detail.actionOrigin !== actionOrigin) {
+          return;
+        }
+        onPrevented?.(e);
+      },
+      action: (e) => {
+        if (e.detail.actionOrigin !== actionOrigin) {
+          return;
+        }
+        onAction?.(e);
+      },
+      actionstart: (e) => {
+        if (e.detail.actionOrigin !== actionOrigin) {
+          return;
+        }
+        onStart?.(e);
+      },
+      actionabort: (e) => {
+        if (e.detail.actionOrigin !== actionOrigin) {
+          return;
+        }
+        onAbort?.(e);
+      },
+      actionerror: (e) => {
+        if (e.detail.actionOrigin !== actionOrigin) {
+          return;
+        }
+        onError?.(e.detail.error, e);
+      },
+      actionend: onEnd,
+    });
+  }, [
+    actionOrigin,
+    onCancel,
+    onRequested,
+    onPrevented,
+    onAction,
+    onStart,
+    onAbort,
+    onError,
+    onEnd,
+  ]);
+};
+
+export const useRequestedActionStatus = (elementRef) => {
+  const [actionRequester, setActionRequester] = useState(null);
+  const [actionPending, setActionPending] = useState(false);
+  const [actionAborted, setActionAborted] = useState(false);
+  const [actionError, setActionError] = useState(null);
+
+  useActionEvents(elementRef, {
+    onAction: (actionEvent) => {
+      setActionRequester(actionEvent.detail.requester);
+    },
+    onStart: () => {
+      setActionPending(true);
+      setActionAborted(false);
+      setActionError(null);
+    },
+    onAbort: () => {
+      setActionPending(false);
+      setActionAborted(true);
+    },
+    onError: (error) => {
+      setActionPending(false);
+      setActionError(error);
+    },
+    onEnd: () => {
+      setActionPending(false);
+    },
+  });
+
+  return {
+    actionRequester,
+    actionPending,
+    actionAborted,
+    actionError,
+  };
+};

package/src/components/field/use_form_events.js

@@ -0,0 +1,55 @@
+import { useLayoutEffect } from "preact/hooks";
+
+import { addManyEventListeners } from "../../utils/add_many_event_listeners.js";
+import { useStableCallback } from "../use_stable_callback.js";
+
+export const useFormEvents = (
+  elementRef,
+  {
+    onFormReset,
+    onFormActionPrevented,
+    onFormActionStart,
+    onFormActionAbort,
+    onFormActionError,
+    onFormActionEnd,
+  },
+) => {
+  onFormReset = useStableCallback(onFormReset);
+  onFormActionPrevented = useStableCallback(onFormActionPrevented);
+  onFormActionStart = useStableCallback(onFormActionStart);
+  onFormActionAbort = useStableCallback(onFormActionAbort);
+  onFormActionError = useStableCallback(onFormActionError);
+  onFormActionEnd = useStableCallback(onFormActionEnd);
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) {
+      return null;
+    }
+
+    let form = element.form;
+    if (!form) {
+      // some non input elements may want to listen form events (<RadioList> is a <div>)
+      form = element.closest("form");
+      if (!form) {
+        console.warn("No form found for element", element);
+        return null;
+      }
+    }
+    return addManyEventListeners(form, {
+      reset: onFormReset,
+      actionprevented: onFormActionPrevented,
+      actionstart: onFormActionStart,
+      actionabort: onFormActionAbort,
+      actionerror: onFormActionError,
+      actionend: onFormActionEnd,
+    });
+  }, [
+    onFormReset,
+    onFormActionPrevented,
+    onFormActionStart,
+    onFormActionAbort,
+    onFormActionError,
+    onFormActionEnd,
+  ]);
+};