web: Components: Styled AdvancedSelector v2
This commit is contained in:
parent
80df4fc572
commit
27c4b38178
@ -19,6 +19,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
|
|||||||
/* eslint-disable react/prop-types */
|
/* eslint-disable react/prop-types */
|
||||||
const Container = ({
|
const Container = ({
|
||||||
displayType,
|
displayType,
|
||||||
|
groups,
|
||||||
...props
|
...props
|
||||||
}) => <div {...props} />;
|
}) => <div {...props} />;
|
||||||
/* eslint-enable react/prop-types */
|
/* eslint-enable react/prop-types */
|
||||||
@ -34,8 +35,15 @@ const StyledContainer = styled(Container)`
|
|||||||
.column2 {
|
.column2 {
|
||||||
grid-area: column2;
|
grid-area: column2;
|
||||||
|
|
||||||
|
${props => props.groups &&
|
||||||
|
props.groups.length > 0
|
||||||
|
? css`
|
||||||
|
border-left: 1px solid #eceef1;
|
||||||
|
`
|
||||||
|
: ""}
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
background-color: gold;
|
/* background-color: gold; */
|
||||||
padding: 16px 16px 0 16px;
|
padding: 16px 16px 0 16px;
|
||||||
grid-row-gap: 16px;
|
grid-row-gap: 16px;
|
||||||
|
|
||||||
@ -45,12 +53,12 @@ const StyledContainer = styled(Container)`
|
|||||||
|
|
||||||
.header2 {
|
.header2 {
|
||||||
grid-area: header2;
|
grid-area: header2;
|
||||||
background-color: white;
|
/* background-color: white; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.body2 {
|
.body2 {
|
||||||
grid-area: body2;
|
grid-area: body2;
|
||||||
background-color: white;
|
/* background-color: white; */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
@ -65,7 +73,7 @@ const StyledContainer = styled(Container)`
|
|||||||
grid-area: column1;
|
grid-area: column1;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
background-color: red;
|
/* background-color: red; */
|
||||||
padding: 16px 16px 0 16px;
|
padding: 16px 16px 0 16px;
|
||||||
grid-row-gap: 16px;
|
grid-row-gap: 16px;
|
||||||
|
|
||||||
@ -75,17 +83,18 @@ const StyledContainer = styled(Container)`
|
|||||||
|
|
||||||
.header1 {
|
.header1 {
|
||||||
grid-area: header1;
|
grid-area: header1;
|
||||||
background-color: white;
|
/* background-color: white; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.body1 {
|
.body1 {
|
||||||
grid-area: body1;
|
grid-area: body1;
|
||||||
background-color: white;
|
/* background-color: white; */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-block {
|
.row-block {
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
|
padding-left: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -234,7 +243,7 @@ const ADSelector = props => {
|
|||||||
const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage;
|
const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledContainer displayType={displayType}>
|
<StyledContainer displayType={displayType} groups={groups}>
|
||||||
<ADSelectorColumn className="column1" displayType={displayType}>
|
<ADSelectorColumn className="column1" displayType={displayType}>
|
||||||
<ADSelectorHeader className="header1">
|
<ADSelectorHeader className="header1">
|
||||||
<SearchInput
|
<SearchInput
|
||||||
|
Loading…
Reference in New Issue
Block a user