@opensumi/ide-main-layout 2.21.13 → 2.22.0

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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,181 @@
+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

@@ -0,0 +1,214 @@
+: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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,35 @@
+/* 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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,32 @@
+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} />;
+};