How to use the reakit-utils/useUpdateEffect.useUpdateEffect function in reakit-utils

To help you get started, we’ve selected a few reakit-utils examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github reakit / reakit / packages / reakit / src / Dialog / __utils / useFocusOnShow.ts View on Github external
export function useFocusOnShow(
  dialogRef: React.RefObject,
  nestedDialogs: Array>,
  options: DialogOptions
) {
  const initialFocusRef = options.unstable_initialFocusRef;
  const shouldFocus = options.visible && options.unstable_autoFocusOnShow;

  useUpdateEffect(() => {
    const dialog = dialogRef.current;

    warning(
      Boolean(shouldFocus && !dialog),
      "[reakit/Dialog]",
      "Can't set initial focus on dialog because `ref` wasn't passed to component.",
      "See https://reakit.io/docs/dialog"
    );

    // If there're nested open dialogs, let them handle focus
    if (
      !shouldFocus ||
      !dialog ||
      nestedDialogs.find(child =>
        Boolean(child.current && !child.current.hidden)
      )
github reakit / reakit / packages / reakit / src / Dialog / __utils / useFocusOnHide.ts View on Github external
export function useFocusOnHide(
  dialogRef: React.RefObject,
  disclosuresRef: React.RefObject,
  options: DialogOptions
) {
  const shouldFocus = options.unstable_autoFocusOnHide && !options.visible;

  useUpdateEffect(() => {
    if (!shouldFocus) return;
    const dialog = dialogRef.current;

    // Hide was triggered by a click/focus on a tabbable element outside
    // the dialog or on another dialog. We won't change focus then.
    if (
      document.activeElement &&
      dialog &&
      !dialog.contains(document.activeElement) &&
      (isTabbable(document.activeElement) ||
        document.activeElement.getAttribute("data-dialog") === "true")
    ) {
      return;
    }

    const finalFocusEl =
github reakit / reakit / packages / reakit / src / Form / FormState.ts View on Github external
Promise.resolve(response).then(messages => {
              dispatch({ type: "endValidate", messages });
              return messages;
            })
          );
        } else {
          resolve(undefined);
        }
      }).catch(errors => {
        dispatch({ type: "endValidate", errors });
        throw errors;
      }),
    [state.values]
  );

  useUpdateEffect(() => {
    if (validateOnChange) {
      validate().catch(() => {});
    }
  }, [validate, validateOnChange]);

  React.useEffect(() => {
    if (resetOnUnmount) {
      return () => {
        dispatch({ type: "reset" });
      };
    }
    return undefined;
  }, [resetOnUnmount]);

  return {
    ...id,