feat(numfmt): support percent (#1457)

dream-num · Mar 2, 2024 · 22b9c0c · 22b9c0c
1 parent 7c3ad49
commit 22b9c0c
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 11 deletions.
diff --git a/packages/sheets-numfmt/src/commands/commands/add-decimal.command.ts b/packages/sheets-numfmt/src/commands/commands/add-decimal.command.ts
@@ -19,7 +19,7 @@ import { CommandType, ICommandService, IUniverInstanceService, Range } from '@un
 import { INumfmtService, SelectionManagerService } from '@univerjs/sheets';
 import type { IAccessor } from '@wendellhu/redi';
 
-import { getDecimalFromPattern, isPatternEqualWithoutDecimal, setPatternDecimal } from '../../utils/decimal';
+import { getDecimalFromPattern, setPatternDecimal } from '../../utils/decimal';
 import type { ISetNumfmtCommandParams } from './set-numfmt.command';
 import { SetNumfmtCommand } from './set-numfmt.command';
 
@@ -53,17 +53,17 @@ export const AddDecimalCommand: ICommand = {
             });
         });
         const decimals = maxDecimals + 1;
-        const pattern = setPatternDecimal(`0${decimals > 0 ? '.0' : ''}`, decimals);
+        const defaultPattern = setPatternDecimal(`0${decimals > 0 ? '.0' : ''}`, decimals);
         const values: ISetNumfmtCommandParams['values'] = [];
 
         selections.forEach((selection) => {
             Range.foreach(selection.range, (row, col) => {
                 const numfmtValue = numfmtService.getValue(unitId, subUnitId, row, col);
-                if (!numfmtValue || isPatternEqualWithoutDecimal(numfmtValue.pattern, '0.0')) {
+                if (!numfmtValue) {
                     values.push({
                         row,
                         col,
-                        pattern,
+                        pattern: defaultPattern,
                     });
                 } else {
                     const decimals = getDecimalFromPattern(numfmtValue.pattern);

diff --git a/packages/sheets-numfmt/src/commands/commands/set-percent.command.ts b/packages/sheets-numfmt/src/commands/commands/set-percent.command.ts
@@ -0,0 +1,48 @@
+/**
+ * Copyright 2023-present DreamNum Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ICommand } from '@univerjs/core';
+import { CommandType, ICommandService, Range } from '@univerjs/core';
+import { SelectionManagerService } from '@univerjs/sheets';
+import type { IAccessor } from '@wendellhu/redi';
+
+import type { ISetNumfmtCommandParams } from './set-numfmt.command';
+import { SetNumfmtCommand } from './set-numfmt.command';
+
+export const SetPercentCommand: ICommand = {
+    id: 'sheet.command.numfmt.set.percent',
+    type: CommandType.COMMAND,
+    handler: async (accessor: IAccessor) => {
+        const commandService = accessor.get(ICommandService);
+        const selectionManagerService = accessor.get(SelectionManagerService);
+
+        const selections = selectionManagerService.getSelections();
+        if (!selections || !selections.length) {
+            return false;
+        }
+        const values: ISetNumfmtCommandParams['values'] = [];
+
+        const suffix = '0%';
+
+        selections.forEach((selection) => {
+            Range.foreach(selection.range, (row, col) => {
+                values.push({ row, col, pattern: suffix, type: 'percent' });
+            });
+        });
+        const result = await commandService.executeCommand(SetNumfmtCommand.id, { values });
+        return result;
+    },
+};
diff --git a/packages/sheets-numfmt/src/commands/commands/subtract-decimal.command.ts b/packages/sheets-numfmt/src/commands/commands/subtract-decimal.command.ts
@@ -19,7 +19,7 @@ import { CommandType, ICommandService, IUniverInstanceService, Range } from '@un
 import { INumfmtService, SelectionManagerService } from '@univerjs/sheets';
 import type { IAccessor } from '@wendellhu/redi';
 
-import { getDecimalFromPattern, isPatternEqualWithoutDecimal, setPatternDecimal } from '../../utils/decimal';
+import { getDecimalFromPattern, setPatternDecimal } from '../../utils/decimal';
 import type { ISetNumfmtCommandParams } from './set-numfmt.command';
 import { SetNumfmtCommand } from './set-numfmt.command';
 
@@ -54,17 +54,17 @@ export const SubtractDecimalCommand: ICommand = {
         });
         const decimals = maxDecimals - 1;
 
-        const pattern = setPatternDecimal(`0${decimals > 0 ? '.0' : '.'}`, decimals);
+        const defaultPattern = setPatternDecimal(`0${decimals > 0 ? '.0' : '.'}`, decimals);
         const values: ISetNumfmtCommandParams['values'] = [];
 
         selections.forEach((selection) => {
             Range.foreach(selection.range, (row, col) => {
                 const numfmtValue = numfmtService.getValue(unitId, subUnitId, row, col);
-                if (!numfmtValue || isPatternEqualWithoutDecimal(numfmtValue.pattern, '0.0')) {
+                if (!numfmtValue) {
                     values.push({
                         row,
                         col,
-                        pattern,
+                        pattern: defaultPattern,
                     });
                 } else {
                     const decimals = getDecimalFromPattern(numfmtValue.pattern);

diff --git a/packages/sheets-numfmt/src/controllers/numfmt.controller.ts b/packages/sheets-numfmt/src/controllers/numfmt.controller.ts
@@ -59,6 +59,7 @@ import { OpenNumfmtPanelOperator } from '../commands/operations/open.numfmt.pane
 import type { ISheetNumfmtPanelProps } from '../components/index';
 import { SheetNumfmtPanel } from '../components/index';
 import { getPatternPreview, getPatternType } from '../utils/pattern';
+import { SetPercentCommand } from '../commands/commands/set-percent.command';
 import type { INumfmtController } from './type';
 
 @OnLifecycle(LifecycleStages.Rendered, NumfmtController)
@@ -171,6 +172,7 @@ export class NumfmtController extends Disposable implements INumfmtController {
             AddDecimalCommand,
             SubtractDecimalCommand,
             SetCurrencyCommand,
+            SetPercentCommand,
             OpenNumfmtPanelOperator,
             CloseNumfmtPanelOperator,
             SetNumfmtCommand,

diff --git a/packages/sheets-numfmt/src/controllers/numfmt.menu.controller.ts b/packages/sheets-numfmt/src/controllers/numfmt.menu.controller.ts
@@ -18,7 +18,7 @@ import { Disposable, LifecycleStages, OnLifecycle } from '@univerjs/core';
 import { ComponentManager, IMenuService } from '@univerjs/ui';
 import { Inject, Injector } from '@wendellhu/redi';
 
-import { AddDecimalMenuItem, CurrencyMenuItem, FactoryOtherMenuItem, SubtractDecimalMenuItem } from '../menu/menu';
+import { AddDecimalMenuItem, CurrencyMenuItem, FactoryOtherMenuItem, PercentMenuItem, SubtractDecimalMenuItem } from '../menu/menu';
 
 @OnLifecycle(LifecycleStages.Rendered, NumfmtMenuController)
 export class NumfmtMenuController extends Disposable {
@@ -32,7 +32,7 @@ export class NumfmtMenuController extends Disposable {
     }
 
     private _initMenu() {
-        [AddDecimalMenuItem, SubtractDecimalMenuItem, CurrencyMenuItem, FactoryOtherMenuItem]
+        [PercentMenuItem, AddDecimalMenuItem, SubtractDecimalMenuItem, CurrencyMenuItem, FactoryOtherMenuItem]
             .map((factory) => factory(this._componentManager))
             .forEach((configFactory) => {
                 this.disposeWithMe(this._menuService.addMenuItem(configFactory(this._injector)));

diff --git a/packages/sheets-numfmt/src/menu/menu.ts b/packages/sheets-numfmt/src/menu/menu.ts
@@ -15,7 +15,7 @@
  */
 
 import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
-import { AddDigitsSingle, MoreDownSingle, ReduceDigitsSingle, RmbSingle } from '@univerjs/icons';
+import { AddDigitsSingle, MoreDownSingle, PercentSingle, ReduceDigitsSingle, RmbSingle } from '@univerjs/icons';
 import {
     getCurrentSheetDisabled$,
     INumfmtService,
@@ -36,6 +36,7 @@ import { SubtractDecimalCommand } from '../commands/commands/subtract-decimal.co
 import { OpenNumfmtPanelOperator } from '../commands/operations/open.numfmt.panel.operation';
 import { MoreNumfmtType, Options } from '../components/more-numfmt-type/MoreNumfmtType';
 import { isPatternEqualWithoutDecimal } from '../utils/decimal';
+import { SetPercentCommand } from '../commands/commands/set-percent.command';
 
 export const CurrencyMenuItem = (componentManager: ComponentManager) => {
     const iconKey = 'icon-rmbSingle';
@@ -88,6 +89,22 @@ export const SubtractDecimalMenuItem = (componentManager: ComponentManager) => {
     });
 };
 
+export const PercentMenuItem = (componentManager: ComponentManager) => {
+    const iconKey = 'icon-PercentSingle';
+    componentManager.register(iconKey, PercentSingle);
+    return (accessor: IAccessor) => ({
+        icon: iconKey,
+        id: SetPercentCommand.id,
+        title: 'sheet.numfmt.percent',
+        tooltip: 'sheet.numfmt.percent',
+        type: MenuItemType.BUTTON,
+        group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
+        positions: [MenuPosition.TOOLBAR_START],
+        hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.SHEET),
+        disabled$: getCurrentSheetDisabled$(accessor),
+    });
+};
+
 export const FactoryOtherMenuItem = (componentManager: ComponentManager) => {
     const moreTypeKey = 'sheet.numfmt.moreNumfmtType';
     const optionsKey = 'sheet.numfmt.moreNumfmtType.options';