-
Notifications
You must be signed in to change notification settings - Fork 184
/
BpkLoadingButton.js
115 lines (99 loc) · 2.43 KB
/
BpkLoadingButton.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import PropTypes from 'prop-types';
import React from 'react';
import BpkButton from 'bpk-component-button';
import { BpkSpinner, BpkLargeSpinner } from 'bpk-component-spinner';
import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from 'bpk-component-icon';
import ArrowIconSm from 'bpk-component-icon/sm/long-arrow-right';
import ArrowIconLg from 'bpk-component-icon/lg/long-arrow-right';
import './bpk-loading-button.scss';
const getPropsIcon = (props) => {
const {
disabled,
loading,
selected,
icon,
iconSelected,
iconDisabled,
iconLoading,
} = props;
if (loading) {
return iconLoading;
} else if (disabled) {
return iconDisabled;
} else if (selected) {
return iconSelected;
}
return icon;
};
const getSpinner = large => (
large ?
<BpkLargeSpinner alignToButton /> :
<BpkSpinner alignToButton />
);
const getEnabledIcon = (large) => {
const AlignedIcon = large ?
withLargeButtonAlignment(withRtlSupport(ArrowIconLg)) :
withButtonAlignment(withRtlSupport(ArrowIconSm));
return <AlignedIcon />;
};
const getDefaultIcon = (props) => {
const {
loading,
large,
} = props;
if (loading) {
return getSpinner(large);
}
return getEnabledIcon(large);
};
const BpkLoadingButton = (props) => {
const {
children,
className,
disabled,
loading,
iconOnly,
icon,
iconSelected,
iconDisabled,
iconLoading,
...rest
} = props;
const showBtnDisabled = disabled || loading;
const classNames = ['bpk-loading-button'];
if (className) { classNames.push(className); }
const spacer = (iconOnly) ? '' : '\u00A0';
const buttonIcon = getPropsIcon(props) || getDefaultIcon(props);
return (
<BpkButton
iconOnly={iconOnly}
disabled={showBtnDisabled}
className={classNames.join(' ')}
{...rest}
>
{children}{spacer}{buttonIcon}
</BpkButton>
);
};
BpkLoadingButton.propTypes = {
children: PropTypes.node.isRequired,
className: PropTypes.string,
disabled: PropTypes.bool,
loading: PropTypes.bool,
iconOnly: PropTypes.bool,
icon: PropTypes.element,
iconSelected: PropTypes.element,
iconDisabled: PropTypes.element,
iconLoading: PropTypes.element,
};
BpkLoadingButton.defaultProps = {
className: null,
disabled: false,
loading: false,
iconOnly: false,
icon: null,
iconSelected: null,
iconDisabled: null,
iconLoading: null,
};
export default BpkLoadingButton;