@opensumi/ide-main-layout 2.21.13-rc-1673328992.0 → 2.21.13

package/src/browser/accordion/accordion.view.tsx

@@ -1,102 +0,0 @@
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-
-import { View, useInjectable } from '@opensumi/ide-core-browser';
-import { Layout, SplitPanel } from '@opensumi/ide-core-browser/lib/components';
-import { replaceLocalizePlaceholder } from '@opensumi/ide-core-common';
-
-import { AccordionServiceFactory, AccordionService, SectionState } from './accordion.service';
-import { AccordionSection } from './section.view';
-
-interface AccordionContainerProps {
-  alignment?: Layout.alignment;
-  views: View[];
-  initState?: Map<string, SectionState>;
-  containerId: string;
-  headerSize?: number;
-  minSize?: number;
-  noRestore?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-export const AccordionContainer = observer(
-  ({
-    alignment = 'vertical',
-    views,
-    containerId,
-    headerSize = 24,
-    minSize = 120,
-    className,
-    noRestore,
-    style,
-  }: AccordionContainerProps) => {
-    const accordionService: AccordionService = useInjectable(AccordionServiceFactory)(containerId, noRestore);
-    React.useEffect(() => {
-      // 解决视图在渲染前注册的问题
-      if (!views.length) {
-        return;
-      }
-      for (const view of views) {
-        accordionService.appendView(view);
-      }
-    }, [views]);
-    React.useEffect(() => {
-      accordionService.initConfig({ headerSize, minSize });
-    }, []);
-    const allCollapsed = !accordionService.visibleViews.find((view) => {
-      const viewState: SectionState = accordionService.getViewState(view.id);
-      return !viewState.collapsed;
-    });
-
-    return (
-      <SplitPanel
-        className={className}
-        style={style}
-        dynamicTarget={true}
-        id={containerId}
-        resizeKeep={false}
-        useDomSize={allCollapsed}
-        direction={alignment === 'horizontal' ? 'left-to-right' : 'top-to-bottom'}
-      >
-        {accordionService.visibleViews.map((view, index) => {
-          const viewState: SectionState = accordionService.getViewState(view.id);
-          const titleMenu = view.titleMenu || accordionService.getSectionToolbarMenu(view.id);
-          const { collapsed, nextSize } = viewState;
-          return (
-            <AccordionSection
-              noHeader={accordionService.visibleViews.length === 1}
-              onItemClick={() => accordionService.handleSectionClick(view.id, !collapsed, index)}
-              onContextMenuHandler={accordionService.handleContextMenu}
-              alignment={alignment as Layout.alignment}
-              header={(view.name && replaceLocalizePlaceholder(view.name)) || view.id}
-              viewId={view.id}
-              key={view.id}
-              expanded={!collapsed}
-              accordionService={accordionService}
-              index={index}
-              headerSize={headerSize}
-              minSize={headerSize}
-              initialProps={view.initialProps}
-              titleMenu={titleMenu}
-              titleMenuContext={view.titleMenuContext}
-              savedSize={collapsed ? headerSize : nextSize}
-              flex={view.weight || 1}
-            >
-              {view.component}
-            </AccordionSection>
-          );
-        })}
-      </SplitPanel>
-    );
-  },
-);
-
-AccordionContainer.displayName = 'AccordionContainer';
-
-export interface PanelProps extends React.PropsWithChildren<any> {
-  flex: number;
-}
-
-export const Panel: React.FC<PanelProps> = ({ children }) => <div>{children}</div>;
-Panel.displayName = 'Panel';

package/src/browser/accordion/section.view.tsx

@@ -1,181 +0,0 @@
-import cls from 'classnames';
-import React from 'react';
-
-import { getIcon, ErrorBoundary, useViewState } from '@opensumi/ide-core-browser';
-import { useInjectable } from '@opensumi/ide-core-browser';
-import { Layout, PanelContext } from '@opensumi/ide-core-browser/lib/components';
-import { InlineActionBar, InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
-import { isIMenu, IMenu, IContextMenu } from '@opensumi/ide-core-browser/lib/menu/next';
-import { IProgressService } from '@opensumi/ide-core-browser/lib/progress';
-import { ProgressBar } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
-import { transformLabelWithCodicon } from '@opensumi/ide-core-browser/lib/utils/label';
-import { IIconService } from '@opensumi/ide-theme';
-
-import { AccordionService } from './accordion.service';
-import styles from './styles.module.less';
-
-export interface CollapsePanelProps extends React.PropsWithChildren<any> {
-  // panel 头部标题
-  header: string;
-  // panel 头部描述
-  description?: string;
-  // panel 信息
-  message?: string;
-  // 头部样式名
-  headerClass?: string;
-  // panel 点击事件监听
-  onItemClick?: any;
-  onContextMenuHandler: any;
-  // 计算宽度时的优先级
-  weight?: number;
-  // 排序优先级
-  priority?: number;
-  // panel宽高
-  size?: {
-    width: number;
-    height: number;
-  };
-  headerSize?: number;
-  viewId: string;
-  alignment?: Layout.alignment;
-  index: number;
-  initialProps?: any;
-  noHeader?: boolean;
-  titleMenu: IMenu | IContextMenu;
-  accordionService: AccordionService;
-}
-
-const attrs = {
-  tabIndex: 0,
-};
-
-export const AccordionSection = ({
-  header,
-  description,
-  message,
-  headerClass,
-  onItemClick,
-  noHeader,
-  children,
-  expanded,
-  onResize,
-  size,
-  headerSize,
-  viewId,
-  initialProps,
-  titleMenu,
-  titleMenuContext,
-  accordionService,
-  onContextMenuHandler,
-}: CollapsePanelProps) => {
-  const iconService = useInjectable<IIconService>(IIconService);
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
-
-  const [headerFocused, setHeaderFocused] = React.useState(false);
-  const [headerLabel, setHeaderLabel] = React.useState(header);
-  const [headerDescription, setheaderDescription] = React.useState(description);
-  const [panelMessage, setPanelMessage] = React.useState(message);
-
-  const { getSize, setSize } = React.useContext(PanelContext);
-
-  React.useEffect(() => {
-    const disposable = accordionService.onDidChangeViewTiele(({ id, title, description, message: msg }) => {
-      if (viewId === id && title && title !== headerLabel) {
-        setHeaderLabel(title);
-      }
-
-      if (viewId === id && description && description !== headerDescription) {
-        setheaderDescription(description);
-      }
-
-      if (viewId === id && msg && msg !== panelMessage) {
-        setPanelMessage(msg);
-      }
-    });
-
-    return () => {
-      disposable.dispose();
-    };
-  }, []);
-
-  const clickHandler = React.useCallback(() => {
-    const currentSize = getSize(false);
-    onItemClick((targetSize) => setSize(targetSize, false), currentSize);
-  }, [getSize, setSize]);
-
-  const bodyStyle = React.useMemo<React.CSSProperties>(
-    () => ({
-      overflow: expanded ? 'auto' : 'hidden',
-    }),
-    [expanded],
-  );
-
-  React.useEffect(() => {
-    if (onResize) {
-      onResize(size);
-    }
-  }, [size]);
-
-  const headerFocusHandler = React.useCallback(() => {
-    setHeaderFocused(true);
-  }, []);
-
-  const headerBlurHandler = React.useCallback(() => {
-    setHeaderFocused(false);
-  }, []);
-
-  const viewState = useViewState(viewId, contentRef, true);
-  const progressService: IProgressService = useInjectable(IProgressService);
-  const indicator = progressService.getIndicator(viewId);
-  const Component: any = children;
-  return (
-    <div className={styles.kt_split_panel} data-view-id={viewId}>
-      {!noHeader && (
-        <div
-          onFocus={headerFocusHandler}
-          onBlur={headerBlurHandler}
-          {...attrs}
-          className={cls(styles.kt_split_panel_header, headerFocused ? styles.kt_panel_focused : '', headerClass)}
-          onClick={clickHandler}
-          onContextMenu={(e) => onContextMenuHandler(e, viewId)}
-          style={{ height: headerSize + 'px', lineHeight: headerSize + 'px' }}
-        >
-          <div className={styles.label_wrap}>
-            <i className={cls(getIcon('arrow-down'), styles.arrow_icon, expanded ? '' : styles.kt_mod_collapsed)}></i>
-            <div className={styles.section_label} style={{ lineHeight: headerSize + 'px' }}>
-              {headerLabel}
-            </div>
-            {headerDescription && (
-              <div className={styles.section_description} style={{ lineHeight: headerSize + 'px' }}>
-                {transformLabelWithCodicon(headerDescription, {}, iconService.fromString.bind(iconService))}
-              </div>
-            )}
-          </div>
-          {expanded && titleMenu && (
-            <div className={styles.actions_wrap}>
-              {isIMenu(titleMenu) ? (
-                <InlineActionBar menus={titleMenu} context={titleMenuContext} />
-              ) : (
-                <InlineMenuBar menus={titleMenu} context={titleMenuContext} />
-              )}
-            </div>
-          )}
-        </div>
-      )}
-      <div
-        className={cls([styles.kt_split_panel_body, { [styles.hide]: !expanded }])}
-        style={bodyStyle}
-        ref={contentRef}
-      >
-        <ProgressBar className={styles.progressBar} progressModel={indicator!.progressModel} />
-        <ErrorBoundary>
-          {panelMessage && <span className={styles.kt_split_panel_message}>{panelMessage}</span>}
-          <Component
-            {...initialProps}
-            viewState={{ height: viewState.height - (panelMessage ? 22 : 0), width: viewState.width }}
-          />
-        </ErrorBoundary>
-      </div>
-    </div>
-  );
-};

package/src/browser/accordion/styles.module.less

@@ -1,214 +0,0 @@
-:global {
-  .resize-ease {
-    transition: height 0.1s ease-out;
-  }
-}
-
-.kt_split_panel_container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  white-space: nowrap;
-  flex-direction: column;
-}
-
-.kt_split_panel {
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  &:hover .actions_wrap {
-    display: block;
-  }
-}
-
-.kt_split_panel_header {
-  background-color: var(--sideBarSectionHeader-background);
-  font-size: 12px;
-  text-transform: uppercase;
-  display: flex;
-  cursor: pointer;
-  color: var(--sideBarSectionHeader-foreground);
-  justify-content: space-between;
-  border-top: 1px solid var(--sideBar-border);
-  border-bottom: 1px solid transparent;
-  &:focus {
-    outline-color: rgba(14, 99, 156, 0.8);
-    outline-width: 1px;
-    outline-style: solid;
-    outline-offset: -1px;
-  }
-}
-
-.label_wrap {
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 1;
-  overflow: hidden;
-}
-
-.kt_split_panel_body {
-  overflow: hidden;
-  flex: 1;
-  font-size: 12px;
-  position: relative;
-  user-select: none;
-  .progressBar {
-    top: -1px;
-  }
-
-  .kt_split_panel_message {
-    display: flex;
-    padding: 4px 12px 4px 18px;
-    height: 14px;
-    line-height: 14px;
-    user-select: text;
-    box-sizing: content-box;
-  }
-}
-
-.kt_split_overlay {
-  width: 100%;
-  white-space: normal;
-  flex: none;
-  position: relative;
-  transition: height 0.2s ease;
-}
-
-.kt_panel_toolbar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 22px;
-  display: none;
-  .kt_panel_toolbar_container {
-    margin: 0 auto;
-    padding: 0;
-    width: 100%;
-    height: 22px;
-  }
-  .kt_panel_toolbar_item {
-    cursor: pointer;
-    display: inline-block;
-    position: relative;
-    width: 28px;
-    height: 22px;
-    background-size: 16px;
-    background-position: 50%;
-    background-repeat: no-repeat;
-    margin-right: 0;
-    &:active {
-      transform: scale(1.1);
-    }
-  }
-}
-
-.kt_panel_focused {
-  outline-color: var(--focusBorder);
-}
-
-.section_label {
-  font-weight: 400;
-  color: var(--sideBarSectionHeader-foreground);
-  // font-size: 80%;
-  text-transform: uppercase;
-  cursor: pointer;
-  user-select: none;
-}
-
-.section_description {
-  font-weight: 400;
-  margin-left: 10px;
-  opacity: 0.6;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-transform: none;
-  white-space: nowrap;
-  flex-shrink: 100000;
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-
-  :global(.kt-icon),
-  :global(.codicon) {
-    font-size: 14px !important;
-  }
-}
-
-i.arrow_icon {
-  font-size: 16px;
-  margin: 0 4px;
-  color: var(--descriptionForeground);
-  &.kt_mod_collapsed {
-    transform: rotate(-90deg);
-  }
-}
-
-.actions_wrap {
-  margin-right: 8px;
-  display: none;
-}
-
-.titlebar {
-  background-color: var(--sideBar-background);
-  display: flex;
-  flex-direction: row;
-  user-select: none;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 8px;
-  box-sizing: border-box;
-  line-height: 100%;
-  h1 {
-    color: var(--sideBarTitle-foreground);
-    font-weight: 400;
-    margin: 0;
-    text-transform: uppercase;
-    font-size: 12px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
-
-.hide {
-  display: none;
-}
-.welcome {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 0 10px 1em;
-  box-sizing: border-box;
-  align-items: center;
-  & > * {
-    margin-block-start: 1em;
-    margin-block-end: 0;
-    margin-inline-start: 0;
-    margin-inline-end: 0;
-  }
-  p {
-    width: 100%;
-    text-align: left;
-  }
-  :global(.button-container) {
-    width: 100%;
-    max-width: 300px;
-    transition: max-width 0.2s ease-out;
-    :global(.kt-button) {
-      box-sizing: border-box;
-      width: 100%;
-      padding: 4px;
-      text-align: center;
-      cursor: pointer;
-      justify-content: center;
-      align-items: center;
-      max-width: 300px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-    }
-  }
-}

package/src/browser/accordion/titlebar.view.tsx

@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
-
-import styles from './styles.module.less';
-
-export const TitleBar: React.FC<{
-  title: string;
-  menubar?: React.ReactNode;
-}> = React.memo((props) => (
-  <div className={styles.titlebar} style={{ height: LAYOUT_VIEW_SIZE.PANEL_TITLEBAR_HEIGHT }}>
-    <h1>{props.title}</h1>
-    {props.menubar || null}
-  </div>
-));
-
-TitleBar.displayName = 'TitleBar';

package/src/browser/default-config.ts

@@ -1,35 +0,0 @@
-/* istanbul ignore file */
-import { LayoutConfig, SlotLocation } from '@opensumi/ide-core-browser';
-
-export const defaultConfig: LayoutConfig = {
-  [SlotLocation.top]: {
-    modules: ['@opensumi/ide-menu-bar'],
-  },
-  [SlotLocation.action]: {
-    modules: ['@opensumi/ide-toolbar-action'],
-  },
-  [SlotLocation.left]: {
-    modules: [
-      '@opensumi/ide-explorer',
-      '@opensumi/ide-search',
-      '@opensumi/ide-scm',
-      '@opensumi/ide-extension-manager',
-      '@opensumi/ide-debug',
-    ],
-  },
-  [SlotLocation.right]: {
-    modules: [],
-  },
-  [SlotLocation.main]: {
-    modules: ['@opensumi/ide-editor'],
-  },
-  [SlotLocation.bottom]: {
-    modules: ['@opensumi/ide-terminal-next', '@opensumi/ide-output', 'debug-console', '@opensumi/ide-markers'],
-  },
-  [SlotLocation.statusBar]: {
-    modules: ['@opensumi/ide-status-bar'],
-  },
-  [SlotLocation.extra]: {
-    modules: ['breadcrumb-menu'],
-  },
-};

package/src/browser/index.ts

@@ -1,40 +0,0 @@
-import { Provider, Injectable, Injector } from '@opensumi/di';
-import { BrowserModule } from '@opensumi/ide-core-browser';
-
-import { IMainLayoutService, IViewsRegistry, MainLayoutContribution } from '../common';
-
-import { AccordionServiceFactory } from './accordion/accordion.service';
-import { LayoutService } from './layout.service';
-import { MainLayoutModuleContribution } from './main-layout.contribution';
-import { TabbarServiceFactory } from './tabbar/tabbar.service';
-import { ViewsRegistry } from './views-registry';
-
-@Injectable()
-export class MainLayoutModule extends BrowserModule {
-  providers: Provider[] = [
-    MainLayoutModuleContribution,
-    {
-      token: IMainLayoutService,
-      useClass: LayoutService,
-    },
-    {
-      token: IViewsRegistry,
-      useClass: ViewsRegistry,
-    },
-    {
-      token: TabbarServiceFactory,
-      useFactory: (injector: Injector) => (location: string) => {
-        const manager: IMainLayoutService = injector.get(IMainLayoutService);
-        return manager.getTabbarService(location);
-      },
-    },
-    {
-      token: AccordionServiceFactory,
-      useFactory: (injector: Injector) => (containerId: string, noRestore?: boolean) => {
-        const manager: IMainLayoutService = injector.get(IMainLayoutService);
-        return manager.getAccordionService(containerId, noRestore);
-      },
-    },
-  ];
-  contributionProvider = MainLayoutContribution;
-}

package/src/browser/input/index.tsx

@@ -1,32 +0,0 @@
-import React, { PropsWithChildren, useRef, useEffect } from 'react';
-
-import { IInputBaseProps, Input } from '@opensumi/ide-components';
-import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks';
-
-import { IMainLayoutService } from '../../common';
-
-export const AutoFocusedInput = ({
-  containerId,
-  ...inputProps
-}: PropsWithChildren<{ containerId: string } & IInputBaseProps>) => {
-  const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const doFocus = React.useCallback(() => {
-    if (inputRef && inputRef.current) {
-      queueMicrotask(() => inputRef.current?.focus());
-    }
-  }, [inputRef.current]);
-
-  useEffect(() => {
-    doFocus();
-
-    const handler = layoutService.getTabbarHandler(containerId);
-    const disposable = handler?.onActivate(doFocus);
-
-    return () => {
-      disposable?.dispose();
-    };
-  }, [layoutService]);
-  return <Input ref={inputRef} {...inputProps} />;
-};