@difizen/libro-common 0.3.4 → 1.0.0

package/src/app/menu/menu-render.tsx

@@ -0,0 +1,92 @@
+import type { MenuPath } from '../../core/index.js';
+import { useInject, ObservableContext } from '../../observable/index.js';
+import type { Syringe } from '../../ioc/index.js';
+import type { FC } from 'react';
+import { memo, useEffect, useState, useContext, useMemo } from 'react';
+
+import { MenuFactory } from './menu.js';
+import type { Menu } from './menu.js';
+import { MenuContext } from './menu-context.js';
+import { MenuItemKeeper } from './menu-item-keeper.js';
+import { MenuItemRender } from './menu-item-render.js';
+import { MenuInstance } from './menu-protocol.js';
+import type { MenuItemRenderProps, MenuData } from './menu-protocol.js';
+
+export interface MenuRenderProps {
+  /**
+   * menu 的路径
+   */
+  menuPath: MenuPath;
+  /**
+   * 传递已经存在的 menu 实例
+   */
+  menu?: Menu;
+  /**
+   * 参数
+   * @description menu 传递的参数
+   */
+  data: MenuData;
+  /**
+   * 工厂函数
+   * @description 获取 menu 实例的工厂函数，用于自定义
+   */
+  factory?: MenuFactory;
+
+  render?: FC<MenuItemRenderProps>;
+}
+
+export const useChildContainer = () => {
+  const context = useContext(ObservableContext);
+  const container = context.getContainer();
+  const childContainer = useMemo(() => {
+    return container?.createChild() as Syringe.Container;
+  }, [container]);
+  return childContainer || container;
+};
+export const MenuRender = memo(function MenuRender(props: MenuRenderProps) {
+  const { data, factory, menuPath } = props;
+  const Render = props.render || MenuItemRender;
+  const defaultFactory = useInject<MenuFactory>(MenuFactory);
+  const currentFactory = factory || defaultFactory;
+  const [menu, setMenu] = useState<Menu | undefined>(props.menu);
+  const [contextReady, setContextReady] = useState<boolean>(false);
+
+  const childContainer = useChildContainer();
+
+  useEffect(() => {
+    if (!props.menu) {
+      const newMenu = currentFactory(menuPath);
+      setMenu(newMenu);
+      childContainer.register({
+        token: MenuInstance,
+        useValue: newMenu,
+      });
+    } else {
+      setMenu(props.menu);
+    }
+  }, [childContainer, currentFactory, props.menu, menuPath]);
+
+  useEffect(() => {
+    if (menu && !menu.disposed) {
+      menu.setCurrent(data);
+      setContextReady(true);
+    }
+    return () => {
+      setContextReady(false);
+    };
+  }, [childContainer, data, menu]);
+
+  if (!menu || !contextReady) {
+    return null;
+  }
+
+  return (
+    <ObservableContext.Provider value={{ getContainer: () => childContainer }}>
+      {/* 兼容旧的处理方式 */}
+      <MenuContext.Provider value={{ menu, data }}>
+        <MenuItemKeeper data={data} item={menu.root} menu={menu} />
+        <Render item={menu.root} root />
+      </MenuContext.Provider>
+    </ObservableContext.Provider>
+  );
+});

package/src/app/menu/menu.tsx

@@ -0,0 +1,212 @@
+import { DisposableCollection, Emitter } from '../../common/index.js';
+import type { Event, Disposable } from '../../common/index.js';
+import type { GeneralMenuItem, ActionMenuItem, MenuPath } from '../../core/index.js';
+import { MenuItem } from '../../core/index.js';
+import { CommandRegistry, MenuRegistry } from '../../core/index.js';
+import { prop } from '../../observable/index.js';
+import { Menu as MenuComponent } from '../../react/index.js';
+import { inject, transient } from '../../ioc/index.js';
+
+import { MenuItemRender } from './menu-item-render.js';
+import type { MenuData, MenuItemState } from './menu-protocol.js';
+
+export const MenuPathSymbol = Symbol('MenuPathSymbol');
+
+/**
+ * Factory for instantiating toolbars.
+ */
+export const MenuFactory = Symbol('ToolbarFactory');
+
+export interface MenuFactory {
+  (menuPath: MenuPath): Menu;
+}
+
+/**
+ * The toolbar manager, a toolbar instance should be created with view.
+ */
+@transient()
+export class Menu implements Disposable {
+  protected toDispose = new DisposableCollection();
+  protected _disposed = false;
+  get disposed() {
+    return this._disposed;
+  }
+
+  protected disposedEventEmitter: Emitter<void> = new Emitter();
+  onDisposed: Event<void> = this.disposedEventEmitter.event;
+
+  @prop()
+  current: any;
+
+  @prop()
+  states: Map<string, MenuItemState> = new Map<string, MenuItemState>();
+
+  @prop()
+  root: GeneralMenuItem;
+
+  protected readonly commands: CommandRegistry;
+  protected readonly menus: MenuRegistry;
+  protected readonly menuPath: MenuPath;
+
+  constructor(
+    @inject(CommandRegistry)
+    commands: CommandRegistry,
+    @inject(MenuRegistry)
+    menus: MenuRegistry,
+    @inject(MenuPathSymbol) menuPath: MenuPath,
+  ) {
+    this.commands = commands;
+    this.menus = menus;
+    this.menuPath = menuPath;
+    this.menuPath = menuPath;
+    this.root = this.menus.getMenu(this.menuPath);
+  }
+
+  setCurrent(current: any): void {
+    this.current = current;
+  }
+
+  sort = (left: MenuItem, right: MenuItem) => {
+    const leftOrder = left.order ?? left.id;
+    const rightOrder = right.order ?? right.id;
+    return leftOrder.localeCompare(rightOrder);
+  };
+
+  protected commandIsEnabled(command: string): boolean {
+    return this.commands.isEnabled(command, this.current);
+  }
+
+  execute(item: ActionMenuItem, data: MenuData = this.current) {
+    if (this.states.get(item.id)?.enable) {
+      let args = data;
+      if (!Array.isArray(data)) {
+        args = [data];
+      }
+      return this.commands.executeCommandByHandler(item, item.command!, ...args);
+    }
+    return undefined;
+  }
+
+  setState = (item: MenuItemState) => {
+    this.states.set(item.id, item);
+  };
+
+  getState = (item: MenuItemState | MenuItem) => {
+    const currentState = this.states.get(item.id);
+    return currentState;
+  };
+
+  removeItemState(key: string) {
+    this.states.delete(key);
+  }
+
+  protected isGroup(item: MenuItem): boolean {
+    return MenuItem.isGeneralMenuItem(item) && !item.isSubmenu;
+  }
+
+  protected doRenderList(list: readonly MenuItem[]): React.ReactNode {
+    const childNodes: React.ReactNode[] = [];
+    let lastItemIsDivider = false;
+    for (let index = 0; index < list.length; index++) {
+      const child = list[index];
+      if (MenuItem.isGeneralMenuItem(child)) {
+        if (this.isGroup(child)) {
+          if (index > 0 && !lastItemIsDivider) {
+            childNodes.push(
+              <MenuComponent.Divider key={`${child.id}-divider-before`} />,
+            );
+            lastItemIsDivider = true;
+          }
+          const visibleChildren = child.children.filter((item) => this.isVisible(item));
+          if (visibleChildren.length === 0) {
+            continue;
+          }
+          const children = this.renderMenuList(
+            [...visibleChildren].sort(this.sort),
+            true,
+          );
+          if (children instanceof Array) {
+            childNodes.push(...children);
+          } else {
+            childNodes.push(children);
+          }
+          lastItemIsDivider = false;
+          if (
+            index < list.length - 1 &&
+            !this.isGroup(list[index + 1]) &&
+            !lastItemIsDivider
+          ) {
+            childNodes.push(
+              <MenuComponent.Divider key={`${child.id}-divider-after`} />,
+            );
+            lastItemIsDivider = true;
+          }
+          continue;
+        }
+      }
+      childNodes.push(<MenuItemRender key={child.id} item={child} root={false} />);
+      lastItemIsDivider = false;
+    }
+    return childNodes;
+  }
+
+  renderMenuList = (list: readonly MenuItem[], inMenu = false): React.ReactNode => {
+    const childNodes = this.doRenderList(list);
+    if (inMenu) {
+      return childNodes;
+    }
+    return <MenuComponent>{childNodes}</MenuComponent>;
+  };
+
+  renderMenuItem(item: MenuItem, root = false) {
+    let content = null;
+    if (MenuItem.isGeneralMenuItem(item)) {
+      const sorted = [...item.children].sort(this.sort);
+      if (item.isSubmenu) {
+        content = (
+          <MenuComponent.SubMenu key={item.id} text={item.renderTitle()}>
+            {this.renderMenuList(sorted, true)}
+          </MenuComponent.SubMenu>
+        );
+      } else {
+        content = this.renderMenuList(sorted, true);
+      }
+    }
+
+    if (MenuItem.isActionMenuItem(item)) {
+      if (!this.isVisible(item)) {
+        return null;
+      }
+      return (
+        <MenuComponent.Item
+          disabled={!this.isEnable(item)}
+          icon={item.renderIcon()}
+          onClick={() => {
+            this.execute(item);
+          }}
+          key={item.id}
+        >
+          {item.renderTitle()}
+        </MenuComponent.Item>
+      );
+    }
+
+    if (root) {
+      return <MenuComponent>{content}</MenuComponent>;
+    }
+    return content;
+  }
+
+  dispose(): void {
+    this.states.clear();
+    this.toDispose.dispose();
+    this._disposed = true;
+  }
+
+  isVisible(item: MenuItem): boolean {
+    return this.states.get(item.id)?.visible ?? false;
+  }
+  isEnable(item: MenuItem): boolean {
+    return this.states.get(item.id)?.enable ?? false;
+  }
+}

package/src/app/modal/index.ts

@@ -0,0 +1,29 @@
+import { createViewPreference, ManaModule, PortalSlotId } from '../../core/index.js';
+
+import { ModalApplicationContribution } from './modal-contribution.js';
+import { ModalContribution } from './modal-protocol.js';
+import { ModalRenderView } from './modal-render.js';
+import { ModalService } from './modal-service.js';
+
+export * from './modal-render.js';
+export * from './modal-service.js';
+export * from './modal-protocol.js';
+export * from './modal-contribution.js';
+
+export const ModalModule = ManaModule.create()
+  .register(
+    ModalService,
+    ModalRenderView,
+    ModalApplicationContribution,
+    createViewPreference({
+      view: ModalRenderView,
+      slot: PortalSlotId,
+      autoCreate: true,
+    }),
+  )
+  .contribution(ModalContribution);
+
+// @TODO 兼容break，下个大版本删除
+export const ModalRender: React.FC = () => {
+  return null;
+};

package/src/app/modal/modal-contribution.ts

@@ -0,0 +1,13 @@
+import { ApplicationContribution } from '../../core/index.js';
+import { inject } from '../../ioc/index.js';
+import { singleton } from '../../ioc/index.js';
+
+import { ModalService } from './modal-service.js';
+
+@singleton({ contrib: [ApplicationContribution] })
+export class ModalApplicationContribution implements ApplicationContribution {
+  @inject(ModalService) modalService: ModalService;
+  onStart() {
+    this.modalService.init();
+  }
+}

package/src/app/modal/modal-protocol.tsx

@@ -0,0 +1,30 @@
+import { Syringe } from '../../ioc/index.js';
+
+export interface ModalItemProps<T> {
+  modalItem: ModalItem<T>;
+  data?: T;
+  visible: boolean;
+  close: () => void;
+}
+
+export interface ModalItem<T = any> {
+  id: string;
+  component: React.FC<ModalItemProps<T>>;
+  shouldRender?: (data?: T) => boolean;
+  render?: (props: ModalItemProps<T>) => React.ReactNode;
+  __data?: T;
+}
+
+export const ModalContribution = Syringe.defineToken('ModalContribution');
+export interface ModalContribution {
+  registerModal?: () => ModalItem<any>;
+  registerModals?: () => ModalItem<any>[];
+}
+
+export function renderModal<T>(
+  componet: React.FC<ModalItemProps<T>>,
+  props: ModalItemProps<any>,
+): React.ReactNode {
+  const Modal = componet;
+  return <Modal key={props.modalItem.id} {...props} />;
+}

package/src/app/modal/modal-render.tsx

@@ -0,0 +1,22 @@
+import { BaseView, view } from '../../core/index.js';
+import { useInject } from '../../observable/index.js';
+import { singleton } from '../../ioc/index.js';
+import React from 'react';
+
+import { ModalService } from './modal-service.js';
+
+const ModalRender: React.FC = React.forwardRef(function ModalRender() {
+  const modalService = useInject(ModalService);
+
+  return (
+    <div className="mana-modal-render">
+      {modalService.modalViewList.map((item) => modalService.renderModal(item))}
+    </div>
+  );
+});
+
+@singleton()
+@view('modal-render-view')
+export class ModalRenderView extends BaseView {
+  override view = ModalRender;
+}

package/src/app/modal/modal-service.ts

@@ -0,0 +1,166 @@
+import type { Disposable } from '../../common/index.js';
+import { prop } from '../../observable/index.js';
+import type { Contribution } from '../../ioc/index.js';
+import { contrib, singleton } from '../../ioc/index.js';
+
+import type { ModalItem, ModalItemProps } from './modal-protocol.js';
+import { renderModal, ModalContribution } from './modal-protocol.js';
+
+export class ModalItemView<T = any> implements Disposable {
+  @prop()
+  modalItem: ModalItem<T>;
+
+  @prop()
+  modalVisible = false;
+
+  @prop()
+  modalData?: T;
+
+  constructor(modalItem: ModalItem<T>) {
+    this.modalItem = modalItem;
+  }
+
+  open = (data: T) => {
+    this.modalData = data;
+    this.modalVisible = true;
+  };
+
+  close = () => {
+    this.modalVisible = false;
+    this.modalData = undefined;
+  };
+
+  shouldRender() {
+    if (this.modalVisible !== true || this.disposed) {
+      return false;
+    }
+    if (!this.modalItem.component) {
+      console.warn(`${this.modalItem.id} is not valid modal`);
+      return false;
+    }
+    if (this.modalItem.shouldRender) {
+      return this.modalItem.shouldRender(this.modalData);
+    }
+    return true;
+  }
+
+  getModalProps(): ModalItemProps<T> {
+    const props: ModalItemProps<T> = {
+      modalItem: this.modalItem,
+      data: this.modalData,
+      visible: this.modalVisible,
+      close: this.close,
+    };
+    return props;
+  }
+
+  disposed = false;
+  dispose() {
+    this.disposed = true;
+    this.close();
+  }
+}
+
+@singleton()
+export class ModalService {
+  protected modals = new Map<string, ModalItem>();
+
+  @prop()
+  modalViewList: ModalItemView<any>[] = [];
+
+  protected readonly contributions: Contribution.Provider<ModalContribution>;
+
+  constructor(
+    @contrib(ModalContribution) contributions: Contribution.Provider<ModalContribution>,
+  ) {
+    this.contributions = contributions;
+  }
+
+  init() {
+    this.contributions.getContributions().forEach((contribution) => {
+      if (contribution.registerModal) {
+        const modalItem = contribution.registerModal();
+        this.registerModal(modalItem);
+      }
+      if (contribution.registerModals) {
+        const modalItems = contribution.registerModals();
+        this.registerModals(modalItems);
+      }
+    });
+  }
+
+  hasModal(modal: ModalItem<any> | string): boolean {
+    const modalId = typeof modal === 'string' ? modal : modal.id;
+    return this.modals.has(modalId);
+  }
+
+  getModal<T>(modal: ModalItem<T> | string) {
+    const modalId = typeof modal === 'string' ? modal : modal.id;
+    return this.modals.get(modalId);
+  }
+
+  registerModal(modal: ModalItem) {
+    this.modals.set(modal.id, modal);
+  }
+
+  registerModals(modals: ModalItem<any>[]) {
+    modals.forEach((item) => {
+      this.registerModal(item);
+    });
+  }
+
+  unregisterModal(modal: ModalItem) {
+    this.modals.delete(modal.id);
+  }
+
+  getOrCreateModalView<T>(modal: ModalItem<T>) {
+    let viewInstance = this.modalViewList.find(
+      (item) => item.modalItem.id === modal.id,
+    );
+    if (!viewInstance) {
+      const modalItem = this.getModal(modal);
+      if (!modalItem) {
+        throw Error(`should have modal ${modal.id} registed`);
+      }
+      viewInstance = new ModalItemView(modalItem);
+      this.modalViewList.push(viewInstance);
+    }
+    return viewInstance;
+  }
+
+  openModal = <T>(modal: { id: string } | string, data?: T) => {
+    const modalId = typeof modal === 'string' ? modal : modal.id;
+    const exist = this.getModal(modalId);
+    if (exist) {
+      const modalView = this.getOrCreateModalView(exist);
+      modalView.open(data);
+    }
+  };
+
+  closeModal = (modal: { id: string } | string) => {
+    const modalId = typeof modal === 'string' ? modal : modal.id;
+    this.modalViewList.find((item) => item.modalItem.id === modalId)?.close();
+  };
+
+  closeAllModal = () => {
+    this.modalViewList.forEach((item) => item.close());
+  };
+
+  getModalProps = <T>(itemView: ModalItemView<T>): ModalItemProps<T> => {
+    return itemView.getModalProps();
+  };
+
+  shouldRenderModal = <T>(itemView: ModalItemView<T>): boolean => {
+    return itemView.shouldRender();
+  };
+
+  renderModal<T>(itemView: ModalItemView<T>): React.ReactNode {
+    if (!this.shouldRenderModal(itemView)) {
+      return null;
+    }
+    if (itemView.modalItem.render) {
+      return itemView.modalItem.render(this.getModalProps(itemView));
+    }
+    return renderModal(itemView.modalItem.component, this.getModalProps(itemView));
+  }
+}

package/src/app/notification/index.less

@@ -0,0 +1,20 @@
+.mana-notification-content {
+  display: flex;
+  flex-direction: column;
+
+  &-actions {
+    align-self: flex-end;
+
+    &-item {
+      border: var(--mana-border-width) solid var(--mana-color-border);
+      padding: 4px 12px;
+      border-radius: var(--mana-border-radius);
+      background-color: inherit;
+
+      &:hover {
+        cursor: pointer;
+        background-color: var(--mana-color-border);
+      }
+    }
+  }
+}

package/src/app/notification/index.ts

@@ -0,0 +1,8 @@
+import { ManaModule } from '../../core/index.js';
+
+import { NotificationService } from './service.js';
+
+export const NotificationModule = ManaModule.create().register(NotificationService);
+
+export * from './protocol.js';
+export * from './service.js';

package/src/app/notification/protocol.ts

@@ -0,0 +1,16 @@
+import type { NotificationArgsProps } from '../../react/index.js';
+import type { ReactNode } from 'react';
+
+export interface NotificationAction {
+  key: string;
+  label?: string;
+}
+
+export interface NotificationConfig extends NotificationArgsProps {
+  key?: string;
+  type?: 'info' | 'warning' | 'success' | 'error';
+  message: ReactNode;
+  description?: ReactNode;
+  actions?: NotificationAction[];
+  onAction?: (e: any, action: NotificationAction) => void;
+}

package/src/app/notification/service.tsx

@@ -0,0 +1,60 @@
+import { notification } from '../../react/index.js';
+import { v1 } from 'uuid';
+
+import { Disposable } from '../../common/index.js';
+import { singleton } from '../../ioc/index.js';
+
+import type { NotificationConfig, NotificationAction } from './protocol.js';
+
+import './index.less';
+
+const NotificationContent = (props: NotificationConfig) => {
+  const actions: NotificationAction[] = props.actions || [];
+  return (
+    <div className="mana-notification-content">
+      {props.description || ''}
+      <div className="mana-notification-content-actions">
+        {actions.map((item) => {
+          return (
+            <button
+              className="mana-notification-content-actions-item"
+              key={item.key}
+              onClick={(e) => {
+                props.onAction?.(e, item);
+              }}
+            >
+              {item.label || item.key}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+@singleton()
+export class NotificationService {
+  open(config: NotificationConfig): Disposable {
+    let key = config.key;
+    if (!key) {
+      key = v1();
+    }
+    const description = <NotificationContent {...config} />;
+    notification.open({ ...config, key, description });
+    return Disposable.create(() => {
+      notification.destroy(key);
+    });
+  }
+  warning(config: NotificationConfig): Disposable {
+    return this.open({ ...config, type: 'warning' });
+  }
+  info(config: NotificationConfig): Disposable {
+    return this.open({ ...config, type: 'info' });
+  }
+  success(config: NotificationConfig): Disposable {
+    return this.open({ ...config, type: 'success' });
+  }
+  error(config: NotificationConfig): Disposable {
+    return this.open({ ...config, type: 'error' });
+  }
+}