Merge branch 'develop' into bugfix/fix-section-blinking
This commit is contained in:
commit
503ee844a7
@ -28,7 +28,7 @@ const fillAvailableWidth = css`
|
||||
const StyledInvitePanel = styled.div`
|
||||
.invite-panel-body {
|
||||
height: ${(props) =>
|
||||
props.hasInvitedUsers ? "calc(100% - 55px - 73px)" : "calc(100% - 55px)"};
|
||||
props.hasInvitedUsers ? "calc(100% - 55px - 70px)" : "calc(100% - 55px)"};
|
||||
|
||||
.scroll-body {
|
||||
padding-right: 0px !important;
|
||||
@ -39,7 +39,7 @@ const StyledInvitePanel = styled.div`
|
||||
const ScrollList = styled.div`
|
||||
width: 100%;
|
||||
height: ${(props) =>
|
||||
props.scrollAllPanelContent
|
||||
props.scrollAllPanelContent && props.isTotalListHeight
|
||||
? "auto"
|
||||
: props.offsetTop && `calc(100% - ${props.offsetTop}px)`};
|
||||
`;
|
||||
|
@ -27,6 +27,7 @@ const Item = ({
|
||||
setHasErrors,
|
||||
roomType,
|
||||
isOwner,
|
||||
setIsOpenItemAccess,
|
||||
}) => {
|
||||
const { avatar, displayName, email, id, errors, access } = item;
|
||||
|
||||
@ -144,6 +145,7 @@ const Item = ({
|
||||
directionY="bottom"
|
||||
isDefaultMode={false}
|
||||
fixedDirection={true}
|
||||
setIsOpenItemAccess={setIsOpenItemAccess}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
@ -19,6 +19,7 @@ const Row = memo(({ data, index, style }) => {
|
||||
setHasErrors,
|
||||
roomType,
|
||||
isOwner,
|
||||
setIsOpenItemAccess,
|
||||
} = data;
|
||||
|
||||
if (inviteItems === undefined) return;
|
||||
@ -36,6 +37,7 @@ const Row = memo(({ data, index, style }) => {
|
||||
setHasErrors={setHasErrors}
|
||||
roomType={roomType}
|
||||
isOwner={isOwner}
|
||||
setIsOpenItemAccess={setIsOpenItemAccess}
|
||||
/>
|
||||
</StyledRow>
|
||||
);
|
||||
@ -54,23 +56,39 @@ const ItemsList = ({
|
||||
}) => {
|
||||
const [bodyHeight, setBodyHeight] = useState(0);
|
||||
const [offsetTop, setOffsetTop] = useState(0);
|
||||
const [isTotalListHeight, setIsTotalListHeight] = useState(false);
|
||||
const [isOpenItemAccess, setIsOpenItemAccess] = useState(false);
|
||||
|
||||
const bodyRef = useRef();
|
||||
const { height } = useResizeObserver({ ref: bodyRef });
|
||||
|
||||
const onBodyResize = useCallback(() => {
|
||||
const scrollHeight = bodyRef?.current?.firstChild.scrollHeight;
|
||||
const heightList = height ? height : bodyRef.current.offsetHeight;
|
||||
const totalHeightItems = inviteItems.length * USER_ITEM_HEIGHT;
|
||||
const listAreaHeight = heightList;
|
||||
|
||||
const calculatedHeight = scrollAllPanelContent
|
||||
? inviteItems.length * USER_ITEM_HEIGHT
|
||||
? Math.max(
|
||||
totalHeightItems,
|
||||
listAreaHeight,
|
||||
isOpenItemAccess ? scrollHeight : 0
|
||||
)
|
||||
: heightList - FOOTER_HEIGHT;
|
||||
|
||||
setBodyHeight(calculatedHeight);
|
||||
setOffsetTop(bodyRef.current.offsetTop);
|
||||
|
||||
if (scrollAllPanelContent && totalHeightItems && listAreaHeight)
|
||||
setIsTotalListHeight(
|
||||
totalHeightItems >= listAreaHeight && totalHeightItems >= scrollHeight
|
||||
);
|
||||
}, [
|
||||
height,
|
||||
bodyRef?.current?.offsetHeight,
|
||||
inviteItems.length,
|
||||
scrollAllPanelContent,
|
||||
isOpenItemAccess,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
@ -81,28 +99,23 @@ const ItemsList = ({
|
||||
height,
|
||||
inviteItems.length,
|
||||
scrollAllPanelContent,
|
||||
isOpenItemAccess,
|
||||
]);
|
||||
|
||||
let itemCount = inviteItems.length;
|
||||
|
||||
//Scroll blinking fix
|
||||
if (scrollAllPanelContent) {
|
||||
itemCount =
|
||||
bodyHeight / inviteItems.length != USER_ITEM_HEIGHT
|
||||
? inviteItems.length - 1
|
||||
: inviteItems.length;
|
||||
}
|
||||
const overflowStyle = scrollAllPanelContent ? "hidden" : "scroll";
|
||||
|
||||
return (
|
||||
<ScrollList
|
||||
offsetTop={offsetTop}
|
||||
ref={bodyRef}
|
||||
scrollAllPanelContent={scrollAllPanelContent}
|
||||
isTotalListHeight={isTotalListHeight}
|
||||
>
|
||||
<List
|
||||
style={{ overflow: overflowStyle }}
|
||||
height={bodyHeight}
|
||||
width="auto"
|
||||
itemCount={itemCount}
|
||||
itemCount={inviteItems.length}
|
||||
itemSize={USER_ITEM_HEIGHT}
|
||||
itemData={{
|
||||
inviteItems,
|
||||
@ -112,8 +125,9 @@ const ItemsList = ({
|
||||
roomType,
|
||||
isOwner,
|
||||
t,
|
||||
setIsOpenItemAccess,
|
||||
}}
|
||||
outerElementType={CustomScrollbarsVirtualList}
|
||||
outerElementType={!scrollAllPanelContent && CustomScrollbarsVirtualList}
|
||||
>
|
||||
{Row}
|
||||
</List>
|
||||
|
@ -28,14 +28,21 @@ class ComboBox extends React.Component {
|
||||
|
||||
stopAction = (e) => e.preventDefault();
|
||||
|
||||
setIsOpen = (isOpen) => this.setState({ isOpen: isOpen });
|
||||
setIsOpen = (isOpen) => {
|
||||
this.setState({ isOpen: isOpen });
|
||||
this.props.setIsOpenItemAccess(isOpen);
|
||||
};
|
||||
|
||||
handleClickOutside = (e) => {
|
||||
const { setIsOpenItemAccess } = this.props;
|
||||
|
||||
if (this.ref.current.contains(e.target)) return;
|
||||
|
||||
this.setState({ isOpen: !this.state.isOpen }, () => {
|
||||
this.props.toggleAction && this.props.toggleAction(e, this.state.isOpen);
|
||||
});
|
||||
|
||||
setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen);
|
||||
};
|
||||
|
||||
comboBoxClick = (e) => {
|
||||
@ -45,6 +52,7 @@ class ComboBox extends React.Component {
|
||||
isDisabled,
|
||||
toggleAction,
|
||||
isLoading,
|
||||
setIsOpenItemAccess,
|
||||
} = this.props;
|
||||
|
||||
if (
|
||||
@ -59,20 +67,24 @@ class ComboBox extends React.Component {
|
||||
this.setState({ isOpen: !this.state.isOpen }, () => {
|
||||
toggleAction && toggleAction(e, this.state.isOpen);
|
||||
});
|
||||
setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen);
|
||||
};
|
||||
|
||||
optionClick = (option) => {
|
||||
const { setIsOpenItemAccess } = this.props;
|
||||
this.setState({
|
||||
isOpen: !this.state.isOpen,
|
||||
selectedOption: option,
|
||||
});
|
||||
|
||||
setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen);
|
||||
this.props.onSelect && this.props.onSelect(option);
|
||||
};
|
||||
|
||||
componentDidUpdate(prevProps) {
|
||||
const { setIsOpenItemAccess } = this.props;
|
||||
if (this.props.opened !== prevProps.opened) {
|
||||
this.setIsOpen(this.props.opened);
|
||||
setIsOpenItemAccess && setIsOpenItemAccess(this.props.opened);
|
||||
}
|
||||
|
||||
if (this.props.selectedOption !== prevProps.selectedOption) {
|
||||
|
Loading…
Reference in New Issue
Block a user