web: Components: Styled row-block selection AdvancedSelector v2
This commit is contained in:
parent
27c4b38178
commit
8cf5a05ef4
@ -58,7 +58,12 @@ const StyledContainer = styled(Container)`
|
|||||||
|
|
||||||
.body2 {
|
.body2 {
|
||||||
grid-area: body2;
|
grid-area: body2;
|
||||||
|
margin-left: -8px;
|
||||||
/* background-color: white; */
|
/* background-color: white; */
|
||||||
|
|
||||||
|
.row-block {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
@ -88,13 +93,17 @@ const StyledContainer = styled(Container)`
|
|||||||
|
|
||||||
.body1 {
|
.body1 {
|
||||||
grid-area: body1;
|
grid-area: body1;
|
||||||
|
margin-left: -8px;
|
||||||
/* background-color: white; */
|
/* background-color: white; */
|
||||||
|
|
||||||
|
.row-block {
|
||||||
|
padding-left: ${props => (props.isMultiSelect ? 8 : 0)}px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.row-block {
|
.row-block {
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
padding-left: 8px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -111,8 +120,6 @@ const StyledContainer = styled(Container)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const ADSelector = props => {
|
const ADSelector = props => {
|
||||||
const { displayType, groups, selectButtonLabel,
|
const { displayType, groups, selectButtonLabel,
|
||||||
isDisabled, isMultiSelect, hasNextPage, options,
|
isDisabled, isMultiSelect, hasNextPage, options,
|
||||||
@ -243,7 +250,7 @@ const ADSelector = props => {
|
|||||||
const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage;
|
const loadMoreItems = isNextPageLoading ? () => { } : loadNextPage;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledContainer displayType={displayType} groups={groups}>
|
<StyledContainer displayType={displayType} groups={groups} isMultiSelect={isMultiSelect}>
|
||||||
<ADSelectorColumn className="column1" displayType={displayType}>
|
<ADSelectorColumn className="column1" displayType={displayType}>
|
||||||
<ADSelectorHeader className="header1">
|
<ADSelectorHeader className="header1">
|
||||||
<SearchInput
|
<SearchInput
|
||||||
@ -275,7 +282,7 @@ const ADSelector = props => {
|
|||||||
itemSize={32}
|
itemSize={32}
|
||||||
onItemsRendered={onItemsRendered}
|
onItemsRendered={onItemsRendered}
|
||||||
ref={ref}
|
ref={ref}
|
||||||
width={width}
|
width={width + (isMultiSelect ? 8 : 0)}
|
||||||
outerElementType={CustomScrollbarsVirtualList}
|
outerElementType={CustomScrollbarsVirtualList}
|
||||||
>
|
>
|
||||||
{renderOption}
|
{renderOption}
|
||||||
@ -299,7 +306,7 @@ const ADSelector = props => {
|
|||||||
<List
|
<List
|
||||||
className="group_list"
|
className="group_list"
|
||||||
height={height}
|
height={height}
|
||||||
width={width}
|
width={width + 8}
|
||||||
itemSize={32}
|
itemSize={32}
|
||||||
itemCount={groups.length}
|
itemCount={groups.length}
|
||||||
itemData={groups}
|
itemData={groups}
|
||||||
|
Loading…
Reference in New Issue
Block a user