Merge pull request #328 from ONLYOFFICE/bugfix/selector

Bugfix/selector

packages/client/src/components/FilesSelector/index.tsx

@@ -305,7 +305,7 @@ const FilesSelectorWrapper = ({
     return getIsDisabled(
       isFirstLoad,
       isSelectedParentFolder,
-      fromFolderId === selectedItemId,
+      fromFolderId === Number(selectedItemId),
       selectedItemType === "rooms",
       isRoot,
       isCopy,
@@ -481,7 +481,7 @@ export default inject(
       (rootFolderType === FolderType.Archive ||
       rootFolderType === FolderType.TRASH
         ? undefined
-        : selectedId === selectionsWithoutEditing[0]?.id
+        : selectedId !== selectionsWithoutEditing[0]?.id
           ? parentId
           : selectedId);
 

packages/client/src/components/panels/AddUsersPanel/index.tsx

@@ -203,6 +203,35 @@ const AddUsersPanel = ({
   const [isInit, setIsInit] = useState(true);
   const [isLoading, setIsLoading] = useLoadingWithTimeout<boolean>(0, true);
   const [activeTabId, setActiveTabId] = useState<string>(PEOPLE_TAB_ID);
+  const [selectedItems, setSelectedItems] = useState<TSelectorItem[]>([]);
+
+  const [itemsList, setItemsList] = useState<TSelectorItem[]>([]);
+  const [searchValue, setSearchValue] = useState("");
+  const [hasNextPage, setHasNextPage] = useState(true);
+  const [isNextPageLoading, setIsNextPageLoading] = useState(false);
+  const [total, setTotal] = useState(0);
+  const totalRef = useRef(0);
+
+  const onSelect = (
+    item: TSelectorItem,
+    isDoubleClick: boolean,
+    doubleClickCallback: () => void,
+  ) => {
+    setSelectedItems((items) => {
+      const includeFile = items.find((el) => el.id === item.id);
+
+      if (includeFile)
+        return isMultiSelect
+          ? items.filter((el) => el.id !== includeFile.id)
+          : [];
+
+      return isMultiSelect ? [...items, item] : [item];
+    });
+    if (isDoubleClick && !isMultiSelect) {
+      doubleClickCallback();
+    }
+  };
+
   const accessRight =
     defaultAccess ||
     (isEncrypted ? ShareAccessRights.FullAccess : ShareAccessRights.ReadOnly);
@@ -271,13 +300,6 @@ const AddUsersPanel = ({
     (access) => access.access === accessRight,
   )[0];
 
-  const [itemsList, setItemsList] = useState<TSelectorItem[]>([]);
-  const [searchValue, setSearchValue] = useState("");
-  const [hasNextPage, setHasNextPage] = useState(true);
-  const [isNextPageLoading, setIsNextPageLoading] = useState(false);
-  const [total, setTotal] = useState(0);
-  const totalRef = useRef(0);
-
   const changeActiveTab = useCallback((tab: number | string) => {
     setActiveTabId(`${tab}`);
     isFirstLoad.current = true;
@@ -498,6 +520,7 @@ const AddUsersPanel = ({
             withoutBackButton: false,
             onBackClick,
           }}
+          onSelect={onSelect}
           renderCustomItem={renderCustomItem}
           withSearch
           searchPlaceholder={t("Common:Search")}
@@ -508,7 +531,7 @@ const AddUsersPanel = ({
           isMultiSelect={isMultiSelect}
           submitButtonLabel={t("Common:AddButton")}
           onSubmit={onUsersSelect}
-          disableSubmitButton={false}
+          disableSubmitButton={selectedItems.length === 0}
           {...withAccessRightsProps}
           {...withCancelButtonProps}
           emptyScreenImage={emptyScreenImage}

packages/shared/components/selector/Selector.tsx

@@ -602,11 +602,7 @@ const Selector = ({
           selectedItemsCount={newSelectedItems.length}
           onSubmit={onSubmitAction}
           submitButtonLabel={submitButtonLabel}
-          disableSubmitButton={
-            alwaysShowFooter
-              ? newSelectedItems.length === 0 || disableSubmitButton
-              : disableSubmitButton
-          }
+          disableSubmitButton={disableSubmitButton}
           submitButtonId={submitButtonId}
           requestRunning={requestRunning}
           // cancel button

packages/shared/selectors/Groups/index.tsx

@@ -54,6 +54,8 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
   const [hasNextPage, setHasNextPage] = useState(false);
   const [isNextPageLoading, setIsNextPageLoading] = useState(false);
   const [itemsList, setItemsList] = useState<TSelectorItem[]>([]);
+  const [selectedItem, setSelectedItem] = useState<TSelectorItem | null>(null);
+
   const isFirstLoad = useRef(true);
   const afterSearch = useRef(false);
   const totalRef = useRef(0);
@@ -67,6 +69,12 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
     isDoubleClick: boolean,
     doubleClickCallback: () => void,
   ) => {
+    setSelectedItem((el) => {
+      if (el?.id === item.id) return null;
+
+      return item;
+    });
+
     if (isDoubleClick) {
       doubleClickCallback();
     }
@@ -145,13 +153,14 @@ const GroupsSelector = (props: GroupsSelectorProps) => {
         ...headerProps,
         headerLabel: headerProps?.headerLabel || t("Common:Groups"),
       }}
+      alwaysShowFooter
       withSearch
       searchPlaceholder={t("Common:Search")}
       onSearch={onSearch}
       searchValue={searchValue}
       onClearSearch={onClearSearch}
       isSearchLoading={false}
-      disableSubmitButton={false}
+      disableSubmitButton={!selectedItem}
       isMultiSelect={false}
       items={itemsList}
       submitButtonLabel={t("Common:SelectAction")}

packages/shared/selectors/People/index.tsx

@@ -161,7 +161,11 @@ const PeopleSelector = ({
     isDoubleClick: boolean,
     doubleClickCallback: () => void,
   ) => {
-    setSelectedItem(item);
+    setSelectedItem((el) => {
+      if (el?.id === item.id) return null;
+
+      return item;
+    });
     if (isDoubleClick) {
       doubleClickCallback();
     }

packages/shared/selectors/Room/index.tsx

@@ -91,7 +91,11 @@ const RoomSelector = ({
     isDoubleClick: boolean,
     doubleClickCallback: () => void,
   ) => {
-    setSelectedItem(item);
+    setSelectedItem((el) => {
+      if (el?.id === item.id) return null;
+
+      return item;
+    });
     if (isDoubleClick && !isMultiSelect) {
       doubleClickCallback();
     }