Web:Pages:Accounts: add buffer selection

packages/client/src/HOCs/withPeopleContent.js

@@ -145,11 +145,14 @@ export default function withContent(WrappedContent) {
 
     const {
       selection,
-      setSelection,
+      bufferSelection,
+      setBufferSelection,
       selectUser,
       deselectUser,
     } = selectionStore;
 
+    console.log(selection);
+
     return {
       theme: auth.settingsStore.theme,
       isAdmin,
@@ -157,9 +160,10 @@ export default function withContent(WrappedContent) {
       selectGroup,
       fetchProfile: getTargetUser,
       checked: selection.some((el) => el.id === item.id),
+      isActive: bufferSelection?.id === item?.id,
+      setBufferSelection,
       selectUser,
       deselectUser,
-      setSelection,
     };
   })(observer(WithContent));
 }

packages/client/src/pages/Accounts/Home/Section/Body/RowView/SimpleUserRow.js

@@ -95,21 +95,15 @@ const SimpleUserRow = (props) => {
     checkedProps,
     onContentRowSelect,
     element,
-    setSelection,
+    setBufferSelection,
+    isActive,
   } = props;
 
-  const [isActive, setIsActive] = React.useState(false);
-
   const isChecked = checkedProps.checked;
 
   const userContextClick = React.useCallback(() => {
-    setIsActive(true);
-    !isChecked && setSelection([]);
-  }, [isChecked, setSelection]);
-
-  const onHideContextMenu = React.useCallback(() => {
-    setIsActive(false);
-  }, []);
+    setBufferSelection(item);
+  }, [item, setBufferSelection]);
 
   return (
     <StyledWrapper
@@ -127,7 +121,6 @@ const SimpleUserRow = (props) => {
           sectionWidth={sectionWidth}
           mode={"modern"}
           className={"user-row"}
-          rowContextClose={onHideContextMenu}
           rowContextClick={userContextClick}
         >
           <UserContent {...props} />

packages/client/src/pages/Accounts/Home/Section/Body/TableView/TableRow.js

@@ -134,11 +134,10 @@ const PeopleTableRow = (props) => {
     theme,
     changeUserType,
     userId,
-    setSelection,
+    setBufferSelection,
+    isActive,
   } = props;
 
-  const [isActive, setIsActive] = React.useState(false);
-
   const {
     displayName,
     email,
@@ -234,13 +233,8 @@ const PeopleTableRow = (props) => {
   const isChecked = checkedProps.checked;
 
   const userContextClick = React.useCallback(() => {
-    setIsActive(true);
-    !isChecked && setSelection([]);
-  }, [isChecked, setSelection]);
-
-  const onHideContextMenu = React.useCallback(() => {
-    setIsActive(false);
-  }, []);
+    setBufferSelection(item);
+  }, [item, setBufferSelection]);
 
   return (
     <StyledWrapper
@@ -254,7 +248,6 @@ const PeopleTableRow = (props) => {
         sideInfoColor={sideInfoColor}
         checked={isChecked}
         fileContextClick={userContextClick}
-        onHideContextMenu={onHideContextMenu}
         isActive={isActive}
         {...contextOptionsProps}
       >

packages/client/src/store/SelectionPeopleStore.js

@@ -9,14 +9,17 @@ const { auth: authStore } = store;
 
 class SelectionStore {
   selection = [];
+  bufferSelection = null;
   selected = "none";
 
   constructor(peopleStore) {
     this.peopleStore = peopleStore;
     makeObservable(this, {
       selection: observable,
+      bufferSelection: observable,
       selected: observable,
       selectUser: action,
+      setBufferSelection: action,
       deselectUser: action,
       selectAll: action,
       setSelection: action,
@@ -41,10 +44,21 @@ class SelectionStore {
 
   setSelection = (selection) => {
     this.selection = selection;
+    if (selection?.length && !this.selection.length) {
+      this.bufferSelection = null;
+    }
+  };
+
+  setBufferSelection = (bufferSelection) => {
+    this.bufferSelection = bufferSelection;
+    this.setSelection([]);
   };
 
   selectUser = (user) => {
-    return this.selection.push(user);
+    if (!this.selection.length) {
+      this.bufferSelection = null;
+    }
+    this.selection.push(user);
   };
 
   deselectUser = (user) => {
@@ -53,6 +67,7 @@ class SelectionStore {
   };
 
   selectAll = () => {
+    this.bufferSelection = null;
     const list = this.peopleStore.usersStore.peopleList;
     this.setSelection(list);
   };
@@ -62,6 +77,7 @@ class SelectionStore {
   };
 
   selectByStatus = (status) => {
+    this.bufferSelection = null;
     const list = this.peopleStore.usersStore.peopleList.filter(
       (u) => u.status === status
     );
@@ -98,6 +114,7 @@ class SelectionStore {
   };
 
   setSelected = (selected) => {
+    this.bufferSelection = null;
     this.selected = selected;
     const list = this.peopleStore.usersStore.peopleList;
     this.setSelection(this.getUsersBySelected(list, selected));