added table group menu for row view
This commit is contained in:
parent
9f4f4e08ab
commit
119d3c3b46
@ -1,5 +1,8 @@
|
||||
import { useRef } from "react";
|
||||
import Row from "@docspace/components/row";
|
||||
import SessionsRowContent from "./SessionsRowContent";
|
||||
import Avatar from "@docspace/components/avatar";
|
||||
import Checkbox from "@docspace/components/checkbox";
|
||||
|
||||
import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
|
||||
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
||||
@ -8,7 +11,6 @@ import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
|
||||
const SessionsRow = (props) => {
|
||||
const {
|
||||
t,
|
||||
data,
|
||||
sectionWidth,
|
||||
avatar,
|
||||
displayName,
|
||||
@ -18,7 +20,9 @@ const SessionsRow = (props) => {
|
||||
country,
|
||||
city,
|
||||
ip,
|
||||
userId,
|
||||
data,
|
||||
isChecked,
|
||||
toggleSession,
|
||||
} = props;
|
||||
const contextOptions = [
|
||||
{
|
||||
@ -45,21 +49,27 @@ const SessionsRow = (props) => {
|
||||
},
|
||||
];
|
||||
|
||||
const rowRef = useRef();
|
||||
|
||||
const handleSessionToggle = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
rowRef.current?.contains(e.target) || toggleSession(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<Row
|
||||
key={data.id}
|
||||
data={data}
|
||||
sectionWidth={sectionWidth}
|
||||
checkbox
|
||||
contextButton
|
||||
contextOptions={contextOptions}
|
||||
// checked={isChecked}
|
||||
// onClick={toggleAccount}
|
||||
// onSelect={toggleAccount}
|
||||
// contextButtonSpacerWidth="0"
|
||||
checked={isChecked}
|
||||
onClick={handleSessionToggle}
|
||||
onSelect={handleSessionToggle}
|
||||
contextButtonSpacerWidth="0"
|
||||
>
|
||||
<SessionsRowContent
|
||||
userId={userId}
|
||||
avatar={avatar}
|
||||
displayName={displayName}
|
||||
status={status}
|
||||
@ -68,6 +78,7 @@ const SessionsRow = (props) => {
|
||||
country={country}
|
||||
city={city}
|
||||
ip={ip}
|
||||
rowRef={rowRef}
|
||||
/>
|
||||
</Row>
|
||||
);
|
||||
|
@ -103,9 +103,10 @@ const SessionsRowContent = (props) => {
|
||||
city,
|
||||
ip,
|
||||
userId,
|
||||
rowRef,
|
||||
} = props;
|
||||
|
||||
// const isOnline = status === "Online";
|
||||
const isOnline = status === "Online";
|
||||
|
||||
const contentData = [
|
||||
<Box key={userId} displayProp="flex" alignItems="center">
|
||||
@ -115,7 +116,7 @@ const SessionsRowContent = (props) => {
|
||||
source={avatar}
|
||||
size={"small"}
|
||||
/>
|
||||
<Box className="session-info">
|
||||
<Box className="session-info" ref={rowRef}>
|
||||
<Box className="main-row-content">
|
||||
<div className="username">
|
||||
{displayName} <span>{status}</span>
|
||||
|
@ -1,45 +1,199 @@
|
||||
import { inject, observer } from "mobx-react";
|
||||
import styled from "styled-components";
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||
import RowContainer from "@docspace/components/row-container";
|
||||
import SessionsRow from "./SessionsRow";
|
||||
|
||||
import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
|
||||
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
||||
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
|
||||
|
||||
const StyledRowContainer = styled(RowContainer)`
|
||||
margin 0px 0px 20px;
|
||||
margin: 0 0 24px;
|
||||
|
||||
.table-group-menu {
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
z-index: 201;
|
||||
top: -170px;
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
right: -16px;
|
||||
`
|
||||
: css`
|
||||
left: -16px;
|
||||
`}
|
||||
width: 100%;
|
||||
|
||||
.table-container_group-menu {
|
||||
padding: 0px 16px;
|
||||
border-image-slice: 0;
|
||||
box-shadow: rgba(4, 15, 27, 0.07) 0px 15px 20px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-checkbox {
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: 8px;
|
||||
`
|
||||
: css`
|
||||
margin-left: 8px;
|
||||
`}
|
||||
}
|
||||
|
||||
.table-container_group-menu-separator {
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
.table-list-item {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props) =>
|
||||
props.theme.filesSection.tableView.row.backgroundActive};
|
||||
|
||||
.table-container_cell {
|
||||
margin-top: -1px;
|
||||
border-top: ${(props) =>
|
||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
||||
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.table-container_row-context-menu-wrapper {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-container-text {
|
||||
font-size: ${(props) => props.theme.getCorrectFontSize("12px")};
|
||||
color: #a3a9ae;
|
||||
}
|
||||
|
||||
.table-container_header {
|
||||
position: absolute;
|
||||
}
|
||||
`;
|
||||
|
||||
const RowView = (props) => {
|
||||
const { t, sectionWidth, sessionsData } = props;
|
||||
const {
|
||||
t,
|
||||
sectionWidth,
|
||||
sessionsData,
|
||||
allSessions,
|
||||
checkedSessions,
|
||||
toggleSession,
|
||||
toggleAllSessions,
|
||||
isSessionChecked,
|
||||
} = props;
|
||||
|
||||
const handleToggle = (e, id) => {
|
||||
e.stopPropagation();
|
||||
toggleSession(id);
|
||||
};
|
||||
|
||||
const handleAllToggles = (checked) => {
|
||||
toggleAllSessions(checked, allSessions);
|
||||
};
|
||||
|
||||
const headerMenu = [
|
||||
{
|
||||
id: "sessions",
|
||||
key: "Sessions",
|
||||
label: t("Common:Sessions"),
|
||||
onClick: () => console.log("Sessions"),
|
||||
iconUrl: HistoryFinalizedReactSvgUrl,
|
||||
},
|
||||
{
|
||||
id: "logout",
|
||||
key: "Logout",
|
||||
label: t("Common:Logout"),
|
||||
onClick: () => console.log("Logout"),
|
||||
iconUrl: RemoveSvgUrl,
|
||||
},
|
||||
{
|
||||
id: "Disable",
|
||||
key: "Disable",
|
||||
label: t("Common:DisableUserButton"),
|
||||
onClick: () => console.log("Disable"),
|
||||
iconUrl: TrashReactSvgUrl,
|
||||
},
|
||||
];
|
||||
|
||||
const isChecked = checkedSessions.length === allSessions.length;
|
||||
|
||||
const isIndeterminate =
|
||||
checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
|
||||
|
||||
return (
|
||||
<StyledRowContainer useReactWindow={false}>
|
||||
<StyledRowContainer
|
||||
itemHeight={58}
|
||||
useReactWindow={false}
|
||||
hasMoreFiles={false}
|
||||
itemCount={sessionsData.length}
|
||||
filesLength={sessionsData.length}
|
||||
fetchMoreFiles={() => {}}
|
||||
>
|
||||
{checkedSessions.length > 0 && (
|
||||
<div className="table-group-menu">
|
||||
<TableGroupMenu
|
||||
sectionWidth={sectionWidth}
|
||||
headerMenu={headerMenu}
|
||||
withoutInfoPanelToggler
|
||||
withComboBox={false}
|
||||
checkboxOptions={[]}
|
||||
isChecked={isChecked}
|
||||
isIndeterminate={isIndeterminate}
|
||||
onChange={handleAllToggles}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{sessionsData.map((session) => (
|
||||
<SessionsRow
|
||||
t={t}
|
||||
sectionWidth={sectionWidth}
|
||||
data={session}
|
||||
key={session.id}
|
||||
sectionWidth={sectionWidth}
|
||||
avatar={session.avatar}
|
||||
displayName={session.displayName}
|
||||
status={session.status}
|
||||
browser={session.browser}
|
||||
platform={session.platform}
|
||||
browser={session.browser}
|
||||
country={session.country}
|
||||
city={session.city}
|
||||
ip={session.ip}
|
||||
userId={session.userId}
|
||||
// isChecked={isAccountChecked(data.key, checkedAccountType)}
|
||||
// toggleAccount={() => handleToggle(data)}
|
||||
data={session}
|
||||
isChecked={isSessionChecked(session.userId)}
|
||||
toggleSession={(e) => handleToggle(e, session.userId)}
|
||||
/>
|
||||
))}
|
||||
</StyledRowContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
export default inject(({ auth, setup }) => {
|
||||
const { id: userId } = auth.userStore.user;
|
||||
const {
|
||||
allSessions,
|
||||
checkedSessions,
|
||||
toggleSession,
|
||||
toggleAllSessions,
|
||||
isSessionChecked,
|
||||
} = setup;
|
||||
|
||||
return {
|
||||
userId,
|
||||
allSessions,
|
||||
checkedSessions,
|
||||
toggleSession,
|
||||
toggleAllSessions,
|
||||
isSessionChecked,
|
||||
};
|
||||
})(observer(RowView));
|
||||
|
Loading…
Reference in New Issue
Block a user