fix(sheet): add disabled status on toolbar menu items (#993)

* fix: add toolbar icon disabled style * fix: disable handler * fix: code style * fix: ts * fix: code style
dream-num · Jan 5, 2024 · 16a9fbe · 16a9fbe
1 parent cb7c923
commit 16a9fbe
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 83 deletions.
diff --git a/packages/sheets-formula/src/controllers/menu.ts b/packages/sheets-formula/src/controllers/menu.ts
@@ -15,6 +15,7 @@
  */
 
 import { UniverInstanceType } from '@univerjs/core';
+import { getCurrentSheetDisabled$ } from '@univerjs/sheets';
 import { PASTE_SPECIAL_MENU_ID } from '@univerjs/sheets-ui';
 import type { IMenuItem } from '@univerjs/ui';
 import { getMenuHiddenObservable, MenuGroup, MenuItemType, MenuPosition } from '@univerjs/ui';
@@ -60,6 +61,7 @@ export function InsertFunctionMenuItemFactory(accessor: IAccessor): IMenuItem {
  },
  ],
  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.SHEET),
+ disabled$: getCurrentSheetDisabled$(accessor),
  };
 }
 

diff --git a/packages/sheets-numfmt/src/menu/menu.ts b/packages/sheets-numfmt/src/menu/menu.ts
@@ -16,7 +16,13 @@
 
 import { ICommandService, IUniverInstanceService, LocaleService, UniverInstanceType } from '@univerjs/core';
 import { AddDigitsSingle, MoreDownSingle, ReduceDigitsSingle, RmbSingle } from '@univerjs/icons';
-import { INumfmtService, RemoveNumfmtMutation, SelectionManagerService, SetNumfmtMutation } from '@univerjs/sheets';
+import {
+ getCurrentSheetDisabled$,
+ INumfmtService,
+ RemoveNumfmtMutation,
+ SelectionManagerService,
+ SetNumfmtMutation,
+} from '@univerjs/sheets';
 import type { ComponentManager, IMenuSelectorItem } from '@univerjs/ui';
 import { getMenuHiddenObservable, MenuGroup, MenuItemType, MenuPosition } from '@univerjs/ui';
 import type { IAccessor } from '@wendellhu/redi';
@@ -45,6 +51,7 @@ export const CurrencyMenuItem = (componentManager: ComponentManager) => {
  group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
  positions: [MenuPosition.TOOLBAR_START],
  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.SHEET),
+ disabled$: getCurrentSheetDisabled$(accessor),
  };
  };
 };
@@ -61,6 +68,7 @@ export const AddDecimalMenuItem = (componentManager: ComponentManager) => {
  positions: [MenuPosition.TOOLBAR_START],
  group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.SHEET),
+ disabled$: getCurrentSheetDisabled$(accessor),
  });
 };
 export const SubtractDecimalMenuItem = (componentManager: ComponentManager) => {
@@ -75,6 +83,7 @@ export const SubtractDecimalMenuItem = (componentManager: ComponentManager) => {
  group: MenuGroup.TOOLBAR_FORMULAS_INSERT,
  positions: [MenuPosition.TOOLBAR_START],
  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.SHEET),
+ disabled$: getCurrentSheetDisabled$(accessor),
  });
 };
 
@@ -149,6 +158,7 @@ export const FactoryOtherMenuItem = (componentManager: ComponentManager) => {
  ],
  value$,
  hidden$: getMenuHiddenObservable(_accessor, UniverInstanceType.SHEET),
+ disabled$: getCurrentSheetDisabled$(_accessor),
  } as IMenuSelectorItem;
  };
 };
diff --git a/packages/sheets-ui/src/components/font-size/FontSize.tsx b/packages/sheets-ui/src/components/font-size/FontSize.tsx
@@ -15,13 +15,16 @@
  */
 
 import { InputNumber } from '@univerjs/design';
+import { useObservable } from '@univerjs/ui';
 import React, { useMemo, useState } from 'react';
+import { Observable } from 'rxjs';
 
 import styles from './index.module.less';
 import type { IFontSizeProps } from './interface';
 
 export const FontSize = (props: IFontSizeProps) => {
- const { value, min, max, onChange } = props;
+ const { value, min, max, onChange, disabled$ } = props;
+ const disabled = useObservable(disabled$ ?? new Observable<boolean>((sub) => sub.next(false)));
  const [realValue, setRealValue] = useState<number>(Number(value ?? 0));
 
  const _value = useMemo(() => Number(value ?? realValue), [value]);
@@ -50,6 +53,7 @@ export const FontSize = (props: IFontSizeProps) => {
  max={max}
  onKeyDown={handleStopPropagation}
  onChange={handleChange}
+ disabled={disabled}
  />
  </div>
  );

diff --git a/packages/sheets-ui/src/components/font-size/interface.ts b/packages/sheets-ui/src/components/font-size/interface.ts
@@ -15,6 +15,7 @@
  */
 
 import type { ICustomComponentProps } from '@univerjs/ui';
+import type { Observable } from 'rxjs';
 
 import { COMPONENT_PREFIX } from '../const';
 
@@ -28,4 +29,6 @@ export interface IFontSizeProps extends ICustomComponentProps<string> {
  max: number;
 
  onChange: (value: string) => void;
+
+ disabled$?: Observable<boolean>;
 }
diff --git a/packages/sheets-ui/src/controllers/menu/border.menu.ts b/packages/sheets-ui/src/controllers/menu/border.menu.ts
@@ -16,7 +16,7 @@
 
 import { ICommandService, UniverInstanceType } from '@univerjs/core';
 import type { IBorderInfo } from '@univerjs/sheets';
-import { BorderStyleManagerService, SetBorderBasicCommand } from '@univerjs/sheets';
+import { BorderStyleManagerService, getCurrentSheetDisabled$, SetBorderBasicCommand } from '@univerjs/sheets';
 import type { IMenuSelectorItem } from '@univerjs/ui';
 import { getMenuHiddenObservable, MenuGroup, MenuItemType, MenuPosition } from '@univerjs/ui';
 import type { IAccessor } from '@wendellhu/redi';
@@ -29,6 +29,8 @@ export function CellBorderSelectorMenuItemFactory(accessor: IAccessor): IMenuSel
 
  const borderStyleManagerService = accessor.get(BorderStyleManagerService);
 
+ const disabled$ = getCurrentSheetDisabled$(accessor);
+
  return {
  id: SetBorderBasicCommand.id,
  icon: new Observable<string>((subscriber) => {
@@ -69,5 +71,6 @@ export function CellBorderSelectorMenuItemFactory(accessor: IAccessor): IMenuSel
  ],
  value$: borderStyleManagerService.borderInfo$,
  hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.SHEET),
+ disabled$,
  };
 }