@opensumi/ide-core-browser 2.21.13-rc-1673328992.0 → 2.21.13

package/src/components/layout/box-panel.tsx

@@ -1,88 +0,0 @@
-import clsx from 'classnames';
-import React from 'react';
-
-import { Layout } from './layout';
-import styles from './styles.module.less';
-
-export interface IChildComponentProps {
-  /**
-   * 创建的 div 标签样式中要使用的 flex 属性
-   */
-  flex?: number;
-  /**
-   * 创建的 div 标签样式中要使用的默认宽度
-   */
-  defaultSize?: number;
-  id: string;
-  overflow: string;
-  /**
-   * 创建的 div 标签样式中要使用的 zIndex 属性
-   */
-  zIndex?: number;
-  /**
-   * 创建的 div 标签样式中要使用的 z-index 属性
-   */
-  'z-index'?: number;
-  /**
-   * 创建的 div 标签样式中要使用的 backgroundColor 属性
-   */
-  backgroundColor?: string;
-
-  // 以上都是老代码，直接取 props 的相关属性太直接了
-  // 优雅一些的做法是使用 data- 标签
-  /**
-   * 创建的 div 标签要使用的 id
-   */
-  'data-wrapper-id'?: string;
-  /**
-   * 创建的 div 标签要使用的 className
-   */
-  'data-wrapper-class'?: string;
-}
-
-type ChildComponent = React.ReactElement<IChildComponentProps>;
-
-/**
- * 包裹放入其中的元素，并为每个元素创建一个 div
- *
- * 可以通过修改传入的 children 的 props 来定义一些属性，props 的定义可见：{ @link ChildComponent }
- */
-export const BoxPanel: React.FC<{
-  children?: ChildComponent | ChildComponent[];
-  className?: string;
-  direction?: Layout.direction;
-  flex?: number;
-  zIndex?: number;
-}> = ({ className, children = [], direction = 'left-to-right', ...restProps }) => {
-  // convert children to list
-  const arrayChildren = React.Children.toArray(children) as ChildComponent[];
-
-  return (
-    <div
-      {...restProps}
-      className={clsx(styles['box-panel'], className)}
-      style={{ flexDirection: Layout.getFlexDirection(direction), zIndex: restProps['z-index'] }}
-    >
-      {arrayChildren.map((child, index) => (
-        <div
-          key={index}
-          id={child['props']?.['data-wrapper-id']}
-          className={clsx(styles.wrapper, child['props']?.['data-wrapper-class'])}
-          style={
-            child['props']
-              ? {
-                  flex: child['props'].flex,
-                  overflow: child['props'].overflow,
-                  zIndex: child['props'].zIndex || child['props']['z-index'],
-                  [Layout.getMinSizeProperty(direction)]: child['props'].defaultSize,
-                  backgroundColor: child['props'].backgroundColor,
-                }
-              : {}
-          }
-        >
-          {child}
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/components/layout/default-layout.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-
-import { SlotRenderer } from '../../react-providers/slot';
-
-import { BoxPanel } from './box-panel';
-import { SplitPanel } from './split-panel';
-
-export const getStorageValue = () => {
-  // 启动时渲染的颜色和尺寸，弱依赖
-  let savedLayout: { [key: string]: { size: number; currentId: string } } = {};
-  let savedColors: { [colorKey: string]: string } = {};
-  try {
-    savedLayout = JSON.parse(localStorage.getItem('layout') || '{}');
-    savedColors = JSON.parse(localStorage.getItem('theme') || '{}');
-  } catch (err) {}
-  return {
-    layout: savedLayout,
-    colors: savedColors,
-  };
-};
-
-export const DefaultLayout = ToolbarActionBasedLayout;
-
-export function ToolbarActionBasedLayout() {
-  const { colors, layout } = getStorageValue();
-  return (
-    <BoxPanel direction='top-to-bottom'>
-      <SlotRenderer backgroundColor={colors.menuBarBackground} defaultSize={0} slot='top' z-index={2} />
-      <SplitPanel id='main-horizontal' flex={1}>
-        <SlotRenderer
-          backgroundColor={colors.sideBarBackground}
-          slot='left'
-          isTabbar={true}
-          defaultSize={layout.left?.currentId ? layout.left?.size || 310 : 49}
-          minResize={204}
-          minSize={49}
-        />
-        <SplitPanel id='main-vertical' minResize={300} flexGrow={1} direction='top-to-bottom'>
-          <SlotRenderer backgroundColor={colors.editorBackground} flex={2} flexGrow={1} minResize={200} slot='main' />
-          <SlotRenderer
-            backgroundColor={colors.panelBackground}
-            flex={1}
-            defaultSize={layout.bottom?.size}
-            minResize={160}
-            slot='bottom'
-            isTabbar={true}
-          />
-        </SplitPanel>
-        <SlotRenderer
-          backgroundColor={colors.sideBarBackground}
-          slot='right'
-          isTabbar={true}
-          defaultSize={layout.right?.currentId ? layout.right?.size || 310 : 0}
-          minResize={200}
-          minSize={0}
-        />
-      </SplitPanel>
-      <SlotRenderer backgroundColor={colors.statusBarBackground} defaultSize={24} slot='statusBar' />
-    </BoxPanel>
-  );
-}

package/src/components/layout/index.ts

@@ -1,4 +0,0 @@
-export * from './layout';
-export * from './split-panel';
-export * from './box-panel';
-export * from './default-layout';

package/src/components/layout/layout.ts

@@ -1,80 +0,0 @@
-import { ResizeHandleVertical, ResizeHandleHorizontal } from '../resize/resize';
-
-const flexDirectionMap: {
-  [index: string]: {
-    direction: any;
-    size: 'width' | 'height';
-    domSize: 'clientWidth' | 'clientHeight';
-    minSize: 'minWidth' | 'minHeight';
-    maxSize: 'maxWidth' | 'maxHeight';
-  };
-} = {
-  'left-to-right': {
-    direction: 'row',
-    size: 'width',
-    domSize: 'clientHeight',
-    minSize: 'minWidth',
-    maxSize: 'maxWidth',
-  },
-  'right-to-left': {
-    direction: 'row-reverse',
-    size: 'width',
-    domSize: 'clientHeight',
-    minSize: 'minWidth',
-    maxSize: 'maxWidth',
-  },
-  'top-to-bottom': {
-    direction: 'column',
-    size: 'height',
-    domSize: 'clientWidth',
-    minSize: 'minHeight',
-    maxSize: 'maxHeight',
-  },
-  'bottom-to-top': {
-    direction: 'column-reverse',
-    size: 'height',
-    domSize: 'clientWidth',
-    minSize: 'minHeight',
-    maxSize: 'maxHeight',
-  },
-};
-
-export namespace Layout {
-  export type direction = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
-
-  export type alignment = 'horizontal' | 'vertical';
-
-  export function getFlexDirection(direction: Layout.direction) {
-    return flexDirectionMap[direction].direction;
-  }
-
-  export function getSizeProperty(direction: Layout.direction) {
-    return flexDirectionMap[direction].size;
-  }
-
-  export function getDomSizeProperty(direction: Layout.direction) {
-    return flexDirectionMap[direction].domSize;
-  }
-
-  export function getMinSizeProperty(direction: Layout.direction) {
-    return flexDirectionMap[direction].minSize;
-  }
-
-  export function getMaxSizeProperty(direction: Layout.direction) {
-    return flexDirectionMap[direction].maxSize;
-  }
-
-  export function getResizeHandle(direction: Layout.direction) {
-    if (direction === 'bottom-to-top' || direction === 'top-to-bottom') {
-      return ResizeHandleVertical;
-    }
-    return ResizeHandleHorizontal;
-  }
-
-  export function getTabbarDirection(direction: Layout.direction) {
-    if (direction === 'bottom-to-top' || direction === 'top-to-bottom') {
-      return 'row';
-    }
-    return 'column';
-  }
-}

package/src/components/layout/split-panel.service.ts

@@ -1,56 +0,0 @@
-import { Injectable, INJECTOR_TOKEN, Injector, Autowired } from '@opensumi/di';
-
-@Injectable({ multiple: true })
-export class SplitPanelService {
-  private static MIN_SIZE = 120;
-  constructor(public panelId: string) {}
-
-  panels: HTMLElement[] = [];
-
-  rootNode: HTMLElement | undefined;
-
-  get isVisible(): boolean {
-    return (this.rootNode && this.rootNode.clientHeight > 0) || false;
-  }
-
-  getFirstResizablePanel(index: number, direction: boolean, isPrev?: boolean): HTMLElement | undefined {
-    if (isPrev) {
-      if (direction) {
-        return this.panels[index];
-      } else {
-        for (let i = index; i >= 0; i--) {
-          if (this.panels[i].clientHeight > SplitPanelService.MIN_SIZE) {
-            return this.panels[i];
-          }
-        }
-      }
-    } else {
-      if (!direction) {
-        return this.panels[index + 1];
-      } else {
-        for (let i = index + 1; i < this.panels.length; i++) {
-          if (this.panels[i].clientHeight > SplitPanelService.MIN_SIZE) {
-            return this.panels[i];
-          }
-        }
-      }
-    }
-  }
-}
-
-@Injectable()
-export class SplitPanelManager {
-  @Autowired(INJECTOR_TOKEN)
-  injector: Injector;
-
-  services: Map<string, SplitPanelService> = new Map();
-
-  getService(panelId: string) {
-    let service = this.services.get(panelId);
-    if (!service) {
-      service = this.injector.get(SplitPanelService, [panelId]);
-      this.services.set(panelId, service);
-    }
-    return service;
-  }
-}

package/src/components/layout/split-panel.tsx

@@ -1,315 +0,0 @@
-import clsx from 'classnames';
-import React from 'react';
-
-import { IEventBus } from '@opensumi/ide-core-common';
-
-import { ResizeEvent } from '../../layout';
-import { useInjectable } from '../../react-hooks';
-import { IResizeHandleDelegate, ResizeFlexMode } from '../resize/resize';
-
-import { Layout } from './layout';
-import { SplitPanelManager } from './split-panel.service';
-import styles from './styles.module.less';
-
-export interface ResizeHandle {
-  setSize: (targetSize?: number, isLatter?: boolean) => void;
-  setRelativeSize: (prev: number, next: number, isLatter: boolean) => void;
-  getSize: (isLatter: boolean) => number;
-  getRelativeSize: (isLatter: boolean) => number[];
-  lockSize: (lock: boolean | undefined, isLatter: boolean) => void;
-  setMaxSize: (lock: boolean | undefined, isLatter: boolean) => void;
-  hidePanel: (show?: boolean) => void;
-}
-
-export const PanelContext = React.createContext<ResizeHandle>({
-  setSize: (targetSize: number, isLatter: boolean) => {},
-  setRelativeSize: (prev, next, isLatter) => {},
-  getSize: (isLatter: boolean) => 0,
-  getRelativeSize: (isLatter: boolean) => [0, 0],
-  lockSize: (lock: boolean | undefined, isLatter: boolean) => {},
-  setMaxSize: (lock: boolean | undefined, isLatter: boolean) => {},
-  hidePanel: (show?: boolean) => {},
-});
-
-type ChildComponent = React.ReactElement<SplitChildProps>;
-
-/**
- * 推荐使用 `data-sp-` 方式来传递这些参数。
- *
- * 如：
- *
- * ```tsx
- * <SplitPanel>
- *   <div data-sp-id="div1" data-sp-minResize={100}></div>
- *   <div></div>
- * </SplitPanel>
- * ```
- */
-interface SplitChildProps {
-  id: string;
-  minSize?: number;
-  maxSize?: number;
-  minResize?: number;
-  flex?: number;
-  overflow?: string;
-  flexGrow?: number;
-  slot?: string;
-  noResize?: boolean;
-  savedSize?: number;
-  defaultSize?: number;
-  children?: ChildComponent | ChildComponent[];
-}
-
-export interface SplitPanelProps extends SplitChildProps {
-  className?: string;
-  style?: React.CSSProperties;
-  direction?: Layout.direction;
-  id: string;
-  // setAbsoluteSize 时保证相邻节点总宽度不变
-  resizeKeep?: boolean;
-  dynamicTarget?: boolean;
-  // 控制使用传入尺寸之和作为总尺寸或使用dom尺寸
-  useDomSize?: boolean;
-  /**
-   * ResizeHandle 的 className，用以展示分割线等
-   */
-  resizeHandleClassName?: string;
-}
-
-const getProp = (child: React.ReactNode, prop: string) =>
-  child && child['props'] && (child['props'][prop] ?? child['props'][`data-sp-${prop}`]);
-
-export const SplitPanel: React.FC<SplitPanelProps> = ({
-  id,
-  className,
-  resizeHandleClassName,
-  style,
-  children = [],
-  direction = 'left-to-right',
-  resizeKeep = true,
-  flexGrow,
-  dynamicTarget,
-  minResize,
-  useDomSize,
-  ...restProps
-}) => {
-  const ResizeHandle = Layout.getResizeHandle(direction);
-  // convert children to list
-  const childList = React.Children.toArray(children);
-  const totalFlexNum = childList.reduce(
-    (accumulator, item) => accumulator + (getProp(item, 'flex') !== undefined ? getProp(item, 'flex') : 1),
-    0,
-  );
-  const elements: React.ReactNodeArray = [];
-  const resizeDelegates = React.useRef<IResizeHandleDelegate[]>([]);
-  const eventBus = useInjectable<IEventBus>(IEventBus);
-  const rootRef = React.useRef<HTMLElement>();
-
-  const splitPanelService = useInjectable<SplitPanelManager>(SplitPanelManager).getService(id);
-  const maxLockState = React.useRef(childList.map(() => false));
-  const hideState = React.useRef(childList.map(() => false));
-  const resizeLockState = React.useRef(maxLockState.current.slice(0, childList.length - 1));
-  const [locks, setLocks] = React.useState<boolean[]>(resizeLockState.current);
-  const [hides, setHides] = React.useState<boolean[]>(hideState.current);
-  const [maxLocks, setMaxLocks] = React.useState<boolean[]>(maxLockState.current);
-  splitPanelService.panels = [];
-
-  // 获取setSize的handle，对于最右端或最底部的视图，取上一个位置的handle
-  const setSizeHandle = (index) => (size?: number, isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      delegate.setAbsoluteSize(
-        size !== undefined ? size : getProp(childList[index], 'defaultSize'),
-        isLatter,
-        resizeKeep,
-      );
-    }
-  };
-
-  const setRelativeSizeHandle = (index) => (prev: number, next: number, isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      delegate.setRelativeSize(prev, next);
-    }
-  };
-
-  const getSizeHandle = (index) => (isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      return delegate.getAbsoluteSize(isLatter);
-    }
-    return 0;
-  };
-
-  const getRelativeSizeHandle = (index) => (isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const delegate = resizeDelegates.current[targetIndex];
-    if (delegate) {
-      return delegate.getRelativeSize();
-    }
-    return [0, 0];
-  };
-
-  const lockResizeHandle = (index) => (lock: boolean | undefined, isLatter?: boolean) => {
-    const targetIndex = isLatter ? index - 1 : index;
-    const newResizeState = resizeLockState.current.map((state, idx) =>
-      idx === targetIndex ? (lock !== undefined ? lock : !state) : state,
-    );
-    resizeLockState.current = newResizeState;
-    setLocks(newResizeState);
-  };
-
-  const setMaxSizeHandle = (index) => (lock: boolean | undefined, isLatter?: boolean) => {
-    const newMaxState = maxLockState.current.map((state, idx) =>
-      idx === index ? (lock !== undefined ? lock : !state) : state,
-    );
-    maxLockState.current = newMaxState;
-    setMaxLocks(newMaxState);
-  };
-
-  const hidePanelHandle = (index: number) => (show?: boolean) => {
-    const newHideState = hideState.current.map((state, idx) =>
-      idx === index ? (show !== undefined ? !show : !state) : state,
-    );
-    hideState.current = newHideState;
-    const location = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
-    if (location) {
-      fireResizeEvent(location);
-    }
-    setHides(newHideState);
-  };
-
-  const fireResizeEvent = (location?: string) => {
-    if (location) {
-      eventBus.fire(new ResizeEvent({ slotLocation: location }));
-    }
-  };
-
-  childList.forEach((element, index) => {
-    if (index !== 0) {
-      const targetElement = index === 1 ? childList[index - 1] : childList[index];
-      let flexMode: ResizeFlexMode | undefined;
-      if (getProp(element, 'flexGrow')) {
-        flexMode = ResizeFlexMode.Prev;
-      } else if (getProp(childList[index - 1], 'flexGrow')) {
-        flexMode = ResizeFlexMode.Next;
-      }
-      const noResize = getProp(targetElement, 'noResize') || locks[index - 1];
-      if (!noResize) {
-        elements.push(
-          <ResizeHandle
-            className={resizeHandleClassName}
-            onResize={(prev, next) => {
-              const prevLocation = getProp(childList[index - 1], 'slot') || getProp(childList[index - 1], 'id');
-              const nextLocation = getProp(childList[index], 'slot') || getProp(childList[index], 'id');
-              fireResizeEvent(prevLocation!);
-              fireResizeEvent(nextLocation!);
-            }}
-            noColor={true}
-            findNextElement={
-              dynamicTarget
-                ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction)
-                : undefined
-            }
-            findPrevElement={
-              dynamicTarget
-                ? (direction: boolean) => splitPanelService.getFirstResizablePanel(index - 1, direction, true)
-                : undefined
-            }
-            key={`split-handle-${index}`}
-            delegate={(delegate) => {
-              resizeDelegates.current.push(delegate);
-            }}
-            flexMode={flexMode}
-          />,
-        );
-      }
-    }
-    elements.push(
-      <PanelContext.Provider
-        key={index}
-        value={{
-          setSize: setSizeHandle(index),
-          getSize: getSizeHandle(index),
-          setRelativeSize: setRelativeSizeHandle(index),
-          getRelativeSize: getRelativeSizeHandle(index),
-          lockSize: lockResizeHandle(index),
-          setMaxSize: setMaxSizeHandle(index),
-          hidePanel: hidePanelHandle(index),
-        }}
-      >
-        <div
-          data-min-resize={getProp(element, 'minResize')}
-          ref={(ele) => {
-            if (ele && splitPanelService.panels.indexOf(ele) === -1) {
-              splitPanelService.panels.push(ele);
-            }
-          }}
-          id={getProp(element, 'id') /* @deprecated: query by data-view-id */}
-          style={{
-            // 手风琴场景，固定尺寸和flex尺寸混合布局；需要在resize flex模式下禁用
-            ...(getProp(element, 'flex') &&
-            !getProp(element, 'savedSize') &&
-            !childList.find((item) => getProp(item, 'flexGrow'))
-              ? { flex: getProp(element, 'flex') }
-              : { [Layout.getSizeProperty(direction)]: getElementSize(element) }),
-            // 相对尺寸带来的问题，必须限制最小最大尺寸
-            [Layout.getMinSizeProperty(direction)]: getProp(element, 'minSize')
-              ? getProp(element, 'minSize') + 'px'
-              : '-1px',
-            [Layout.getMaxSizeProperty(direction)]:
-              maxLocks[index] && getProp(element, 'maxSize') ? getProp(element, 'maxSize') + 'px' : 'unset',
-            // resize flex模式下应用flexGrow
-            ...(getProp(element, 'flexGrow') !== undefined ? { flexGrow: getProp(element, 'flexGrow') } : {}),
-            display: hides[index] ? 'none' : 'block',
-            backgroundColor: getProp(element, 'backgroundColor'),
-          }}
-        >
-          {element}
-        </div>
-      </PanelContext.Provider>,
-    );
-  });
-
-  function getElementSize(element: any) {
-    if (getProp(element, 'savedSize')) {
-      return getProp(element, 'savedSize') + 'px';
-    } else if (getProp(element, 'defaultSize') !== undefined) {
-      return getProp(element, 'defaultSize') + 'px';
-    } else if (getProp(element, 'flex')) {
-      return (getProp(element, 'flex') / totalFlexNum) * 100 + '%';
-    } else {
-      return (1 / totalFlexNum) * 100 + '%';
-    }
-  }
-
-  React.useEffect(() => {
-    if (rootRef.current) {
-      splitPanelService.rootNode = rootRef.current;
-    }
-    const disposer = eventBus.on(ResizeEvent, (e) => {
-      if (e.payload.slotLocation === id) {
-        childList.forEach((c) => {
-          fireResizeEvent(getProp(c, 'slot') || getProp(c, 'id'));
-        });
-      }
-    });
-    return () => {
-      disposer.dispose();
-    };
-  }, []);
-
-  return (
-    <div
-      ref={(ele) => (rootRef.current = ele!)}
-      {...restProps}
-      className={clsx(styles['split-panel'], className)}
-      style={{ flexDirection: Layout.getFlexDirection(direction), ...style }}
-    >
-      {elements}
-    </div>
-  );
-};

package/src/components/layout/styles.module.less

@@ -1,21 +0,0 @@
-.split-panel {
-  display: flex;
-  flex: 1;
-  width: 100%;
-  height: 100%;
-}
-
-.box-panel {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.ease {
-  transition: height 0.1s ease-out, width 0.1s ease-out;
-}
-
-.wrapper {
-  position: relative;
-  z-index: 2;
-}

package/src/components/loading/index.ts

@@ -1 +0,0 @@
-export * from './loading.view';

package/src/components/loading/loading.less

@@ -1,14 +0,0 @@
-.loading_indicator {
-  width: 20px;
-  height: 20px;
-  background-image: url('./media/loading.svg');
-  background-size: cover;
-}
-
-.vs-dark .loading_indicator {
-  background-image: url('./media/loading-dark.svg');
-}
-
-.hc-black .loading_indicator {
-  background-image: url('./media/loading-hc.svg');
-}

package/src/components/loading/loading.view.tsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-import './loading.less';
-
-export const Loading: React.FC<React.HTMLAttributes<HTMLDivElement>> = () => <div className='loading_indicator ' />;
-
-Loading.displayName = 'Loading';