From fa540c046d126449f77e46edd379bbc84e02d05d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sat, 26 Jun 2021 00:00:54 +0800
Subject: ...

---
 FrontEnd/src/views/common/ConfirmDialog.tsx     | 18 +++++++-------
 FrontEnd/src/views/common/button/Button.css     |  0
 FrontEnd/src/views/common/button/Button.tsx     | 30 ++++++++++++++++++++++++
 FrontEnd/src/views/common/button/FlatButton.tsx | 31 ++++---------------------
 FrontEnd/src/views/common/button/TextButton.tsx | 31 ++++---------------------
 FrontEnd/src/views/common/button/common.ts      | 31 +++++++++++++++++++++++++
 6 files changed, 79 insertions(+), 62 deletions(-)
 create mode 100644 FrontEnd/src/views/common/button/Button.css
 create mode 100644 FrontEnd/src/views/common/button/Button.tsx
 create mode 100644 FrontEnd/src/views/common/button/common.ts

(limited to 'FrontEnd/src/views/common')

diff --git a/FrontEnd/src/views/common/ConfirmDialog.tsx b/FrontEnd/src/views/common/ConfirmDialog.tsx
index 72940c51..70dc83f5 100644
--- a/FrontEnd/src/views/common/ConfirmDialog.tsx
+++ b/FrontEnd/src/views/common/ConfirmDialog.tsx
@@ -1,8 +1,9 @@
 import { convertI18nText, I18nText } from "@/common";
 import React from "react";
-import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
+import Button from "./button/Button";
+
 const ConfirmDialog: React.FC<{
   onClose: () => void;
   onConfirm: () => void;
@@ -20,18 +21,19 @@ const ConfirmDialog: React.FC<{
       </Modal.Header>
       <Modal.Body>{convertI18nText(body, t)}</Modal.Body>
       <Modal.Footer>
-        <Button variant="secondary" onClick={onClose}>
-          {t("operationDialog.cancel")}
-        </Button>
         <Button
-          variant="danger"
+          text="operationDialog.cancel"
+          color="secondary"
+          onClick={onClose}
+        />
+        <Button
+          text="operationDialog.confirm"
+          color="danger"
           onClick={() => {
             onConfirm();
             onClose();
           }}
-        >
-          {t("operationDialog.confirm")}
-        </Button>
+        />
       </Modal.Footer>
     </Modal>
   );
diff --git a/FrontEnd/src/views/common/button/Button.css b/FrontEnd/src/views/common/button/Button.css
new file mode 100644
index 00000000..e69de29b
diff --git a/FrontEnd/src/views/common/button/Button.tsx b/FrontEnd/src/views/common/button/Button.tsx
new file mode 100644
index 00000000..11710647
--- /dev/null
+++ b/FrontEnd/src/views/common/button/Button.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { calculateProps, CommonButtonProps } from "./common";
+
+import "./Button.css";
+
+function _Button(
+  props: CommonButtonProps & { customButtonClassName?: string },
+  ref: React.ForwardedRef<HTMLButtonElement>
+): React.ReactElement | null {
+  const { t } = useTranslation();
+
+  const { customButtonClassName, ...otherProps } = props;
+
+  const { newProps, children } = calculateProps(
+    otherProps,
+    customButtonClassName ?? "cru-button",
+    t
+  );
+
+  return (
+    <button ref={ref} {...newProps}>
+      {children}
+    </button>
+  );
+}
+
+const Button = React.forwardRef(_Button);
+export default Button;
diff --git a/FrontEnd/src/views/common/button/FlatButton.tsx b/FrontEnd/src/views/common/button/FlatButton.tsx
index 6351971a..266ea908 100644
--- a/FrontEnd/src/views/common/button/FlatButton.tsx
+++ b/FrontEnd/src/views/common/button/FlatButton.tsx
@@ -1,39 +1,16 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import classNames from "classnames";
 
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
+import { CommonButtonProps } from "./common";
+import Button from "./Button";
 
 import "./FlatButton.css";
 
 function _FlatButton(
-  {
-    text,
-    color,
-    onClick,
-    className,
-    style,
-  }: {
-    text: I18nText;
-    color?: PaletteColorType;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-  },
+  props: CommonButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
-  const { t } = useTranslation();
-
   return (
-    <button
-      ref={ref}
-      className={classNames("cru-flat-button", color ?? "primary", className)}
-      onClick={onClick}
-      style={style}
-    >
-      {convertI18nText(text, t)}
-    </button>
+    <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
   );
 }
 
diff --git a/FrontEnd/src/views/common/button/TextButton.tsx b/FrontEnd/src/views/common/button/TextButton.tsx
index 1a2bac94..1d8e7a4b 100644
--- a/FrontEnd/src/views/common/button/TextButton.tsx
+++ b/FrontEnd/src/views/common/button/TextButton.tsx
@@ -1,39 +1,16 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
-import classNames from "classnames";
 
-import { convertI18nText, I18nText } from "@/common";
-import { PaletteColorType } from "@/palette";
+import { CommonButtonProps } from "./common";
+import Button from "./Button";
 
 import "./TextButton.css";
 
 function _TextButton(
-  {
-    text,
-    color,
-    onClick,
-    className,
-    style,
-  }: {
-    text: I18nText;
-    color?: PaletteColorType;
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-  },
+  props: CommonButtonProps,
   ref: React.ForwardedRef<HTMLButtonElement>
 ): React.ReactElement | null {
-  const { t } = useTranslation();
-
   return (
-    <button
-      ref={ref}
-      className={classNames("cru-text-button", color ?? "primary", className)}
-      onClick={onClick}
-      style={style}
-    >
-      {convertI18nText(text, t)}
-    </button>
+    <Button ref={ref} customButtonClassName="cru-flat-button" {...props} />
   );
 }
 
diff --git a/FrontEnd/src/views/common/button/common.ts b/FrontEnd/src/views/common/button/common.ts
new file mode 100644
index 00000000..a9db959e
--- /dev/null
+++ b/FrontEnd/src/views/common/button/common.ts
@@ -0,0 +1,31 @@
+import React from "react";
+import classNames from "classnames";
+import { TFunction } from "i18next";
+
+import { convertI18nText, I18nText } from "@/common";
+import { PaletteColorType } from "@/palette";
+
+export type CommonButtonProps = {
+  text?: I18nText;
+  color?: PaletteColorType;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function calculateProps(
+  props: CommonButtonProps,
+  buttonClassName: string,
+  t: TFunction
+): {
+  children: React.ReactNode;
+  newProps: React.ButtonHTMLAttributes<HTMLButtonElement>;
+} {
+  const { text, color, className, children, ...otherProps } = props;
+  const newProps = {
+    className: classNames(buttonClassName, color ?? "primary", className),
+    ...otherProps,
+  };
+
+  return {
+    children: text != null ? convertI18nText(text, t) : children,
+    newProps: newProps,
+  };
+}
-- 
cgit v1.2.3