@jsenv/navi 0.10.2 → 0.11.0

package/src/components/field/select.jsx

@@ -1,256 +0,0 @@
-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 } from "../action_execution/use_action.js";
-import { useExecuteAction } from "../action_execution/use_execute_action.js";
-import { LoaderBackground } from "../loader/loader_background.jsx";
-import { useRefArray } from "../use_ref_array.js";
-import { useActionEvents } from "./use_action_events.js";
-import { useFormEvents } from "./use_form_events.js";
-
-import.meta.css = /* css */ `
-  .navi_select[data-readonly] {
-    pointer-events: none;
-  }
-`;
-
-export const Select = forwardRef((props, ref) => {
-  const select = renderActionableComponent(props, ref, {
-    Basic: SelectBasic,
-    WithAction: SelectWithAction,
-    InsideForm: SelectInsideForm,
-  });
-  return select;
-});
-
-const SelectControlled = forwardRef((props, ref) => {
-  const { name, value, loading, disabled, readOnly, children, ...rest } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const selectElement = (
-    <select
-      className="navi_select"
-      ref={innerRef}
-      data-readonly={readOnly && !disabled ? "" : undefined}
-      onKeyDown={(e) => {
-        if (readOnly) {
-          e.preventDefault();
-        }
-      }}
-      {...rest}
-    >
-      {children.map((child) => {
-        const {
-          label,
-          readOnly: childReadOnly,
-          disabled: childDisabled,
-          loading: childLoading,
-          value: childValue,
-          ...childRest
-        } = child;
-
-        return (
-          <option
-            key={childValue}
-            name={name}
-            value={childValue}
-            selected={childValue === value}
-            readOnly={readOnly || childReadOnly}
-            disabled={disabled || childDisabled}
-            loading={loading || childLoading}
-            {...childRest}
-          >
-            {label}
-          </option>
-        );
-      })}
-    </select>
-  );
-
-  return (
-    <LoaderBackground
-      loading={loading}
-      color="light-dark(#355fcc, #3b82f6)"
-      inset={-1}
-    >
-      {selectElement}
-    </LoaderBackground>
-  );
-});
-
-const SelectBasic = forwardRef((props, ref) => {
-  const { value: initialValue, id, children, ...rest } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const valueAtStart = navState === undefined ? initialValue : navState;
-  const [value, setValue] = useState(valueAtStart);
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
-  return (
-    <SelectControlled
-      ref={innerRef}
-      value={value}
-      onChange={(event) => {
-        const select = event.target;
-        const selectedValue = select.value;
-        setValue(selectedValue);
-      }}
-      {...rest}
-    >
-      {children}
-    </SelectControlled>
-  );
-});
-
-const SelectWithAction = forwardRef((props, ref) => {
-  const {
-    id,
-    name,
-    value: externalValue,
-    valueSignal,
-    action,
-    children,
-    onCancel,
-    onActionPrevented,
-    onActionStart,
-    onActionAbort,
-    onActionError,
-    onActionEnd,
-    actionErrorEffect,
-    ...rest
-  } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState, resetNavState] = useNavState(id);
-  const [boundAction, value, setValue, initialValue] = useActionBoundToOneParam(
-    action,
-    name,
-    valueSignal ? valueSignal : externalValue,
-    navState,
-  );
-  const { loading: actionLoading } = useActionStatus(boundAction);
-  const executeAction = useExecuteAction(innerRef, {
-    errorEffect: actionErrorEffect,
-  });
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
-  const actionRequesterRef = useRef(null);
-  useActionEvents(innerRef, {
-    onCancel: (e, reason) => {
-      resetNavState();
-      setValue(initialValue);
-      onCancel?.(e, reason);
-    },
-    onPrevented: onActionPrevented,
-    onAction: (actionEvent) => {
-      actionRequesterRef.current = actionEvent.detail.requester;
-      executeAction(actionEvent);
-    },
-    onStart: onActionStart,
-    onAbort: (e) => {
-      setValue(initialValue);
-      onActionAbort?.(e);
-    },
-    onError: (error) => {
-      setValue(initialValue);
-      onActionError?.(error);
-    },
-    onEnd: () => {
-      resetNavState();
-      onActionEnd?.();
-    },
-  });
-
-  const childRefArray = useRefArray(children, (child) => child.value);
-
-  return (
-    <SelectControlled
-      ref={innerRef}
-      name={name}
-      value={value}
-      data-action={boundAction}
-      onChange={(event) => {
-        const select = event.target;
-        const selectedValue = select.value;
-        setValue(selectedValue);
-        const radioListContainer = innerRef.current;
-        const optionSelected = select.querySelector(
-          `option[value="${selectedValue}"]`,
-        );
-        requestAction(radioListContainer, boundAction, {
-          event,
-          requester: optionSelected,
-        });
-      }}
-      {...rest}
-    >
-      {children.map((child, i) => {
-        const childRef = childRefArray[i];
-        return {
-          ...child,
-          ref: childRef,
-          loading:
-            child.loading ||
-            (actionLoading && actionRequesterRef.current === childRef.current),
-          readOnly: child.readOnly || actionLoading,
-        };
-      })}
-    </SelectControlled>
-  );
-});
-
-const SelectInsideForm = forwardRef((props, ref) => {
-  const { id, name, value: externalValue, children, ...rest } = props;
-
-  const innerRef = useRef();
-  useImperativeHandle(ref, () => innerRef.current);
-
-  const [navState, setNavState] = useNavState(id);
-  const [value, setValue, initialValue] = [name, externalValue, navState];
-  useEffect(() => {
-    setNavState(value);
-  }, [value]);
-
-  useFormEvents(innerRef, {
-    onFormReset: () => {
-      setValue(undefined);
-    },
-    onFormActionAbort: () => {
-      setValue(initialValue);
-    },
-    onFormActionError: () => {
-      setValue(initialValue);
-    },
-  });
-
-  return (
-    <SelectControlled
-      ref={innerRef}
-      name={name}
-      value={value}
-      onChange={(event) => {
-        const select = event.target;
-        const selectedValue = select.checked;
-        setValue(selectedValue);
-      }}
-      {...rest}
-    >
-      {children}
-    </SelectControlled>
-  );
-});

package/src/components/field/use_action_events.js

@@ -1,132 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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,
-    onFormActionRequested,
-    onFormActionPrevented,
-    onFormActionStart,
-    onFormActionAbort,
-    onFormActionError,
-    onFormActionEnd,
-  },
-) => {
-  onFormReset = useStableCallback(onFormReset);
-  onFormActionRequested = useStableCallback(onFormActionRequested);
-  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,
-      actionrequested: onFormActionRequested,
-      actionprevented: onFormActionPrevented,
-      actionstart: onFormActionStart,
-      actionabort: onFormActionAbort,
-      actionerror: onFormActionError,
-      actionend: onFormActionEnd,
-    });
-  }, [
-    onFormReset,
-    onFormActionRequested,
-    onFormActionPrevented,
-    onFormActionStart,
-    onFormActionAbort,
-    onFormActionError,
-    onFormActionEnd,
-  ]);
-};