@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/toolbar/components/button.tsx

@@ -0,0 +1,440 @@
+import classnames from 'classnames';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { Button } from '@opensumi/ide-components';
+import { BasicEvent, Disposable, Emitter, IDisposable } from '@opensumi/ide-core-common';
+
+import { DomListener } from '../../dom';
+import { PreferenceService } from '../../preferences';
+import { useInjectable } from '../../react-hooks';
+import { AppConfig, ConfigProvider } from '../../react-providers/config-provider';
+import {
+  IToolbarActionReactElement,
+  IToolbarActionElementProps,
+  IToolbarActionBtnProps,
+  IToolbarActionBtnDelegate,
+  IToolbarActionBtnState,
+  IToolbarPopoverStyle,
+  IToolbarPopoverRegistry,
+} from '../types';
+
+enum BUTTON_TITLE_STYLE {
+  HORIZONTAL = 'horizontal',
+  VERTICAL = 'vertical',
+}
+
+export const ToolbarActionBtn = (props: IToolbarActionBtnProps & IToolbarActionElementProps) => {
+  const context = useInjectable<AppConfig>(AppConfig);
+  const ref = React.useRef<HTMLDivElement>();
+  const [viewState, setViewState] = React.useState(props.defaultState || 'default');
+  const [title, setTitle] = React.useState(undefined);
+  const preferenceService: PreferenceService = useInjectable(PreferenceService);
+  const [, updateState] = React.useState<any>();
+  const forceUpdate = React.useCallback(() => updateState({}), []);
+
+  const { defaultButtonStyle = {} } = props.preferences || {};
+
+  const styles: IToolbarActionBtnState = {
+    title: props.title,
+    iconClass: props.iconClass,
+    showTitle: preferenceService.get('toolbar.buttonDisplay') !== 'icon',
+    btnStyle: 'button',
+    ...defaultButtonStyle,
+    ...props.defaultStyle,
+    ...((props.styles || {})[viewState] || {}),
+  };
+  if (title) {
+    styles.title = title;
+  }
+  if (styles.btnStyle !== 'button') {
+    styles.showTitle = false;
+  }
+
+  const delegate = React.useRef<ToolbarBtnDelegate | undefined>();
+  const inDropDownRef = React.useRef<boolean>(props.inDropDown);
+  React.useEffect(() => {
+    inDropDownRef.current = props.inDropDown;
+  }, [props.inDropDown]);
+
+  React.useEffect(() => {
+    const disposer = new Disposable();
+    disposer.addDispose(
+      preferenceService.onSpecificPreferenceChange('toolbar.buttonDisplay', () => {
+        forceUpdate();
+      }),
+    );
+    if (ref.current && props.delegate) {
+      // 如果是在 dropdown 中，popover 元素将显示在 more 按钮上
+      const getPopoverParent = () =>
+        (inDropDownRef.current
+          ? document.querySelector(`#toolbar-location-${props.location} .kt-toolbar-more`)
+          : ref.current) as HTMLElement;
+      delegate.current = context.injector.get(ToolbarBtnDelegate, [
+        ref.current,
+        props.id,
+        (state, title) => {
+          setViewState(state);
+          setTitle(title);
+        },
+        () => viewState,
+        context,
+        getPopoverParent,
+        props.popoverComponent,
+        props.popoverStyle,
+        props.popoverId,
+      ]);
+      props.delegate(delegate.current);
+      disposer.addDispose(delegate.current);
+      disposer.addDispose({
+        dispose: () => {
+          props.delegate && props.delegate(undefined);
+        },
+      });
+    }
+    return () => disposer.dispose();
+  }, []);
+  const iconContent = !props.inDropDown ? (
+    <div
+      className={styles.iconClass + ' kt-toolbar-action-btn-icon'}
+      title={styles.title}
+      style={{
+        color: styles.iconForeground,
+        backgroundColor: styles.iconBackground,
+        // 如果指定了按钮宽度，需要将padding清空，防止按钮比预期大16px
+        ...(styles.width ? { width: styles.width } : null),
+        ...(styles.height ? { height: styles.height } : null),
+        ...(styles.iconSize ? { fontSize: styles.iconSize, WebkitMaskSize: styles.iconSize } : null),
+      }}
+    ></div>
+  ) : null;
+  const titleContent =
+    styles.showTitle || props.inDropDown ? (
+      <div
+        className='kt-toolbar-action-btn-title'
+        style={{
+          color: styles.titleForeground,
+          backgroundColor: styles.titleBackground,
+          fontSize: styles.titleSize,
+        }}
+      >
+        {styles.title}
+      </div>
+    ) : null;
+
+  const bindings = {
+    onClick: (event) => {
+      delegate.current && delegate.current._onClick.fire(event);
+      if (props.inDropDown) {
+        props.closeDropDown();
+      }
+    },
+    onMouseLeave: (event) => {
+      delegate.current && delegate.current._onMouseLeave.fire(event);
+    },
+    onMouseEnter: (event) => {
+      delegate.current && delegate.current._onMouseEnter.fire(event);
+    },
+  };
+
+  const backgroundBindings = {
+    style: {
+      backgroundColor: styles.background,
+      ...(styles.width ? { padding: 0 } : null),
+    },
+  };
+  let buttonElement;
+  if (props.inDropDown) {
+    buttonElement = (
+      <div
+        className={classnames({ 'kt-toolbar-action-btn': true, 'action-btn-in-dropdown': true })}
+        {...bindings}
+        {...backgroundBindings}
+        ref={ref as any}
+      >
+        {iconContent}
+        {titleContent}
+      </div>
+    );
+  } else {
+    const btnTitleStyle = styles.btnTitleStyle || preferenceService.get('toolbar.buttonTitleStyle');
+    if (styles.btnStyle === 'button' && btnTitleStyle !== BUTTON_TITLE_STYLE.VERTICAL) {
+      buttonElement = (
+        <Button type='default' size='small' {...bindings} {...backgroundBindings}>
+          {iconContent}
+          {titleContent}
+        </Button>
+      );
+    } else {
+      // BtnStyle == inline 或 btnTitleStyle === 'vertical' (类似小程序IDE工具栏） 的模式
+      if (btnTitleStyle === BUTTON_TITLE_STYLE.VERTICAL) {
+        backgroundBindings.style['minWidth'] = '42px';
+      }
+      buttonElement = (
+        <div
+          className={classnames({
+            'kt-toolbar-action-btn': true,
+            'kt-toolbar-action-btn-button': styles.btnStyle === 'button',
+            'kt-toolbar-action-btn-inline': styles.btnStyle !== 'button',
+            'kt-toolbar-action-btn-vertical': btnTitleStyle === BUTTON_TITLE_STYLE.VERTICAL,
+            'kt-toolbar-action-btn-horizontal': btnTitleStyle !== BUTTON_TITLE_STYLE.VERTICAL,
+          })}
+          {...bindings}
+        >
+          <Button type='default' size='small' {...backgroundBindings}>
+            {iconContent}
+          </Button>
+          {titleContent}
+        </div>
+      );
+    }
+  }
+
+  return (
+    <div className={'kt-toolbar-action-btn-wrapper'} ref={ref as any}>
+      {buttonElement}
+      {props.popoverComponent && <div className={'kt-toolbar-popover'} data-toolbar-no-context={true}></div>}
+    </div>
+  );
+};
+
+export function createToolbarActionBtn(props: IToolbarActionBtnProps): IToolbarActionReactElement {
+  return (actionProps) => <ToolbarActionBtn {...actionProps} {...props} />;
+}
+
+export class ToolbarActionBtnClickEvent extends BasicEvent<{
+  id: string;
+  event: React.MouseEvent<HTMLDivElement, MouseEvent>;
+}> {}
+
+const popOverMap = new Map<string, Promise<HTMLDivElement>>();
+
+const PopOverComponentWrapper: React.FC<{ delegate: IToolbarActionBtnDelegate }> = (props) => {
+  const [context, setContext] = React.useState();
+
+  React.useEffect(() => {
+    const disposable = props.delegate.onChangeContext((newValue) => {
+      setContext(newValue);
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  const childrenWithProps = React.Children.map(props.children, (child) =>
+    React.isValidElement(child)
+      ? React.cloneElement(child, {
+          context,
+        } as any)
+      : null,
+  );
+  return <>{childrenWithProps}</>;
+};
+
+@Injectable({ multiple: true })
+class ToolbarBtnDelegate implements IToolbarActionBtnDelegate {
+  _onClick = new Emitter<React.MouseEvent<HTMLDivElement>>();
+  onClick = this._onClick.event;
+
+  _onMouseLeave = new Emitter<React.MouseEvent<HTMLDivElement>>();
+  onMouseLeave = this._onClick.event;
+
+  _onMouseEnter = new Emitter<React.MouseEvent<HTMLDivElement>>();
+  onMouseEnter = this._onClick.event;
+
+  _onChangeState = new Emitter<{ from: string; to: string }>();
+  onChangeState = this._onChangeState.event;
+
+  private onChangeContextEvent = new Emitter<any>();
+  public onChangeContext = this.onChangeContextEvent.event;
+
+  private _onDidChangePopoverVisibility = new Emitter<boolean>();
+  public onDidChangePopoverVisibility = this._onDidChangePopoverVisibility.event;
+
+  private popOverContainer: HTMLDivElement | undefined;
+
+  private _popOverElement: Promise<HTMLDivElement> | undefined;
+
+  private _popOverClickOutsideDisposer: IDisposable | undefined;
+
+  @Autowired(IToolbarPopoverRegistry)
+  protected readonly toolbarPopover: IToolbarPopoverRegistry;
+
+  dispose() {
+    this._onClick.dispose();
+    this._onMouseEnter.dispose();
+    this._onMouseLeave.dispose();
+    if (this.popOverContainer) {
+      this.popOverContainer.remove();
+      this.popOverContainer = undefined;
+    }
+    if (this._popOverClickOutsideDisposer) {
+      this._popOverClickOutsideDisposer.dispose();
+    }
+  }
+
+  constructor(
+    private element: HTMLElement,
+    private actionId: string,
+    private readonly _setState,
+    private _getState,
+    private context: AppConfig,
+    private getPopoverParent: () => HTMLElement,
+    private popoverComponent?: React.FC,
+    private popoverStyle?: IToolbarPopoverStyle,
+    private popoverId?: string,
+  ) {
+    if (this.popoverComponent) {
+      this._popOverElement = popOverMap.get(actionId);
+      this.popOverContainer = element.querySelector('.kt-toolbar-popover')! as HTMLDivElement;
+    }
+    this.toolbarPopover.onDidRegisterPopoverEvent((e) => {
+      if (e === this.popoverId) {
+        this.popoverComponent = this.toolbarPopover.getComponent(this.popoverId);
+        // 已经激活的状态下重新激活一次，如果没有激活过则不动
+        if (this._popOverElement) {
+          this.hidePopOver().then(() => this.showPopOver());
+        }
+      }
+    });
+  }
+
+  setState(to, title?) {
+    const from = this._getState();
+    this._setState(to, title);
+    this._onChangeState.fire({ from, to });
+  }
+
+  setContext(context: any) {
+    this.onChangeContextEvent.fire(context);
+  }
+
+  getRect() {
+    return this.element.getBoundingClientRect();
+  }
+
+  getPopOverContainer() {
+    return this.popOverContainer;
+  }
+
+  async showPopOver(style?: IToolbarPopoverStyle) {
+    if (!this.popOverContainer) {
+      return;
+    }
+    if (!this._popOverElement) {
+      this._popOverElement = new Promise((resolve) => {
+        const div = document.createElement('div');
+        const C = this.popoverComponent!;
+        ReactDOM.render(
+          <ConfigProvider value={this.context}>
+            <PopOverComponentWrapper delegate={this}>
+              <C />
+            </PopOverComponentWrapper>
+          </ConfigProvider>,
+          div,
+          () => {
+            resolve(div);
+          },
+        );
+      });
+      popOverMap.set(this.actionId, this._popOverElement);
+    }
+    const mergedStyle: IToolbarPopoverStyle = {
+      ...this.popoverStyle,
+      ...style,
+    };
+    if (mergedStyle.position === 'top') {
+      this.popOverContainer.classList.add('kt-toolbar-popover-top');
+      this.popOverContainer.classList.remove('kt-toolbar-popover-bottom');
+    } else {
+      this.popOverContainer.classList.remove('kt-toolbar-popover-top');
+      this.popOverContainer.classList.add('kt-toolbar-popover-bottom');
+    }
+
+    this.popOverContainer.remove();
+    const popoverParent = this.getPopoverParent() || this.element;
+    popoverParent.append(this.popOverContainer);
+    const popoverParentRect = popoverParent.getBoundingClientRect();
+    this.popOverContainer.style.setProperty('--button-width', popoverParentRect.width + 'px');
+
+    let offset = typeof mergedStyle.horizontalOffset === 'number' ? mergedStyle.horizontalOffset : 30;
+
+    // 如果父容器离右边距很近，防止视图突出去
+    offset = Math.min(offset, window.innerWidth - popoverParentRect.left - popoverParentRect.width - 2);
+    this.popOverContainer.style.setProperty('--offset-size', offset + 'px');
+    this.popOverContainer.classList.add('kt-toolbar-popover-visible');
+
+    if (mergedStyle.noContainerStyle) {
+      this.popOverContainer.classList.remove('kt-toolbar-popover-default');
+    } else {
+      this.popOverContainer.classList.add('kt-toolbar-popover-default');
+    }
+
+    const animeDisposer = new DomListener(this.popOverContainer, 'animationend', () => {
+      animeDisposer.dispose();
+      this.popOverContainer?.classList.add('kt-toolbar-popover-animationend');
+    });
+
+    return this._popOverElement.then((ele) => {
+      if (this._popOverClickOutsideDisposer) {
+        this._popOverClickOutsideDisposer.dispose();
+        this._popOverClickOutsideDisposer = undefined;
+      }
+      if (this.popOverContainer && ele.parentElement !== this.popOverContainer) {
+        this.popOverContainer.append(ele);
+      }
+      this._onDidChangePopoverVisibility.fire(true);
+      if (mergedStyle.hideOnClickOutside !== false) {
+        setTimeout(() => {
+          if (this._popOverClickOutsideDisposer) {
+            this._popOverClickOutsideDisposer.dispose();
+            this._popOverClickOutsideDisposer = undefined;
+          }
+          const disposer = new Disposable();
+          disposer.addDispose(
+            new DomListener(
+              window,
+              'click',
+              (e: MouseEvent) => {
+                if (e.target && ele.contains(e.target as Node)) {
+                  return;
+                }
+                const rect = ele.getBoundingClientRect();
+                if (
+                  rect.x <= e.clientX &&
+                  rect.x + rect.width >= e.clientX &&
+                  rect.y <= e.clientY &&
+                  rect.y + rect.height >= e.clientY
+                ) {
+                  // 点击在区域内，这里防止点击 target 已经被移除导致误判
+                  return;
+                }
+                this.hidePopOver();
+              },
+              // 在捕获阶段处理，避免其他元素阻止冒泡导致不自动隐藏不生效
+              true,
+            ),
+          );
+          this._popOverClickOutsideDisposer = disposer;
+        });
+      }
+    });
+  }
+
+  async hidePopOver() {
+    if (this._popOverElement) {
+      const ele = await this._popOverElement;
+      ReactDOM.unmountComponentAtNode(ele);
+      ele.remove();
+      this._popOverElement = undefined;
+    }
+    if (this._popOverClickOutsideDisposer) {
+      this._popOverClickOutsideDisposer.dispose();
+      this._popOverClickOutsideDisposer = undefined;
+    }
+    this.popOverContainer && this.popOverContainer.classList.remove('kt-toolbar-popover-visible');
+    this.popOverContainer?.classList.remove('kt-toolbar-popover-animationend');
+    this._onDidChangePopoverVisibility.fire(false);
+  }
+}

package/src/toolbar/components/index.ts

@@ -0,0 +1,2 @@
+export * from './button';
+export * from './select';

package/src/toolbar/components/select.tsx

@@ -0,0 +1,189 @@
+import classnames from 'classnames';
+import React from 'react';
+
+import {
+  Select,
+  SelectOptionsList,
+  ISelectOptionsListProps,
+  IDataOption,
+  IDataOptionGroup,
+  isDataOptionGroups,
+} from '@opensumi/ide-components';
+import { Emitter } from '@opensumi/ide-core-common';
+
+import { getIcon } from '../../style/icon/icon';
+import { IToolbarActionElementProps, IToolbarActionReactElement, IToolbarActionSelectProps } from '../types';
+
+export function ToolbarActionSelect<T>(props: IToolbarActionSelectProps<T> & IToolbarActionElementProps) {
+  const [viewState, setViewState] = React.useState(props.defaultState || 'default');
+
+  const styles = (props.styles || {})[viewState] || {};
+
+  const selectStyle = {
+    color: styles.labelForegroundColor,
+    backgroundColor: styles.backgroundColor,
+    minWidth: styles.minWidth === undefined ? 150 : styles.minWidth,
+  };
+
+  const optionStyle = {
+    color: styles.labelForegroundColor,
+    backgroundColor: styles.backgroundColor,
+  };
+
+  const [value, setValue] = React.useState(props.defaultValue);
+  const [customOptions, setCustomOptions] = React.useState<IDataOption<T>[] | IDataOptionGroup<T>[] | undefined>(
+    undefined,
+  );
+  const [showDropdown, setShowDropDown] = React.useState<boolean>(false);
+  const dropdownRef = React.useRef<HTMLDivElement | null>(null);
+  const selectInMenuRef = React.useRef<HTMLDivElement | null>(null);
+  const selectEmitter = React.useRef(new Emitter<T>());
+
+  React.useEffect(() => {
+    const _onChangeState = new Emitter<{ from: string; to: string }>();
+    let _value = value;
+    const delegate = {
+      setState: (to) => {
+        const from = viewState;
+        setViewState(to);
+        _onChangeState.fire({ from, to });
+      },
+      setSelect: setValue,
+      setOptions: (options) => {
+        setCustomOptions(options);
+      },
+      getValue: () => _value,
+      onChangeState: _onChangeState.event,
+      onSelect: selectEmitter.current.event,
+    };
+    props.delegate && props.delegate(delegate);
+    const disposer = selectEmitter.current.event((v) => {
+      _value = v;
+    });
+    return () => {
+      props.delegate && props.delegate(undefined);
+      _onChangeState.dispose();
+      disposer.dispose();
+    };
+  }, []);
+
+  function findCurrentValueLabel(value: T | undefined) {
+    const options = customOptions || props.options || [];
+    if (isDataOptionGroups(options)) {
+      for (const group of options) {
+        for (const option of group.options) {
+          if (props.equals) {
+            if (props.equals(option.value, value)) {
+              return option.label;
+            }
+          } else {
+            if (option.value === value) {
+              return option.label;
+            }
+          }
+        }
+      }
+    } else {
+      for (const option of options) {
+        if (props.equals) {
+          if (props.equals(option.value, value)) {
+            return option.label;
+          }
+        } else {
+          if (option.value === value) {
+            return option.label;
+          }
+        }
+      }
+    }
+  }
+
+  React.useEffect(() => {
+    if (dropdownRef.current && selectInMenuRef.current) {
+      const menuClientRect = selectInMenuRef.current.getBoundingClientRect();
+      if (window.innerWidth - menuClientRect.x - menuClientRect.width < dropdownRef.current.offsetWidth) {
+        // 在左边
+        dropdownRef.current.style.right = 'calc(100% + 5px)';
+        dropdownRef.current.style.left = '';
+        dropdownRef.current.style.top = '0';
+        dropdownRef.current.style.visibility = 'visible';
+      } else {
+        // 在右边
+        dropdownRef.current.style.left = 'calc(100% + 5px)';
+        dropdownRef.current.style.right = '';
+        dropdownRef.current.style.top = '0';
+        dropdownRef.current.style.visibility = 'visible';
+      }
+    }
+    if (showDropdown) {
+      const listener = () => {
+        setShowDropDown(false);
+      };
+      document.addEventListener('click', listener);
+      return () => {
+        document.removeEventListener('click', listener);
+      };
+    }
+  }, [showDropdown]);
+
+  if (props.inDropDown) {
+    const selectDropDownProps: ISelectOptionsListProps<T> = {
+      options: props.options,
+      optionRenderer: props.customOptionRenderer,
+      currentValue: value,
+      className: 'kt-toolbar-action-select-dropdown',
+      onSelect: (v) => {
+        setValue(v);
+        props.closeDropDown();
+        if (props.onSelect) {
+          props.onSelect(v);
+        }
+        selectEmitter.current.fire(v);
+      },
+      equals: props.equals,
+      size: 'small',
+      renderCheck: true,
+    };
+    const selectDropDown = <SelectOptionsList {...selectDropDownProps} ref={dropdownRef} />;
+    return (
+      <div
+        className={classnames({
+          'kt-toolbar-action-btn': true,
+          'action-btn-in-dropdown': true,
+          'kt-toolbar-action-select': true,
+        })}
+        ref={selectInMenuRef}
+        onClick={() => {
+          setShowDropDown(true);
+        }}
+      >
+        {props.name || findCurrentValueLabel(value)}
+        <div className={classnames('kt-toolbar-action-btn-icon', getIcon('right'), 'kt-toolbar-action-select-right')} />
+
+        {showDropdown ? selectDropDown : null}
+      </div>
+    );
+  }
+
+  return (
+    <Select<T>
+      value={value}
+      options={customOptions || props.options}
+      size='small'
+      optionRenderer={props.customOptionRenderer}
+      onChange={(v) => {
+        if (props.onSelect) {
+          props.onSelect(v!);
+        }
+        selectEmitter.current.fire(v);
+        setValue(v);
+      }}
+      optionStyle={optionStyle}
+      style={selectStyle}
+    />
+  );
+}
+
+export function createToolbarActionSelect<T = string>(props: IToolbarActionSelectProps<T>): IToolbarActionReactElement {
+  return (actionProps) => <ToolbarActionSelect {...props} {...actionProps} />;
+}

package/src/toolbar/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export { ToolbarLocation } from './toolbar';
+export * from './components';

package/src/toolbar/toolbar.popover.registry.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Injectable } from '@opensumi/di';
+import { Emitter, Event, Disposable } from '@opensumi/ide-core-common';
+
+import { IToolbarPopoverRegistry } from './types';
+
+@Injectable()
+export class ToolbarPopoverRegistry implements IToolbarPopoverRegistry {
+  private registerPopoverEvent = new Emitter<string>();
+  public onDidRegisterPopoverEvent: Event<string> = this.registerPopoverEvent.event;
+
+  private popOverComponents: Map<string, React.FC> = new Map();
+
+  registerComponent(id: string, component: React.FC) {
+    if (this.popOverComponents.has(id)) {
+      // eslint-disable-next-line no-console
+      console.error(`Component ${id} is already registered!`);
+      return Disposable.NULL;
+    }
+    this.popOverComponents.set(id, component);
+    this.registerPopoverEvent.fire(id);
+
+    return {
+      dispose: () => {
+        this.popOverComponents.delete(id);
+      },
+    };
+  }
+
+  getComponent = (id: string): React.FC | undefined => this.popOverComponents.get(id);
+}