PromucFlow_constructor/app/client/src/components/designSystems/blueprint/ButtonComponent.tsx

import React from "react";
import { AnchorButton, IButtonProps, MaybeElement } from "@blueprintjs/core";
import styled, { css } from "styled-components";
import { TextComponentProps } from "./TextComponent";
import { ButtonStyle } from "widgets/ButtonWidget";
import { Theme } from "constants/DefaultTheme";
import _ from "lodash";

const getButtonColorStyles = (props: { theme: Theme } & ButtonStyleProps) => {
  if (props.filled) return props.theme.colors.textOnDarkBG;
  if (props.accent) {
    if (props.accent === "secondary") {
      return props.theme.colors.OXFORD_BLUE;
    }
    return props.theme.colors[props.accent];
  }
};

const ButtonColorStyles = css<ButtonStyleProps>`
  color: ${getButtonColorStyles};
  svg {
    fill: ${getButtonColorStyles};
  }
`;

const ButtonWrapper = styled((props: ButtonStyleProps & IButtonProps) => (
  <AnchorButton {..._.omit(props, ["accent", "filled"])} />
))<ButtonStyleProps>`
  && {
    ${ButtonColorStyles};
    width: 100%;
    height: 100%;
    transition: background-color 0.2s;
    background-color: ${props =>
      props.filled && props.accent && props.theme.colors[props.accent]};
    border: 1px solid
      ${props =>
        props.accent
          ? props.theme.colors[props.accent]
          : props.theme.colors.secondary};
    border-radius: 4px;
    font-weight: ${props => props.theme.fontWeights[2]};
    font-family: "DM Sans";
    outline: none;
    &&:hover,
    &&:focus {
      ${ButtonColorStyles};
      background-color: ${props => {
        if (!props.filled) return props.theme.colors.secondaryDarker;
        if (props.accent !== "secondary") {
          return props.theme.colors[`${props.accent}Darker`];
        }
      }};
      border-color: ${props => {
        if (!props.filled) return;
        if (props.accent !== "secondary") {
          return props.theme.colors[`${props.accent}Darker`];
        }
      }};
    }
    &&:active {
      ${ButtonColorStyles};
      background-color: ${props => {
        if (!props.filled) return props.theme.colors.secondaryDarkest;
        if (props.accent !== "secondary") {
          return props.theme.colors[`${props.accent}Darkest`];
        }
      }};
      border-color: ${props => {
        if (!props.filled) return;
        if (props.accent !== "secondary") {
          return props.theme.colors[`${props.accent}Darkest`];
        }
      }};
    }
    &&.bp3-disabled {
      background-color: #d0d7dd;
      border: none;
    }
  }
`;
export type ButtonStyleName = "primary" | "secondary" | "error";

type ButtonStyleProps = {
  accent?: ButtonStyleName;
  filled?: boolean;
};

// To be used in any other part of the app
export const BaseButton = (props: IButtonProps & ButtonStyleProps) => {
  return <ButtonWrapper {...props} />;
};

BaseButton.defaultProps = {
  accent: "secondary",
  disabled: false,
  text: "Button Text",
  minimal: true,
};

interface ButtonContainerProps extends TextComponentProps {
  icon?: MaybeElement;
  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
  disabled?: boolean;
  buttonStyle?: ButtonStyle;
}

const mapButtonStyleToStyleName = (buttonStyle?: ButtonStyle) => {
  switch (buttonStyle) {
    case "PRIMARY_BUTTON":
      return "primary";
    case "SECONDARY_BUTTON":
      return "secondary";
    case "DANGER_BUTTON":
      return "error";
    default:
      return undefined;
  }
};

// To be used with the canvas
const ButtonContainer = (props: ButtonContainerProps & ButtonStyleProps) => {
  return (
    <BaseButton
      icon={props.icon}
      text={props.text}
      filled={props.buttonStyle === "PRIMARY_BUTTON"}
      accent={mapButtonStyleToStyleName(props.buttonStyle)}
      onClick={props.onClick}
      disabled={props.disabled}
    />
  );
};

export default ButtonContainer;