124 lines
3.4 KiB
TypeScript
124 lines
3.4 KiB
TypeScript
import React from "react";
|
|
import { AnchorButton, IButtonProps, MaybeElement } from "@blueprintjs/core";
|
|
import styled, { css } from "styled-components";
|
|
import { Container } from "../appsmith/ContainerComponent";
|
|
import { TextComponentProps } from "./TextComponent";
|
|
import { ButtonStyle } from "../../widgets/ButtonWidget";
|
|
|
|
const ButtonColorStyles = css<ButtonStyleProps>`
|
|
color: ${props => {
|
|
if (props.filled) return props.theme.colors.textOnDarkBG;
|
|
if (props.styleName) {
|
|
if (props.styleName === "secondary")
|
|
return props.theme.colors.OXFORD_BLUE;
|
|
return props.theme.colors[props.styleName];
|
|
}
|
|
}};
|
|
`;
|
|
|
|
const ButtonWrapper = styled(AnchorButton)<ButtonStyleProps>`
|
|
&& {
|
|
${ButtonColorStyles};
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: background-color 0.2s;
|
|
background-color: ${props =>
|
|
props.filled && props.styleName && props.theme.colors[props.styleName]};
|
|
border: 1px solid
|
|
${props =>
|
|
props.styleName
|
|
? props.theme.colors[props.styleName]
|
|
: props.theme.colors.secondary};
|
|
border-radius: 4px;
|
|
font-weight: bold;
|
|
outline: none;
|
|
&&:hover,
|
|
&&:focus {
|
|
${ButtonColorStyles};
|
|
background-color: ${props => {
|
|
if (!props.filled) return props.theme.colors.secondaryDarker;
|
|
if (props.styleName !== "secondary") {
|
|
return props.theme.colors[`${props.styleName}Darker`];
|
|
}
|
|
}};
|
|
border-color: ${props => {
|
|
if (!props.filled) return;
|
|
if (props.styleName !== "secondary") {
|
|
return props.theme.colors[`${props.styleName}Darker`];
|
|
}
|
|
}};
|
|
}
|
|
&&:active {
|
|
${ButtonColorStyles};
|
|
background-color: ${props => {
|
|
if (!props.filled) return props.theme.colors.secondaryDarkest;
|
|
if (props.styleName !== "secondary") {
|
|
return props.theme.colors[`${props.styleName}Darkest`];
|
|
}
|
|
}};
|
|
border-color: ${props => {
|
|
if (!props.filled) return;
|
|
if (props.styleName !== "secondary") {
|
|
return props.theme.colors[`${props.styleName}Darkest`];
|
|
}
|
|
}};
|
|
}
|
|
}
|
|
`;
|
|
export type ButtonStyleName = "primary" | "secondary" | "error";
|
|
|
|
type ButtonStyleProps = {
|
|
styleName?: ButtonStyleName;
|
|
filled?: boolean;
|
|
};
|
|
|
|
// To be used in any other part of the app
|
|
export const BaseButton = (props: IButtonProps & ButtonStyleProps) => {
|
|
return <ButtonWrapper {...props} />;
|
|
};
|
|
|
|
BaseButton.defaultProps = {
|
|
styleName: "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 (
|
|
<Container {...props}>
|
|
<BaseButton
|
|
icon={props.icon}
|
|
text={props.text}
|
|
filled={props.buttonStyle === "PRIMARY_BUTTON"}
|
|
styleName={mapButtonStyleToStyleName(props.buttonStyle)}
|
|
onClick={props.onClick}
|
|
disabled={props.disabled}
|
|
/>
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default ButtonContainer;
|