IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Styled AdvancedSelector v2

Browse Source
This commit is contained in:
Alexey Safronov 2019-11-02 23:08:54 +03:00
parent 80df4fc572
commit 27c4b38178
1 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/ASC.Web.Components/src/components/advanced-selector2/sub-components/selector.js
View File

@ -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