66 lines
2.3 KiB
React
66 lines
2.3 KiB
React
/**
|
|
* Function Takes in Paramter for:
|
|
* text: text to be shown on the button
|
|
* width, height: width and height of the button
|
|
* icon: an icon that should be shown on the button (HTML <svg> tag) (see Icons.js for example)
|
|
* iconWidth, iconHeight: width and height of the icon
|
|
* onClick: a function that should be run if the button is clicked
|
|
* Example for onClick:
|
|
* <Button onClick={onClick={() => {console.log("do something")}}
|
|
* Example for icon:
|
|
*/
|
|
export default function Button(p) {
|
|
|
|
//default parameters for the button
|
|
let text = p.text;
|
|
let width = p.width, height = p.height;
|
|
let iconHTML = p.icon;
|
|
let iconWidth = p.iconWidth, iconHeight = p.iconHeight;
|
|
let onClick = p.onClick;
|
|
let color = p.color;
|
|
let fontColor = p.fontColor;
|
|
let font_size = p.fontSize;
|
|
|
|
//if parameters are not set, they are set to default values
|
|
if (height == null) height = 0;
|
|
if (width == null) width = 0;
|
|
if (iconWidth == null) iconWidth = width-10;
|
|
if (iconHeight == null) iconHeight = height-10;
|
|
if (onClick == null) onClick = () => {};
|
|
if (color == null) color = "#363636";
|
|
if (fontColor == null) fontColor = "white";
|
|
if (font_size == null) font_size = 16;
|
|
|
|
//build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
|
|
if (iconHTML != null) {
|
|
let split = iconHTML.split("fill=");
|
|
split[1] = "fill=" + split[1];
|
|
split[0] += " width=" + iconWidth + " height=" + iconHeight + " ";
|
|
iconHTML = split[0] + split[1]
|
|
} else {
|
|
iconHTML = "";
|
|
}
|
|
|
|
//return the button
|
|
return (
|
|
<>
|
|
<button className={"round-border button font font-small"}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: color,
|
|
color: fontColor,
|
|
fontSize: font_size,
|
|
minWidth: width,
|
|
minHeight: height,
|
|
textAlign: "center",
|
|
}}
|
|
onClick={onClick}>
|
|
{text}
|
|
<div dangerouslySetInnerHTML={{__html: iconHTML}}/>
|
|
</button>
|
|
</>
|
|
);
|
|
}
|