diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
index 64e0d8c995d..e196e8c7078 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
@@ -10,7 +10,6 @@ export interface SlideTabBarConfig {
slideTabBarItemClassName: string;
slideTabBarSpanEditClassName: string;
slideTabRootClassName: string;
- activeClassNameAutoController: boolean;
slideTabBarItemAutoSort: boolean;
currentIndex: number;
onSlideEnd: (event: MouseEvent, compareIndex: number) => void;
@@ -324,8 +323,6 @@ export class SlideTabItem {
}
}
-// TODO@Dushusir: resize container trigger scroll box-shadow
-// init container, no box-shadow, no scroll button
export class SlideScrollbar {
protected _slideTabBar: SlideTabBar;
@@ -423,25 +420,15 @@ export class SlideTabBar {
const slideTabBar = document.querySelector(
`.${config.slideTabRootClassName} .${config.slideTabBarClassName ?? 'slide-tab-bar'}`
);
- const slideTabItems = document.querySelectorAll(
- `.${config.slideTabRootClassName} .${config.slideTabBarItemClassName ?? 'slide-tab-item'}`
- );
-
if (slideTabBar == null) {
throw new Error('not found slide-tab-bar');
}
- this._config = config as SlideTabBarConfig;
- this._downActionX = 0;
- this._moveActionX = 0;
- this._compareDirection = 0;
- this._compareIndex = 0;
this._slideTabBar = slideTabBar as HTMLElement;
-
this._slideScrollbar = new SlideScrollbar(this);
- this._slideTabItems = SlideTabItem.make(slideTabItems, this);
- this._activeTabItemIndex = this._config.currentIndex;
- this._activeTabItem = this._slideTabItems[this._activeTabItemIndex];
+ this._config = config as SlideTabBarConfig;
+
+ this._initConfig();
let lastPageX = 0;
let lastPageY = 0;
@@ -509,21 +496,12 @@ export class SlideTabBar {
// Set a timer to delay dragging for 300 milliseconds
this._longPressTimer = window.setTimeout(() => {
- if (this._config.activeClassNameAutoController) {
- this._slideTabItems.forEach((item) => {
- item.classList().remove(this._config.slideTabBarItemActiveClassName);
- });
- this._activeTabItem?.classList().add(this._config.slideTabBarItemActiveClassName);
- }
this._activeTabItem?.enableFixed();
-
- //
this._startAutoScroll();
if (!activeSlideItemElement) return;
// Set the mouse cursor to drag
activeSlideItemElement.setPointerCapture((downEvent as PointerEvent).pointerId);
activeSlideItemElement.style.cursor = 'move';
-
this._activeTabItem?.addEventListener('pointermove', this._moveAction);
}, SlideTabBar.LongPressDelay);
};
@@ -553,7 +531,6 @@ export class SlideTabBar {
this._activeTabItem?.removeEventListener('pointerup', this._upAction);
if (this._config.onSlideEnd && this._activeTabItemIndex !== this._compareIndex) {
this.destroy();
-
this._config.onSlideEnd(upEvent, this._compareIndex || 0);
}
@@ -581,7 +558,7 @@ export class SlideTabBar {
this.setScroll(wheelEvent.deltaY);
};
- this._initialize();
+ this._initListener();
}
static checkedSkipSlide(event: MouseEvent): boolean {
@@ -618,6 +595,17 @@ export class SlideTabBar {
});
}
+ /**
+ * The current instance is persistent, but some parameters need to be updated after refreshing
+ * @param currentIndex
+ */
+ update(currentIndex: number) {
+ this._config.currentIndex = currentIndex;
+ this._initConfig();
+ this.destroy();
+ this._initListener();
+ }
+
primeval(): HTMLElement {
return this._slideTabBar;
}
@@ -829,7 +817,22 @@ export class SlideTabBar {
}
}
- protected _initialize(): void {
+ protected _initConfig(): void {
+ const slideTabItems = this._slideTabBar.querySelectorAll(
+ `.${this._config.slideTabBarItemClassName ?? 'slide-tab-item'}`
+ );
+
+ this._downActionX = 0;
+ this._moveActionX = 0;
+ this._compareDirection = 0;
+ this._compareIndex = 0;
+
+ this._slideTabItems = SlideTabItem.make(slideTabItems, this);
+ this._activeTabItemIndex = this._config.currentIndex;
+ this._activeTabItem = this._slideTabItems[this._activeTabItemIndex];
+ }
+
+ protected _initListener() {
this._slideTabBar.addEventListener('wheel', this._wheelAction);
this._slideTabItems.forEach((item) => {
item.addEventListener('pointerdown', this._downAction);
From 74be21c6bf431554817417c7e1a477f96b13302b Mon Sep 17 00:00:00 2001
From: Dushusir <1414556676@qq.com>
Date: Wed, 15 Nov 2023 16:12:11 +0800
Subject: [PATCH 2/3] fix(sheet): rename trigger input edit, rename empty check
alert
---
.../src/commands/commands/rename.command.ts | 1 +
packages/ui-plugin-sheets/src/locale/en-US.ts | 2 +-
packages/ui-plugin-sheets/src/locale/zh-CN.ts | 2 +-
.../sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx | 144 ++++++++++--------
.../sheet-bar-tabs/utils/slide-tab-bar.ts | 73 +++++----
5 files changed, 134 insertions(+), 88 deletions(-)
diff --git a/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts b/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts
index 1395d200ba8..6f51f99bb95 100644
--- a/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts
+++ b/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts
@@ -13,6 +13,7 @@ export const RenameSheetOperation: ICommand = {
handler: async (accessor: IAccessor, params?: IRenameCommandParams) => {
const sheetBarService = accessor.get(ISheetBarService);
if (params) {
+ console.info('rename ===params', params);
sheetBarService.setRenameId(params.worksheetId);
}
return true;
diff --git a/packages/ui-plugin-sheets/src/locale/en-US.ts b/packages/ui-plugin-sheets/src/locale/en-US.ts
index b872f454280..fc4bc513ad4 100644
--- a/packages/ui-plugin-sheets/src/locale/en-US.ts
+++ b/packages/ui-plugin-sheets/src/locale/en-US.ts
@@ -414,7 +414,7 @@ export default {
noHide: "Can't hide, at least keep one sheet tag",
chartEditNoOpt: 'This operation is not allowed in chart editing mode!',
sheetNameSpecCharError: 'The name cannot contain:[ ] : ? * / \' "',
- sheetNameCannotIsEmptyError: 'Sheet name cannot be empty',
+ sheetNameCannotIsEmptyError: 'The sheet name cannot be empty',
},
rightClick: {
copy: 'Copy',
diff --git a/packages/ui-plugin-sheets/src/locale/zh-CN.ts b/packages/ui-plugin-sheets/src/locale/zh-CN.ts
index 722dd6a7d82..a84557606d8 100644
--- a/packages/ui-plugin-sheets/src/locale/zh-CN.ts
+++ b/packages/ui-plugin-sheets/src/locale/zh-CN.ts
@@ -278,7 +278,7 @@ export default {
noHide: '不能隐藏, 至少保留一个sheet标签',
chartEditNoOpt: '图表编辑模式下不允许该操作！',
sheetNameSpecCharError: "名称不能超过31个字符，首尾不能是' 且名称不能包含:\r\n[ ] : \\ ? * /",
- sheetNameCannotIsEmptyError: '名称不能为空!',
+ sheetNameCannotIsEmptyError: '名称不能为空',
},
rightClick: {
copy: '复制',
diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
index 8a73850997c..d8a8d92ca0d 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
@@ -10,9 +10,10 @@ import {
SetWorksheetOrderCommand,
SetWorksheetOrderMutation,
} from '@univerjs/base-sheets';
-import { BooleanNumber, ICommandInfo, ICommandService, IUniverInstanceService } from '@univerjs/core';
+import { IConfirmService } from '@univerjs/base-ui';
+import { BooleanNumber, ICommandInfo, ICommandService, IUniverInstanceService, LocaleService } from '@univerjs/core';
import { useDependency } from '@wendellhu/redi/react-bindings';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
import { ISheetBarService } from '../../../services/sheetbar/sheetbar.service';
import sheetBarStyles from '../index.module.less';
@@ -24,23 +25,33 @@ export interface ISheetBarTabsProps {}
export function SheetBarTabs() {
const [sheetList, setSheetList] = useState([]);
- const [activeKey, setActiveKey] = useState('');
- const [subscribe, setSubscribe] = useState(false);
+ const [activeKey, setActiveKey] = useState('');
const [boxShadow, setBoxShadow] = useState('');
+ const slideTabBarRef = useRef<{ slideTabBar: SlideTabBar | null }>({ slideTabBar: null });
const univerInstanceService = useDependency(IUniverInstanceService);
const commandService = useDependency(ICommandService);
const sheetbarService = useDependency(ISheetBarService);
+ const localeService = useDependency(LocaleService);
+ const confirmService = useDependency(IConfirmService);
+
const workbook = univerInstanceService.getCurrentUniverSheetInstance();
useEffect(() => {
statusInit();
+ const slideTabBar = setupSlideTabBarInit();
const disposable = setupStatusUpdate();
- const subscription = setupSubscribeScroll();
+ const subscribeList = [
+ setupSubscribeScroll(),
+ setupSubscribeScrollX(),
+ setupSubscribeRenameId(),
+ setupSubscribeAddSheet(),
+ ];
return () => {
disposable.dispose();
- subscription.unsubscribe();
+ slideTabBar.destroy();
+ subscribeList.forEach((subscribe) => subscribe.unsubscribe());
};
}, []);
@@ -50,59 +61,57 @@ export function SheetBarTabs() {
}
}, [sheetList]);
- const setupSlideTabBarUpdate = () => {
- let slideTabBar: SlideTabBar | null = null;
- const currentIndex = sheetList.findIndex((item) => item.selected);
+ const setupSlideTabBarInit = () => {
+ const slideTabBar = new SlideTabBar({
+ slideTabBarClassName: styles.slideTabBar,
+ slideTabBarItemActiveClassName: styles.slideTabActive,
+ slideTabBarItemClassName: styles.slideTabItem,
+ slideTabBarSpanEditClassName: styles.slideTabSpanEdit,
+ slideTabBarItemAutoSort: true,
+ slideTabRootClassName: sheetBarStyles.sheetBar,
+ currentIndex: 0,
+ onChangeName: (worksheetId: string, worksheetName: string) => {
+ commandService.executeCommand(SetWorksheetNameCommand.id, {
+ worksheetId,
+ name: worksheetName,
+ });
+ },
+ onSlideEnd: (event: Event, order: number) => {
+ commandService.executeCommand(SetWorksheetOrderCommand.id, { order });
+ },
+ onChangeTab: (event: Event, worksheetId: string) => {
+ commandService.executeCommand(SetWorksheetActivateCommand.id, { worksheetId });
+ },
+ onScroll: (state: IScrollState) => {
+ sheetbarService.setScroll(state);
+ },
+ onEmptyAlert: (message: string) => {
+ confirmService.open({
+ id: 'slideTabBarAlert',
+ children: { title: localeService.t('sheetConfig.sheetNameCannotIsEmptyError') },
+ // TODO@Dushusir: i18n
+ title: { title: 'There was a problem' },
+ onClose() {
+ confirmService.close('slideTabBarAlert');
+ },
+ onConfirm() {
+ confirmService.close('slideTabBarAlert');
+ },
+ });
+ },
+ });
- // TODO@Dushusir: Can you initialize it once without using the `subscribe` label?
- if (!subscribe) {
- // TODO@Dushusir: There may not be initialization each time
- slideTabBar = new SlideTabBar({
- slideTabBarClassName: styles.slideTabBar,
- slideTabBarItemActiveClassName: styles.slideTabActive,
- slideTabBarItemClassName: styles.slideTabItem,
- slideTabBarSpanEditClassName: styles.slideTabSpanEdit,
- slideTabBarItemAutoSort: true,
- slideTabRootClassName: sheetBarStyles.sheetBar,
- currentIndex,
- onChangeName: (worksheetId: string, worksheetName: string) => {
- commandService.executeCommand(SetWorksheetNameCommand.id, {
- worksheetId,
- name: worksheetName,
- });
- },
- onSlideEnd: (event: Event, order: number) => {
- commandService.executeCommand(SetWorksheetOrderCommand.id, { order });
- },
- onChangeTab: (event: Event, worksheetId: string) => {
- commandService.executeCommand(SetWorksheetActivateCommand.id, { worksheetId });
- },
- onScroll: (state: IScrollState) => {
- sheetbarService.setScroll(state);
- },
- });
-
- sheetbarService.scrollX$.subscribe((x: number) => {
- // update scrollX
- slideTabBar && slideTabBar.setScroll(x);
- });
-
- sheetbarService.renameId$.subscribe((renameId: string) => {
- const index = sheetList.findIndex((item) => item.sheetId === renameId);
- slideTabBar && slideTabBar.getSlideTabItems()[index].editor();
- });
-
- sheetbarService.addSheet$.subscribe(() => {
- slideTabBar && slideTabBar.getScrollbar().scrollRight();
- });
- // TODO@Dushusir: Asynchronous rendering will cause flickering problems
- scrollButtonInit(slideTabBar);
- resizeInit(slideTabBar);
- setSubscribe(true);
- }
+ slideTabBarRef.current.slideTabBar = slideTabBar;
+
+ // FIXME@Dushusir: First time asynchronous rendering will cause flickering problems
+ resizeInit(slideTabBar);
+
+ return slideTabBar;
+ };
- // why null?
- slideTabBar && slideTabBar.update(currentIndex);
+ const setupSlideTabBarUpdate = () => {
+ const currentIndex = sheetList.findIndex((item) => item.selected);
+ slideTabBarRef.current.slideTabBar?.update(currentIndex);
};
const setupStatusUpdate = () =>
@@ -144,6 +153,21 @@ export function SheetBarTabs() {
updateScrollButtonState(state);
});
+ const setupSubscribeScrollX = () =>
+ sheetbarService.scrollX$.subscribe((x: number) => {
+ slideTabBarRef.current.slideTabBar?.setScroll(x);
+ });
+
+ const setupSubscribeRenameId = () =>
+ sheetbarService.renameId$.subscribe(() => {
+ slideTabBarRef.current.slideTabBar?.getActiveItem()?.editor();
+ });
+
+ const setupSubscribeAddSheet = () =>
+ sheetbarService.addSheet$.subscribe(() => {
+ slideTabBarRef.current.slideTabBar?.getScrollbar().scrollRight();
+ });
+
const updateScrollButtonState = (state: IScrollState) => {
const { leftEnd, rightEnd } = state;
// box-shadow: inset 10px 0px 10px -10px rgba(0, 0, 0, 0.2), inset -10px 0px 10px -10px rgba(0, 0, 0, 0.2);
@@ -161,7 +185,7 @@ export function SheetBarTabs() {
setBoxShadow(boxShadow);
};
- const scrollButtonInit = (slideTabBar: SlideTabBar) => {
+ const buttonScroll = (slideTabBar: SlideTabBar) => {
sheetbarService.setScroll({
leftEnd: slideTabBar.isLeftEnd(),
rightEnd: slideTabBar.isRightEnd(),
@@ -173,9 +197,9 @@ export function SheetBarTabs() {
const slideTabBarContainer = document.querySelector(`.${styles.slideTabBar}`);
if (!slideTabBarContainer) return;
- // Create a Resizeobserver example
+ // Create a Resizeobserver
const observer = new ResizeObserver(() => {
- scrollButtonInit(slideTabBar);
+ buttonScroll(slideTabBar);
});
// Start the observer
diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
index e196e8c7078..24d6d8d0016 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
@@ -16,6 +16,7 @@ export interface SlideTabBarConfig {
onChangeName: (id: string, name: string) => void;
onChangeTab: (event: FocusEvent, id: string) => void;
onScroll: (state: IScrollState) => void;
+ onEmptyAlert: (message: string) => void;
}
export interface SlideTabItemAnimate {
@@ -112,7 +113,7 @@ export class SlideTabItem {
}
// Event must be removed before updateItems
- this._slideTabBar.destroy();
+ this._slideTabBar.removeListener();
this._slideTabBar.updateItems();
if (this._slideTabBar.getConfig().onChangeName) {
const text = input?.innerText || '';
@@ -176,8 +177,7 @@ export class SlideTabItem {
if (!input) return false;
const text = input.innerText;
if (text.trim() === '') {
- // TODO@Dushusir: i18n and dialog service
- alert('The sheet name cannot be empty.');
+ this._slideTabBar.getConfig().onEmptyAlert('The sheet name cannot be empty.');
return true;
}
return false;
@@ -358,21 +358,21 @@ export class SlideTabBar {
/** Time in milliseconds with two consecutive clicks will be considered as a double click */
static DoubleClickDelay = 300; // in milliseconds
- protected _activeTabItemIndex: number | null;
+ protected _activeTabItemIndex: number = 0;
protected _slideTabBar: HTMLElement;
- protected _slideTabItems: SlideTabItem[];
+ protected _slideTabItems: SlideTabItem[] = [];
protected _config: SlideTabBarConfig;
- protected _downActionX: number;
+ protected _downActionX: number = 0;
- protected _moveActionX: number;
+ protected _moveActionX: number = 0;
- protected _compareIndex: number | null;
+ protected _compareIndex: number = 0;
- protected _activeTabItem: SlideTabItem | null;
+ protected _activeTabItem: SlideTabItem | null = null;
protected _moveAction: (e: MouseEvent) => void;
@@ -445,7 +445,7 @@ export class SlideTabBar {
if (this._activeTabItemIndex !== slideItemIndex) {
this._activeTabItem?.removeEventListener('pointermove', this._moveAction);
this._activeTabItem?.removeEventListener('pointerup', this._upAction);
- this.destroy();
+ this.removeListener();
this._config.onChangeTab(downEvent, slideItemId);
return;
}
@@ -484,10 +484,8 @@ export class SlideTabBar {
// double click
if (diffTime && diffPageX && diffPageY) {
- if (this._activeTabItem) {
- // user editor
- this._activeTabItem.editor();
- }
+ // user editor
+ this._activeTabItem.editor();
}
lastPageX = pageX;
@@ -530,7 +528,7 @@ export class SlideTabBar {
this._activeTabItem?.removeEventListener('pointermove', this._moveAction);
this._activeTabItem?.removeEventListener('pointerup', this._upAction);
if (this._config.onSlideEnd && this._activeTabItemIndex !== this._compareIndex) {
- this.destroy();
+ this.removeListener();
this._config.onSlideEnd(upEvent, this._compareIndex || 0);
}
@@ -558,7 +556,7 @@ export class SlideTabBar {
this.setScroll(wheelEvent.deltaY);
};
- this._initListener();
+ this.addListener();
}
static checkedSkipSlide(event: MouseEvent): boolean {
@@ -602,8 +600,8 @@ export class SlideTabBar {
update(currentIndex: number) {
this._config.currentIndex = currentIndex;
this._initConfig();
- this.destroy();
- this._initListener();
+ this.removeListener();
+ this.addListener();
}
primeval(): HTMLElement {
@@ -634,6 +632,10 @@ export class SlideTabBar {
return this._slideTabItems;
}
+ getActiveItem() {
+ return this._activeTabItem;
+ }
+
isLeftEnd(): boolean {
return this._slideTabBar.scrollLeft === 0;
}
@@ -644,7 +646,14 @@ export class SlideTabBar {
return this._slideTabBar.scrollWidth - parent.clientWidth === this._slideTabBar.scrollLeft;
}
- destroy(): void {
+ addListener() {
+ this._slideTabBar.addEventListener('wheel', this._wheelAction);
+ this._slideTabItems.forEach((item) => {
+ item.addEventListener('pointerdown', this._downAction);
+ });
+ }
+
+ removeListener(): void {
this._slideTabBar.removeEventListener('wheel', this._wheelAction);
this._slideTabItems.forEach((item) => {
item.removeEventListener('pointerdown', this._downAction);
@@ -660,6 +669,25 @@ export class SlideTabBar {
});
}
+ destroy() {
+ this._downActionX = 0;
+ this._moveActionX = 0;
+ this._compareDirection = 0;
+ this._compareIndex = 0;
+ this._slideTabItems = [];
+ this._activeTabItem = null;
+ this.removeListener();
+
+ // TODO@Dushusir: If set to null, the types in other places need to be judged
+ // this._slideTabBar = null;
+ // this._slideScrollbar = null;
+ // this._config = null;
+ // this._downAction = null;
+ // this._upAction = null;
+ // this._moveAction = null;
+ // this._wheelAction = null;
+ }
+
protected _hasEditItem(): boolean {
for (let index = 0; index < this._slideTabItems.length; index++) {
const element = this._slideTabItems[index];
@@ -831,11 +859,4 @@ export class SlideTabBar {
this._activeTabItemIndex = this._config.currentIndex;
this._activeTabItem = this._slideTabItems[this._activeTabItemIndex];
}
-
- protected _initListener() {
- this._slideTabBar.addEventListener('wheel', this._wheelAction);
- this._slideTabItems.forEach((item) => {
- item.addEventListener('pointerdown', this._downAction);
- });
- }
}
From 2e91bb91283da8a13624d97df2c2536045106b7e Mon Sep 17 00:00:00 2001
From: Dushusir <1414556676@qq.com>
Date: Thu, 16 Nov 2023 10:26:23 +0800
Subject: [PATCH 3/3] fix(sheet): remove test console, use const string for
special id
---
.../src/commands/commands/rename.command.ts | 1 -
.../src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx | 9 +++++----
.../sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts | 4 ++--
3 files changed, 7 insertions(+), 7 deletions(-)
diff --git a/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts b/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts
index 6f51f99bb95..1395d200ba8 100644
--- a/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts
+++ b/packages/ui-plugin-sheets/src/commands/commands/rename.command.ts
@@ -13,7 +13,6 @@ export const RenameSheetOperation: ICommand = {
handler: async (accessor: IAccessor, params?: IRenameCommandParams) => {
const sheetBarService = accessor.get(ISheetBarService);
if (params) {
- console.info('rename ===params', params);
sheetBarService.setRenameId(params.worksheetId);
}
return true;
diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
index d8a8d92ca0d..35f71f57703 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/SheetBarTabs.tsx
@@ -85,17 +85,18 @@ export function SheetBarTabs() {
onScroll: (state: IScrollState) => {
sheetbarService.setScroll(state);
},
- onEmptyAlert: (message: string) => {
+ onEmptyAlert: () => {
+ const id = 'slideTabBarAlert';
confirmService.open({
- id: 'slideTabBarAlert',
+ id,
children: { title: localeService.t('sheetConfig.sheetNameCannotIsEmptyError') },
// TODO@Dushusir: i18n
title: { title: 'There was a problem' },
onClose() {
- confirmService.close('slideTabBarAlert');
+ confirmService.close(id);
},
onConfirm() {
- confirmService.close('slideTabBarAlert');
+ confirmService.close(id);
},
});
},
diff --git a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
index 24d6d8d0016..2f2c902f211 100644
--- a/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
+++ b/packages/ui-plugin-sheets/src/views/sheet-bar/sheet-bar-tabs/utils/slide-tab-bar.ts
@@ -16,7 +16,7 @@ export interface SlideTabBarConfig {
onChangeName: (id: string, name: string) => void;
onChangeTab: (event: FocusEvent, id: string) => void;
onScroll: (state: IScrollState) => void;
- onEmptyAlert: (message: string) => void;
+ onEmptyAlert: () => void;
}
export interface SlideTabItemAnimate {
@@ -177,7 +177,7 @@ export class SlideTabItem {
if (!input) return false;
const text = input.innerText;
if (text.trim() === '') {
- this._slideTabBar.getConfig().onEmptyAlert('The sheet name cannot be empty.');
+ this._slideTabBar.getConfig().onEmptyAlert();
return true;
}
return false;