+
+
+
+
+ {virtualizer.getVirtualItems().map((virtualRow) => (
+
+
+ {Array.from({ length: columnsPerRow }).map((_, i) => {
+ const card = cards[virtualRow.index * columnsPerRow + i];
+ return card ? (
+
+
+ ) : (
+
+ );
+ })}
+
+ ))}
+
+ {coverFieldId && (
+
+ {coverCellValue?.length ? (
+
+
+ {coverCellValue.map(({ id, mimetype, presignedUrl, lgThumbnailUrl }) => {
+ const url = lgThumbnailUrl ?? getFileCover(mimetype, presignedUrl);
+ return (
+
+ 
+
+ );
+ })}
+
+ e.stopPropagation()} />
+ e.stopPropagation()} />
+
+ ) : (
+
+ )}
+
+
+
+ )}
+
+
+
+ {titleComponent}
+
+ {displayFields.map((field) => {
+ const { id: fieldId, name, type, isLookup } = field;
+ const { Icon } = getFieldStatic(type, isLookup);
+ const cellValue = card.getCellValue(fieldId);
+
+ if (cellValue == null) return null;
+
+ return (
+
+ {!isFieldNameHidden && (
+
+ );
+ })}
+
+
+ )}
+
+ {children}
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/app/blocks/view/gallery/context/GalleryContext.ts b/apps/nextjs-app/src/features/app/blocks/view/gallery/context/GalleryContext.ts
new file mode 100644
index 000000000..0a907221b
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/blocks/view/gallery/context/GalleryContext.ts
@@ -0,0 +1,18 @@
+import type { IGetRecordsRo } from '@teable/openapi';
+import type { AttachmentField, IFieldInstance } from '@teable/sdk/model';
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext } from 'react';
+import type { IGalleryPermission } from '../type';
+
+export interface IGalleryContext {
+ recordQuery?: Pick
+
+ );
+};
diff --git a/apps/nextjs-app/src/features/app/blocks/view/tool-bar/components/GalleryViewOperators.tsx b/apps/nextjs-app/src/features/app/blocks/view/tool-bar/components/GalleryViewOperators.tsx
new file mode 100644
index 000000000..810008e5e
--- /dev/null
+++ b/apps/nextjs-app/src/features/app/blocks/view/tool-bar/components/GalleryViewOperators.tsx
@@ -0,0 +1,143 @@
+import { ArrowUpDown, Filter as FilterIcon, Share2, Settings, Plus } from '@teable/icons';
+import type { GalleryView } from '@teable/sdk';
+import {
+ Sort,
+ ViewFilter,
+ VisibleFields,
+ useTablePermission,
+ CreateRecordModal,
+} from '@teable/sdk';
+import { useView } from '@teable/sdk/hooks/use-view';
+import { Button, Label, Switch, cn } from '@teable/ui-lib/shadcn';
+import { useTranslation } from 'next-i18next';
+import { GUIDE_VIEW_FILTERING, GUIDE_VIEW_SORTING } from '@/components/Guide';
+import { tableConfig } from '@/features/i18n/table.config';
+import { useToolbarChange } from '../../hooks/useToolbarChange';
+import { ToolBarButton } from '../ToolBarButton';
+import { CoverFieldSelect } from './CoverFieldSelect';
+import { UndoRedoButtons } from './UndoRedoButtons';
+
+export const GalleryViewOperators: React.FC<{ disabled?: boolean }> = (props) => {
+ const { disabled } = props;
+ const view = useView() as GalleryView | undefined;
+ const permission = useTablePermission();
+ const { t } = useTranslation(tableConfig.i18nNamespaces);
+ const { onFilterChange, onSortChange } = useToolbarChange();
+
+ const { coverFieldId, isCoverFit, isFieldNameHidden } = view?.options ?? {};
+
+ const onCoverFieldChange = (fieldId: string | null) => {
+ view?.updateOption({ coverFieldId: fieldId });
+ };
+
+ const onCoverFitChange = (checked: boolean) => {
+ view?.updateOption({ isCoverFit: checked });
+ };
+
+ const onFieldNameHiddenChange = (checked: boolean) => {
+ view?.updateOption({ isFieldNameHidden: checked });
+ };
+
+ if (!view) return null;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+ )
+ }
+ >
+ {(text, isActive) => (
+
+
+
+
+
+ }
+ >
+ {(_text, _isActive) => (
+ This variety equips users with a comprehensive toolkit for various data management tasks.", + "createViewTooltipContent": "Currently, users can create Grid, Gallery, Kanban and Form views, with Calendar views planned for future releases.
This variety equips users with a comprehensive toolkit for various data management tasks.", "viewFilteringTooltipTitle": "Filtering records", "viewFilteringTooltipContent": "One of the core features of views is the ability to filter out records from a view according to the conditions you set.
When a record is filtered out based on a condition, it is not deleted—it's just hidden from the particular view you're using to look at your table.", "viewSortingTooltipTitle": "Sorting records", diff --git a/packages/common-i18n/src/locales/en/table.json b/packages/common-i18n/src/locales/en/table.json index ba74e1055..7af2e45ea 100644 --- a/packages/common-i18n/src/locales/en/table.json +++ b/packages/common-i18n/src/locales/en/table.json @@ -450,7 +450,8 @@ "category": { "table": "Grid View", "form": "Form View", - "kanban": "Kanban View" + "kanban": "Kanban View", + "gallery": "Gallery View" }, "crash": { "title": "Crash!", diff --git a/packages/common-i18n/src/locales/fr/common.json b/packages/common-i18n/src/locales/fr/common.json index f3aee5228..4dee21a8a 100644 --- a/packages/common-i18n/src/locales/fr/common.json +++ b/packages/common-i18n/src/locales/fr/common.json @@ -154,7 +154,7 @@ "createTableTooltipTitle": "Créer une table", "createTableTooltipContent": "Les tables sont conçues pour gérer efficacement des ensembles de données divers, offrant un affichage polyvalent des informations à travers différents types de données.", "createViewTooltipTitle": "Créer une vue", - "createViewTooltipContent": "Actuellement, les utilisateurs peuvent créer des vues en Grille et en Formulaire, avec des vues Galerie, Kanban et Calendrier prévues pour les futures versions.
Cette variété fournit aux utilisateurs un ensemble complet d'outils pour diverses tâches de gestion des données.", + "createViewTooltipContent": "Actuellement, les utilisateurs peuvent créer des vues en Grille, Galerie, Kanban et Formulaire, avec des vues Calendrier prévues pour les futures versions.
Cette variété fournit aux utilisateurs un ensemble complet d'outils pour diverses tâches de gestion des données.", "viewFilteringTooltipTitle": "Filtrage des enregistrements", "viewFilteringTooltipContent": "L'une des fonctionnalités principales des vues est la capacité à filtrer les enregistrements d'une vue selon les conditions que vous définissez.
Lorsqu'un enregistrement est filtré en fonction d'une condition, il n'est pas supprimé—il est juste masqué de la vue particulière que vous utilisez pour consulter votre table.", "viewSortingTooltipTitle": "Triage des enregistrements", diff --git a/packages/common-i18n/src/locales/fr/table.json b/packages/common-i18n/src/locales/fr/table.json index 50b2968f2..a979f5f81 100644 --- a/packages/common-i18n/src/locales/fr/table.json +++ b/packages/common-i18n/src/locales/fr/table.json @@ -438,7 +438,8 @@ "category": { "table": "Vue en grille", "form": "Vue en formulaire", - "kanban": "Vue Kanban" + "kanban": "Vue Kanban", + "gallery": "Vue en galerie" }, "crash": { "title": "Plantage !", diff --git a/packages/common-i18n/src/locales/ja/common.json b/packages/common-i18n/src/locales/ja/common.json index 07a779dc6..fd18a5a95 100644 --- a/packages/common-i18n/src/locales/ja/common.json +++ b/packages/common-i18n/src/locales/ja/common.json @@ -152,7 +152,7 @@ "createTableTooltipTitle": "テーブルの作成", "createTableTooltipContent": "テーブルは、多様なデータセットを効率的に処理できるように設計されており、さまざまなデータ型による情報を多様に表示できます。", "createViewTooltipTitle": "ビューの作成", - "createViewTooltipContent": "現在、ユーザーはグリッドビューとフォームビューを作成できます。ギャラリー ビュー、カンバン ビュー、カレンダー ビューは将来のリリースで追加される予定です。
この多様性により、ユーザーはさまざまなデータ管理タスクに対応する包括的なツールキットを利用できるようになります。", + "createViewTooltipContent": "現在、ユーザーはグリッド、ギャラリー、カンバン、およびフォームビューを作成できます。カレンダービューは将来のリリースで追加される予定です。
この多様性により、ユーザーはさまざまなデータ管理タスクに対応する包括的なツールキットを利用できるようになります。", "viewFilteringTooltipTitle": "レコードのフィルタリング", "viewFilteringTooltipContent": "ビューのコア機能の一つは、設定した条件に従ってビューからレコードをフィルター処理できることです。
条件に基づいてレコードがフィルター処理されても、そのレコードは削除されず、テーブルを表示するために使用している特定のビューから非表示になるだけです。", "viewSortingTooltipTitle": "レコードのソート", diff --git a/packages/common-i18n/src/locales/ja/table.json b/packages/common-i18n/src/locales/ja/table.json index 5419c44ce..f194d3afd 100644 --- a/packages/common-i18n/src/locales/ja/table.json +++ b/packages/common-i18n/src/locales/ja/table.json @@ -437,7 +437,8 @@ "category": { "table": "グリッドビュー", "form": "フォームビュー", - "kanban": "カンバンビュー" + "kanban": "カンバンビュー", + "gallery": "ギャラリービュー" }, "crash": { "title": "クラッシュしました！", diff --git a/packages/common-i18n/src/locales/ru/common.json b/packages/common-i18n/src/locales/ru/common.json index 8243b9ff9..0a15d6c10 100644 --- a/packages/common-i18n/src/locales/ru/common.json +++ b/packages/common-i18n/src/locales/ru/common.json @@ -154,7 +154,7 @@ "createTableTooltipTitle": "Создать таблицу", "createTableTooltipContent": "Таблицы предназначены для эффективной обработки различных наборов данных, предлагая универсальное представление информации через различные типы данных.", "createViewTooltipTitle": "Создать представление", - "createViewTooltipContent": "В настоящее время пользователи могут создавать представления Сетка и Форма, а представления Галерея, Канбан и Календарь будут добавлены в будущих версиях.
Этот набор инструментов обеспечивает пользователям все необходимое для различных задач управления данными.", + "createViewTooltipContent": "В настоящее время пользователи могут создавать представления Сетка, Галерея, Канбан и Форма, а представления Календарь будут добавлены в будущих версиях.
Этот набор инструментов обеспечивает пользователям все необходимое для различных задач управления данными.", "viewFilteringTooltipTitle": "Фильтрация записей", "viewFilteringTooltipContent": "Одной из основных функций представлений является возможность фильтрации записей по заданным условиям.
Когда запись фильтруется, она не удаляется — она просто скрывается из данного представления.", "viewSortingTooltipTitle": "Сортировка записей", diff --git a/packages/common-i18n/src/locales/ru/table.json b/packages/common-i18n/src/locales/ru/table.json index 4bb673f79..9f4b18bdb 100644 --- a/packages/common-i18n/src/locales/ru/table.json +++ b/packages/common-i18n/src/locales/ru/table.json @@ -438,7 +438,8 @@ "category": { "table": "Табличный вид", "form": "Вид формы", - "kanban": "Канбан-вид" + "kanban": "Канбан-вид", + "gallery": "Галерея вид" }, "crash": { "title": "Сбой!", diff --git a/packages/common-i18n/src/locales/zh/common.json b/packages/common-i18n/src/locales/zh/common.json index 7353abda0..3b2f0e82b 100644 --- a/packages/common-i18n/src/locales/zh/common.json +++ b/packages/common-i18n/src/locales/zh/common.json @@ -158,7 +158,7 @@ "createTableTooltipTitle": "创建表格", "createTableTooltipContent": "表格是一种结构化数据存储方式，用于存储应用内相关数据的集合。", "createViewTooltipTitle": "创建视图", - "createViewTooltipContent": "目前，用户可以创建表格和表单视图，未来的版本计划还包括相册、看板和日历视图。
这种多样性为用户提供了一个全面的工具，用于处理各种数据管理任务。", + "createViewTooltipContent": "目前，用户可以创建表格、画册、看板和表单视图，未来的版本计划还包括日历视图。
这种多样性为用户提供了一个全面的工具，用于处理各种数据管理任务。", "viewFilteringTooltipTitle": "记录筛选", "viewFilteringTooltipContent": "视图的核心功能之一是能够根据您设置的条件从视图中过滤掉记录。
当根据条件过滤掉记录时，它不会被删除，它只是在您用于查看表的特定视图中隐藏。", "viewSortingTooltipTitle": "记录排序", diff --git a/packages/common-i18n/src/locales/zh/table.json b/packages/common-i18n/src/locales/zh/table.json index 350c90d2c..8c3000561 100644 --- a/packages/common-i18n/src/locales/zh/table.json +++ b/packages/common-i18n/src/locales/zh/table.json @@ -449,7 +449,8 @@ "category": { "table": "表格视图", "form": "表单视图", - "kanban": "看板视图" + "kanban": "看板视图", + "gallery": "画册视图" }, "crash": { "title": "页面崩溃!", diff --git a/packages/core/src/models/field/derivate/date.field.ts b/packages/core/src/models/field/derivate/date.field.ts index 05ff9fc63..e1c6a0b83 100644 --- a/packages/core/src/models/field/derivate/date.field.ts +++ b/packages/core/src/models/field/derivate/date.field.ts @@ -119,4 +119,11 @@ export class DateFieldCore extends FieldCore { } return dataFieldCellValueSchema.nullable().safeParse(cellValue); } + + validateCellValueLoose(cellValue: unknown) { + if (this.isMultipleCellValue) { + return z.array(z.string()).nonempty().nullable().safeParse(cellValue); + } + return z.string().nullable().safeParse(cellValue); + } } diff --git a/packages/core/src/models/view/column-meta.schema.ts b/packages/core/src/models/view/column-meta.schema.ts index d3699fb44..b6ade2a7e 100644 --- a/packages/core/src/models/view/column-meta.schema.ts +++ b/packages/core/src/models/view/column-meta.schema.ts @@ -18,6 +18,8 @@ export type IGridColumnMeta = z.infer
+
{innerValue?.map((itemVal) => {
const option = optionMap[itemVal];
if (option == null) return null;
diff --git a/packages/sdk/src/components/cell-value/cell-select/SelectTag.tsx b/packages/sdk/src/components/cell-value/cell-select/SelectTag.tsx
index 8ec0475ba..903bc4d56 100644
--- a/packages/sdk/src/components/cell-value/cell-select/SelectTag.tsx
+++ b/packages/sdk/src/components/cell-value/cell-select/SelectTag.tsx
@@ -13,7 +13,7 @@ export const SelectTag: React.FC> = (props)
return (
{
}
export const CellText = (props: ICellText) => {
- const { value, className, style, maxLine = 1, displayType } = props;
+ const { value, className, style, ellipsis, displayType } = props;
const onJump = () => {
if (!displayType || !value) return;
@@ -19,9 +19,9 @@ export const CellText = (props: ICellText) => {
return (
{
- const { text = '', maxLine = 1, className, tooltipClassName, onClick } = props;
+ const { text = '', ellipsis = false, className, tooltipClassName, onClick } = props;
const [isOverflow, setOverflow] = useState(false);
const contentRef = useRef(null);
const checkOverflow = useCallback(() => {
- if (contentRef.current) {
+ if (contentRef.current && ellipsis) {
const element = contentRef.current;
const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
- const maxHeight = lineHeight * maxLine;
- const isOverflow = element.scrollHeight > maxHeight;
+ const isOverflow = element.scrollHeight > lineHeight;
setOverflow(isOverflow);
}
- }, [maxLine]);
+ }, [ellipsis]);
useEffect(() => {
const observer = new ResizeObserver(checkOverflow);
@@ -54,15 +53,11 @@ export const OverflowTooltip = (props: IOverflowTooltipProps) => {
const Content = (
- {Content}
+ {
+ e.stopPropagation();
+ onClick?.();
+ }}
+ className="w-full text-left"
+ >
+
{
className?: string;
style?: React.CSSProperties;
maxWidth?: number;
- maxLine?: number;
+ ellipsis?: boolean;
}
diff --git a/packages/sdk/src/components/expand-record/RecordHistory.tsx b/packages/sdk/src/components/expand-record/RecordHistory.tsx
index 6ec6fcc93..6285017f5 100644
--- a/packages/sdk/src/components/expand-record/RecordHistory.tsx
+++ b/packages/sdk/src/components/expand-record/RecordHistory.tsx
@@ -103,7 +103,7 @@ export const RecordHistory = (props: IRecordHistoryProps) => {
return (
) {
return plainToInstance(KanbanView, view);
case ViewType.Form:
return plainToInstance(FormView, view);
+ case ViewType.Gallery:
+ return plainToInstance(GalleryView, view);
case ViewType.Plugin:
return plainToInstance(PluginView, view);
case ViewType.Calendar:
- case ViewType.Gallery:
case ViewType.Gantt:
throw new Error('did not implement yet');
default:
diff --git a/packages/sdk/src/model/view/gallery.view.ts b/packages/sdk/src/model/view/gallery.view.ts
new file mode 100644
index 000000000..f0b0fe1a1
--- /dev/null
+++ b/packages/sdk/src/model/view/gallery.view.ts
@@ -0,0 +1,13 @@
+import { GalleryViewCore } from '@teable/core';
+import { updateViewOptions } from '@teable/openapi';
+import { Mixin } from 'ts-mixer';
+import { requestWrap } from '../../utils/requestWrap';
+import { View } from './view';
+
+export class GalleryView extends Mixin(GalleryViewCore, View) {
+ async updateOption({ coverFieldId, isCoverFit, isFieldNameHidden }: GalleryView['options']) {
+ return await requestWrap(updateViewOptions)(this.tableId, this.id, {
+ options: { coverFieldId, isCoverFit, isFieldNameHidden },
+ });
+ }
+}
diff --git a/packages/sdk/src/model/view/index.ts b/packages/sdk/src/model/view/index.ts
index 19a264c8e..acc37da76 100644
--- a/packages/sdk/src/model/view/index.ts
+++ b/packages/sdk/src/model/view/index.ts
@@ -1,5 +1,6 @@
export * from './factory';
export * from './grid.view';
export * from './kanban.view';
+export * from './gallery.view';
export * from './form.view';
export * from './view';
diff --git a/packages/ui-lib/src/base/file/preview/FilePreviewContent.tsx b/packages/ui-lib/src/base/file/preview/FilePreviewContent.tsx
index 9dc8a7b43..81763c216 100644
--- a/packages/ui-lib/src/base/file/preview/FilePreviewContent.tsx
+++ b/packages/ui-lib/src/base/file/preview/FilePreviewContent.tsx
@@ -46,6 +46,7 @@ export const FilePreviewContent = (props: { container?: HTMLElement | null }) =>
onMouseDown={(e) => {
e.stopPropagation();
}}
+ onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => {
if (e.key === 'Escape') {
closePreview();
diff --git a/packages/ui-lib/src/base/file/preview/FilePreviewItem.tsx b/packages/ui-lib/src/base/file/preview/FilePreviewItem.tsx
index 02a36631a..4b934b0ac 100644
--- a/packages/ui-lib/src/base/file/preview/FilePreviewItem.tsx
+++ b/packages/ui-lib/src/base/file/preview/FilePreviewItem.tsx
@@ -43,7 +43,10 @@ export const FilePreviewItem = (props: IFilePreviewItem) => {
e.preventDefault();
}
}}
- onClick={() => openPreview(fileIdRef.current)}
+ onClick={(e) => {
+ e.stopPropagation();
+ openPreview(fileIdRef.current);
+ }}
>
{children}
diff --git a/plugins/next-env.d.ts b/plugins/next-env.d.ts
index 4f11a03dc..40c3d6809 100644
--- a/plugins/next-env.d.ts
+++ b/plugins/next-env.d.ts
@@ -2,4 +2,4 @@
/// 99999 ? 99999 : maxLine,
- WebkitBoxOrient: 'vertical',
- wordBreak: 'break-all',
- whiteSpace: 'pre-wrap',
+ className={cn(className, 'overflow-hidden whitespace-pre-wrap break-all line-clamp-6')}
+ onClick={(e) => {
+ e.stopPropagation();
+ onClick?.();
}}
- onClick={onClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
onClick?.();
@@ -70,19 +65,36 @@ export const OverflowTooltip = (props: IOverflowTooltipProps) => {
}}
role={onClick ? 'button' : undefined}
tabIndex={onClick ? 0 : undefined}
+ title={text}
>
{text}
);
- if (!isOverflow) {
+ if (!ellipsis || !isOverflow) {
return Content;
}
return (
+ {text}
+
+ {text}
diff --git a/packages/sdk/src/components/cell-value/type.ts b/packages/sdk/src/components/cell-value/type.ts index 537714675..572f1a3c1 100644 --- a/packages/sdk/src/components/cell-value/type.ts +++ b/packages/sdk/src/components/cell-value/type.ts @@ -3,5 +3,5 @@ export interface ICellValue