Use items instead of children in Tabs and Collapse antd

Signed-off-by: Dinika Saxena <dinikasaxenas@gmail.com>
BlueBrain · Oct 4, 2023 · 7824526 · 7824526
1 parent b8a0061
commit 7824526
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 89 deletions.
diff --git a/src/shared/components/SearchBar/index.tsx b/src/shared/components/SearchBar/index.tsx
@@ -37,102 +37,102 @@ const SearchBar: React.FC<{
   onBlur,
   inputOnPressEnter,
 }) => {
-  const [value, setValue] = React.useState(query || '');
-  const [focused, setFocused] = React.useState(false);
-  const inputRef = React.useRef(null);
-  const projectOptionValueSuffix = '______project';
-  const studioOptionValueSuffix = '______studio';
+    const [value, setValue] = React.useState(query || '');
+    const [focused, setFocused] = React.useState(false);
+    const inputRef = React.useRef(null);
+    const projectOptionValueSuffix = '______project';
+    const studioOptionValueSuffix = '______studio';
 
-  React.useEffect(() => {
-    focusOnSlash(focused, inputRef);
-  }, []);
+    React.useEffect(() => {
+      focusOnSlash(focused, inputRef);
+    }, []);
 
-  // Reset default value if query changes
-  React.useEffect(() => {
-    setValue(query || '');
-  }, [query]);
+    // Reset default value if query changes
+    React.useEffect(() => {
+      setValue(query || '');
+    }, [query]);
 
-  const handleSetFocused = (value: boolean) => () => {
-    setFocused(value);
-    if (value) {
-      onFocus();
-    } else {
-      onBlur();
-    }
-  };
+    const handleSetFocused = (value: boolean) => () => {
+      setFocused(value);
+      if (value) {
+        onFocus();
+      } else {
+        onBlur();
+      }
+    };
 
-  const handleSelect = (currentValue: string, option: any) => {
-    onSubmit(currentValue, option);
-    // @ts-ignore
-    inputRef.current?.blur();
-  };
+    const handleSelect = (currentValue: string, option: any) => {
+      onSubmit(currentValue, option);
+      // @ts-ignore
+      inputRef.current?.blur();
+    };
 
-  const handleSearch = (searchText: string) => {
-    onSearch(searchText);
-  };
+    const handleSearch = (searchText: string) => {
+      onSearch(searchText);
+    };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.key !== 'Enter') {
-      return;
-    }
-  };
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key !== 'Enter') {
+        return;
+      }
+    };
 
-  const optionsList = React.useMemo(() => {
-    let options: {
-      value: string;
-      key: string;
-      path: string;
-      type: 'search' | 'project' | 'studio';
-      label: JSX.Element;
-    }[] = [];
-    if (
-      (!query || query === '') &&
-      lastVisited &&
-      lastVisited.type === 'search'
-    ) {
-      options.push({
-        value: lastVisited.value,
-        key: 'search',
-        path: lastVisited.path,
-        type: 'search',
-        label: globalSearchOption(lastVisited.value),
-      });
-    } else {
-      options.push({
-        value,
-        key: 'search',
-        path: `/search/?query=${value}`,
-        type: 'search',
-        label: globalSearchOption(value),
-      });
-    }
+    const optionsList = React.useMemo(() => {
+      let options: {
+        value: string;
+        key: string;
+        path: string;
+        type: 'search' | 'project' | 'studio';
+        label: JSX.Element;
+      }[] = [];
+      if (
+        (!query || query === '') &&
+        lastVisited &&
+        lastVisited.type === 'search'
+      ) {
+        options.push({
+          value: lastVisited.value,
+          key: 'search',
+          path: lastVisited.path,
+          type: 'search',
+          label: globalSearchOption(lastVisited.value),
+        });
+      } else {
+        options.push({
+          value,
+          key: 'search',
+          path: `/search/?query=${value}`,
+          type: 'search',
+          label: globalSearchOption(value),
+        });
+      }
 
-    if (projectList.length) {
-      const projectOptions = projectList.map((projectHit, ix) => {
-        return {
-          key: `project-${projectHit.label}${ix}`,
-          path: makeProjectUri(projectHit.organisation, projectHit.project),
-          type: 'project' as 'project',
-          label: (
-            <Hit
-              key={projectHit.label}
-              orgLabel={projectHit.organisation}
-              projectLabel={projectHit.project}
-              type="project"
-            >
-              <span>
-                {projectHit.label.length > LABEL_MAX_LENGTH
-                  ? `${projectHit.label.slice(0, LABEL_MAX_LENGTH)}...`
-                  : projectHit.label}
-              </span>
-            </Hit>
-          ),
-          // add suffix to value to differentiate from search term
-          value: `${projectHit.organisation}/${projectHit.project}${projectOptionValueSuffix}`,
-        };
-      });
-      options = [...options, ...projectOptions];
-    }
+      if (projectList.length) {
+        const projectOptions = projectList.map((projectHit, ix) => {
+          return {
+            key: `project-${projectHit.label}${ix}`,
+            path: makeProjectUri(projectHit.organisation, projectHit.project),
+            type: 'project' as 'project',
+            label: (
+              <Hit
+                key={projectHit.label}
+                orgLabel={projectHit.organisation}
+                projectLabel={projectHit.project}
+                type="project"
+              >
+                <span>
+                  {projectHit.label.length > LABEL_MAX_LENGTH
+                    ? `${projectHit.label.slice(0, LABEL_MAX_LENGTH)}...`
+                    : projectHit.label}
+                </span>
+              </Hit>
+            ),
+            // add suffix to value to differentiate from search term
+            value: `${projectHit.organisation}/${projectHit.project}${projectOptionValueSuffix}`,
+          };
+        });
+        options = [...options, ...projectOptions];
+      }
 
     if (studioList.length) {
       const studioOptions = studioList.map((studioHit, ix) => {

diff --git a/src/shared/molecules/MyDataTable/MyDataTable.tsx b/src/shared/molecules/MyDataTable/MyDataTable.tsx
@@ -583,7 +583,7 @@ const MyDataTable: React.FC<TProps> = ({
         clsx(
           `my-data-table-row`,
           record._self === currentResourceView?._self &&
-          'ant-table-row-selected'
+            'ant-table-row-selected'
         )
       }
       scroll={{ x: 1300 }}