@difizen/libro-common 0.3.3 → 1.0.0

package/src/app/typings/index.d.ts

@@ -0,0 +1,7 @@
+declare module 'file-icons-js' {
+  function getClass(filePath: string): string;
+  function getClassWithColor(filePath: string): string;
+}
+
+declare module '*.less';
+declare module '*.css';

package/src/app/view/box/index.tsx

@@ -0,0 +1,66 @@
+import {
+  DefaultSlotView,
+  view,
+  ViewManager,
+  ViewOption,
+  ViewRender,
+} from '../../../core/index.js';
+import { ViewInstance } from '../../../core/index.js';
+import type { SlotViewOption } from '../../../core/index.js';
+import { prop, useInject } from '../../../observable/index.js';
+import { BoxPanel } from '../../../react/index.js';
+import { inject, transient } from '../../../ioc/index.js';
+import React from 'react';
+
+type Direction = 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
+export interface BoxOption extends SlotViewOption {
+  sort?: boolean;
+  direction?: Direction;
+}
+
+export const BoxViewComponent = React.forwardRef(function BoxViewComponent(
+  _props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const instance = useInject<BoxSlotView>(ViewInstance);
+  const children = instance.children;
+  return (
+    <BoxPanel
+      direction={instance.direction}
+      className={instance.className || ''}
+      ref={ref}
+    >
+      {children.map((item) => (
+        <BoxPanel.Pane flex={1} key={item.id}>
+          <ViewRender view={item} />
+        </BoxPanel.Pane>
+      ))}
+    </BoxPanel>
+  );
+});
+
+@transient()
+@view('box-panel-view')
+export class BoxSlotView extends DefaultSlotView {
+  override label: React.ReactNode = null;
+  override view = BoxViewComponent;
+
+  @prop()
+  override sort: boolean | undefined = false;
+
+  @prop()
+  direction: Direction = 'left-to-right';
+
+  protected override option: BoxOption;
+
+  constructor(
+    @inject(ViewOption) option: BoxOption,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super(option, viewManager);
+    this.option = option;
+    this.id = `box-${this.id}`;
+    this.sort = option.sort;
+    this.direction = option.direction || 'left-to-right';
+  }
+}

package/src/app/view/components/index.ts

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

package/src/app/view/components/loading/index.less

@@ -0,0 +1,10 @@
+.mana-loading {
+  background: var(--mana-editor-background);
+  background-image: var(--mana-preload);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 200px;
+  background-attachment: fixed;
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,4 @@
+import './index.less';
+export function Loading() {
+  return <div className="mana-loading" />;
+}

package/src/app/view/flex/index.less

@@ -0,0 +1,3 @@
+.mana-flex {
+  display: flex;
+}

package/src/app/view/flex/index.tsx

@@ -0,0 +1,57 @@
+import {
+  DefaultSlotView,
+  view,
+  ViewManager,
+  ViewOption,
+  ViewRender,
+} from '../../../core/index.js';
+import { ViewInstance } from '../../../core/index.js';
+import type { SlotViewOption } from '../../../core/index.js';
+import { prop, useInject } from '../../../observable/index.js';
+import { inject, transient } from '../../../ioc/index.js';
+import cls from 'classnames';
+import React from 'react';
+import './index.less';
+
+export interface FlexOption extends SlotViewOption {
+  sort?: boolean;
+}
+
+export const FlexViewComponent = React.forwardRef(function FlexViewComponent(
+  _props,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  const instance = useInject<FlexSlotView>(ViewInstance);
+  const children = instance.children;
+  return (
+    <div className={cls('mana-flex', instance.className)} ref={ref}>
+      {children.map((item) => (
+        <div className={'mana-flex-item'} key={item.id}>
+          <ViewRender view={item} />
+        </div>
+      ))}
+    </div>
+  );
+});
+
+@transient()
+@view('flex-view')
+export class FlexSlotView extends DefaultSlotView {
+  override label: React.ReactNode = null;
+  override view = FlexViewComponent;
+
+  @prop()
+  override sort: boolean | undefined = false;
+
+  protected override option: FlexOption;
+
+  constructor(
+    @inject(ViewOption) option: FlexOption,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super(option, viewManager);
+    this.option = option;
+    this.id = `flex-${this.id}`;
+    this.sort = option.sort;
+  }
+}

package/src/app/view/header/header-view.tsx

@@ -0,0 +1,35 @@
+import { DefaultSlotView, view, Slot } from '../../../core/index.js';
+import { BoxPanel } from '../../../react/index.js';
+import { singleton } from '../../../ioc/index.js';
+import * as React from 'react';
+import './index.less';
+
+export enum HeaderArea {
+  left = 'mana-header-left',
+  right = 'mana-header-right',
+  middle = 'mana-header-middle',
+}
+
+const HeaderComponent: React.ForwardRefExoticComponent<any> = React.forwardRef(
+  function HeaderComponent(_props, ref: React.ForwardedRef<HTMLDivElement>) {
+    return (
+      <BoxPanel direction="left-to-right" className={'mana-header'} ref={ref}>
+        <BoxPanel.Pane flex={1} className={'mana-header-left'}>
+          <Slot name={HeaderArea.left} />
+        </BoxPanel.Pane>
+        <BoxPanel.Pane flex={1} className={'mana-header-middle'}>
+          <Slot name={HeaderArea.middle} />
+        </BoxPanel.Pane>
+        <BoxPanel.Pane flex={1} className={'mana-header-right'}>
+          <Slot name={HeaderArea.right} />
+        </BoxPanel.Pane>
+      </BoxPanel>
+    );
+  },
+);
+
+@singleton()
+@view('header-view')
+export class HeaderView extends DefaultSlotView {
+  override view = HeaderComponent;
+}

package/src/app/view/header/index.less

@@ -0,0 +1,43 @@
+.mana-header {
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid var(--mana-menubar-border);
+  background: var(--mana-menubar-background);
+
+  .mana-flex {
+    height: 100%;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .mana-header-left {
+    .mana-flex {
+      .mana-flex-item {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .mana-header-middle {
+    .mana-flex {
+      justify-content: center;
+
+      .mana-flex-item {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  .mana-header-right {
+    padding: 0 12px;
+
+    .mana-flex {
+      justify-content: flex-start;
+      flex-direction: row-reverse;
+
+      .mana-flex-item {
+        margin-left: 8px;
+      }
+    }
+  }
+}

package/src/app/view/header/index.ts

@@ -0,0 +1,24 @@
+import { ManaModule, createSlotPreference } from '../../../core/index.js';
+import { HeaderView, HeaderArea } from './header-view.js';
+import { FlexSlotView } from '../flex/index.js';
+
+export * from './header-view.js';
+
+export const HeaderModule = ManaModule.create().register(
+  HeaderView,
+  createSlotPreference({
+    slot: HeaderArea.right,
+    view: FlexSlotView,
+    options: { sort: true },
+  }),
+  createSlotPreference({
+    slot: HeaderArea.left,
+    view: FlexSlotView,
+    options: { sort: true },
+  }),
+  createSlotPreference({
+    slot: HeaderArea.middle,
+    view: FlexSlotView,
+    options: { sort: true },
+  }),
+);

package/src/app/view/index.ts

@@ -0,0 +1,15 @@
+import { TabSlotView, SideTabView, CardTabView } from './tab';
+import { BoxSlotView } from './box';
+import { ManaModule } from '../../core/index.js';
+import { FlexSlotView } from './flex';
+import { HeaderModule } from './header';
+
+export * from './components';
+export * from './box';
+export * from './tab';
+export * from './flex';
+export * from './header';
+
+export const DefaultViewModule = ManaModule.create()
+  .register(TabSlotView, SideTabView, CardTabView, BoxSlotView, FlexSlotView)
+  .dependOn(HeaderModule);

package/src/app/view/tab/card-tab-view.tsx

@@ -0,0 +1,34 @@
+import { view, ViewManager, ViewOption } from '../../../core/index.js';
+import type { TabsProps } from '../../../react/index.js';
+import { inject, transient } from '../../../ioc/index.js';
+import cls from 'classnames';
+
+import type { TabOption } from './tab-view.js';
+import { TabSlotView } from './tab-view.js';
+
+export interface CardTabOption extends TabOption {
+  tabPosition?: TabsProps['tabPosition'];
+}
+
+@transient()
+@view('card-tab-view')
+export class CardTabView extends TabSlotView {
+  protected override option: CardTabOption;
+  constructor(
+    @inject(ViewOption) option: CardTabOption,
+    @inject(ViewManager) manager: ViewManager,
+  ) {
+    super(option, manager);
+    this.option = option;
+    this.id = `card-${this.id}`;
+    this.className = cls('card-tab-view', this.className);
+  }
+  override getTabProps(): TabsProps {
+    const baseProps = super.getTabProps();
+    return {
+      ...baseProps,
+      type: 'card',
+      tabPosition: this.option.tabPosition || 'top',
+    };
+  }
+}

package/src/app/view/tab/index.less

@@ -0,0 +1,70 @@
+.mana-tab-view-container {
+  height: 100%;
+
+  .mana-tabs {
+    height: 100%;
+  }
+}
+
+.mana-tabs-tab-active {
+  .mana-tab-title {
+    .mana-tab-close {
+      opacity: 1;
+      color: var(--mana-ant-color-icon-hover);
+    }
+  }
+}
+
+.mana-tab-side-title {
+  display: flex;
+  align-items: center;
+
+  .mana-tab-icon {
+    display: flex;
+    color: var(--mana-ant-color-icon);
+    align-items: center;
+  }
+}
+
+.mana-tab-side-pane {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .mana-tab-side-pane-header {
+    display: flex;
+    flex: none;
+    align-items: center;
+    height: 32px;
+    margin-left: 12px;
+  }
+
+  .mana-tab-side-pane-content {
+    flex: auto;
+  }
+}
+
+.mana-tab-title {
+  display: flex;
+  align-items: center;
+
+  .mana-tab-icon {
+    color: var(--mana-ant-color-icon);
+    display: flex;
+    align-items: center;
+    margin-right: 6px;
+  }
+
+  .mana-tab-close {
+    padding: 2px;
+    font-size: 12px;
+    border-radius: 2px;
+    cursor: pointer;
+    opacity: 0;
+
+    &:hover {
+      background: var(--mana-tab-inactiveBackground);
+      opacity: 1;
+    }
+  }
+}

package/src/app/view/tab/index.ts

@@ -0,0 +1,3 @@
+export * from './tab-view';
+export * from './side-tab-view';
+export * from './card-tab-view';

package/src/app/view/tab/side-tab-view.tsx

@@ -0,0 +1,95 @@
+import type { View } from '../../../core/index.js';
+import { ViewRender } from '../../../core/index.js';
+import { ViewManager } from '../../../core/index.js';
+import { view, ViewOption, ViewContext } from '../../../core/index.js';
+import { equals, prop } from '../../../observable/index.js';
+import type { TabsProps } from '../../../react/index.js';
+import { inject, transient } from '../../../ioc/index.js';
+import cls from 'classnames';
+
+import { ToolbarRender } from '../../toolbar/toolbar-render.js';
+
+import type { TabOption } from './tab-view.js';
+import { TabSlotView } from './tab-view.js';
+
+export interface SideTabOption extends TabOption {
+  tabPosition?: TabsProps['tabPosition'];
+  showTitle?: boolean;
+  activeToggable?: boolean;
+  contentToggable?: boolean;
+}
+
+@transient()
+@view('side-tab-view')
+export class SideTabView extends TabSlotView {
+  @prop() showTitle: boolean;
+  protected override option: SideTabOption;
+  constructor(
+    @inject(ViewOption) option: SideTabOption,
+    @inject(ViewManager) manager: ViewManager,
+  ) {
+    super(option, manager);
+    this.option = option;
+    this.id = `side-${this.id}`;
+    this.className = cls('mana-side-tab-view', this.className);
+    this.showTitle = option.showTitle ?? true;
+  }
+
+  onTabClick = (key: string) => {
+    if (this.active?.id === key) {
+      const active = this.option.activeToggable ? undefined : this.active;
+      const showTabContent = this.option.contentToggable
+        ? !this.showTabContent
+        : !!this.active;
+      this.showTabContent = active && showTabContent;
+      setTimeout(() => {
+        if (active !== this.active) {
+          this.active = active;
+        }
+      }, 0);
+    }
+  };
+
+  override getTabProps(): TabsProps {
+    const baseProps = super.getTabProps();
+    return {
+      ...baseProps,
+      tabPosition: this.option.tabPosition || 'left',
+      onTabClick: this.onTabClick,
+    };
+  }
+
+  protected override renderTab(item: View) {
+    return (
+      <ViewContext view={item}>
+        <div
+          title={item.title.caption}
+          className={cls('mana-tab-side-title', item.title.className)}
+        >
+          <span className="mana-tab-icon">{this.renderTitleIcon(item.title.icon)}</span>
+        </div>
+      </ViewContext>
+    );
+  }
+  override renderTabContent(item: View): JSX.Element {
+    return (
+      <div className="mana-tab-side-pane">
+        {this.showTitle && (
+          <div className="mana-tab-side-pane-header">
+            <ViewContext view={item}>
+              {this.renderTitleLabel(item.title.label)}
+            </ViewContext>
+            {equals(this.active, item) && <ToolbarRender data={item} />}
+          </div>
+        )}
+        <div className="mana-tab-side-pane-content">
+          <ViewRender view={item} />
+        </div>
+      </div>
+    );
+  }
+
+  override renderTabToolbar() {
+    return <></>;
+  }
+}

package/src/app/view/tab/tab-menu.ts

@@ -0,0 +1,24 @@
+import type { Command } from '../../../core/index.js';
+import { CommandContribution, CommandRegistry } from '../../../core/index.js';
+import { l10n } from '../../../l10n/index.js'; /* eslint-disable max-len, @typescript-eslint/indent */
+import { inject, singleton } from '../../../ioc/index.js';
+
+export const CLOSE_TAB: Command = {
+  id: 'tab.close',
+  label: l10n.t('关闭'),
+};
+
+@singleton({ contrib: [CommandContribution] })
+export class CommonCommand implements CommandContribution {
+  protected readonly commandRegistry: CommandRegistry;
+  constructor(@inject(CommandRegistry) commandRegistry: CommandRegistry) {
+    this.commandRegistry = commandRegistry;
+  }
+  registerCommands(command: CommandRegistry): void {
+    command.registerCommand(CLOSE_TAB, {
+      execute: () => {
+        //
+      },
+    });
+  }
+}

package/src/app/view/tab/tab-protocol.ts

@@ -0,0 +1,3 @@
+import type { MenuPath } from '../../../core/index.js';
+
+export const TabBarContextMenu: MenuPath = ['tab-bar-context-menu'];

package/src/app/view/tab/tab-view.tsx

@@ -0,0 +1,153 @@
+import { CloseOutlined } from '@ant-design/icons';
+import classnames from 'classnames';
+import type { ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import {
+  DefaultSlotView,
+  view,
+  ViewOption,
+  ViewInstance,
+  ViewContext,
+  ViewManager,
+  ViewRender,
+} from '../../../core/index.js';
+import type { View, SlotViewOption } from '../../../core/index.js';
+import { inject, transient } from '../../../ioc/index.js';
+import { useInject } from '../../../observable/index.js';
+import { prop } from '../../../observable/index.js';
+import { Tabs, Dropdown } from '../../../react/index.js';
+import type { TabPaneProps, TabsProps } from '../../../react/index.js';
+import './index.less';
+
+import { MenuRender } from '../../menu/menu-render.js';
+import { ToolbarRender } from '../../toolbar/toolbar-render.js';
+
+import { TabBarContextMenu } from './tab-protocol.js';
+
+export const TabViewComponent = forwardRef<HTMLDivElement, any>(
+  function TabViewComponent(_props, containerRef) {
+    const viewInstance = useInject<TabSlotView>(ViewInstance);
+    const views = viewInstance.children;
+    const activeKey = viewInstance.active?.id || '__no_select__';
+    return (
+      <div
+        className={classnames('mana-tab-view-container', viewInstance.className)}
+        ref={containerRef}
+      >
+        <Tabs
+          activeKey={activeKey}
+          {...viewInstance.getTabProps()}
+          tabBarExtraContent={viewInstance.renderTabToolbar()}
+        >
+          {views.map((item) => (
+            <Tabs.TabPane key={item.id} {...viewInstance.getTabPaneProps(item)}>
+              {viewInstance.showTabContent ? viewInstance.renderTabContent(item) : null}
+            </Tabs.TabPane>
+          ))}
+        </Tabs>
+      </div>
+    );
+  },
+);
+
+const TabSlotViewId = 'tab-view';
+
+type TabProps = Record<string, number | string | boolean | ReactNode | undefined>;
+
+export interface TabOption extends SlotViewOption {
+  sort?: boolean;
+  showTabContent?: boolean;
+  tabProps: TabProps;
+}
+
+@transient()
+@view(TabSlotViewId)
+export class TabSlotView extends DefaultSlotView {
+  @prop()
+  showTabContent?: boolean | undefined = true;
+
+  override view = TabViewComponent;
+
+  protected override option: TabOption;
+
+  constructor(
+    @inject(ViewOption) option: TabOption,
+    @inject(ViewManager) viewManager: ViewManager,
+  ) {
+    super(option, viewManager);
+    this.option = option;
+    this.id = `tab-${this.id}`;
+    this.showTabContent = option.showTabContent ?? true;
+  }
+
+  onChange = (activeKey: string) => {
+    if (activeKey !== this.active?.id) {
+      this.showTabContent = true;
+      this.active = this.children.find((item) => item.id === activeKey);
+    }
+  };
+
+  getTabProps(): TabsProps {
+    const { tabProps = {} } = this.option;
+    return {
+      type: 'line',
+      hideAdd: true,
+      tabPosition: 'left',
+      onChange: this.onChange,
+      ...tabProps,
+    };
+  }
+
+  getTabPaneProps(item: View): TabPaneProps {
+    if (item.title) {
+      const props = {
+        tab: this.renderTab(item),
+        style: { height: '100%' },
+      };
+      return props;
+    }
+    return {
+      tab: item.label,
+      style: { height: '100%' },
+    };
+  }
+  renderTabContent(item: View) {
+    return <ViewRender view={item} />;
+  }
+  close(item: View) {
+    item.dispose();
+  }
+  protected renderTab(item: View) {
+    return (
+      <ViewContext view={item}>
+        <Dropdown
+          trigger={['contextMenu']}
+          overlay={<MenuRender menuPath={TabBarContextMenu} data={[item]} />}
+        >
+          <div
+            title={item.title.caption}
+            className={classnames('mana-tab-title', item.title.className)}
+          >
+            {item.title.icon && (
+              <span className="mana-tab-icon">
+                {this.renderTitleIcon(item.title.icon)}
+              </span>
+            )}
+            {this.renderTitleLabel(item.title.label)}
+            {item.title.closable && (
+              <CloseOutlined
+                onClick={() => this.close(item)}
+                className="mana-tab-close"
+              />
+            )}
+          </div>
+        </Dropdown>
+      </ViewContext>
+    );
+  }
+
+  renderTabToolbar() {
+    return <ToolbarRender data={[this.active, this]} />;
+  }
+}

package/src/common/assert.ts

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/**
+ * Throws an error with the provided message if the provided value does not evaluate to a true Javascript value.
+ */
+export function ok(value?: unknown, message?: string) {
+  if (!value) {
+    throw new Error(message ? `Assertion failed (${message})` : 'Assertion Failed');
+  }
+}