78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import * as React from "react";
|
|
import { Button as AntButton } from "antd";
|
|
import { ButtonType as AntButtonType } from "antd/lib/button";
|
|
import { logger } from '@strata/logging/lib';
|
|
import IIconProps from "../icon/IIconProps";
|
|
import reactNodeToString from "../utils/ReactNodeToString";
|
|
|
|
export const ButtonClassName = 'tempo-btn';
|
|
|
|
export type ButtonType = "primary" | "secondary" | "tertiary" | "link";
|
|
|
|
export interface IButtonProps {
|
|
/** Use with caution */
|
|
className?: string;
|
|
|
|
/** Button type */
|
|
type?: ButtonType;
|
|
|
|
/** Button icon */
|
|
icon?: React.ReactElement<IIconProps>;
|
|
|
|
/** HTML button type. Default is "button" */
|
|
htmlType?: "submit" | "button";
|
|
|
|
/** Called on button click */
|
|
onClick?: React.MouseEventHandler<HTMLElement>;
|
|
|
|
/** Expand to container width */
|
|
block?: boolean;
|
|
|
|
/** Disable item */
|
|
disabled?: boolean;
|
|
|
|
/** Danger style (red) */
|
|
danger?: boolean;
|
|
|
|
/** Additional log data */
|
|
logData?: object;
|
|
|
|
/** Turn off logging. Default to false */
|
|
disableLogging?: boolean;
|
|
|
|
/** Additional styles. Use sparingly*/
|
|
style?: React.CSSProperties;
|
|
}
|
|
|
|
const buttonTypeMappings: {
|
|
[key: string]: AntButtonType;
|
|
} = {
|
|
primary: "primary",
|
|
secondary: "default",
|
|
tertiary: "dashed",
|
|
link: "link"
|
|
};
|
|
|
|
/** Buttons perform actions in a single click, tap, or keypress. */
|
|
const Button: React.FC<IButtonProps> = (props) => {
|
|
let { type = "secondary", logData, disableLogging = false, onClick, className = "", ...validProps } = props;
|
|
|
|
className = className == "" ? ButtonClassName : ButtonClassName + " " + className;
|
|
|
|
const children = props.children;
|
|
const buttonText = reactNodeToString(children ?? "");
|
|
|
|
const onClickInternal = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
|
|
!disableLogging && logger.log("button click", buttonText, logData);
|
|
onClick && onClick(e);
|
|
}
|
|
|
|
return (
|
|
<AntButton data-pendo-tag={buttonText} {...validProps} type={buttonTypeMappings[type]} className={className} onClick={onClickInternal}>{props.children}</AntButton>
|
|
);
|
|
};
|
|
|
|
Button.displayName = "Button";
|
|
|
|
export default Button;
|