fix(ui): fix toolbar responsiveness on small screens

packages/design/src/components/dropdown/Dropdown.tsx

@@ -36,6 +36,12 @@ export interface IDropdownProps {
  */
  visible?: boolean;
 
+ /**
+ * Whether to force render the dropdown
+ * @default false
+ */
+ forceRender?: boolean;
+
  /**
  * The trigger mode which executes the dropdown action
  * @default ['click']

packages/sheets-formula/src/views/prompt/search-function/SearchFunction.tsx

@@ -155,7 +155,7 @@ export function SearchFunction() {
  });
  }
 
- return (
+ return searchList.length > 0 && (
  <Popup visible={visible} offset={offset}>
  <ul className={styles.formulaSearchFunction} ref={ulRef}>
  {searchList.map((item, index) => (

packages/sheets-ui/src/views/formula-bar/index.module.less

@@ -13,8 +13,8 @@
  box-sizing: border-box;
  width: 80px;
  height: 100%;
- // padding: 6px 0;
  position: relative;
+ flex-shrink: 0;
 
  &-input {
  height: 100%;

packages/ui/src/locale/en-US.ts

@@ -25,6 +25,7 @@ const locale: typeof zhCN = {
  view: 'View',
  others: 'Others',
  },
+ more: 'More',
  fontFamily: {
  TimesNewRoman: 'Times New Roman',
  Arial: 'Arial',

packages/ui/src/locale/zh-CN.ts

@@ -23,6 +23,7 @@ const locale = {
  view: '视图',
  others: '其他',
  },
+ more: '更多',
  fontFamily: {
  TimesNewRoman: 'Times New Roman',
  Arial: 'Arial',

packages/ui/src/views/components/context-menu/ContextMenu.tsx

@@ -63,16 +63,18 @@ export function ContextMenu() {
  return (
  <Popup visible={visible} offset={offset}>
  <section onPointerDown={(e) => e.stopPropagation()}>
- <Menu
- menuType={[menuType]}
- onOptionSelect={(params) => {
- const { label: commandId, value } = params;
- commandService && commandService.executeCommand(commandId as string, { value });
- const textSelectionRenderManager = injector.get(ITextSelectionRenderManager);
- textSelectionRenderManager.focus();
- setVisible(false);
- }}
- />
+ {menuType && (
+ <Menu
+ menuType={[menuType]}
+ onOptionSelect={(params) => {
+ const { label: commandId, value } = params;
+ commandService && commandService.executeCommand(commandId as string, { value });
+ const textSelectionRenderManager = injector.get(ITextSelectionRenderManager);
+ textSelectionRenderManager.focus();
+ setVisible(false);
+ }}
+ />
+ )}
  </section>
  </Popup>
  );

packages/ui/src/views/components/doc-bars/Toolbar.tsx

@@ -22,6 +22,7 @@ import clsx from 'clsx';
 import type { ComponentType } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
+import { combineLatest, map } from 'rxjs';
 import type { IDisplayMenuItem, IMenuItem } from '../../../services/menu/menu';
 import { MenuGroup, MenuPosition } from '../../../services/menu/menu';
 import { IMenuService } from '../../../services/menu/menu.service';
@@ -55,7 +56,6 @@ export function Toolbar(props: IToolbarProps) {
  const [position, setPosition] = useState<MenuPosition>(MenuPosition.TOOLBAR_START);
 
  const toolbarRef = useRef<HTMLDivElement>(null);
- const toolbarContainerRef = useRef<HTMLDivElement>(null);
  const toolbarItemRefs = useRef<
  Record<
  string,
@@ -68,6 +68,24 @@ export function Toolbar(props: IToolbarProps) {
 
  const [group, setGroup] = useState<IMenuGroup[]>([]);
  const [collapsedId, setCollapsedId] = useState<string[]>([]);
+ const [visibleItems, setVisibleItems] = useState<IDisplayMenuItem<IMenuItem>[]>([]);
+
+ useEffect(() => {
+ const activeItems = group.find((g) => g.name === position)?.menuItems ?? [];
+ const filteredItems$ = combineLatest(
+ activeItems.map((item) => item.hidden$).filter((item) => !!item)
+ ).pipe(
+ map((hiddenValues) => activeItems.filter((_, index) => !hiddenValues[index]))
+ );
+
+ const subscribe = filteredItems$.subscribe((items) => {
+ setVisibleItems(items);
+ });
+
+ return () => {
+ subscribe.unsubscribe();
+ };
+ }, [group]);
 
  useEffect(() => {
  const listener = menuService.menuChanged$.subscribe(() => {
@@ -94,29 +112,31 @@ export function Toolbar(props: IToolbarProps) {
  useEffect(() => {
  function resize() {
  const wrapperWidth = toolbarRef.current?.clientWidth ?? 0;
- const containerWidth = toolbarContainerRef.current?.clientWidth ?? 0;
+ const GAP = 8;
 
- const itemWidths = Object.entries(toolbarItemRefs.current).map(([key, ref]) => {
- return {
- key: ref.key,
- width: ref.el?.clientWidth,
- };
- });
+ const itemWidths = Object.entries(toolbarItemRefs.current)
+ .filter(([_, ref]) => {
+ return ref.el && ref.key && visibleItems.find((item) => item.id === ref.key);
+ })
+ .map(([_, ref]) => {
+ return {
+ key: ref.key,
+ width: ref.el?.clientWidth + GAP,
+ };
+ });
 
- const gap = 8;
+ const collapsedId: string[] = [];
 
- const collapsedIds: string[] = [];
+ let currentWidth = 168;
+ for (const item of itemWidths) {
+ currentWidth += item.width;
 
- let currentWidth = containerWidth + 120;
- for (let i = itemWidths.length - 1; i >= 0; i--) {
- const item = itemWidths[i];
- currentWidth -= item.width + gap;
- if (currentWidth >= wrapperWidth) {
- collapsedIds.push(item.key);
+ if (currentWidth > wrapperWidth) {
+ collapsedId.push(item.key);
  }
  }
 
- setCollapsedId(collapsedIds);
+ setCollapsedId(collapsedId);
  }
 
  resize();
@@ -127,25 +147,23 @@ export function Toolbar(props: IToolbarProps) {
  return () => {
  observer.unobserve(document.body);
  };
- }, [group]);
+ }, [visibleItems, group]);
 
  const toolbarGroups = useMemo(() => {
- return (
- group
- .find((g) => g.name === position)
- ?.menuItems.reduce(
- (acc, item) => {
- const key = item.group ?? MenuGroup.TOOLBAR_OTHERS;
- if (!acc[key]) {
- acc[key] = [];
- }
-
- acc[key].push(item);
- return acc;
- },
- {} as Record<MenuGroup, Array<IDisplayMenuItem<IMenuItem>>>
- ) ?? ({} as Record<MenuGroup, Array<IDisplayMenuItem<IMenuItem>>>)
- );
+ return group
+ .find((g) => g.name === position)
+ ?.menuItems.reduce(
+ (acc, item) => {
+ const key = item.group ?? MenuGroup.TOOLBAR_OTHERS;
+ if (!acc[key]) {
+ acc[key] = [];
+ }
+
+ acc[key].push(item);
+ return acc;
+ },
+ {} as Record<MenuGroup, Array<IDisplayMenuItem<IMenuItem>>>
+ ) ?? ({} as Record<MenuGroup, Array<IDisplayMenuItem<IMenuItem>>>);
  }, [group]);
 
  const hasHeaderMenu = useMemo(() => (headerMenuComponents && headerMenuComponents.size > 0) || group.length > 1, [headerMenuComponents, group]);
@@ -157,17 +175,19 @@ export function Toolbar(props: IToolbarProps) {
  <header className={styles.headerbar}>
  <div className={styles.menubar}>
  {group.length > 1 &&
- group.map((item, index) => (
- <a
- key={index}
- className={clsx(styles.menubarItem, {
- [styles.menubarItemActive]: item.name === position,
- })}
- onClick={() => setPosition(item.name)}
- >
- {localeService.t(item.name)}
- </a>
- ))}
+ group.map((item, index) => (
+ <a
+ key={index}
+ className={clsx(styles.menubarItem, {
+ [styles.menubarItemActive]: item.name === position,
+ })}
+ onClick={() => {
+ setPosition(item.name);
+ }}
+ >
+ {localeService.t(item.name)}
+ </a>
+ ))}
  </div>
  <div className={styles.headerMenu}>
  <ComponentContainer components={headerMenuComponents} />
@@ -178,18 +198,26 @@ export function Toolbar(props: IToolbarProps) {
 
  <div ref={toolbarRef} className={styles.toolbar}>
  <div className={styles.toolbarContainer}>
- {Object.entries(toolbarGroups).map(([key, item]) => (
- <div key={key} className={styles.toolbarGroup}>
- {item.map(
- (subItem) =>
- !collapsedId.includes(subItem.id) && <ToolbarItem key={subItem.id} {...subItem} />
- )}
- </div>
- ))}
+ {Object.entries(toolbarGroups)
+ .filter(([_, item]) => {
+ const count = item.filter((subItem) => !collapsedId.includes(subItem.id)).length;
+ return count;
+ })
+ .map(([key, item]) => (
+ <div key={key} className={styles.toolbarGroup}>
+ {item.map(
+ (subItem) =>
+ !collapsedId.includes(subItem.id) && (
+ <ToolbarItem key={subItem.id} {...subItem} />
+ )
+ )}
+ </div>
+ ))}
 
  {collapsedId.length > 0 && (
- <Tooltip title="更多" placement="bottom">
+ <Tooltip title={localeService.t('more')} placement="bottom">
  <Dropdown
+ forceRender
  className={styles.toolbarMore}
  overlay={(
  <div className={styles.toolbarMoreContainer} onClick={(e) => e.stopPropagation()}>
@@ -217,7 +245,6 @@ export function Toolbar(props: IToolbarProps) {
 
  {/* fake toolbar for calculating overflow width */}
  <div
- ref={toolbarContainerRef}
  className={styles.toolbarContainer}
  style={{
  position: 'absolute',

packages/ui/src/views/components/doc-bars/ToolbarItem.tsx

@@ -267,9 +267,7 @@ export const ToolbarItem = forwardRef((props: IDisplayMenuItem<IMenuItem>, ref:
 
  // ref component
  return hidden
- ? (
- <></>
- )
+ ? null
  : (
  <Tooltip
  ref={ref}

packages/ui/src/views/components/doc-bars/index.module.less

@@ -86,6 +86,7 @@
  border-bottom: 1px solid rgb(var(--border-color));
 
  &-container {
+ padding: 0 var(--padding-lg);
  display: flex;
  gap: var(--margin-xs);
  align-items: center;
@@ -94,6 +95,8 @@
  box-sizing: border-box;
  height: 100%;
  margin: 0 auto;
+ max-width: 100%;
+ overflow: hidden;
  }
 
  &-more {
@@ -124,6 +127,11 @@
  display: flex;
  gap: var(--margin-xs);
  align-items: center;
+ flex-shrink: 0;
+
+ > * {
+ flex-shrink: 0;
+ }
 
  &:not(:last-child, :empty) {
  &::after {
@@ -135,6 +143,7 @@
  height: 20px;
 
  background-color: rgb(var(--border-color));
+ flex-shrink: 0;
  }
  }
  }