components tiny-button.tsx

0% Statements 0/18

0% Branches 0/10

0% Functions 0/1

0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.


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
44
45
46
47
48
49
50
51
52
53
54
55
56  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React from "react";
import type { IconName } from "typed-md-icons";
import { createStyleFor } from "src/helpers/styles";
 
/** @private */
interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
	icon?: IconName | null;
	iconPosition?: "left" | "right";
}
 
/** @private */
const styleFor = createStyleFor({
	icon: {
		verticalAlign: "middle",
	},
});
 
export default function TinyButton({
	icon,
	iconPosition = "left",
	className = "",
	children,
	...props
}: Props): JSX.Element {
	const nodes = [
		icon == null ? null : (
			<i
				className={
					"material-icons small " +
					(iconPosition === "left" ? "mr-1" : "ml-1")
				}
				style={styleFor.icon}
			>
				{icon}
			</i>
		),
		// eslint-disable-next-line react/jsx-key
		<small>{children}</small>,
	];
 
	if (iconPosition === "right") nodes.reverse();
 
	const [ first, second ] = nodes;
 
	return (
		<button
			type="button"
			{...props}
			className={"btn btn-link " + className}
		>
			{first}
			{second}
		</button>
	);
}