fix: excel preview (#1046)

* chore: try fix load error excel preview * feat: add search field local cache * perf: simplify search logic
teableio · Oct 31, 2024 · f088aed · f088aed
1 parent 977d01b
commit f088aed
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 43 deletions.
diff --git a/apps/nextjs-app/src/features/app/blocks/view/search/SearchButton.tsx b/apps/nextjs-app/src/features/app/blocks/view/search/SearchButton.tsx
@@ -1,6 +1,6 @@
 import { Search, X } from '@teable/icons';
 import { LocalStorageKeys, useView } from '@teable/sdk';
-import { useFields, useSearch } from '@teable/sdk/hooks';
+import { useFields, useSearch, useTableId } from '@teable/sdk/hooks';
 import { cn, Popover, PopoverContent, PopoverTrigger, Button } from '@teable/ui-lib/shadcn';
 import { isEqual } from 'lodash';
 import { useTranslation } from 'next-i18next';
@@ -19,6 +19,7 @@ export function SearchButton({
 }) {
   const [active, setActive] = useState(false);
   const fields = useFields();
+  const tableId = useTableId();
   const { fieldId, value, setFieldId, setValue } = useSearch();
   const [inputValue, setInputValue] = useState(value);
   const [isFocused, setIsFocused] = useState(false);
@@ -28,10 +29,14 @@ export function SearchButton({
     LocalStorageKeys.EnableGlobalSearch,
     false
   );
+  const [searchFieldMapCache, setSearchFieldMap] = useLocalStorage<Record<string, string[]>>(
+    LocalStorageKeys.TableSearchFieldsCache,
+    {}
+  );
   const view = useView();
 
   useEffect(() => {
-    if (!fieldId) {
+    if (!fieldId || fieldId === 'all_fields') {
       return;
     }
     const selectedField = fieldId.split(',');
@@ -40,12 +45,28 @@ export function SearchButton({
     Object.entries(columnMeta).forEach(([key, value]) => {
       value?.hidden && hiddenFields.push(key);
     });
-    const filteredFields = selectedField.filter((f) => !hiddenFields.includes(f));
+    const filteredFields = selectedField.filter(
+      (f) => !hiddenFields.includes(f) && fields.map((f) => f.id).includes(f)
+    );
     const primaryFieldId = fields.find((f) => f.isPrimary)?.id;
     if (!isEqual(filteredFields, selectedField)) {
+      tableId &&
+        setSearchFieldMap({
+          ...searchFieldMapCache,
+          [tableId]: filteredFields,
+        });
       setFieldId(filteredFields.length > 0 ? filteredFields.join(',') : primaryFieldId);
     }
-  }, [fieldId, fields, setFieldId, value, view?.columnMeta]);
+  }, [
+    fieldId,
+    fields,
+    searchFieldMapCache,
+    setFieldId,
+    setSearchFieldMap,
+    tableId,
+    value,
+    view?.columnMeta,
+  ]);
 
   useHotkeys(
     `mod+f`,
@@ -94,11 +115,26 @@ export function SearchButton({
         setFieldId('all_fields');
         return;
       }
+      // init fieldId
       if (fieldId === undefined) {
+        if (tableId && searchFieldMapCache?.[tableId]?.length) {
+          setFieldId(searchFieldMapCache[tableId].join(','));
+          return;
+        }
         setFieldId(fields[0].id);
       }
     }
-  }, [active, enableGlobalSearch, fieldId, fields, ref, setFieldId]);
+  }, [
+    active,
+    enableGlobalSearch,
+    fieldId,
+    fields,
+    ref,
+    searchFieldMapCache,
+    setFieldId,
+    setSearchFieldMap,
+    tableId,
+  ]);
 
   const searchHeader = useMemo(() => {
     if (fieldId === 'all_fields') {
@@ -130,18 +166,28 @@ export function SearchButton({
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-64 p-1">
-          <SearchCommand
-            value={fieldId}
-            onChange={(fieldIds) => {
-              const ids = fieldIds.join(',');
-              if (ids === 'all_fields') {
-                setEnableGlobalSearch(true);
-              } else {
-                setEnableGlobalSearch(false);
-              }
-              setFieldId(ids);
-            }}
-          />
+          {fieldId && tableId && (
+            <SearchCommand
+              value={fieldId}
+              onChange={(fieldIds) => {
+                // switch to field
+                if (!fieldIds) {
+                  const newIds = searchFieldMapCache?.[tableId] || [fields[0].id];
+                  setFieldId(newIds.join(','));
+                  setEnableGlobalSearch(false);
+                  return;
+                }
+                const ids = fieldIds.join(',');
+                if (ids === 'all_fields') {
+                  setEnableGlobalSearch(true);
+                } else {
+                  setEnableGlobalSearch(false);
+                  tableId && setSearchFieldMap({ ...searchFieldMapCache, [tableId]: fieldIds });
+                }
+                setFieldId(ids);
+              }}
+            />
+          )}
         </PopoverContent>
       </Popover>
       <input

diff --git a/apps/nextjs-app/src/features/app/blocks/view/search/SearchCommand.tsx b/apps/nextjs-app/src/features/app/blocks/view/search/SearchCommand.tsx
@@ -14,32 +14,21 @@ import {
   Button,
 } from '@teable/ui-lib';
 import { useTranslation } from 'next-i18next';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 interface ISearchCommand {
-  value?: string;
-  onChange: (fieldIds: string[]) => void;
+  value: string;
+  onChange: (fieldIds: string[] | null) => void;
 }
 export const SearchCommand = (props: ISearchCommand) => {
   const { onChange, value } = props;
   const { t } = useTranslation('common');
   const fields = useFields();
   const fieldStaticGetter = useFieldStaticGetter();
 
-  const [selectedFields, setSelectedFields] = useState<string[]>([]);
-
-  useEffect(() => {
-    if ((value === 'all_fields' || value === undefined) && fields?.[0]?.id) {
-      setSelectedFields([fields?.[0]?.id]);
-    } else {
-      const fieldArr = value?.split(',') || [];
-      setSelectedFields(fieldArr);
-    }
-  }, [fields, value]);
-
-  const defaultFieldId = useMemo(() => {
-    return fields?.[0]?.id ?? null;
-  }, [fields]);
+  const selectedFields = useMemo(() => {
+    return value.split(',');
+  }, [value]);
 
   const switchChange = (id: string, checked: boolean) => {
     let newSelectedFields = [...selectedFields];
@@ -48,9 +37,6 @@ export const SearchCommand = (props: ISearchCommand) => {
     } else {
       newSelectedFields = newSelectedFields.filter((f) => f !== id);
     }
-
-    setSelectedFields(newSelectedFields);
-
     onChange(newSelectedFields);
   };
 
@@ -125,8 +111,7 @@ export const SearchCommand = (props: ISearchCommand) => {
         variant={'outline'}
         size="xs"
         onClick={() => {
-          defaultFieldId && setSelectedFields([defaultFieldId]);
-          onChange(value === 'all_fields' ? [fields[0].id] : ['all_fields']);
+          onChange(value === 'all_fields' ? null : ['all_fields']);
         }}
       >
         {value === 'all_fields' ? t('actions.fieldSearch') : t('actions.globalSearch')}

diff --git a/packages/sdk/src/config/local-storage-keys.ts b/packages/sdk/src/config/local-storage-keys.ts
@@ -12,4 +12,5 @@ export enum LocalStorageKeys {
   ImportAlert = 'ls_import_alert',
   ExpandRecordHiddenFieldsVisible = 'ls_expand_record_hidden_fields_visible',
   EnableGlobalSearch = 'ls_enable_globalSearch',
+  TableSearchFieldsCache = 'ls_table_search_fields_cache',
 }
diff --git a/packages/ui-lib/src/base/file/preview/office/ExcelPreview.tsx b/packages/ui-lib/src/base/file/preview/office/ExcelPreview.tsx
@@ -32,9 +32,7 @@ export const ExcelPreview = (props: IExcelPreviewProps) => {
   const { i18nMap } = useContext(FilePreviewContext);
 
   const currentSheetData = useMemo<ISheetData>(() => {
-    const result = sheetList.find((sheet) => sheet.name === currentSheetName)?.data as ISheetData;
-    Boolean(result) && console.info(`get sheetData success`);
-    return result;
+    return sheetList.find((sheet) => sheet.name === currentSheetName)?.data as ISheetData;
   }, [sheetList, currentSheetName]);
 
   const cols = useMemo(() => {
@@ -156,7 +154,7 @@ export const ExcelPreview = (props: IExcelPreviewProps) => {
             paddingBottom: 10,
           }}
           verticalBorder={true}
-          getCellContent={getData}
+          getCellContent={(cell) => getData(cell)}
           columns={cols}
           rows={currentSheetData.length}
         />