feat: add BorderPanel & adjust the styling of ColorPicker

package.json

@@ -73,6 +73,9 @@
  "lint-staged": {
  "**/*.{js,ts,tsx}": [
  "eslint --fix"
+ ],
+ "**/*.less": [
+ "stylelint --fix"
  ]
  }
 }

packages/base-sheets/src/commands/commands/set-border-command.ts

@@ -34,6 +34,26 @@ function forEach(range: IRange, action: (row: number, column: number) => void):
  }
 }
 
+export interface ISetBorderBasicCommand {
+ value: {
+ id: string;
+ value: string;
+ };
+}
+export const SetBorderBasicCommand: ICommand<ISetBorderBasicCommand> = {
+ id: 'sheet.command.set-border-basic',
+ type: CommandType.COMMAND,
+ handler: async (accessor: IAccessor, params: ISetBorderBasicCommand) => {
+ const { value, id } = params.value;
+
+ if (!value || !id) return false;
+
+ const commandService = accessor.get(ICommandService);
+
+ return commandService.executeCommand(id, { value });
+ },
+};
+
 export interface ISetBorderPositionCommandParams {
  value: BorderType;
 }

packages/base-sheets/src/controllers/basic-worksheet.controller.ts

@@ -30,6 +30,7 @@ import { RemoveColCommand, RemoveRowCommand } from '../commands/commands/remove-
 import { RemoveSheetCommand } from '../commands/commands/remove-sheet.command';
 import { RemoveWorksheetMergeCommand } from '../commands/commands/remove-worksheet-merge.command';
 import {
+ SetBorderBasicCommand,
  SetBorderColorCommand,
  SetBorderCommand,
  SetBorderPositionCommand,
@@ -158,6 +159,7 @@ export class BasicWorksheetController extends Disposable implements IDisposable
  ResetBackgroundColorCommand,
  ResetTextColorCommand,
  SetBackgroundColorCommand,
+ SetBorderBasicCommand,
  SetBorderColorCommand,
  SetBorderCommand,
  SetBorderPositionCommand,

packages/base-sheets/src/index.ts

@@ -69,6 +69,7 @@ export type {
  ISetBorderStyleCommandParams,
 } from './commands/commands/set-border-command';
 export {
+ SetBorderBasicCommand,
  SetBorderColorCommand,
  SetBorderCommand,
  SetBorderPositionCommand,

packages/base-ui/package.json

@@ -46,11 +46,10 @@
  "build:doc": "storybook build"
  },
  "dependencies": {
- "@rc-component/trigger": "^1.18.1",
  "@univerjs/base-render": "workspace:*",
  "@univerjs/core": "workspace:*",
  "@univerjs/design": "workspace:*",
- "@univerjs/icons": "^0.1.7",
+ "@univerjs/icons": "^0.1.8",
  "@wendellhu/redi": "^0.12.11",
  "clsx": "^2.0.0",
  "localforage": "^1.10.0",

packages/base-ui/src/components/custom-label/CustomLabel.tsx

@@ -43,7 +43,12 @@ export function CustomLabel(props: ICustomLabelProps): JSX.Element | null {
  const labelName = isStringLabel ? label : label?.name;
 
  const CustomComponent = componentManager.get(labelName);
- CustomComponent && nodes.push(<CustomComponent key={index++} {...customProps} />);
+
+ if (CustomComponent) {
+ nodes.push(<CustomComponent key={index++} {...customProps} />);
+ } else {
+ nodes.push(<span key={index++}>{localeService.t(labelName)}</span>);
+ }
  }
  if (title) {
  nodes.push(<span key={index++}>{localeService.t(title)}</span>);

packages/base-ui/src/components/menu/Menu.tsx

@@ -8,17 +8,14 @@ import {
 import { MoreSingle } from '@univerjs/icons';
 import { useDependency } from '@wendellhu/redi/react-bindings';
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { isObservable, of } from 'rxjs';
 
-import { ComponentManager } from '../../Common';
 import {
- ICustomComponentOption,
  IDisplayMenuItem,
  IMenuButtonItem,
  IMenuItem,
  IMenuSelectorItem,
- isValueOptions,
  IValueOption,
  MenuGroup,
  MenuItemDefaultValueType,
@@ -36,7 +33,7 @@ export interface IBaseMenuProps {
  menuType?: string | string[];
 
  value?: string | number;
- options?: Array<IValueOption | ICustomComponentOption>;
+ options?: IValueOption[];
 
  onOptionSelect?: (option: IValueOption) => void;
 }
@@ -103,48 +100,36 @@ function MenuWrapper(props: IBaseMenuProps) {
 function MenuOptionsWrapper(props: IBaseMenuProps) {
  const { options, value, onOptionSelect, parentKey } = props;
 
- const componentManager = useDependency(ComponentManager);
+ return options?.map((option: IValueOption, index: number) => {
+ const key = `${parentKey}-${option.label ?? option.id}-${index}`;
 
- return options?.map((option: IValueOption | ICustomComponentOption, index: number) => {
- const isValueOption = isValueOptions(option);
- const key = `${parentKey}-${isValueOption ? option.label : option.id}-${index}`;
+  const onChange = (v: string | number) => {
+  onOptionSelect?.({ value: v, label: option?.label });
+ };
 
- if (isValueOption) {
- return (
- <DesignMenuItem
- key={key}
- eventKey={key}
- onClick={() => {
- onOptionSelect?.({
- ...option,
- });
- }}
- >
- <span className={styles.menuItemContent}>
- <CustomLabel
- selected={String(value) === String(option.value)} // use √ for select
- value={String(option.value)}
- label={option.label}
- title={typeof option.label === 'string' ? option.label : ''}
- icon={option.icon}
- />
- </span>
- </DesignMenuItem>
- );
- }
+ const handleClick = () => {
+ if (typeof option.value === 'undefined') return;
+
+ onOptionSelect?.({
+ ...option,
+ });
+ };
 
- const CustomComponent = componentManager.get(option.id) as React.ComponentType<any>;
+ const _className = clsx({
+ [styles.menuItemNoHover]: typeof option.label !== 'string' && !option.label?.hoverable,
+ });
 
  return (
- <DesignMenuItem key={key} eventKey={key} className={clsx(styles.menuItemCustom)}>
- <CustomComponent
- onValueChange={(v: string | number) => {
- onOptionSelect?.({
- value: v,
- label: option.id,
- });
- }}
- />
+ <DesignMenuItem key={key} eventKey={key} className={_className} onClick={handleClick}>
+ <span className={styles.menuItemContent}>
+ <CustomLabel
+ selected={typeof value !== 'undefined' && value === option.value}
+ value={option.value}
+ label={option.label}
+ icon={option.icon}
+ onChange={onChange}
+ />
+ </span>
  </DesignMenuItem>
  );
  });
@@ -189,13 +174,13 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
  <DesignMenuItem
  key={item.id}
  eventKey={item.id}
- // disabled={disabled} // FIXME disabled is not working
+ disabled={disabled}
  onClick={() => {
  onClick({ value: inputValue, id: item.id }); // merge cell
  }}
  >
  <span className={styles.menuItemContent}>
- <CustomLabel value={inputValue} title={title} label={label} icon={item.icon} onChange={onChange} />
+ <CustomLabel value={value} title={title} label={label} icon={item.icon} onChange={onChange} />
  </span>
  </DesignMenuItem>
  );
@@ -204,13 +189,9 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
  const renderSelectorType = () => {
  const item = menuItem as IDisplayMenuItem<IMenuSelectorItem>;
 
- let selections: Array<IValueOption | ICustomComponentOption>;
+ let selections: IValueOption[];
  if (isObservable(item.selections)) {
- selections = useObservable<Array<IValueOption | ICustomComponentOption>>(
- item.selections || of([]),
- [],
- true
- );
+ selections = useObservable<IValueOption[]>(item.selections || of([]), [], true);
  } else {
  selections = item.selections || [];
  }
@@ -241,7 +222,7 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
  menuType={item.id}
  options={selections}
  onOptionSelect={(v) => {
- onClick({ value: v.value, id: item.id }); // border style don't trigger hide menu, set show true
+ onClick({ value: v.value, id: item.id });
  }}
  />
  )}
@@ -255,9 +236,9 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
  <CustomLabel
  title={item.title}
  value={inputValue}
- onChange={onChange}
  icon={item.icon}
  label={item.label}
+ onChange={onChange}
  />
  {item.shortcut && ` (${item.shortcut})`}
  </span>
@@ -267,6 +248,7 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
 
  const renderSubItemsType = () => {
  const item = menuItem as IDisplayMenuItem<IMenuSelectorItem>;
+ console.log(item);
 
  return (
  <DesignSubMenu
@@ -275,7 +257,7 @@ function MenuItem({ menuItem, onClick }: IMenuItemProps) {
  popupOffset={[18, 0]}
  title={
  <span className={styles.menuItemContent}>
- <CustomLabel title={item.title} value={item.title} icon={item.icon} label={item.label} />
+ <CustomLabel title={item.title} icon={item.icon} label={item.label} onChange={onChange} />
  </span>
  }
  expandIcon={<MoreSingle className={styles.menuItemMoreIcon} />}

packages/base-ui/src/components/menu/index.module.less

@@ -1,6 +1,6 @@
 .menu {
  &-item {
- &-custom {
+ &-no-hover {
  background: none;
  }
 

packages/base-ui/src/index.ts

@@ -26,15 +26,12 @@ export {
 export { DesktopDialogService } from './services/dialog/desktop-dialog.service';
 export { IDialogService } from './services/dialog/dialog.service';
 export {
- type ICustomComponentOption,
  type ICustomComponentProps,
  type IDisplayMenuItem,
  type IMenuButtonItem,
  type IMenuItem,
  type IMenuItemFactory,
  type IMenuSelectorItem,
- isCustomComponentOption,
- isValueOptions,
  type IValueOption,
  MenuGroup,
  MenuItemType,

packages/base-ui/src/services/menu/menu.ts

@@ -62,8 +62,9 @@ interface IMenuItemBase<V> {
  | string
  | {
  name: string;
- props?: Record<string, string | number>;
- };
+ hoverable?: boolean;
+ props?: Record<string, string | number | Array<{ [x: string | number]: string }>>;
+ }; // custom component, send to CustomLabel label property
 
  hidden$?: Observable<boolean>;
  disabled$?: Observable<boolean>;
@@ -78,12 +79,13 @@ export interface IMenuButtonItem<V = undefined> extends IMenuItemBase<V> {
 }
 
 export interface IValueOption {
- value: string | number;
- label:
+ value?: string | number;
+ label?:
  | string
  | {
  name: string;
- props?: Record<string, string | number>;
+ hoverable?: boolean;
+ props?: Record<string, string | number | Array<{ [x: string | number]: string }>>;
  }; // custom component, send to CustomLabel label property
  icon?: string;
  tooltip?: string;
@@ -92,24 +94,11 @@ export interface IValueOption {
  id?: string; // command id
 }
 
-export function isValueOptions(v: IValueOption | ICustomComponentOption): v is IValueOption {
- return typeof (v as IValueOption).value !== 'undefined';
-}
-
-export interface ICustomComponentOption {
- id: string;
- disabled?: boolean;
-}
-
 export interface ICustomComponentProps<T> {
  value: T;
  onChange: (v: T) => void;
 }
 
-export function isCustomComponentOption(v: IValueOption | ICustomComponentOption): v is ICustomComponentOption {
- return typeof (v as ICustomComponentOption).id !== 'undefined';
-}
-
 export interface IMenuSelectorItem<V = MenuItemDefaultValueType> extends IMenuItemBase<V> {
  type: MenuItemType.SELECTOR | MenuItemType.SUBITEMS;
 
@@ -118,9 +107,7 @@ export interface IMenuSelectorItem<V = MenuItemDefaultValueType> extends IMenuIt
  // 一个是一个特殊组件，比如 color picker，选中后直接使用其 value 触发 command
  // 一个是其他 menu 的 id，直接渲染成其他的 menu
  /** Options or IDs of registered components. */
- selections?:
- | Array<IValueOption | ICustomComponentOption>
- | Observable<Array<IValueOption | ICustomComponentOption>>;
+ selections?: IValueOption[] | Observable<IValueOption[]>;
 }
 
 export function isMenuSelectorItem<T extends MenuItemDefaultValueType>(v: IMenuItem): v is IMenuSelectorItem<T> {

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

@@ -93,10 +93,10 @@
  height: @toolbar-btn-size;
  padding: 0 var(--padding-xs);
 
- border-radius: var(--border-radius-base);
-
  font-size: var(--font-size-xl);
 
+ border-radius: var(--border-radius-base);
+
  &:hover {
  background-color: rgb(var(--grey-100));
  border-radius: var(--border-radius-base);

packages/design/package.json

@@ -47,7 +47,7 @@
  "dependencies": {
  "@rc-component/color-picker": "^1.4.1",
  "@rc-component/trigger": "^1.18.1",
- "@univerjs/icons": "^0.1.7",
+ "@univerjs/icons": "^0.1.8",
  "clsx": "^2.0.0",
  "rc-dialog": "^9.3.4",
  "rc-dropdown": "^4.1.0",

packages/design/src/components/avatar/__tests__/index.spec.tsx

@@ -14,4 +14,10 @@ describe('Avatar', () => {
  const childrenElement = getByText('Test');
  expect(childrenElement).not.toBeNull();
  });
+
+ test('renders the image', () => {
+ const { container } = render(<Avatar src="test.png" />);
+
+ expect(container.querySelector('img')).not.toBeNull();
+ });
 });