@refinedev/antd 5.37.3 → 5.37.5

package/src/components/pageHeader/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import {
-    PageHeader as AntdPageHeader,
-    PageHeaderProps as AntdPageHeaderProps,
+  PageHeader as AntdPageHeader,
+  PageHeaderProps as AntdPageHeaderProps,
 } from "@ant-design/pro-layout";
 import { Button, Typography } from "antd";
 import { ArrowLeftOutlined } from "@ant-design/icons";
@@ -10,49 +10,49 @@ import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
 export type PageHeaderProps = AntdPageHeaderProps;
 
 export const PageHeader: FC<AntdPageHeaderProps> = ({ children, ...props }) => {
-    const backIcon =
-        typeof props.backIcon === "undefined" ? (
-            <Button type="text" icon={<ArrowLeftOutlined />} />
-        ) : (
-            props.backIcon
-        );
-
-    const title =
-        typeof props.title === "string" ? (
-            <Typography.Title
-                className={RefinePageHeaderClassNames.Title}
-                level={4}
-                style={{ marginBottom: 0 }}
-            >
-                {props.title}
-            </Typography.Title>
-        ) : (
-            props.title
-        );
+  const backIcon =
+    typeof props.backIcon === "undefined" ? (
+      <Button type="text" icon={<ArrowLeftOutlined />} />
+    ) : (
+      props.backIcon
+    );
 
-    const subtitle =
-        typeof props.title === "string" ? (
-            <Typography.Title
-                className={RefinePageHeaderClassNames.SubTitle}
-                level={5}
-                type="secondary"
-                style={{ marginBottom: 0 }}
-            >
-                {props.subTitle}
-            </Typography.Title>
-        ) : (
-            props.subTitle
-        );
+  const title =
+    typeof props.title === "string" ? (
+      <Typography.Title
+        className={RefinePageHeaderClassNames.Title}
+        level={4}
+        style={{ marginBottom: 0 }}
+      >
+        {props.title}
+      </Typography.Title>
+    ) : (
+      props.title
+    );
 
-    return (
-        <AntdPageHeader
-            {...props}
-            backIcon={backIcon}
-            title={title}
-            subTitle={subtitle}
-            style={{ padding: 0, ...props.style }}
-        >
-            {children}
-        </AntdPageHeader>
+  const subtitle =
+    typeof props.title === "string" ? (
+      <Typography.Title
+        className={RefinePageHeaderClassNames.SubTitle}
+        level={5}
+        type="secondary"
+        style={{ marginBottom: 0 }}
+      >
+        {props.subTitle}
+      </Typography.Title>
+    ) : (
+      props.subTitle
     );
+
+  return (
+    <AntdPageHeader
+      {...props}
+      backIcon={backIcon}
+      title={title}
+      subTitle={subtitle}
+      style={{ padding: 0, ...props.style }}
+    >
+      {children}
+    </AntdPageHeader>
+  );
 };

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

@@ -1,215 +1,209 @@
 import React from "react";
 import {
-    ForgotPasswordPageProps,
-    ForgotPasswordFormTypes,
-    useRouterType,
-    useLink,
+  ForgotPasswordPageProps,
+  ForgotPasswordFormTypes,
+  useRouterType,
+  useLink,
 } from "@refinedev/core";
 import {
-    Row,
-    Col,
-    Layout,
-    Card,
-    Typography,
-    Form,
-    Input,
-    Button,
-    LayoutProps,
-    CardProps,
-    FormProps,
-    theme,
+  Row,
+  Col,
+  Layout,
+  Card,
+  Typography,
+  Form,
+  Input,
+  Button,
+  LayoutProps,
+  CardProps,
+  FormProps,
+  theme,
 } from "antd";
 import {
-    useTranslate,
-    useRouterContext,
-    useForgotPassword,
+  useTranslate,
+  useRouterContext,
+  useForgotPassword,
 } from "@refinedev/core";
 
 import {
-    layoutStyles,
-    containerStyles,
-    titleStyles,
-    headStyles,
-    bodyStyles,
+  layoutStyles,
+  containerStyles,
+  titleStyles,
+  headStyles,
+  bodyStyles,
 } from "../styles";
 import { ThemedTitleV2 } from "@components";
 
 type ResetPassworProps = ForgotPasswordPageProps<
-    LayoutProps,
-    CardProps,
-    FormProps
+  LayoutProps,
+  CardProps,
+  FormProps
 >;
 
-const { Text, Title } = Typography;
-const { useToken } = theme;
-
 /**
  * **refine** has forgot password page form which is served on `/forgot-password` route when the `authProvider` configuration is provided.
  *
  * @see {@link https://refine.dev/docs/ui-frameworks/antd/components/antd-auth-page/#forgot-password} for more details.
  */
 export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
-    loginLink,
-    wrapperProps,
-    contentProps,
-    renderContent,
-    formProps,
-    title,
+  loginLink,
+  wrapperProps,
+  contentProps,
+  renderContent,
+  formProps,
+  title,
 }) => {
-    const { token } = useToken();
-    const [form] = Form.useForm<ForgotPasswordFormTypes>();
-    const translate = useTranslate();
-    const routerType = useRouterType();
-    const Link = useLink();
-    const { Link: LegacyLink } = useRouterContext();
+  const { token } = theme.useToken();
+  const [form] = Form.useForm<ForgotPasswordFormTypes>();
+  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 { mutate: forgotPassword, isLoading } =
-        useForgotPassword<ForgotPasswordFormTypes>();
+  const { mutate: forgotPassword, isLoading } =
+    useForgotPassword<ForgotPasswordFormTypes>();
 
-    const PageTitle =
-        title === false ? null : (
-            <div
-                style={{
-                    display: "flex",
-                    justifyContent: "center",
-                    marginBottom: "32px",
-                    fontSize: "20px",
-                }}
-            >
-                {title ?? <ThemedTitleV2 collapsed={false} />}
-            </div>
-        );
+  const PageTitle =
+    title === false ? null : (
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginBottom: "32px",
+          fontSize: "20px",
+        }}
+      >
+        {title ?? <ThemedTitleV2 collapsed={false} />}
+      </div>
+    );
 
-    const CardTitle = (
-        <Title
-            level={3}
-            style={{
-                color: token.colorPrimaryTextHover,
-                ...titleStyles,
-            }}
+  const CardTitle = (
+    <Typography.Title
+      level={3}
+      style={{
+        color: token.colorPrimaryTextHover,
+        ...titleStyles,
+      }}
+    >
+      {translate("pages.forgotPassword.title", "Forgot your password?")}
+    </Typography.Title>
+  );
+  const CardContent = (
+    <Card
+      title={CardTitle}
+      headStyle={headStyles}
+      bodyStyle={bodyStyles}
+      style={{
+        ...containerStyles,
+        backgroundColor: token.colorBgElevated,
+      }}
+      {...(contentProps ?? {})}
+    >
+      <Form<ForgotPasswordFormTypes>
+        layout="vertical"
+        form={form}
+        onFinish={(values) => forgotPassword(values)}
+        requiredMark={false}
+        {...formProps}
+      >
+        <Form.Item
+          name="email"
+          label={translate("pages.forgotPassword.fields.email", "Email")}
+          rules={[
+            { required: true },
+            {
+              type: "email",
+              message: translate(
+                "pages.forgotPassword.errors.validEmail",
+                "Invalid email address",
+              ),
+            },
+          ]}
         >
-            {translate("pages.forgotPassword.title", "Forgot your password?")}
-        </Title>
-    );
-    const CardContent = (
-        <Card
-            title={CardTitle}
-            headStyle={headStyles}
-            bodyStyle={bodyStyles}
-            style={{
-                ...containerStyles,
-                backgroundColor: token.colorBgElevated,
-            }}
-            {...(contentProps ?? {})}
+          <Input
+            type="email"
+            size="large"
+            placeholder={translate(
+              "pages.forgotPassword.fields.email",
+              "Email",
+            )}
+          />
+        </Form.Item>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+          }}
         >
-            <Form<ForgotPasswordFormTypes>
-                layout="vertical"
-                form={form}
-                onFinish={(values) => forgotPassword(values)}
-                requiredMark={false}
-                {...formProps}
+          {loginLink ?? (
+            <Typography.Text
+              style={{
+                fontSize: 12,
+                marginLeft: "auto",
+              }}
             >
-                <Form.Item
-                    name="email"
-                    label={translate(
-                        "pages.forgotPassword.fields.email",
-                        "Email",
-                    )}
-                    rules={[
-                        { required: true },
-                        {
-                            type: "email",
-                            message: translate(
-                                "pages.forgotPassword.errors.validEmail",
-                                "Invalid email address",
-                            ),
-                        },
-                    ]}
-                >
-                    <Input
-                        type="email"
-                        size="large"
-                        placeholder={translate(
-                            "pages.forgotPassword.fields.email",
-                            "Email",
-                        )}
-                    />
-                </Form.Item>
-                <div
-                    style={{
-                        display: "flex",
-                        justifyContent: "space-between",
-                    }}
-                >
-                    {loginLink ?? (
-                        <Text
-                            style={{
-                                fontSize: 12,
-                                marginLeft: "auto",
-                            }}
-                        >
-                            {translate(
-                                "pages.register.buttons.haveAccount",
-                                "Have an account? ",
-                            )}{" "}
-                            <ActiveLink
-                                style={{
-                                    fontWeight: "bold",
-                                    color: token.colorPrimaryTextHover,
-                                }}
-                                to="/login"
-                            >
-                                {translate("pages.login.signin", "Sign in")}
-                            </ActiveLink>
-                        </Text>
-                    )}
-                </div>
-                <Form.Item
-                    style={{
-                        marginTop: "24px",
-                        marginBottom: 0,
-                    }}
-                >
-                    <Button
-                        type="primary"
-                        size="large"
-                        htmlType="submit"
-                        loading={isLoading}
-                        block
-                    >
-                        {translate(
-                            "pages.forgotPassword.buttons.submit",
-                            "Send reset instructions",
-                        )}
-                    </Button>
-                </Form.Item>
-            </Form>
-        </Card>
-    );
-
-    return (
-        <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
-            <Row
-                justify="center"
-                align="middle"
+              {translate(
+                "pages.register.buttons.haveAccount",
+                "Have an account? ",
+              )}{" "}
+              <ActiveLink
                 style={{
-                    padding: "16px 0",
-                    minHeight: "100dvh",
+                  fontWeight: "bold",
+                  color: token.colorPrimaryTextHover,
                 }}
-            >
-                <Col xs={22}>
-                    {renderContent ? (
-                        renderContent(CardContent, PageTitle)
-                    ) : (
-                        <>
-                            {PageTitle}
-                            {CardContent}
-                        </>
-                    )}
-                </Col>
-            </Row>
-        </Layout>
-    );
+                to="/login"
+              >
+                {translate("pages.login.signin", "Sign in")}
+              </ActiveLink>
+            </Typography.Text>
+          )}
+        </div>
+        <Form.Item
+          style={{
+            marginTop: "24px",
+            marginBottom: 0,
+          }}
+        >
+          <Button
+            type="primary"
+            size="large"
+            htmlType="submit"
+            loading={isLoading}
+            block
+          >
+            {translate(
+              "pages.forgotPassword.buttons.submit",
+              "Send reset instructions",
+            )}
+          </Button>
+        </Form.Item>
+      </Form>
+    </Card>
+  );
+
+  return (
+    <Layout style={layoutStyles} {...(wrapperProps ?? {})}>
+      <Row
+        justify="center"
+        align="middle"
+        style={{
+          padding: "16px 0",
+          minHeight: "100dvh",
+        }}
+      >
+        <Col xs={22}>
+          {renderContent ? (
+            renderContent(CardContent, PageTitle)
+          ) : (
+            <>
+              {PageTitle}
+              {CardContent}
+            </>
+          )}
+        </Col>
+      </Row>
+    </Layout>
+  );
 };