perf: add filter item scroll to the bottom (#1988)

* perf: add filter item scroll to the bottom

* fix: hidden field text too long

chore: delete useless hook

* perf: longtext display all the text

* fix: mix the view rename and drag

* perf: mobile toolbutton display gap

* perf: view list display

* fix: import date string error

Author: caoxing9

apps/nestjs-backend/src/features/import/open-api/import-open-api.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, Logger, BadRequestException, ForbiddenException } from '@nestjs/common';
 import type { IFieldRo } from '@teable/core';
-import { FieldType, getRandomString } from '@teable/core';
+import { FieldType, getRandomString, TimeFormatting } from '@teable/core';
 import { PrismaService } from '@teable/db-main-prisma';
 import type {
   IAnalyzeRo,
@@ -80,7 +80,7 @@ export class ImportOpenApiService {
             formatting: {
               timeZone: tz,
               date: 'YYYY-MM-DD',
-              time: 'None',
+              time: TimeFormatting.None,
             },
           };
         }

apps/nextjs-app/src/features/app/blocks/view/list/ExpandViewList.tsx

@@ -33,15 +33,15 @@ export const ExpandViewList = () => {
           <ChevronDown className="size-4" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent side="bottom" align="start" className="p-1">
+      <PopoverContent side="bottom" align="start" className="w-auto max-w-[456px] p-1">
         <Command>
           <CommandInput
             className="h-9"
             placeholder={t('table:view.searchView')}
             onValueChange={(value) => setIsDraggable(!value)}
           />
           <CommandEmpty>{t('common:noResult')}</CommandEmpty>
-          <CommandList className="p-0.5">
+          <CommandList className="max-h-[70vh] p-0.5">
             <DraggableWrapper strategy={verticalListSortingStrategy}>
               {({
                 view: { id, name, type },
@@ -79,7 +79,9 @@ export const ExpandViewList = () => {
                     }}
                   >
                     <Icon className="size-4 shrink-0" />
-                    <span className="ml-2 truncate text-sm">{name}</span>
+                    <span className="ml-2 truncate text-sm" title={name}>
+                      {name}
+                    </span>
                     <span className="grow" />
                     {isDraggable && permission['view|update'] && (
                       <div {...attributes} {...listeners} className="pr-1">

apps/nextjs-app/src/features/app/blocks/view/list/ViewList.tsx

@@ -1,6 +1,7 @@
 import { useTablePermission, useViewId, useViews, useIsHydrated } from '@teable/sdk';
 import { horizontalListSortingStrategy } from '@teable/ui-lib/base/dnd-kit';
 import { cn } from '@teable/ui-lib/shadcn';
+import { useState } from 'react';
 import { DraggableWrapper } from './DraggableWrapper';
 import { ViewListItem } from './ViewListItem';
 
@@ -9,6 +10,7 @@ export const ViewList = () => {
   const activeViewId = useViewId();
   const isHydrated = useIsHydrated();
   const permission = useTablePermission();
+  const [editing, setEditing] = useState(false);
 
   return isHydrated ? (
     views.length ? (
@@ -17,13 +19,14 @@ export const ViewList = () => {
           <div
             ref={setNodeRef}
             {...attributes}
-            {...listeners}
+            {...(editing ? {} : listeners)}
             style={style}
             className={cn('relative', {
               'opacity-50': isDragging,
             })}
           >
             <ViewListItem
+              onEdit={(value) => setEditing(value)}
               view={view}
               removable={!!permission['view|delete'] && views.length > 1}
               isActive={view.id === activeViewId}
@@ -39,6 +42,7 @@ export const ViewList = () => {
       {views.map((view) => (
         <ViewListItem
           key={view.id}
+          onEdit={(value) => setEditing(value)}
           view={view}
           removable={!!permission['view|delete'] && views.length > 1}
           isActive={view.id === activeViewId}

apps/nextjs-app/src/features/app/blocks/view/list/ViewListItem.tsx

@@ -29,9 +29,10 @@ interface IProps {
   view: IViewInstance;
   removable: boolean;
   isActive: boolean;
+  onEdit: (value: boolean) => void;
 }
 
-export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) => {
+export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive, onEdit }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [open, setOpen] = useState(false);
   const tableId = useTableId();
@@ -50,12 +51,13 @@ export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) =>
   const { resetSearchHandler } = useGridSearchStore();
 
   useEffect(() => {
-    isActive &&
+    if (isActive) {
       setTimeout(() => {
         viewItemRef.current?.scrollIntoView({
           behavior: 'smooth',
         });
       }, 0);
+    }
   }, [isActive]);
 
   const navigateHandler = () => {
@@ -108,13 +110,15 @@ export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) =>
               view.updateName(e.target.value);
             }
             setIsEditing(false);
+            onEdit(false);
           }}
           onKeyDown={(e) => {
             if (e.key === 'Enter') {
               if (e.currentTarget.value && e.currentTarget.value !== view.name) {
                 view.updateName(e.currentTarget.value);
               }
               setIsEditing(false);
+              onEdit(false);
             }
             e.stopPropagation();
           }}
@@ -135,7 +139,10 @@ export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) =>
         }
       )}
       onDoubleClick={() => {
-        permission['view|update'] && setIsEditing(true);
+        if (permission['view|update']) {
+          setIsEditing(true);
+          onEdit(true);
+        }
       }}
       onKeyDown={(e) => {
         if (isEditing) {
@@ -177,6 +184,7 @@ export const ViewListItem: React.FC<IProps> = ({ view, removable, isActive }) =>
                   variant="ghost"
                   onClick={() => {
                     setIsEditing(true);
+                    onEdit(true);
                   }}
                   className="flex justify-start"
                 >

apps/nextjs-app/src/features/app/blocks/view/tool-bar/components/GridViewOperators.tsx

@@ -36,7 +36,7 @@ export const GridViewOperators: React.FC<{ disabled?: boolean }> = (props) => {
     return <div></div>;
   }
   return (
-    <div className="flex @sm/toolbar:gap-1">
+    <div className="flex gap-1">
       <HideFields>
         {(text, isActive) => (
           <ToolBarButton

apps/nextjs-app/src/features/app/hooks/useHiddenFields.ts

@@ -99,6 +99,38 @@ describe('DateFieldCore', () => {
     expect(usField.convertStringToCellValue('5/1/2024 06:50')).toBe('2024-05-01T06:50:00.000Z');
   });
 
+  it('should parse single-digit month/day with seconds', () => {
+    const fieldWithAsian = plainToInstance(DateFieldCore, {
+      ...json,
+      options: {
+        formatting: {
+          date: DateFormattingPreset.Asian,
+          time: TimeFormatting.Hour24,
+          timeZone: 'Asia/Shanghai',
+        },
+      },
+    });
+    expect(fieldWithAsian.convertStringToCellValue('2025/7/31 14:15:32')).toBe(
+      '2025-07-31T06:15:32.000Z'
+    );
+  });
+
+  it('should parse single-digit month/day with seconds', () => {
+    const fieldWithAsian = plainToInstance(DateFieldCore, {
+      ...json,
+      options: {
+        formatting: {
+          date: DateFormattingPreset.Asian,
+          time: TimeFormatting.None,
+          timeZone: 'Asia/Shanghai',
+        },
+      },
+    });
+    expect(fieldWithAsian.convertStringToCellValue('2025/7/31 14:15:32')).toBe(
+      '2025-07-31T06:15:32.000Z'
+    );
+  });
+
   it('should repair invalid value', () => {
     expect(field.repair(1687158022191)).toBe('2023-06-19T07:00:22.191Z');
     expect(field.repair('xxx')).toBe(null);

packages/core/src/models/field/derivate/date.field.spec.ts

@@ -58,10 +58,39 @@ export class DateFieldCore extends FieldCore {
   }
   private defaultTzFormat(value: string) {
     try {
-      const formatValue = dayjs.tz(value, this.options.formatting.timeZone);
+      const formatValue = dayjs.utc(value);
       if (!formatValue.isValid()) return null;
       return formatValue.toISOString();
-    } catch (e) {
+    } catch {
+      return null;
+    }
+  }
+
+  private parseUsingFieldFormatting(value: string): string | null {
+    const hasTime = /\d{1,2}:\d{2}(?::\d{2})?/.test(value);
+    const hasSeconds = /\d{1,2}:\d{2}:\d{2}/.test(value);
+    const hasAmPm = /am|pm/i.test(value);
+
+    const dateFormat = this.options.formatting.date.replace('MM', 'M').replace('DD', 'D');
+
+    let timeFormat: string | null = null;
+    if (hasTime) {
+      if (this.options.formatting.time === TimeFormatting.Hour12 || hasAmPm) {
+        timeFormat = hasSeconds ? 'hh:mm:ss A' : 'hh:mm A';
+      } else {
+        timeFormat = hasSeconds ? 'HH:mm:ss' : 'HH:mm';
+      }
+    }
+
+    const format = timeFormat ? `${dateFormat} ${timeFormat}` : dateFormat;
+
+    try {
+      const formatValue = dayjs.tz(value, format, this.options.formatting.timeZone);
+      if (!formatValue.isValid()) return null;
+      const isoString = formatValue.toISOString();
+      if (isoString.startsWith('-')) return null;
+      return isoString;
+    } catch {
       return null;
     }
   }
@@ -77,22 +106,24 @@ export class DateFieldCore extends FieldCore {
       return dayjs().toISOString();
     }
 
-    const hasTime = /\d{1,2}:\d{2}(?::\d{2})?/.test(value);
-
-    const format = `${this.options.formatting.date}${hasTime && this.options.formatting.time !== TimeFormatting.None ? ' ' + this.options.formatting.time : ''}`;
-
-    try {
-      const formatValue = dayjs.tz(value, format, this.options.formatting.timeZone);
-      if (!formatValue.isValid()) return null;
-      const formatValueISOString = formatValue.toISOString();
-      // ISOString start with '-' means the date is invalid
-      if (formatValueISOString.startsWith('-')) {
-        return null;
+    if (/^\d+$/.test(String(value))) {
+      const num = Number(value);
+      const ms = String(value).length >= 13 ? num : num * 1000;
+      try {
+        const d = dayjs(ms).tz(this.options.formatting.timeZone);
+        if (d.isValid()) {
+          const iso = d.toISOString();
+          if (!iso.startsWith('-')) return iso;
+        }
+      } catch {
+        // ignore
       }
-      return formatValue.toISOString();
-    } catch (e) {
-      return this.defaultTzFormat(value);
     }
+
+    const formatted = this.parseUsingFieldFormatting(value);
+    if (formatted) return formatted;
+
+    return this.defaultTzFormat(value);
   }
 
   item2String(item?: unknown) {

packages/core/src/models/field/derivate/date.field.ts

@@ -12,6 +12,7 @@ import type {
   IButtonFieldOptions,
 } from '@teable/core';
 import { CellValueType, FieldType } from '@teable/core';
+import { cn } from '@teable/ui-lib';
 import type { IFieldInstance } from '../../model';
 import { CellAttachment } from './cell-attachment';
 import { CellButton } from './cell-button';
@@ -38,7 +39,13 @@ export const CellValue = (props: ICellValueContainer) => {
 
   switch (type) {
     case FieldType.LongText: {
-      return <CellText value={value as string} className={className} ellipsis={ellipsis} />;
+      return (
+        <CellText
+          value={value as string}
+          className={cn(className, 'line-clamp-none')}
+          ellipsis={ellipsis}
+        />
+      );
     }
     case FieldType.SingleLineText: {
       return (

packages/sdk/src/components/cell-value/CellValue.tsx

@@ -53,7 +53,7 @@ export const OverflowTooltip = (props: IOverflowTooltipProps) => {
   const Content = (
     <div
       ref={contentRef}
-      className={cn(className, 'overflow-hidden whitespace-pre-wrap break-all line-clamp-6')}
+      className={cn('overflow-hidden whitespace-pre-wrap break-all line-clamp-6', className)}
       onClick={(e) => {
         if (onClick) {
           e.stopPropagation();