Merge pull request #1389 from ONLYOFFICE/bugfix/fix-invite-panel-list

Fixed the height of the list in the invitation panel

packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js

@@ -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)`};
 `;

packages/client/src/components/panels/InvitePanel/sub-components/Item.js

@@ -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}
         />
       )}
     </>

packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js

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

packages/components/combobox/index.js

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