fix selection in row view
This commit is contained in:
parent
6eda31a9a2
commit
967d5695d3
@ -1,15 +1,122 @@
|
|||||||
import { useRef } from "react";
|
import { useCallback } from "react";
|
||||||
import Row from "@docspace/components/row";
|
import { isMobile } from "react-device-detect";
|
||||||
|
import { Base } from "@docspace/components/themes";
|
||||||
|
import { tablet } from "@docspace/components/utils/device";
|
||||||
|
import styled, { css } from "styled-components";
|
||||||
|
|
||||||
|
import withContent from "SRC_DIR/HOCs/withPeopleContent";
|
||||||
import SessionsRowContent from "./SessionsRowContent";
|
import SessionsRowContent from "./SessionsRowContent";
|
||||||
|
|
||||||
|
import Row from "@docspace/components/row";
|
||||||
import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
|
import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.react.svg?url";
|
||||||
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
||||||
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
|
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
|
||||||
|
|
||||||
const SessionsRow = (props) => {
|
const marginStyles = css`
|
||||||
const { t, sectionWidth, data, isChecked, toggleSession } = props;
|
margin-left: -24px;
|
||||||
|
margin-right: -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
padding-right: 24px;
|
||||||
|
|
||||||
const ref = useRef();
|
@media ${tablet} {
|
||||||
|
margin-left: -16px;
|
||||||
|
margin-right: -16px;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const checkedStyle = css`
|
||||||
|
background: ${(props) => props.theme.filesSection.rowView.checkedBackground};
|
||||||
|
${marginStyles}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
.user-item {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-left: none;
|
||||||
|
border-right: none;
|
||||||
|
${(props) =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
margin-right: 0;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-left: 0;
|
||||||
|
`}
|
||||||
|
height: 100%;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
outline: none;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
Wrapper.defaultProps = { theme: Base };
|
||||||
|
|
||||||
|
const StyledRow = styled(Row)`
|
||||||
|
${(props) => (props.checked || props.isActive) && checkedStyle};
|
||||||
|
|
||||||
|
${!isMobile &&
|
||||||
|
css`
|
||||||
|
:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
${checkedStyle}
|
||||||
|
|
||||||
|
margin-top: -3px;
|
||||||
|
padding-bottom: 1px;
|
||||||
|
border-top: ${(props) =>
|
||||||
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
|
border-bottom: ${(props) =>
|
||||||
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
|
||||||
|
position: unset;
|
||||||
|
margin-top: -2px;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
|
||||||
|
.styled-checkbox-container {
|
||||||
|
.checkbox {
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.styled-element {
|
||||||
|
height: 32px;
|
||||||
|
${(props) =>
|
||||||
|
props.theme.interfaceDirection === "rtl"
|
||||||
|
? css`
|
||||||
|
margin-left: 12px;
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
margin-right: 12px;
|
||||||
|
`}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const SessionsRow = (props) => {
|
||||||
|
const {
|
||||||
|
t,
|
||||||
|
sectionWidth,
|
||||||
|
item,
|
||||||
|
checkedProps,
|
||||||
|
onContentRowSelect,
|
||||||
|
onContentRowClick,
|
||||||
|
element,
|
||||||
|
isActive,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const isChecked = checkedProps.checked;
|
||||||
|
|
||||||
|
const onRowClick = useCallback(() => {
|
||||||
|
onContentRowClick && onContentRowClick(!isChecked, item);
|
||||||
|
}, [isChecked, item, onContentRowClick]);
|
||||||
|
|
||||||
|
const onRowContextClick = useCallback(() => {
|
||||||
|
onContentRowClick && onContentRowClick(!isChecked, item, false);
|
||||||
|
}, [isChecked, item, onContentRowClick]);
|
||||||
|
|
||||||
const contextOptions = [
|
const contextOptions = [
|
||||||
{
|
{
|
||||||
@ -36,26 +143,37 @@ const SessionsRow = (props) => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const handleSessionToggle = (e) => {
|
// const handleSessionToggle = (checked) => {
|
||||||
e.preventDefault();
|
// toggleSession(checked);
|
||||||
e.stopPropagation();
|
// console.log("checked", checked);
|
||||||
ref.current?.contains(e.target) || toggleSession(e);
|
// };
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row
|
<Wrapper
|
||||||
key={data.id}
|
className={`user-item row-wrapper ${
|
||||||
data={data}
|
isChecked || isActive ? "row-selected" : ""
|
||||||
sectionWidth={sectionWidth}
|
}`}
|
||||||
contextButton
|
|
||||||
contextOptions={contextOptions}
|
|
||||||
onClick={handleSessionToggle}
|
|
||||||
onSelect={handleSessionToggle}
|
|
||||||
contextButtonSpacerWidth="0"
|
|
||||||
>
|
>
|
||||||
<SessionsRowContent {...props} />
|
<div className="user-item">
|
||||||
</Row>
|
<StyledRow
|
||||||
|
key={item.id}
|
||||||
|
data={item}
|
||||||
|
element={element}
|
||||||
|
onSelect={onContentRowSelect}
|
||||||
|
checked={isChecked}
|
||||||
|
isActive={isActive}
|
||||||
|
sectionWidth={sectionWidth}
|
||||||
|
mode={"modern"}
|
||||||
|
className={"user-row"}
|
||||||
|
contextOptions={contextOptions}
|
||||||
|
onRowClick={onRowClick}
|
||||||
|
onContextClick={onRowContextClick}
|
||||||
|
>
|
||||||
|
<SessionsRowContent {...props} />
|
||||||
|
</StyledRow>
|
||||||
|
</div>
|
||||||
|
</Wrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default SessionsRow;
|
export default withContent(SessionsRow);
|
||||||
|
@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
|
|||||||
import Text from "@docspace/components/text";
|
import Text from "@docspace/components/text";
|
||||||
import Box from "@docspace/components/box";
|
import Box from "@docspace/components/box";
|
||||||
import RowContent from "@docspace/components/row-content";
|
import RowContent from "@docspace/components/row-content";
|
||||||
import Avatar from "@docspace/components/avatar";
|
import { tablet, mobile } from "@docspace/components/utils/device";
|
||||||
|
|
||||||
const StyledRowContent = styled(RowContent)`
|
const StyledRowContent = styled(RowContent)`
|
||||||
.rowMainContainer {
|
.rowMainContainer {
|
||||||
@ -10,15 +10,19 @@ const StyledRowContent = styled(RowContent)`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
@media ${tablet} {
|
||||||
${(props) =>
|
.row-main-container-wrapper {
|
||||||
props.theme.interfaceDirection === "rtl"
|
width: 100%;
|
||||||
? css`
|
display: flex;
|
||||||
margin-left: 10px;
|
justify-content: space-between;
|
||||||
`
|
max-width: inherit;
|
||||||
: css`
|
}
|
||||||
margin-right: 10px;
|
}
|
||||||
`}
|
|
||||||
|
@media ${mobile} {
|
||||||
|
.row-main-container-wrapper {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.session-info-wrapper {
|
.session-info-wrapper {
|
||||||
@ -65,12 +69,10 @@ const StyledRowContent = styled(RowContent)`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SessionsRowContent = (props) => {
|
const SessionsRowContent = ({ sectionWidth, item }) => {
|
||||||
const { sectionWidth, data } = props;
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
avatar,
|
|
||||||
displayName,
|
displayName,
|
||||||
|
|
||||||
status,
|
status,
|
||||||
platform,
|
platform,
|
||||||
browser,
|
browser,
|
||||||
@ -78,18 +80,12 @@ const SessionsRowContent = (props) => {
|
|||||||
city,
|
city,
|
||||||
ip,
|
ip,
|
||||||
userId,
|
userId,
|
||||||
} = data;
|
} = item;
|
||||||
|
|
||||||
const isOnline = status === "Online";
|
const isOnline = status === "Online";
|
||||||
|
|
||||||
const contentData = [
|
const contentData = [
|
||||||
<Box key={userId} displayProp="flex" alignItems="center">
|
<Box key={userId} displayProp="flex" alignItems="center">
|
||||||
<Avatar
|
|
||||||
className="avatar"
|
|
||||||
userName={displayName}
|
|
||||||
source={avatar}
|
|
||||||
size={"small"}
|
|
||||||
/>
|
|
||||||
<Box className="session-info-wrapper">
|
<Box className="session-info-wrapper">
|
||||||
<Box className="main-row-content">
|
<Box className="main-row-content">
|
||||||
<div className="session-info username">
|
<div className="session-info username">
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { inject, observer } from "mobx-react";
|
import { inject, observer } from "mobx-react";
|
||||||
import styled, { css } from "styled-components";
|
import styled, { css } from "styled-components";
|
||||||
|
import { tablet } from "@docspace/components/utils/device";
|
||||||
|
|
||||||
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
|
||||||
import RowContainer from "@docspace/components/row-container";
|
import RowContainer from "@docspace/components/row-container";
|
||||||
@ -9,6 +10,20 @@ import HistoryFinalizedReactSvgUrl from "PUBLIC_DIR/images/history-finalized.rea
|
|||||||
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
||||||
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
|
import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url";
|
||||||
|
|
||||||
|
const marginStyles = css`
|
||||||
|
margin-left: -24px;
|
||||||
|
margin-right: -24px;
|
||||||
|
padding-left: 24px;
|
||||||
|
padding-right: 24px;
|
||||||
|
|
||||||
|
@media ${tablet} {
|
||||||
|
margin-left: -16px;
|
||||||
|
margin-right: -16px;
|
||||||
|
padding-left: 16px;
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
const StyledRowContainer = styled(RowContainer)`
|
const StyledRowContainer = styled(RowContainer)`
|
||||||
margin: 0 0 24px;
|
margin: 0 0 24px;
|
||||||
|
|
||||||
@ -47,28 +62,53 @@ const StyledRowContainer = styled(RowContainer)`
|
|||||||
.table-container_group-menu-separator {
|
.table-container_group-menu-separator {
|
||||||
margin: 0 16px;
|
margin: 0 16px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.table-list-item {
|
.row-selected + .row-wrapper:not(.row-selected) {
|
||||||
cursor: pointer;
|
.user-row {
|
||||||
|
border-top: ${(props) =>
|
||||||
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
|
margin-top: -3px;
|
||||||
|
|
||||||
&:hover {
|
${marginStyles}
|
||||||
background-color: ${(props) =>
|
}
|
||||||
props.theme.filesSection.tableView.row.backgroundActive};
|
}
|
||||||
|
|
||||||
.table-container_cell {
|
.row-wrapper:not(.row-selected) + .row-selected {
|
||||||
margin-top: -1px;
|
.user-row {
|
||||||
border-top: ${(props) =>
|
border-top: ${(props) =>
|
||||||
`1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
|
margin-top: -3px;
|
||||||
|
|
||||||
margin-left: -24px;
|
${marginStyles}
|
||||||
padding-left: 24px;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-container_row-context-menu-wrapper {
|
.row-hotkey-border + .row-selected {
|
||||||
margin-right: -20px;
|
.user-row {
|
||||||
padding-right: 20px;
|
border-top: 1px solid #2da7db !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row-selected:last-child {
|
||||||
|
.user-row {
|
||||||
|
border-bottom: ${(props) =>
|
||||||
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
|
padding-bottom: 1px;
|
||||||
|
|
||||||
|
${marginStyles}
|
||||||
|
}
|
||||||
|
.user-row::after {
|
||||||
|
height: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.row-selected:first-child {
|
||||||
|
.user-row {
|
||||||
|
border-top: ${(props) =>
|
||||||
|
`1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
|
||||||
|
margin-top: -3px;
|
||||||
|
|
||||||
|
${marginStyles}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -87,21 +127,16 @@ const RowView = (props) => {
|
|||||||
t,
|
t,
|
||||||
sectionWidth,
|
sectionWidth,
|
||||||
sessionsData,
|
sessionsData,
|
||||||
allSessions,
|
// allSessions,
|
||||||
checkedSessions,
|
// checkedSessions,
|
||||||
toggleSession,
|
// toggleSession,
|
||||||
toggleAllSessions,
|
// toggleAllSessions,
|
||||||
isSessionChecked,
|
// isSessionChecked,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const handleToggle = (e, id) => {
|
// const handleAllToggles = (checked) => {
|
||||||
e.stopPropagation();
|
// toggleAllSessions(checked, allSessions);
|
||||||
toggleSession(id);
|
// };
|
||||||
};
|
|
||||||
|
|
||||||
const handleAllToggles = (checked) => {
|
|
||||||
toggleAllSessions(checked, allSessions);
|
|
||||||
};
|
|
||||||
|
|
||||||
const headerMenu = [
|
const headerMenu = [
|
||||||
{
|
{
|
||||||
@ -127,21 +162,22 @@ const RowView = (props) => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const isChecked = checkedSessions.length === allSessions.length;
|
// const isChecked = checkedSessions.length === allSessions.length;
|
||||||
|
|
||||||
const isIndeterminate =
|
// const isIndeterminate =
|
||||||
checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
|
// checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledRowContainer
|
<StyledRowContainer
|
||||||
itemHeight={58}
|
className="people-row-container"
|
||||||
useReactWindow={false}
|
useReactWindow={false}
|
||||||
hasMoreFiles={false}
|
hasMoreFiles={false}
|
||||||
|
itemHeight={58}
|
||||||
itemCount={sessionsData.length}
|
itemCount={sessionsData.length}
|
||||||
filesLength={sessionsData.length}
|
filesLength={sessionsData.length}
|
||||||
fetchMoreFiles={() => {}}
|
fetchMoreFiles={() => {}}
|
||||||
>
|
>
|
||||||
{checkedSessions.length > 0 && (
|
{/* {checkedSessions.length > 0 && (
|
||||||
<div className="table-group-menu">
|
<div className="table-group-menu">
|
||||||
<TableGroupMenu
|
<TableGroupMenu
|
||||||
sectionWidth={sectionWidth}
|
sectionWidth={sectionWidth}
|
||||||
@ -154,16 +190,14 @@ const RowView = (props) => {
|
|||||||
onChange={handleAllToggles}
|
onChange={handleAllToggles}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)} */}
|
||||||
|
|
||||||
{sessionsData.map((session) => (
|
{sessionsData.map((item) => (
|
||||||
<SessionsRow
|
<SessionsRow
|
||||||
t={t}
|
t={t}
|
||||||
key={session.id}
|
key={item.id}
|
||||||
|
item={item}
|
||||||
sectionWidth={sectionWidth}
|
sectionWidth={sectionWidth}
|
||||||
data={session}
|
|
||||||
isChecked={isSessionChecked(session.userId)}
|
|
||||||
toggleSession={(e) => handleToggle(e, session.userId)}
|
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</StyledRowContainer>
|
</StyledRowContainer>
|
||||||
|
Loading…
Reference in New Issue
Block a user