@jsenv/navi 0.0.1 → 0.1.0

package/src/components/field/radio_list.jsx

@@ -0,0 +1,182 @@
+import { forwardRef } from "preact/compat";
+import {
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "preact/hooks";
+
+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 } from "../action_execution/use_action.js";
+import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { InputRadio } from "./input_radio.jsx";
+import { useActionEvents } from "./use_action_events.js";
+import {
+  DisabledContext,
+  FieldNameContext,
+  LoadingContext,
+  LoadingElementContext,
+  ParentUIStateControllerContext,
+  ReadOnlyContext,
+  RequiredContext,
+  UIStateContext,
+  UIStateControllerContext,
+  useUIGroupStateController,
+  useUIState,
+} from "./use_ui_state_controller.js";
+
+import.meta.css = /* css */ `
+  .navi_radio_list {
+    display: flex;
+    flex-direction: column;
+  }
+`;
+
+export const RadioList = forwardRef((props, ref) => {
+  const uiStateController = useUIGroupStateController(props, "radio_list", {
+    childComponentType: "radio",
+    aggregateChildStates: (childUIStateControllers) => {
+      let activeValue;
+      for (const childUIStateController of childUIStateControllers) {
+        if (childUIStateController.uiState) {
+          activeValue = childUIStateController.uiState;
+          break;
+        }
+      }
+      return activeValue;
+    },
+  });
+  const uiState = useUIState(uiStateController);
+  const radioList = renderActionableComponent(props, ref, {
+    Basic: RadioListBasic,
+    WithAction: RadioListWithAction,
+    InsideForm: RadioListInsideForm,
+  });
+  return (
+    <UIStateControllerContext.Provider value={uiStateController}>
+      <UIStateContext.Provider value={uiState}>
+        {radioList}
+      </UIStateContext.Provider>
+    </UIStateControllerContext.Provider>
+  );
+});
+export const Radio = InputRadio;
+
+const RadioListBasic = forwardRef((props, ref) => {
+  const contextReadOnly = useContext(ReadOnlyContext);
+  const contextDisabled = useContext(DisabledContext);
+  const contextLoading = useContext(LoadingContext);
+  const uiStateController = useContext(UIStateControllerContext);
+  const { name, loading, disabled, readOnly, children, required, ...rest } =
+    props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+
+  const innerLoading = loading || contextLoading;
+  const innerReadOnly =
+    readOnly || contextReadOnly || innerLoading || uiStateController.readOnly;
+  const innerDisabled = disabled || contextDisabled;
+
+  return (
+    <div
+      data-action={rest["data-action"]}
+      {...rest}
+      ref={innerRef}
+      className="navi_radio_list"
+      data-radio-list
+      // eslint-disable-next-line react/no-unknown-property
+      onresetuistate={(e) => {
+        uiStateController.resetUIState(e);
+      }}
+    >
+      <ParentUIStateControllerContext.Provider value={uiStateController}>
+        <FieldNameContext.Provider value={name}>
+          <ReadOnlyContext.Provider value={innerReadOnly}>
+            <DisabledContext.Provider value={innerDisabled}>
+              <RequiredContext.Provider value={required}>
+                <LoadingContext.Provider value={innerLoading}>
+                  {children}
+                </LoadingContext.Provider>
+              </RequiredContext.Provider>
+            </DisabledContext.Provider>
+          </ReadOnlyContext.Provider>
+        </FieldNameContext.Provider>
+      </ParentUIStateControllerContext.Provider>
+    </div>
+  );
+});
+const RadioListWithAction = forwardRef((props, ref) => {
+  const uiStateController = useContext(UIStateControllerContext);
+  const uiState = useContext(UIStateContext);
+  const {
+    action,
+
+    onCancel,
+    onActionPrevented,
+    onActionStart,
+    onActionAbort,
+    onActionError,
+    onActionEnd,
+    actionErrorEffect,
+    loading,
+    children,
+    ...rest
+  } = props;
+  const innerRef = useRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  const [boundAction] = useActionBoundToOneParam(action, uiState);
+  const { loading: actionLoading } = useActionStatus(boundAction);
+  const executeAction = useExecuteAction(innerRef, {
+    errorEffect: actionErrorEffect,
+  });
+  const [actionRequester, setActionRequester] = useState(null);
+
+  useActionEvents(innerRef, {
+    onCancel: (e, reason) => {
+      uiStateController.resetUIState(e);
+      onCancel?.(e, reason);
+    },
+    onPrevented: onActionPrevented,
+    onAction: (actionEvent) => {
+      setActionRequester(actionEvent.detail.requester);
+      executeAction(actionEvent);
+    },
+    onStart: onActionStart,
+    onAbort: (e) => {
+      uiStateController.resetUIState(e);
+      onActionAbort?.(e);
+    },
+    onError: (e) => {
+      uiStateController.resetUIState(e);
+      onActionError?.(e);
+    },
+    onEnd: (e) => {
+      onActionEnd?.(e);
+    },
+  });
+
+  return (
+    <RadioListBasic
+      data-action={boundAction}
+      {...rest}
+      ref={innerRef}
+      onChange={(e) => {
+        const radio = e.target;
+        const radioListContainer = innerRef.current;
+        requestAction(radioListContainer, boundAction, {
+          event: e,
+          requester: radio,
+          actionOrigin: "action_prop",
+        });
+      }}
+      loading={loading || actionLoading}
+    >
+      <LoadingElementContext.Provider value={actionRequester}>
+        {children}
+      </LoadingElementContext.Provider>
+    </RadioListBasic>
+  );
+});
+const RadioListInsideForm = RadioListBasic;

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,
+  ]);
+};