@refinedev/core 4.47.2 → 4.48.0

package/src/components/layoutWrapper/index.tsx

@@ -1,45 +1,45 @@
 import React, { useEffect } from "react";
 
 import {
-    useRefineContext,
-    useRouterContext,
-    useTranslate,
-    useWarnAboutChange,
+  useRefineContext,
+  useRouterContext,
+  useTranslate,
+  useWarnAboutChange,
 } from "@hooks";
 import { LayoutProps, TitleProps } from "../../interfaces";
 
 export interface LayoutWrapperProps {
-    /**
-     * Outer component that renders other components
-     * @default *
-     */
-    Layout?: React.FC<LayoutProps>;
-    /**
-     * [Custom sider to use](/api-reference/core/components/refine-config.md#sider)
-     * @default *
-     */
-    Sider?: React.FC;
-    /**
-     * [Custom header to use](/api-reference/core/components/refine-config.md#header)
-     * @default *
-     */
-    Header?: React.FC;
-    /**
-     * [Custom title to use](/api-reference/core/components/refine-config.md#title)
-     * @default *
-     */
-    Title?: React.FC<TitleProps>;
-    /**
-     * [Custom footer to use](/api-reference/core/components/refine-config.md#footer)
-     * @default *
-     */
-    Footer?: React.FC;
-    /**
-     * [Custom off layout area to use](/api-reference/core/components/refine-config.md#offlayoutarea)
-     * @default *
-     */
-    OffLayoutArea?: React.FC;
-    children: React.ReactNode;
+  /**
+   * Outer component that renders other components
+   * @default *
+   */
+  Layout?: React.FC<LayoutProps>;
+  /**
+   * [Custom sider to use](/api-reference/core/components/refine-config.md#sider)
+   * @default *
+   */
+  Sider?: React.FC;
+  /**
+   * [Custom header to use](/api-reference/core/components/refine-config.md#header)
+   * @default *
+   */
+  Header?: React.FC;
+  /**
+   * [Custom title to use](/api-reference/core/components/refine-config.md#title)
+   * @default *
+   */
+  Title?: React.FC<TitleProps>;
+  /**
+   * [Custom footer to use](/api-reference/core/components/refine-config.md#footer)
+   * @default *
+   */
+  Footer?: React.FC;
+  /**
+   * [Custom off layout area to use](/api-reference/core/components/refine-config.md#offlayoutarea)
+   * @default *
+   */
+  OffLayoutArea?: React.FC;
+  children: React.ReactNode;
 }
 
 /**
@@ -52,70 +52,70 @@ export interface LayoutWrapperProps {
  * @deprecated This component is obsolete and only works with the legacy router providers.
  */
 export const LayoutWrapper: React.FC<LayoutWrapperProps> = ({
-    children,
-    Layout: LayoutFromProps,
-    Sider: SiderFromProps,
-    Header: HeaderFromProps,
-    Title: TitleFromProps,
-    Footer: FooterFromProps,
-    OffLayoutArea: OffLayoutAreaFromProps,
+  children,
+  Layout: LayoutFromProps,
+  Sider: SiderFromProps,
+  Header: HeaderFromProps,
+  Title: TitleFromProps,
+  Footer: FooterFromProps,
+  OffLayoutArea: OffLayoutAreaFromProps,
 }) => {
-    const { Layout, Footer, Header, Sider, Title, OffLayoutArea } =
-        useRefineContext();
+  const { Layout, Footer, Header, Sider, Title, OffLayoutArea } =
+    useRefineContext();
 
-    const LayoutToRender = LayoutFromProps ?? Layout;
+  const LayoutToRender = LayoutFromProps ?? Layout;
 
-    return (
-        <LayoutToRender
-            Sider={SiderFromProps ?? Sider}
-            Header={HeaderFromProps ?? Header}
-            Footer={FooterFromProps ?? Footer}
-            Title={TitleFromProps ?? Title}
-            OffLayoutArea={OffLayoutAreaFromProps ?? OffLayoutArea}
-        >
-            {children}
-            <UnsavedPrompt />
-        </LayoutToRender>
-    );
+  return (
+    <LayoutToRender
+      Sider={SiderFromProps ?? Sider}
+      Header={HeaderFromProps ?? Header}
+      Footer={FooterFromProps ?? Footer}
+      Title={TitleFromProps ?? Title}
+      OffLayoutArea={OffLayoutAreaFromProps ?? OffLayoutArea}
+    >
+      {children}
+      <UnsavedPrompt />
+    </LayoutToRender>
+  );
 };
 
 const UnsavedPrompt: React.FC = () => {
-    const { Prompt } = useRouterContext();
+  const { Prompt } = useRouterContext();
 
-    const translate = useTranslate();
+  const translate = useTranslate();
 
-    const { warnWhen, setWarnWhen } = useWarnAboutChange();
+  const { warnWhen, setWarnWhen } = useWarnAboutChange();
 
-    const warnWhenListener = (e: {
-        preventDefault: () => void;
-        returnValue: string;
-    }) => {
-        e.preventDefault();
+  const warnWhenListener = (e: {
+    preventDefault: () => void;
+    returnValue: string;
+  }) => {
+    e.preventDefault();
 
-        e.returnValue = translate(
-            "warnWhenUnsavedChanges",
-            "Are you sure you want to leave? You have unsaved changes.",
-        );
+    e.returnValue = translate(
+      "warnWhenUnsavedChanges",
+      "Are you sure you want to leave? You have unsaved changes.",
+    );
 
-        return e.returnValue;
-    };
+    return e.returnValue;
+  };
 
-    useEffect(() => {
-        if (warnWhen) {
-            window.addEventListener("beforeunload", warnWhenListener);
-        }
+  useEffect(() => {
+    if (warnWhen) {
+      window.addEventListener("beforeunload", warnWhenListener);
+    }
 
-        return window.removeEventListener("beforeunload", warnWhenListener);
-    }, [warnWhen]);
+    return window.removeEventListener("beforeunload", warnWhenListener);
+  }, [warnWhen]);
 
-    return (
-        <Prompt
-            when={warnWhen}
-            message={translate(
-                "warnWhenUnsavedChanges",
-                "Are you sure you want to leave? You have unsaved changes.",
-            )}
-            setWarnWhen={setWarnWhen}
-        />
-    );
+  return (
+    <Prompt
+      when={warnWhen}
+      message={translate(
+        "warnWhenUnsavedChanges",
+        "Are you sure you want to leave? You have unsaved changes.",
+      )}
+      setWarnWhen={setWarnWhen}
+    />
+  );
 };

package/src/components/pages/auth/components/forgotPassword/index.tsx

@@ -1,118 +1,109 @@
 import React, { useState } from "react";
 
 import {
-    useTranslate,
-    useRouterContext,
-    useLink,
-    useRouterType,
-    useForgotPassword,
+  useTranslate,
+  useRouterContext,
+  useLink,
+  useRouterType,
+  useForgotPassword,
 } from "@hooks";
 
 import { DivPropsType, FormPropsType } from "../..";
 import {
-    ForgotPasswordFormTypes,
-    ForgotPasswordPageProps,
+  ForgotPasswordFormTypes,
+  ForgotPasswordPageProps,
 } from "../../../../../interfaces";
 
 type ForgotPasswordProps = ForgotPasswordPageProps<
-    DivPropsType,
-    DivPropsType,
-    FormPropsType
+  DivPropsType,
+  DivPropsType,
+  FormPropsType
 >;
 
 export const ForgotPasswordPage: React.FC<ForgotPasswordProps> = ({
-    loginLink,
-    wrapperProps,
-    contentProps,
-    renderContent,
-    formProps,
-    title = undefined,
+  loginLink,
+  wrapperProps,
+  contentProps,
+  renderContent,
+  formProps,
+  title = undefined,
 }) => {
-    const translate = useTranslate();
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
+  const translate = useTranslate();
+  const routerType = useRouterType();
+  const Link = useLink();
+  const { Link: LegacyLink } = useRouterContext();
 
-    const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
+  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;
 
-    const [email, setEmail] = useState("");
+  const [email, setEmail] = useState("");
 
-    const { mutate: forgotPassword, isLoading } =
-        useForgotPassword<ForgotPasswordFormTypes>();
+  const { mutate: forgotPassword, isLoading } =
+    useForgotPassword<ForgotPasswordFormTypes>();
 
-    const renderLink = (link: string, text?: string) => {
-        return <ActiveLink to={link}>{text}</ActiveLink>;
-    };
+  const renderLink = (link: string, text?: string) => {
+    return <ActiveLink to={link}>{text}</ActiveLink>;
+  };
 
-    const content = (
-        <div {...contentProps}>
-            <h1 style={{ textAlign: "center" }}>
-                {translate(
-                    "pages.forgotPassword.title",
-                    "Forgot your password?",
-                )}
-            </h1>
-            <hr />
-            <form
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    forgotPassword({ email });
-                }}
-                {...formProps}
-            >
-                <div
-                    style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        padding: 25,
-                    }}
-                >
-                    <label htmlFor="email-input">
-                        {translate(
-                            "pages.forgotPassword.fields.email",
-                            "Email",
-                        )}
-                    </label>
-                    <input
-                        id="email-input"
-                        name="email"
-                        type="mail"
-                        autoCorrect="off"
-                        spellCheck={false}
-                        autoCapitalize="off"
-                        required
-                        value={email}
-                        onChange={(e) => setEmail(e.target.value)}
-                    />
-                    <input
-                        type="submit"
-                        disabled={isLoading}
-                        value={translate(
-                            "pages.forgotPassword.buttons.submit",
-                            "Send reset instructions",
-                        )}
-                    />
-                    <br />
-                    {loginLink ?? (
-                        <span>
-                            {translate(
-                                "pages.register.buttons.haveAccount",
-                                "Have an account? ",
-                            )}{" "}
-                            {renderLink(
-                                "/login",
-                                translate("pages.login.signin", "Sign in"),
-                            )}
-                        </span>
-                    )}
-                </div>
-            </form>
+  const content = (
+    <div {...contentProps}>
+      <h1 style={{ textAlign: "center" }}>
+        {translate("pages.forgotPassword.title", "Forgot your password?")}
+      </h1>
+      <hr />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          forgotPassword({ email });
+        }}
+        {...formProps}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            padding: 25,
+          }}
+        >
+          <label htmlFor="email-input">
+            {translate("pages.forgotPassword.fields.email", "Email")}
+          </label>
+          <input
+            id="email-input"
+            name="email"
+            type="mail"
+            autoCorrect="off"
+            spellCheck={false}
+            autoCapitalize="off"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+          <input
+            type="submit"
+            disabled={isLoading}
+            value={translate(
+              "pages.forgotPassword.buttons.submit",
+              "Send reset instructions",
+            )}
+          />
+          <br />
+          {loginLink ?? (
+            <span>
+              {translate(
+                "pages.register.buttons.haveAccount",
+                "Have an account? ",
+              )}{" "}
+              {renderLink("/login", translate("pages.login.signin", "Sign in"))}
+            </span>
+          )}
         </div>
-    );
+      </form>
+    </div>
+  );
 
-    return (
-        <div {...wrapperProps}>
-            {renderContent ? renderContent(content, title) : content}
-        </div>
-    );
+  return (
+    <div {...wrapperProps}>
+      {renderContent ? renderContent(content, title) : content}
+    </div>
+  );
 };