this repo has no description
1import { forwardRef } from 'preact/compat';
2import { useEffect, useState } from 'preact/hooks';
3
4import shortenNumber from '../utils/shorten-number';
5
6import Icon from './icon';
7
8const StatusButton = forwardRef((props, ref) => {
9 let {
10 checked,
11 count,
12 class: className,
13 title,
14 alt,
15 size,
16 icon,
17 iconSize = 'l',
18 onClick,
19 ...otherProps
20 } = props;
21 if (typeof title === 'string') {
22 title = [title, title];
23 }
24 if (typeof alt === 'string') {
25 alt = [alt, alt];
26 }
27
28 const [buttonTitle, setButtonTitle] = useState(title[0] || '');
29 const [iconAlt, setIconAlt] = useState(alt[0] || '');
30
31 useEffect(() => {
32 if (checked) {
33 setButtonTitle(title[1] || '');
34 setIconAlt(alt[1] || '');
35 } else {
36 setButtonTitle(title[0] || '');
37 setIconAlt(alt[0] || '');
38 }
39 }, [checked, title, alt]);
40
41 return (
42 <button
43 ref={ref}
44 type="button"
45 title={buttonTitle}
46 class={`plain ${size ? 'small' : ''} ${className} ${
47 checked ? 'checked' : ''
48 }`}
49 onClick={(e) => {
50 if (!onClick) return;
51 e.preventDefault();
52 e.stopPropagation();
53 onClick(e);
54 }}
55 {...otherProps}
56 >
57 <Icon icon={icon} size={iconSize} alt={iconAlt} />
58 {!!count && (
59 <>
60 {' '}
61 <small title={count}>{shortenNumber(count)}</small>
62 </>
63 )}
64 </button>
65 );
66});
67
68export default StatusButton;