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

Web: Files: fixed invite-panel row

Browse Source
This commit is contained in:
Nikita Gopienko 2023-04-18 17:23:46 +03:00
parent b75258bb90
commit f50421c3f6
10 changed files with 63 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js
View File

@ -91,6 +91,11 @@ const StyledRow = styled.div`
font-size: 14px;
line-height: 16px;
}
.invite-panel_access-selector {
margin-left: auto;
margin-right: 0;
}
`;
const StyledInviteInput = styled.div`

6
packages/client/src/components/panels/InvitePanel/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useRef } from "react";
import { observer, inject } from "mobx-react";
import { withTranslation } from "react-i18next";
import { isMobileOnly } from "react-device-detect";
@ -52,6 +52,8 @@ const InvitePanel = ({
const [isLoading, setIsLoading] = useState(false);
const [externalLinksVisible, setExternalLinksVisible] = useState(false);
const inputsRef = useRef();
const onChangeExternalLinksVisible = (visible) => {
setExternalLinksVisible(visible);
};
@ -236,6 +238,7 @@ const InvitePanel = ({
onClose={onClose}
roomUsers={roomUsers}
roomType={roomType}
inputsRef={inputsRef}
/>
{!!inviteItems.length && (
@ -245,6 +248,7 @@ const InvitePanel = ({
setHasErrors={setHasErrors}
roomType={roomType}
externalLinksVisible={externalLinksVisible}
inputsRef={inputsRef}
/>
<StyledButtons>

19
packages/client/src/components/panels/InvitePanel/sub-components/AccessSelector.js
View File

@ -12,14 +12,18 @@ const AccessSelector = ({
containerRef,
defaultAccess,
isOwner,
onAccessSelectorClick,
withRemove = false,
}) => {
const [horizontalOrientation, setHorizontalOrientation] = useState(false);
const width = onAccessSelectorClick
? containerRef?.current?.offsetWidth
: containerRef?.current?.offsetWidth - 32;
const width = containerRef?.current?.offsetWidth - 32;
const accessOptions = getAccessOptions(t, roomType, false, true, isOwner);
const accessOptions = getAccessOptions(
t,
roomType,
withRemove,
true,
isOwner
);
const selectedOption = accessOptions.filter(
(access) => access.access === +defaultAccess
@ -48,10 +52,7 @@ const AccessSelector = ({
: {};
return (
<StyledAccessSelector
className="access-right-select-wrapper"
onClick={onAccessSelectorClick}
>
<StyledAccessSelector className="invite-panel_access-selector">
<AccessRightSelect
selectedOption={selectedOption}
onSelect={onSelectAccess}

2
packages/client/src/components/panels/InvitePanel/sub-components/InviteInput.js
View File

@ -36,6 +36,7 @@ const InviteInput = ({
roomUsers,
t,
isOwner,
inputsRef,
}) => {
const [inputValue, setInputValue] = useState("");
const [usersList, setUsersList] = useState([]);
@ -44,7 +45,6 @@ const InviteInput = ({
const [selectedAccess, setSelectedAccess] = useState(defaultAccess);
const inputsRef = useRef();
const searchRef = useRef();
const inRoom = (id) => {

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

@ -16,6 +16,7 @@ import {
StyledHelpButton,
StyledDeleteIcon,
} from "../StyledInvitePanel";
import AccessSelector from "./AccessSelector";
import { filterUserRoleOptions } from "SRC_DIR/helpers/utils";
const Item = ({
@ -27,6 +28,7 @@ const Item = ({
setHasErrors,
roomType,
isOwner,
inputsRef,
}) => {
const { avatar, displayName, email, id, errors, access } = item;
@ -130,20 +132,14 @@ const Item = ({
<StyledDeleteIcon size="medium" onClick={removeItem} />
</>
) : (
<StyledComboBox
onSelect={selectItemAccess}
noBorder
options={filteredAccesses}
size="content"
scaled={false}
manualWidth="fit-content"
selectedOption={defaultAccess}
showDisabledItems
modernView
directionX="right"
directionY="bottom"
isDefaultMode={false}
fixedDirection={true}
<AccessSelector
t={t}
roomType={roomType}
defaultAccess={defaultAccess.access}
onSelectAccess={selectItemAccess}
containerRef={inputsRef}
isOwner={isOwner}
withRemove={true}
/>
)}
</>

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

@ -18,6 +18,7 @@ const Row = memo(({ data, index, style }) => {
setHasErrors,
roomType,
isOwner,
inputsRef,
} = data;
if (inviteItems === undefined) return;
@ -35,6 +36,7 @@ const Row = memo(({ data, index, style }) => {
setHasErrors={setHasErrors}
roomType={roomType}
isOwner={isOwner}
inputsRef={inputsRef}
/>
</StyledRow>
);
@ -49,6 +51,7 @@ const ItemsList = ({
roomType,
isOwner,
externalLinksVisible,
inputsRef,
}) => {
const [bodyHeight, setBodyHeight] = useState(0);
const [offsetTop, setOffsetTop] = useState(0);
@ -87,6 +90,7 @@ const ItemsList = ({
setHasErrors,
roomType,
isOwner,
inputsRef,
t,
}}
outerElementType={CustomScrollbarsVirtualList}

4
packages/client/src/pages/Home/InfoPanel/Body/styles/members.js
View File

@ -98,10 +98,6 @@ const StyledUser = styled.div`
}
}
}
.access-right-select-wrapper {
margin: 0;
}
`;
StyledUserTypeHeader.defaultProps = { theme: Base };

34
packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
View File

@ -2,12 +2,13 @@ import React, { useState } from "react";
import AtReactSvgUrl from "PUBLIC_DIR/images/@.react.svg?url";
import { StyledUser } from "../../styles/members";
import Avatar from "@docspace/components/avatar";
import { ComboBox } from "@docspace/components";
import DefaultUserPhotoUrl from "PUBLIC_DIR/images/default_user_photo_size_82-82.png";
import toastr from "@docspace/components/toast/toastr";
import { isMobileOnly } from "react-device-detect";
import { decode } from "he";
import { filterUserRoleOptions } from "SRC_DIR/helpers/utils";
import { getUserRole } from "@docspace/common/utils";
import AccessSelector from "../../../../../../components/panels/InvitePanel/sub-components/AccessSelector.js";
const User = ({
t,
@ -21,7 +22,6 @@ const User = ({
changeUserType,
isScrollLocked,
setIsScrollLocked,
getMembersContainerRef,
}) => {
if (!selectionParentRoom) return null;
if (!user.displayName && !user.email) return null;
@ -30,8 +30,6 @@ const User = ({
const [isLoading, setIsLoading] = useState(false);
//if (userIsRemoved) return null;
const [containerRef, setContainerRef] = useState(null);
const canChangeUserRole = user.canEditAccess;
const fullRoomRoleOptions = membersHelper.getOptionsByRoomType(
@ -119,11 +117,6 @@ const User = ({
setIsScrollLocked(!isScrollLocked);
};
const onAccessSelectorClick = () => {
const containerRef = getMembersContainerRef();
setContainerRef(containerRef);
};
const userAvatar = user.hasAvatar ? user.avatar : DefaultUserPhotoUrl;
const role = getUserRole(user);
@ -157,13 +150,22 @@ const User = ({
{userRole && userRoleOptions && (
<div className="role-wrapper">
{canChangeUserRole ? (
<AccessSelector
t={t}
roomType={selectionParentRoom.roomType}
defaultAccess={user.access}
onSelectAccess={onOptionClick}
containerRef={containerRef}
onAccessSelectorClick={onAccessSelectorClick}
<ComboBox
className="role-combobox"
selectedOption={userRole}
options={userRoleOptions}
onSelect={onOptionClick}
scaled={false}
withBackdrop={isMobileOnly}
size="content"
modernView
title={t("Common:Role")}
manualWidth={"fit-content"}
isLoading={isLoading}
isMobileView={isMobileOnly}
directionY="both"
toggleAction={onToggle}
displaySelectedOption
/>
) : (
<div className="disabled-role-combobox" title={t("Common:Role")}>

12
packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useCallback, useRef } from "react";
import React, { useState, useEffect, useCallback } from "react";
import { inject, observer } from "mobx-react";
import { withTranslation } from "react-i18next";
import toastr from "@docspace/components/toast/toastr";
@ -46,8 +46,6 @@ const Members = ({
const [members, setMembers] = useState(null);
const [showLoader, setShowLoader] = useState(false);
const membersContainerRef = useRef();
const security = selectionParentRoom ? selectionParentRoom.security : {};
const canInviteUserInRoomAbility = security?.EditAccess;
@ -169,10 +167,8 @@ const Members = ({
(member) => member.id === selfId
);
const getMembersContainerRef = () => membersContainerRef;
return (
<div ref={membersContainerRef}>
<>
<StyledUserTypeHeader>
<Text className="title">
{t("UsersInRoom")} : {members.inRoom.length}
@ -207,7 +203,6 @@ const Members = ({
changeUserType={changeUserType}
isScrollLocked={isScrollLocked}
setIsScrollLocked={setIsScrollLocked}
getMembersContainerRef={getMembersContainerRef}
/>
))}
</StyledUserList>
@ -246,11 +241,10 @@ const Members = ({
changeUserType={changeUserType}
isScrollLocked={isScrollLocked}
setIsScrollLocked={setIsScrollLocked}
getMembersContainerRef={getMembersContainerRef}
/>
))}
</StyledUserList>
</div>
</>
);
};

14
yarn.lock
View File

@ -13306,7 +13306,7 @@ __metadata:
"fsevents@patch:fsevents@^1.2.7#~builtin<compat/fsevents>":
version: 1.2.13
resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=d11327"
resolution: "fsevents@patch:fsevents@npm%3A1.2.13#~builtin<compat/fsevents>::version=1.2.13&hash=18f3a7"
dependencies:
bindings: ^1.5.0
nan: ^2.12.1
@ -13316,7 +13316,7 @@ __metadata:
"fsevents@patch:fsevents@^2.1.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
version: 2.3.2
resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=18f3a7"
dependencies:
node-gyp: latest
conditions: os=darwin
@ -21749,14 +21749,14 @@ __metadata:
"resolve@patch:resolve@1.1.7#~builtin<compat/resolve>":
version: 1.1.7
resolution: "resolve@patch:resolve@npm%3A1.1.7#~builtin<compat/resolve>::version=1.1.7&hash=3bafbf"
resolution: "resolve@patch:resolve@npm%3A1.1.7#~builtin<compat/resolve>::version=1.1.7&hash=07638b"
checksum: e9dbca78600ae56835c43a09f1276876c883e4b4bbd43e2683fa140671519d2bdebeb1c1576ca87c8c508ae2987b3ec481645ac5d3054b0f23254cfc1ce49942
languageName: node
linkType: hard
"resolve@patch:resolve@^1.1.6#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.12.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.14.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.3.2#~builtin<compat/resolve>, resolve@patch:resolve@^1.8.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.9.0#~builtin<compat/resolve>":
version: 1.22.2
resolution: "resolve@patch:resolve@npm%3A1.22.2#~builtin<compat/resolve>::version=1.22.2&hash=c3c19d"
resolution: "resolve@patch:resolve@npm%3A1.22.2#~builtin<compat/resolve>::version=1.22.2&hash=07638b"
dependencies:
is-core-module: ^2.11.0
path-parse: ^1.0.7
@ -21769,7 +21769,7 @@ __metadata:
"resolve@patch:resolve@^2.0.0-next.4#~builtin<compat/resolve>":
version: 2.0.0-next.4
resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#~builtin<compat/resolve>::version=2.0.0-next.4&hash=07638b"
dependencies:
is-core-module: ^2.9.0
path-parse: ^1.0.7
@ -24201,11 +24201,11 @@ __metadata:
"typescript@patch:typescript@^4.9.5#~builtin<compat/typescript>":
version: 4.9.5
resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=ad5954"
resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=701156"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
checksum: 8f6260acc86b56bfdda6004bc53f32ea548f543e8baef7071c8e34d29d292f3e375c8416556c8de10b24deef6933cd1c16a8233dc84a3dd43a13a13265d0faab
checksum: 2eee5c37cad4390385db5db5a8e81470e42e8f1401b0358d7390095d6f681b410f2c4a0c496c6ff9ebd775423c7785cdace7bcdad76c7bee283df3d9718c0f20
languageName: node
linkType: hard