68 lines
1.4 KiB
JavaScript
68 lines
1.4 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { color } from 'shared/utils/styles';
|
|
import Icon from 'shared/components/Icon';
|
|
import { StyledButton, StyledSpinner } from './Styles';
|
|
|
|
const propTypes = {
|
|
className: PropTypes.string,
|
|
children: PropTypes.node,
|
|
type: PropTypes.string,
|
|
hollow: PropTypes.bool,
|
|
color: PropTypes.oneOf(['primary', 'success', 'danger']),
|
|
icon: PropTypes.string,
|
|
iconSize: PropTypes.number,
|
|
disabled: PropTypes.bool,
|
|
working: PropTypes.bool,
|
|
onClick: PropTypes.func,
|
|
};
|
|
|
|
const defaultProps = {
|
|
className: undefined,
|
|
children: undefined,
|
|
type: 'button',
|
|
hollow: false,
|
|
color: 'primary',
|
|
icon: undefined,
|
|
iconSize: undefined,
|
|
disabled: false,
|
|
working: false,
|
|
onClick: () => {},
|
|
};
|
|
|
|
const Button = ({
|
|
children,
|
|
hollow,
|
|
icon,
|
|
iconSize,
|
|
disabled,
|
|
working,
|
|
onClick = () => {},
|
|
...buttonProps
|
|
}) => (
|
|
<StyledButton
|
|
{...buttonProps}
|
|
hollow={hollow}
|
|
onClick={() => {
|
|
if (!disabled && !working) {
|
|
onClick();
|
|
}
|
|
}}
|
|
disabled={disabled || working}
|
|
working={working}
|
|
iconOnly={!children}
|
|
>
|
|
{working && <StyledSpinner size={26} color={hollow ? color.textMediumBlue : '#fff'} />}
|
|
{!working && icon && (
|
|
<Icon type={icon} size={iconSize} color={hollow ? color.textMediumBlue : '#fff'} />
|
|
)}
|
|
{children}
|
|
</StyledButton>
|
|
);
|
|
|
|
Button.propTypes = propTypes;
|
|
Button.defaultProps = defaultProps;
|
|
|
|
export default Button;
|