-
Notifications
You must be signed in to change notification settings - Fork 1k
/
Button.js
89 lines (74 loc) · 3.5 KB
/
Button.js
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import * as React from 'react';
import { Ripple } from '../ripple/Ripple';
import { Tooltip } from '../tooltip/Tooltip';
import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
import { ButtonBase } from './ButtonBase';
export const Button = React.memo(
React.forwardRef((inProps, ref) => {
const props = ButtonBase.getProps(inProps);
const elementRef = React.useRef(ref);
React.useEffect(() => {
ObjectUtils.combinedRefs(elementRef, ref);
}, [elementRef, ref]);
if (props.visible === false) {
return null;
}
const createIcon = () => {
const icon = props.loading ? props.loadingIcon : props.icon;
const className = classNames('p-button-icon p-c', {
'p-button-loading-icon': props.loading,
[`p-button-icon-${props.iconPos}`]: props.label
});
return IconUtils.getJSXIcon(icon, { className }, { props });
};
const createLabel = () => {
if (props.label) {
return <span className="p-button-label p-c">{props.label}</span>;
}
return !props.children && !props.label && <span className="p-button-label p-c" dangerouslySetInnerHTML={{ __html: ' ' }}></span>;
};
const createBadge = () => {
if (props.badge) {
const badgeClassName = classNames('p-badge', props.badgeClassName);
return <span className={badgeClassName}>{props.badge}</span>;
}
return null;
};
const disabled = props.disabled || props.loading;
const showTooltip = !disabled || (props.tooltipOptions && props.tooltipOptions.showOnDisabled);
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
const otherProps = ButtonBase.getOtherProps(props);
const className = classNames('p-button p-component', props.className, {
'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label && !props.children,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
'p-disabled': disabled,
'p-button-loading': props.loading,
'p-button-outlined': props.outlined,
'p-button-raised': props.raised,
'p-button-link': props.link,
'p-button-text': props.text,
'p-button-rounded': props.rounded,
'p-button-loading-label-only': props.loading && !props.icon && props.label,
[`p-button-loading-${props.iconPos}`]: props.loading && props.loadingIcon && props.label,
[`p-button-${props.size}`]: props.size,
[`p-button-${props.severity}`]: props.severity
});
const icon = createIcon();
const label = createLabel();
const badge = createBadge();
const defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
return (
<>
<button ref={elementRef} aria-label={defaultAriaLabel} {...otherProps} className={className} disabled={disabled}>
{icon}
{label}
{props.children}
{badge}
<Ripple />
</button>
{hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
</>
);
})
);
Button.displayName = 'Button';