fix selection in row view

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js

@@ -1,15 +1,122 @@
-import { useRef } from "react";
-import Row from "@docspace/components/row";
+import { useCallback } from "react";
+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 Row from "@docspace/components/row";
 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 SessionsRow = (props) => {
-  const { t, sectionWidth, data, isChecked, toggleSession } = props;
+const marginStyles = css`
+  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 = [
     {
@@ -36,26 +143,37 @@ const SessionsRow = (props) => {
     },
   ];
 
-  const handleSessionToggle = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    ref.current?.contains(e.target) || toggleSession(e);
-  };
+  // const handleSessionToggle = (checked) => {
+  //   toggleSession(checked);
+  //   console.log("checked", checked);
+  // };
 
   return (
-    <Row
-      key={data.id}
-      data={data}
-      sectionWidth={sectionWidth}
-      contextButton
-      contextOptions={contextOptions}
-      onClick={handleSessionToggle}
-      onSelect={handleSessionToggle}
-      contextButtonSpacerWidth="0"
+    <Wrapper
+      className={`user-item row-wrapper ${
+        isChecked || isActive ? "row-selected" : ""
+      }`}
     >
-      <SessionsRowContent {...props} />
-    </Row>
+      <div className="user-item">
+        <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);

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import Text from "@docspace/components/text";
 import Box from "@docspace/components/box";
 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)`
   .rowMainContainer {
@@ -10,15 +10,19 @@ const StyledRowContent = styled(RowContent)`
     width: 100%;
   }
 
-  .avatar {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-left: 10px;
-          `
-        : css`
-            margin-right: 10px;
-          `}
+  @media ${tablet} {
+    .row-main-container-wrapper {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      max-width: inherit;
+    }
+  }
+
+  @media ${mobile} {
+    .row-main-container-wrapper {
+      justify-content: flex-start;
+    }
   }
 
   .session-info-wrapper {
@@ -65,12 +69,10 @@ const StyledRowContent = styled(RowContent)`
   }
 `;
 
-const SessionsRowContent = (props) => {
-  const { sectionWidth, data } = props;
-
+const SessionsRowContent = ({ sectionWidth, item }) => {
   const {
-    avatar,
     displayName,
+
     status,
     platform,
     browser,
@@ -78,18 +80,12 @@ const SessionsRowContent = (props) => {
     city,
     ip,
     userId,
-  } = data;
+  } = item;
 
   const isOnline = status === "Online";
 
   const contentData = [
     <Box key={userId} displayProp="flex" alignItems="center">
-      <Avatar
-        className="avatar"
-        userName={displayName}
-        source={avatar}
-        size={"small"}
-      />
       <Box className="session-info-wrapper">
         <Box className="main-row-content">
           <div className="session-info username">

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js

@@ -1,5 +1,6 @@
 import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
+import { tablet } from "@docspace/components/utils/device";
 
 import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
 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 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)`
   margin: 0 0 24px;
 
@@ -47,28 +62,53 @@ const StyledRowContainer = styled(RowContainer)`
     .table-container_group-menu-separator {
       margin: 0 16px;
     }
+  }
 
-    .table-list-item {
-      cursor: pointer;
+  .row-selected + .row-wrapper:not(.row-selected) {
+    .user-row {
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+      margin-top: -3px;
 
-      &:hover {
-        background-color: ${(props) =>
-          props.theme.filesSection.tableView.row.backgroundActive};
+      ${marginStyles}
+    }
+  }
 
-        .table-container_cell {
-          margin-top: -1px;
-          border-top: ${(props) =>
-            `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
+  .row-wrapper:not(.row-selected) + .row-selected {
+    .user-row {
+      border-top: ${(props) =>
+        `1px ${props.theme.filesSection.tableView.row.borderColor} solid`};
+      margin-top: -3px;
 
-          margin-left: -24px;
-          padding-left: 24px;
-        }
+      ${marginStyles}
+    }
+  }
 
-        .table-container_row-context-menu-wrapper {
-          margin-right: -20px;
-          padding-right: 20px;
-        }
-      }
+  .row-hotkey-border + .row-selected {
+    .user-row {
+      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,
     sectionWidth,
     sessionsData,
-    allSessions,
-    checkedSessions,
-    toggleSession,
-    toggleAllSessions,
-    isSessionChecked,
+    // allSessions,
+    // checkedSessions,
+    // toggleSession,
+    // toggleAllSessions,
+    // isSessionChecked,
   } = props;
 
-  const handleToggle = (e, id) => {
-    e.stopPropagation();
-    toggleSession(id);
-  };
-
-  const handleAllToggles = (checked) => {
-    toggleAllSessions(checked, allSessions);
-  };
+  // const handleAllToggles = (checked) => {
+  //   toggleAllSessions(checked, allSessions);
+  // };
 
   const headerMenu = [
     {
@@ -127,21 +162,22 @@ const RowView = (props) => {
     },
   ];
 
-  const isChecked = checkedSessions.length === allSessions.length;
+  // const isChecked = checkedSessions.length === allSessions.length;
 
-  const isIndeterminate =
-    checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
+  // const isIndeterminate =
+  //   checkedSessions.length > 0 && checkedSessions.length !== allSessions.length;
 
   return (
     <StyledRowContainer
-      itemHeight={58}
+      className="people-row-container"
       useReactWindow={false}
       hasMoreFiles={false}
+      itemHeight={58}
       itemCount={sessionsData.length}
       filesLength={sessionsData.length}
       fetchMoreFiles={() => {}}
     >
-      {checkedSessions.length > 0 && (
+      {/* {checkedSessions.length > 0 && (
         <div className="table-group-menu">
           <TableGroupMenu
             sectionWidth={sectionWidth}
@@ -154,16 +190,14 @@ const RowView = (props) => {
             onChange={handleAllToggles}
           />
         </div>
-      )}
+      )} */}
 
-      {sessionsData.map((session) => (
+      {sessionsData.map((item) => (
         <SessionsRow
           t={t}
-          key={session.id}
+          key={item.id}
+          item={item}
           sectionWidth={sectionWidth}
-          data={session}
-          isChecked={isSessionChecked(session.userId)}
-          toggleSession={(e) => handleToggle(e, session.userId)}
         />
       ))}
     </StyledRowContainer>