2019-09-10 11:45:50 +00:00
|
|
|
import React from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import styled from "styled-components";
|
2020-10-16 13:16:01 +00:00
|
|
|
import IconButton from "../icon-button";
|
2019-09-10 11:45:50 +00:00
|
|
|
|
|
|
|
const StyledButton = styled.div`
|
2020-10-16 13:16:01 +00:00
|
|
|
background: #f8f9f9;
|
|
|
|
border: 1px solid #eceef1;
|
|
|
|
box-sizing: border-box;
|
|
|
|
border-radius: 3px;
|
|
|
|
height: 34px;
|
|
|
|
width: 34px;
|
|
|
|
padding: 9px;
|
|
|
|
display: inline-block;
|
|
|
|
cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
|
2019-09-10 11:45:50 +00:00
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
&:hover {
|
|
|
|
path {
|
|
|
|
${(props) => !props.isDisabled && "fill: #333;"}
|
2019-09-10 11:45:50 +00:00
|
|
|
}
|
2020-10-16 13:16:01 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
${(props) => !props.isDisabled && "background-color: #ECEEF1;"}
|
|
|
|
}
|
2019-09-10 11:45:50 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const SelectorAddButton = (props) => {
|
2020-10-16 13:16:01 +00:00
|
|
|
const { isDisabled, title, onClick, className, id, style } = props;
|
2019-09-10 11:45:50 +00:00
|
|
|
|
|
|
|
return (
|
2020-10-16 13:16:01 +00:00
|
|
|
<StyledButton
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
title={title}
|
|
|
|
onClick={onClick}
|
|
|
|
className={className}
|
|
|
|
id={id}
|
|
|
|
style={style}
|
|
|
|
>
|
2019-09-10 11:45:50 +00:00
|
|
|
<IconButton
|
|
|
|
color="#979797"
|
|
|
|
size={14}
|
2020-10-16 13:16:01 +00:00
|
|
|
iconName="PlusIcon"
|
2019-09-10 11:45:50 +00:00
|
|
|
isFill={true}
|
|
|
|
isDisabled={isDisabled}
|
2019-11-05 12:16:33 +00:00
|
|
|
isClickable={!isDisabled}
|
2019-09-10 11:45:50 +00:00
|
|
|
/>
|
|
|
|
</StyledButton>
|
|
|
|
);
|
2020-10-16 13:16:01 +00:00
|
|
|
};
|
2019-09-10 11:45:50 +00:00
|
|
|
|
|
|
|
SelectorAddButton.propTypes = {
|
|
|
|
title: PropTypes.string,
|
|
|
|
onClick: PropTypes.func,
|
2019-09-10 12:15:22 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2019-12-03 13:24:30 +00:00
|
|
|
className: PropTypes.string,
|
|
|
|
id: PropTypes.string,
|
2020-10-16 13:16:01 +00:00
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2019-09-10 11:45:50 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
SelectorAddButton.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
isDisabled: false,
|
2019-09-10 11:45:50 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
export default SelectorAddButton;
|