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 React from "react";
|
||||||
import PropTypes from "prop-types";
|
import PropTypes from "prop-types";
|
||||||
import Button from "../../button";
|
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 ADSelectorFooter = props => {
|
||||||
const { buttonLabel, isDisabled, onClick } = props;
|
const { buttonLabel, isDisabled, onClick } = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="button_container">
|
<StyledContainer {...props}>
|
||||||
<Button
|
<Button
|
||||||
className="add_members_btn"
|
className="add_members_btn"
|
||||||
primary={true}
|
primary={true}
|
||||||
@ -16,13 +38,15 @@ const ADSelectorFooter = props => {
|
|||||||
isDisabled={isDisabled}
|
isDisabled={isDisabled}
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
/>
|
/>
|
||||||
</div>
|
</StyledContainer>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
ADSelectorFooter.propTypes = {
|
ADSelectorFooter.propTypes = {
|
||||||
buttonLabel: PropTypes.string,
|
buttonLabel: PropTypes.string,
|
||||||
isDisabled: PropTypes.bool,
|
isDisabled: PropTypes.bool,
|
||||||
|
isMultiSelect: PropTypes.bool,
|
||||||
|
selectedOptions: PropTypes.array,
|
||||||
onClick: PropTypes.func
|
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 {
|
class ADSelector extends React.Component {
|
||||||
@ -482,16 +473,15 @@ class ADSelector extends React.Component {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{isMultiSelect && (
|
<ADSelectorFooter
|
||||||
<ADSelectorFooter
|
buttonLabel={buttonLabel}
|
||||||
buttonLabel={buttonLabel}
|
isDisabled={
|
||||||
isDisabled={
|
!this.state.selectedOptions ||
|
||||||
!this.state.selectedOptions ||
|
!this.state.selectedOptions.length
|
||||||
!this.state.selectedOptions.length
|
}
|
||||||
}
|
isMultiSelect={isMultiSelect}
|
||||||
onClick={this.onButtonClick}
|
onClick={this.onButtonClick}
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</StyledContainer>
|
</StyledContainer>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user