Web:Client:Fixed the lack of change in the height of the list of invited users and the entry of the list under the buttons when you turn on Invite by link.
This commit is contained in:
parent
6958996c74
commit
36e238c312
@ -50,6 +50,11 @@ const InvitePanel = ({
|
||||
const [shareLinks, setShareLinks] = useState([]);
|
||||
const [roomUsers, setRoomUsers] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [externalLinksVisible, setExternalLinksVisible] = useState(false);
|
||||
|
||||
const onChangeExternalLinksVisible = (visible) => {
|
||||
setExternalLinksVisible(visible);
|
||||
};
|
||||
|
||||
const selectRoom = () => {
|
||||
const room = folders.find((folder) => folder.id === roomId);
|
||||
@ -222,6 +227,8 @@ const InvitePanel = ({
|
||||
shareLinks={shareLinks}
|
||||
getInfo={getInfo}
|
||||
roomType={roomType}
|
||||
onChangeExternalLinksVisible={onChangeExternalLinksVisible}
|
||||
externalLinksVisible={externalLinksVisible}
|
||||
/>
|
||||
|
||||
<InviteInput
|
||||
@ -233,7 +240,13 @@ const InvitePanel = ({
|
||||
|
||||
{!!inviteItems.length && (
|
||||
<>
|
||||
<ItemsList t={t} setHasErrors={setHasErrors} roomType={roomType} />
|
||||
<ItemsList
|
||||
t={t}
|
||||
setHasErrors={setHasErrors}
|
||||
roomType={roomType}
|
||||
externalLinksVisible={externalLinksVisible}
|
||||
/>
|
||||
|
||||
<StyledButtons>
|
||||
<Button
|
||||
scale={true}
|
||||
|
@ -32,8 +32,9 @@ const ExternalLinks = ({
|
||||
setInvitationLinks,
|
||||
isOwner,
|
||||
getInfo,
|
||||
onChangeExternalLinksVisible,
|
||||
externalLinksVisible,
|
||||
}) => {
|
||||
const [linksVisible, setLinksVisible] = useState(false);
|
||||
const [actionLinksVisible, setActionLinksVisible] = useState(false);
|
||||
const [activeLink, setActiveLink] = useState({});
|
||||
|
||||
@ -54,12 +55,12 @@ const ExternalLinks = ({
|
||||
} else {
|
||||
link = shareLinks[0];
|
||||
|
||||
!linksVisible ? editLink() : disableLink();
|
||||
!externalLinksVisible ? editLink() : disableLink();
|
||||
}
|
||||
|
||||
setLinksVisible(!linksVisible);
|
||||
onChangeExternalLinksVisible(!externalLinksVisible);
|
||||
|
||||
if (!linksVisible && withCopy) copyLink(link?.shareLink);
|
||||
if (!externalLinksVisible && withCopy) copyLink(link?.shareLink);
|
||||
};
|
||||
|
||||
const disableLink = () => {
|
||||
@ -185,14 +186,17 @@ const ExternalLinks = ({
|
||||
</DropDown>
|
||||
</div>
|
||||
)}
|
||||
<StyledToggleButton isChecked={linksVisible} onChange={toggleLinks} />
|
||||
<StyledToggleButton
|
||||
isChecked={externalLinksVisible}
|
||||
onChange={toggleLinks}
|
||||
/>
|
||||
</StyledSubHeader>
|
||||
<StyledDescription>
|
||||
{roomId === -1
|
||||
? t("InviteViaLinkDescriptionAccounts")
|
||||
: t("InviteViaLinkDescriptionRoom")}
|
||||
</StyledDescription>
|
||||
{linksVisible && (
|
||||
{externalLinksVisible && (
|
||||
<StyledInviteInputContainer key={activeLink.id}>
|
||||
<StyledInviteInput>
|
||||
<InputBlock
|
||||
|
@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, memo, useCallback } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import { FixedSizeList as List } from "react-window";
|
||||
import CustomScrollbarsVirtualList from "@docspace/components/scrollbar/custom-scrollbars-virtual-list";
|
||||
|
||||
import useResizeObserver from "use-resize-observer";
|
||||
import Item from "./Item";
|
||||
|
||||
import { StyledRow, ScrollList } from "../StyledInvitePanel";
|
||||
@ -48,19 +48,23 @@ const ItemsList = ({
|
||||
setHasErrors,
|
||||
roomType,
|
||||
isOwner,
|
||||
externalLinksVisible,
|
||||
}) => {
|
||||
const [bodyHeight, setBodyHeight] = useState(0);
|
||||
const [offsetTop, setOffsetTop] = useState(0);
|
||||
const bodyRef = useRef();
|
||||
const { height } = useResizeObserver({ ref: bodyRef });
|
||||
|
||||
const onBodyResize = useCallback(() => {
|
||||
setBodyHeight(bodyRef.current.offsetHeight - FOOTER_HEIGHT);
|
||||
const heightList = height ? height : bodyRef.current.offsetHeight;
|
||||
setBodyHeight(heightList - FOOTER_HEIGHT);
|
||||
|
||||
setOffsetTop(bodyRef.current.offsetTop);
|
||||
}, [bodyRef?.current?.offsetHeight]);
|
||||
}, [height, bodyRef?.current?.offsetHeight]);
|
||||
|
||||
useEffect(() => {
|
||||
onBodyResize();
|
||||
}, [bodyRef.current]);
|
||||
}, [bodyRef.current, externalLinksVisible, height]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", onBodyResize);
|
||||
|
Loading…
Reference in New Issue
Block a user