FrontEnd/src/views/common/button/Button.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import * as React from "react";
import classNames from "classnames";
import { useTranslation } from "react-i18next";

import { convertI18nText, I18nText } from "@/common";
import { PaletteColorType } from "@/palette";

import "./Button.css";

function _Button(
  props: {
    color?: PaletteColorType;
    text?: I18nText;
    outline?: boolean;
  } & React.ComponentPropsWithoutRef<"button">,
  ref: React.ForwardedRef<HTMLButtonElement>
): JSX.Element {
  const { t } = useTranslation();

  const { color, text, outline, className, children, ...otherProps } = props;

  if (text != null && children != null) {
    console.warn("You can't set both text and children props.");
  }

  return (
    <button
      ref={ref}
      className={classNames(
        "cru-" + (color ?? "primary"),
        "cru-button",
        outline && "outline",
        className
      )}
      {...otherProps}
    >
      {text != null ? convertI18nText(text, t) : children}
    </button>
  );
}

const Button = React.forwardRef(_Button);
export default Button;