@univerjs/sheets-numfmt-ui 1.0.3 → 1.1.0

package/lib/cjs/index.js

@@ -21,7 +21,7 @@ const CloseNumfmtPanelOperator = {
 };
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -32,7 +32,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -45,14 +45,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -63,7 +63,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -71,7 +71,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.153.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -429,15 +429,56 @@ function Options() {
 	});
 }
 
+//#endregion
+//#region src/menu/numfmt-menu-util.ts
+const FORMAT_TYPE_LABELS = {
+	currency: "sheets-numfmt-ui.currency",
+	date: "sheets-numfmt-ui.date",
+	datetime: "sheets-numfmt-ui.dateTime",
+	general: "sheets-numfmt-ui.general",
+	grouped: "sheets-numfmt-ui.number",
+	number: "sheets-numfmt-ui.number",
+	percent: "sheets-numfmt-ui.percent",
+	scientific: "sheets-numfmt-ui.scientific",
+	text: "sheets-numfmt-ui.text",
+	time: "sheets-numfmt-ui.time"
+};
+function getNumberFormatLabelKey(pattern, currencySymbol) {
+	if (!pattern || (0, _univerjs_core.isDefaultFormat)(pattern)) return "sheets-numfmt-ui.general";
+	if ((0, _univerjs_core.isTextFormat)(pattern)) return "sheets-numfmt-ui.text";
+	const preset = MENU_OPTIONS(currencySymbol).find((option) => typeof option === "object" && option.pattern && (0, _univerjs_core.isPatternEqualWithoutDecimal)(pattern, option.pattern));
+	if (preset && typeof preset === "object") return preset.label;
+	return FORMAT_TYPE_LABELS[(0, _univerjs_sheets_numfmt.getPatternType)(pattern)] ?? "sheets-numfmt-ui.moreFmt";
+}
+function getCurrentNumfmtPattern$(accessor) {
+	const commandService = accessor.get(_univerjs_core.ICommandService);
+	const instanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+	const selectionService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
+	const commandIds = [
+		_univerjs_sheets.RemoveNumfmtMutation.id,
+		_univerjs_sheets.SetNumfmtMutation.id,
+		_univerjs_sheets.SetRangeValuesMutation.id
+	];
+	return (0, _univerjs_sheets_ui.deriveStateFromActiveSheet$)(instanceService, void 0, ({ worksheet }) => (0, rxjs.merge)(selectionService.selectionChanged$, (0, _univerjs_core.fromCallback)(commandService.onCommandExecuted.bind(commandService)).pipe((0, rxjs.filter)(([command]) => commandIds.includes(command.id)))).pipe((0, rxjs.startWith)(null), (0, rxjs.map)(() => {
+		var _worksheet$getCellSty;
+		const selection = selectionService.getCurrentLastSelection();
+		if (!selection) return;
+		const cell = selection.primary ?? selection.range;
+		return (_worksheet$getCellSty = worksheet.getCellStyle(cell.startRow, cell.startColumn)) === null || _worksheet$getCellSty === void 0 || (_worksheet$getCellSty = _worksheet$getCellSty.n) === null || _worksheet$getCellSty === void 0 ? void 0 : _worksheet$getCellSty.pattern;
+	}))).pipe((0, rxjs.distinctUntilChanged)());
+}
+
 //#endregion
 //#region src/menu/menu.ts
 function CurrencySymbolIconMenuItem(accessor) {
+	const regionService = accessor.get(_univerjs_core.RegionService);
 	return {
-		icon: accessor.get(_univerjs_core.RegionService).currentRegion$.pipe((0, rxjs.map)((region) => (0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(region).icon)),
+		icon: regionService.currentRegion$.pipe((0, rxjs.map)((region) => (0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(region).icon)),
 		id: _univerjs_sheets_numfmt.SetCurrencyCommand.id,
 		title: "sheets-numfmt-ui.currency",
 		tooltip: "sheets-numfmt-ui.currency",
 		type: _univerjs_ui.MenuItemType.BUTTON,
+		activated$: (0, rxjs.combineLatest)([getCurrentNumfmtPattern$(accessor), regionService.currentRegion$]).pipe((0, rxjs.map)(([pattern, region]) => !!pattern && (0, _univerjs_sheets_numfmt.getPatternType)(pattern) === "currency" && (0, _univerjs_sheets_numfmt.getCurrencyType)(pattern) === (0, _univerjs_sheets_numfmt.getCurrencySymbolIconByLocale)(region).symbol), (0, rxjs.distinctUntilChanged)()),
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
 		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
@@ -483,6 +524,7 @@ function PercentMenuItem(accessor) {
 		title: "sheets-numfmt-ui.percent",
 		tooltip: "sheets-numfmt-ui.percent",
 		type: _univerjs_ui.MenuItemType.BUTTON,
+		activated$: getCurrentNumfmtPattern$(accessor).pipe((0, rxjs.map)((pattern) => !!pattern && (0, _univerjs_sheets_numfmt.getPatternType)(pattern) === "percent"), (0, rxjs.distinctUntilChanged)()),
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
 		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
 			workbookTypes: [_univerjs_sheets.WorkbookEditablePermission],
@@ -492,35 +534,13 @@ function PercentMenuItem(accessor) {
 	};
 }
 function FactoryOtherMenuItem(accessor) {
-	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-	const commandService = accessor.get(_univerjs_core.ICommandService);
 	const localeService = accessor.get(_univerjs_core.LocaleService);
 	const regionService = accessor.get(_univerjs_core.RegionService);
-	const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
-	const commandList = [_univerjs_sheets.RemoveNumfmtMutation.id, _univerjs_sheets.SetNumfmtMutation.id];
-	const value$ = (0, _univerjs_sheets_ui.deriveStateFromActiveSheet$)(univerInstanceService, "", ({ workbook, worksheet }) => new rxjs.Observable((subscribe) => (0, rxjs.merge)(selectionManagerService.selectionMoveEnd$, regionService.currentRegion$, (0, _univerjs_core.fromCallback)(commandService.onCommandExecuted.bind(commandService)).pipe((0, rxjs.filter)(([commandInfo]) => commandList.includes(commandInfo.id)))).subscribe(() => {
-		const selections = selectionManagerService.getCurrentSelections();
-		if (selections && selections[0]) {
-			var _workbook$getStyles$g, _worksheet$getCell;
-			const range = selections[0].range;
-			const row = range.startRow;
-			const col = range.startColumn;
-			const numfmtValue = (_workbook$getStyles$g = workbook.getStyles().get((_worksheet$getCell = worksheet.getCell(row, col)) === null || _worksheet$getCell === void 0 ? void 0 : _worksheet$getCell.s)) === null || _workbook$getStyles$g === void 0 ? void 0 : _workbook$getStyles$g.n;
-			const pattern = numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern;
-			const currencySymbol = (0, _univerjs_sheets_numfmt.getCurrencySymbolByLocale)(regionService.getCurrentRegion());
-			let value = localeService.t("sheets-numfmt-ui.general");
-			if ((0, _univerjs_core.isDefaultFormat)(pattern)) {
-				subscribe.next(value);
-				return;
-			}
-			if (pattern) {
-				const item = MENU_OPTIONS(currencySymbol).filter((item) => typeof item === "object" && item.pattern).find((item) => (0, _univerjs_core.isPatternEqualWithoutDecimal)(pattern, item.pattern));
-				if (item && typeof item === "object" && item.pattern) value = localeService.t(item.label);
-				else value = localeService.t("sheets-numfmt-ui.moreFmt");
-			}
-			subscribe.next(value);
-		}
-	})));
+	const value$ = (0, rxjs.combineLatest)([
+		getCurrentNumfmtPattern$(accessor),
+		regionService.currentRegion$,
+		localeService.currentLocale$
+	]).pipe((0, rxjs.map)(([pattern, region]) => localeService.t(getNumberFormatLabelKey(pattern, (0, _univerjs_sheets_numfmt.getCurrencySymbolByLocale)(region)))), (0, rxjs.distinctUntilChanged)());
 	return {
 		label: MORE_NUMFMT_TYPE_KEY,
 		id: OpenNumfmtPanelOperator.id,
@@ -592,7 +612,7 @@ const menuSchema = { [_univerjs_ui.RibbonStartGroup.NUMBER]: {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-numfmt-ui";
-var version = "1.0.3";
+var version = "1.1.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -671,39 +691,17 @@ function createMobileNumberFormatMenuConfig(currencySymbol) {
 			commandId: _univerjs_sheets_numfmt.AddDecimalCommand.id
 		}],
 		detailOptions,
-		customPatterns: [.../* @__PURE__ */ new Set([
-			..._univerjs_sheets_numfmt.CURRENCYFORMAT.map((item) => item.suffix(currencySymbol)),
-			..._univerjs_sheets_numfmt.DATEFMTLISG.map((item) => item.suffix),
-			..._univerjs_sheets_numfmt.NUMBERFORMAT.map((item) => item.suffix)
-		])]
+		customPatterns: [.../* @__PURE__ */ new Set([..._univerjs_sheets_numfmt.CURRENCYFORMAT.map((item) => item.suffix(currencySymbol)), ..._univerjs_sheets_numfmt.NUMBERFORMAT.map((item) => item.suffix)])]
 	};
 }
 function FactoryMobileOtherMenuItem(accessor) {
-	const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
-	const commandService = accessor.get(_univerjs_core.ICommandService);
 	const localeService = accessor.get(_univerjs_core.LocaleService);
 	const regionService = accessor.get(_univerjs_core.RegionService);
-	const selectionManagerService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
-	const commandList = [_univerjs_sheets.RemoveNumfmtMutation.id, _univerjs_sheets.SetNumfmtMutation.id];
-	const value$ = (0, _univerjs_sheets_ui.deriveStateFromActiveSheet$)(univerInstanceService, "", ({ workbook, worksheet }) => new rxjs.Observable((subscribe) => (0, rxjs.merge)(selectionManagerService.selectionMoveEnd$, regionService.currentRegion$, (0, _univerjs_core.fromCallback)(commandService.onCommandExecuted.bind(commandService)).pipe((0, rxjs.filter)(([commandInfo]) => commandList.includes(commandInfo.id)))).subscribe(() => {
-		var _selectionManagerServ, _workbook$getStyles$g, _worksheet$getCell;
-		const selection = (_selectionManagerServ = selectionManagerService.getCurrentSelections()) === null || _selectionManagerServ === void 0 ? void 0 : _selectionManagerServ[0];
-		if (!selection) return;
-		const { startRow, startColumn } = selection.range;
-		const numfmtValue = (_workbook$getStyles$g = workbook.getStyles().get((_worksheet$getCell = worksheet.getCell(startRow, startColumn)) === null || _worksheet$getCell === void 0 ? void 0 : _worksheet$getCell.s)) === null || _workbook$getStyles$g === void 0 ? void 0 : _workbook$getStyles$g.n;
-		const pattern = numfmtValue === null || numfmtValue === void 0 ? void 0 : numfmtValue.pattern;
-		const currencySymbol = (0, _univerjs_sheets_numfmt.getCurrencySymbolByLocale)(regionService.getCurrentRegion());
-		let value = localeService.t("sheets-numfmt-ui.general");
-		if ((0, _univerjs_core.isDefaultFormat)(pattern)) {
-			subscribe.next(value);
-			return;
-		}
-		if (pattern) {
-			const item = MENU_OPTIONS(currencySymbol).filter((option) => typeof option === "object" && option.pattern).find((option) => (0, _univerjs_core.isPatternEqualWithoutDecimal)(pattern, option.pattern));
-			value = item && typeof item === "object" && item.pattern ? localeService.t(item.label) : localeService.t("sheets-numfmt-ui.moreFmt");
-		}
-		subscribe.next(value);
-	})));
+	const value$ = (0, rxjs.combineLatest)([
+		getCurrentNumfmtPattern$(accessor),
+		regionService.currentRegion$,
+		localeService.currentLocale$
+	]).pipe((0, rxjs.map)(([pattern, region]) => localeService.t(getNumberFormatLabelKey(pattern, (0, _univerjs_sheets_numfmt.getCurrencySymbolByLocale)(region)))), (0, rxjs.distinctUntilChanged)());
 	return {
 		id: MOBILE_NUMFMT_MENU_ID,
 		title: "sheets-numfmt-ui.title",
@@ -726,15 +724,27 @@ function FactoryMobileOtherMenuItem(accessor) {
 function MobileCustomFormat(props) {
 	const { patterns, onConfirm } = props;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const locale = (0, _univerjs_ui.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
 	const [pattern, setPattern] = (0, react.useState)("");
 	const title = localeService.t("sheets-numfmt-ui.customFormat");
+	const options = (0, react.useMemo)(() => [.../* @__PURE__ */ new Set([
+		...patterns,
+		...(0, _univerjs_sheets_numfmt.getDateFormatOptions)(locale).map((item) => item.value),
+		...pattern ? [pattern] : []
+	])].map((value) => ({
+		label: value,
+		value
+	})), [
+		locale,
+		pattern,
+		patterns
+	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-u-comp": "mobile-custom-format",
 		className: "univer-flex univer-h-full univer-min-h-0 univer-flex-col univer-gap-4",
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
 				className: "univer-shrink-0",
-				size: "large",
 				"aria-label": title,
 				value: pattern,
 				placeholder: title,
@@ -743,10 +753,7 @@ function MobileCustomFormat(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileSelect, {
 				className: "univer-w-full univer-shrink-0 [&>div]:univer-font-mono",
 				value: pattern || title,
-				options: patterns.map((item) => ({
-					label: item,
-					value: item
-				})),
+				options,
 				onChange: setPattern
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1620,14 +1627,15 @@ function CustomFormat(props) {
 	const userHabitController = (0, _univerjs_ui.useDependency)(UserHabitController);
 	const localStorageService = (0, _univerjs_ui.useDependency)(_univerjs_core.ILocalStorageService);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const locale = (0, _univerjs_ui.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
 	const [pattern, setPattern] = (0, react.useState)(defaultPattern);
 	(0, react.useLayoutEffect)(() => {
 		onActionChange(() => {
 			userHabitController.markHabit(key$1, pattern);
 			localStorageService.getItem(historyPatternKey).then((list = []) => {
 				const _list = [.../* @__PURE__ */ new Set([pattern, ...list || []])].splice(0, 10).filter((e) => !!e);
-				localStorageService.setItem(historyPatternKey, _list);
-			});
+				return localStorageService.setItem(historyPatternKey, _list);
+			}).catch(console.error);
 			return pattern;
 		});
 	}, [
@@ -1642,18 +1650,22 @@ function CustomFormat(props) {
 		localStorageService.getItem(historyPatternKey).then((historyList) => {
 			const list = [
 				..._univerjs_sheets_numfmt.CURRENCYFORMAT.map((item) => item.suffix("$")),
-				..._univerjs_sheets_numfmt.DATEFMTLISG.map((item) => item.suffix),
+				...(0, _univerjs_sheets_numfmt.getDateFormatOptions)(locale).map((item) => item.value),
 				..._univerjs_sheets_numfmt.NUMBERFORMAT.map((item) => item.suffix),
 				...historyList ?? []
 			];
 			return userHabitController.addHabit(key$1, []).then(() => userHabitController.getHabit(key$1, list));
 		}).then((list) => {
 			if (!cancelled) setOptions([...new Set(list)]);
-		});
+		}).catch(console.error);
 		return () => {
 			cancelled = true;
 		};
-	}, [localStorageService, userHabitController]);
+	}, [
+		locale,
+		localStorageService,
+		userHabitController
+	]);
 	const handleClick = (p) => {
 		setPattern(p);
 		onChange(p);
@@ -1695,7 +1707,7 @@ function CustomFormat(props) {
 //#region src/views/components/Date.tsx
 const isDatePanel = (pattern) => {
 	const info = _univerjs_core.numfmt.getFormatInfo(pattern);
-	return (0, _univerjs_sheets_numfmt.getDateFormatOptions)().map((item) => item.value).includes(pattern) || [
+	return [
 		"date",
 		"datetime",
 		"time"
@@ -1703,20 +1715,15 @@ const isDatePanel = (pattern) => {
 };
 function DatePanel(props) {
 	const { onActionChange, onChange, defaultPattern } = props;
-	const options = (0, react.useMemo)(_univerjs_sheets_numfmt.getDateFormatOptions, []);
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const [suffix, setSuffix] = (0, react.useState)(() => {
-		if (defaultPattern) {
-			const item = options.find((item) => item.value === defaultPattern);
-			if (item) return item.value;
-		}
-		return options[0].value;
-	});
+	const locale = (0, _univerjs_ui.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
+	const [suffix, setSuffix] = (0, react.useState)(() => defaultPattern || (0, _univerjs_sheets_numfmt.getDateFormatOptions)(locale)[0].value);
+	const options = (0, react.useMemo)(() => (0, _univerjs_sheets_numfmt.getDateFormatOptions)(locale, suffix), [locale, suffix]);
 	(0, react.useLayoutEffect)(() => {
 		onActionChange(() => suffix);
 	}, [onActionChange, suffix]);
 	const handleChange = (v) => {
-		if (v === void 0) return;
+		if (typeof v !== "string") return;
 		setSuffix(v);
 		onChange(v);
 	};
@@ -1889,47 +1896,51 @@ const useNextTick = () => {
 
 //#endregion
 //#region src/views/SheetNumfmtPanel.tsx
+const TYPE_OPTIONS = [
+	{
+		label: "sheets-numfmt-ui.general",
+		component: GeneralPanel
+	},
+	{
+		label: "sheets-numfmt-ui.accounting",
+		component: AccountingPanel
+	},
+	{
+		label: "sheets-numfmt-ui.currency",
+		component: CurrencyPanel
+	},
+	{
+		label: "sheets-numfmt-ui.date",
+		component: DatePanel
+	},
+	{
+		label: "sheets-numfmt-ui.thousandthPercentile",
+		component: ThousandthPercentilePanel
+	},
+	{
+		label: "sheets-numfmt-ui.customFormat",
+		component: CustomFormat
+	}
+];
 function SheetNumfmtPanel(props) {
-	var _typeOptions$find;
+	const { row, col, defaultPattern } = props.value;
+	return /* @__PURE__ */ (0, react.createElement)(SheetNumfmtPanelContent, {
+		...props,
+		key: `${row}_${col}_${defaultPattern}`
+	});
+}
+function SheetNumfmtPanelContent(props) {
+	var _TYPE_OPTIONS$find;
+	const { onChange } = props;
 	const { defaultValue, defaultPattern, row, col } = props.value;
 	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	(0, _univerjs_ui.useObservable)(localeService.currentLocale$, localeService.getCurrentLocale());
 	const currentPatternRef = (0, react.useRef)(() => "");
 	const nextTick = useNextTick();
-	const typeOptions = (0, react.useMemo)(() => {
-		return [
-			{
-				label: "sheets-numfmt-ui.general",
-				component: GeneralPanel
-			},
-			{
-				label: "sheets-numfmt-ui.accounting",
-				component: AccountingPanel
-			},
-			{
-				label: "sheets-numfmt-ui.currency",
-				component: CurrencyPanel
-			},
-			{
-				label: "sheets-numfmt-ui.date",
-				component: DatePanel
-			},
-			{
-				label: "sheets-numfmt-ui.thousandthPercentile",
-				component: ThousandthPercentilePanel
-			},
-			{
-				label: "sheets-numfmt-ui.customFormat",
-				component: CustomFormat
-			}
-		].map((item) => ({
-			...item,
-			label: localeService.t(item.label)
-		}));
-	}, [localeService]);
 	const [type, setType] = (0, react.useState)(findDefaultType);
 	const [key, setKey] = (0, react.useState)(() => `${row}_${col}_${defaultPattern}`);
 	const { mark, userHabitCurrency } = useCurrencyOptions(() => setKey(`${row}_${col}_${defaultPattern}_userCurrency`));
-	const BusinessComponent = (_typeOptions$find = typeOptions.find((item) => item.label === type)) === null || _typeOptions$find === void 0 ? void 0 : _typeOptions$find.component;
+	const BusinessComponent = (_TYPE_OPTIONS$find = TYPE_OPTIONS.find((item) => item.label === type)) === null || _TYPE_OPTIONS$find === void 0 ? void 0 : _TYPE_OPTIONS$find.component;
 	function findDefaultType() {
 		return [
 			isGeneralPanel,
@@ -1937,25 +1948,25 @@ function SheetNumfmtPanel(props) {
 			isCurrencyPanel,
 			isDatePanel,
 			isThousandthPercentilePanel
-		].reduce((pre, curFn, index) => pre || (curFn(defaultPattern) ? typeOptions[index].label : ""), "") || typeOptions[0].label;
+		].reduce((pre, curFn, index) => pre || (curFn(defaultPattern) ? TYPE_OPTIONS[index].label : ""), "") || "sheets-numfmt-ui.customFormat";
 	}
-	const selectOptions = typeOptions.map((option) => ({
-		label: option.label,
+	const selectOptions = TYPE_OPTIONS.map((option) => ({
+		label: localeService.t(option.label),
 		value: option.label
 	}));
 	const handleSelect = (value) => {
 		setType(value);
-		nextTick(() => props.onChange({
+		nextTick(() => onChange({
 			type: "change",
 			value: currentPatternRef.current() || ""
 		}));
 	};
 	const handleChange = (0, react.useCallback)((v) => {
-		props.onChange({
+		onChange({
 			type: "change",
 			value: v
 		});
-	}, []);
+	}, [onChange]);
 	const handleActionChange = (0, react.useCallback)((action) => {
 		currentPatternRef.current = action;
 	}, []);
@@ -1963,13 +1974,13 @@ function SheetNumfmtPanel(props) {
 		const pattern = currentPatternRef.current() || "";
 		const currency = (0, _univerjs_sheets_numfmt.getCurrencyType)(pattern);
 		if (currency) mark(currency);
-		props.onChange({
+		onChange({
 			type: "confirm",
 			value: pattern
 		});
 	};
 	const handleCancel = () => {
-		props.onChange({
+		onChange({
 			type: "cancel",
 			value: ""
 		});
@@ -1980,14 +1991,6 @@ function SheetNumfmtPanel(props) {
 		defaultValue,
 		defaultPattern
 	};
-	(0, react.useEffect)(() => {
-		setType(findDefaultType());
-		setKey(`${row}_${col}_${defaultPattern}`);
-	}, [
-		row,
-		col,
-		defaultPattern
-	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _univerjs_design.clsx)("univer-flex univer-h-full univer-flex-col univer-justify-between univer-overflow-y-auto univer-pb-5", _univerjs_design.scrollbarClassName),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
@@ -2157,13 +2160,13 @@ UniverSheetsNumfmtUIPlugin = __decorate([
 
 //#endregion
 exports.SheetsNumfmtUIMenuSchema = menuSchema;
-Object.defineProperty(exports, 'UniverSheetsNumfmtMobileUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsNumfmtMobileUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsNumfmtMobileUIPlugin;
   }
 });
-Object.defineProperty(exports, 'UniverSheetsNumfmtUIPlugin', {
+Object.defineProperty(exports, "UniverSheetsNumfmtUIPlugin", {
   enumerable: true,
   get: function () {
     return UniverSheetsNumfmtUIPlugin;