web: Components: AdvancedSelector: Added StyledContainer for ADSelectorFooter
This commit is contained in:
parent
9e3f9583d9
commit
94fabef93a
@ -1,12 +1,34 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import Button from "../../button";
|
||||
import styled from "styled-components";
|
||||
|
||||
/* eslint-disable no-unused-vars */
|
||||
/* eslint-disable react/prop-types */
|
||||
const Container = ({
|
||||
buttonLabel,
|
||||
isDisabled,
|
||||
onClick,
|
||||
isMultiSelect,
|
||||
...props
|
||||
}) => <div {...props} />;
|
||||
/* eslint-enable react/prop-types */
|
||||
/* eslint-enable no-unused-vars */
|
||||
|
||||
const StyledContainer = styled(Container)`
|
||||
border-top: 1px solid #eceef1;
|
||||
display: ${props => props.isMultiSelect || !props.selectedOptions || !props.selectedOptions.length ? 'none' : 'flex'};
|
||||
|
||||
.add_members_btn {
|
||||
margin: 16px;
|
||||
}
|
||||
`;
|
||||
|
||||
const ADSelectorFooter = props => {
|
||||
const { buttonLabel, isDisabled, onClick } = props;
|
||||
|
||||
return (
|
||||
<div className="button_container">
|
||||
<StyledContainer {...props}>
|
||||
<Button
|
||||
className="add_members_btn"
|
||||
primary={true}
|
||||
@ -16,13 +38,15 @@ const ADSelectorFooter = props => {
|
||||
isDisabled={isDisabled}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</div>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
ADSelectorFooter.propTypes = {
|
||||
buttonLabel: PropTypes.string,
|
||||
isDisabled: PropTypes.bool,
|
||||
isMultiSelect: PropTypes.bool,
|
||||
selectedOptions: PropTypes.array,
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
|
@ -181,15 +181,6 @@ const StyledContainer = styled(Container)`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button_container {
|
||||
border-top: 1px solid #eceef1;
|
||||
display: flex;
|
||||
|
||||
.add_members_btn {
|
||||
margin: 16px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
class ADSelector extends React.Component {
|
||||
@ -482,16 +473,15 @@ class ADSelector extends React.Component {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{isMultiSelect && (
|
||||
<ADSelectorFooter
|
||||
buttonLabel={buttonLabel}
|
||||
isDisabled={
|
||||
!this.state.selectedOptions ||
|
||||
!this.state.selectedOptions.length
|
||||
}
|
||||
isMultiSelect={isMultiSelect}
|
||||
onClick={this.onButtonClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</StyledContainer>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user