@ibizstudio/quick-action-bar v0.0.1-beta.2

指令快捷操作栏

使用示例

1. 根据自身需求实现 ListDataProvider、DataItemProvider 接口，此为操作栏列表的数据适配器

/**
 * 操作栏默认模式数据适配器
 *
 * @author chitanda
 * @date 2022-06-28 18:06:54
 * @export
 * @class DefaultModeDataProvider
 * @implements {ListDataProvider<DefaultModeDataItemProvider>}
 */
export class DefaultModeDataProvider implements ListDataProvider<DefaultModeDataItemProvider> {
  /**
   * 列表行内点击指令
   *
   * @author chitanda
   * @date 2022-06-30 11:06:49
   * @type {string}
   */
  command: string = CommandConst.DEFAULT_MODE_CLICK;

  list: DefaultModeDataItemProvider[] = [];

  constructor() {
    // 注册列表行内点击指令
    commands.register(
      CommandConst.DEFAULT_MODE_CLICK,
      async (data: DefaultModeDataItemProvider) => {
        const { keyboards } = data.mode.opts;
        Mousetrap.trigger(keyboards instanceof Array ? keyboards[0] : keyboards);
      },
      {
        id: CommandConst.DEFAULT_MODE_CLICK,
        title: '默认模式点击',
      },
    );
  }

  /**
   * 过滤展示列表
   *
   * @author chitanda
   * @date 2022-06-29 14:06:49
   * @param {string} [searchVal]
   * @return {*}  {Promise<DefaultModeDataItemProvider[]>}
   */
  async getItems(_searchVal?: string): Promise<DefaultModeDataItemProvider[]> {
    // 减一是因为默认模式不需要显示
    if (quickActionModeRegister.size - 1 !== this.list.length) {
      this.list = [];
      const modes = quickActionModeRegister.getModes();
      for (let i = 1; i < modes.length; i++) {
        const mode = modes[i];
        this.list.push(new DefaultModeDataItemProvider(i.toString(), mode));
      }
    }
    return this.list;
  }
}

/**
 * 列表数据项
 *
 * @author chitanda
 * @date 2022-06-28 18:06:15
 * @export
 * @class DefaultModeDataItemProvider
 * @implements {DataItemProvider}
 */
export class DefaultModeDataItemProvider implements DataItemProvider {
  readonly id: string = '';
  readonly label: string;
  readonly tooltip?: string;
  readonly icon?: string;
  readonly description?: string;
  readonly mode: QuickActionMode;

  /**
   * Creates an instance of DefaultModeDataItemProvider.
   *
   * @author chitanda
   * @date 2022-06-30 11:06:54
   * @param {string} id
   * @param {QuickActionMode} mode
   */
  constructor(id: string, mode: QuickActionMode) {
    const { opts } = mode;
    this.mode = mode;
    this.id = id;
    this.label = opts.title;
    this.icon = opts.icon;
    this.description = opts.description;
  }
}

2. 注册新适配的模式

  quickActionModeRegister.addModel({
    title: '默认模式',
    tooltip: '默认模式提示',
    description: '默认模式描述',
    icon: './assets/svg/icon-default.svg',
    type: ModeType.DEFAULT,
    keyboards: 'ctrl+p',
    tag: '',
    provider: new DefaultModeDataProvider(),
  });