Перейти к содержанию

Замена контрола добавления новой метки в карточке

Замена контрола добавления нового тега в карточке

Предположим, что нам требуется заменить в карточке определенного типа стандартную кнопку добавления тегов + на собственную кнопку Добавить тег.

Для этого создаем новую модель представления, реализующую интерфейс IAddTagControlViewModel:

import { InitializableViewModelBase } from '@tessa/ui';
import { ICardToolbarViewModel } from 'tessa/ui/cards';
import { IAddTagControlViewModel } from 'tessa/ui/tags/addTagButtonViewModel';



export class CustomAddTagButtonViewModel
  extends InitializableViewModelBase
  implements IAddTagControlViewModel
{
  private _toolbar: ICardToolbarViewModel;



  constructor(toolbar: ICardToolbarViewModel) {
    super();
    this._toolbar = toolbar;
  }



  get toolbar(): ICardToolbarViewModel {
    return this._toolbar;
  }
}```



Затем - новый react-компонент:



```ts
/* eslint-disable react/display-name */
import * as React from 'react';
import { observer } from 'mobx-react';
import { CustomAddTagButtonViewModel } from './abAddTagCustomButtonViewModel';
import { ButtonComponent } from 'ui/button/button';
import { DefaultEventHandlers } from 'ui/hooks/defaultEventHandlers';
import { useCallback } from 'react';
import { localize } from '@tessa/application';



type CustomAddTagButtonProps = {
  viewModel: CustomAddTagButtonViewModel;
};



export const CustomAddTagButton = observer(
  React.forwardRef<HTMLInputElement, CustomAddTagButtonProps>((props, _ref) => {
    const { viewModel } = props;
    const { toolbar } = viewModel;
    const onClickHandler = useCallback(
      async (e: React.MouseEvent) => {
        DefaultEventHandlers.terminate(e);
        await toolbar.executeClickAddTag();
      },
      [toolbar.clickAddTag]
    );
    if (!toolbar || !toolbar.isVisible) {
      return null;
    }



    return (
      <ButtonComponent
        name="ab-add-tag-custom-button"
        caption="Добавить тег"
        tooltip={localize('$Tags_AddNew_Tooltip')}
        onClick={onClickHandler}
      />
    );
  })
);

Добавляем регистрацию:

ComponentsRegistry.instance.register(CustomAddTagButtonViewModel, CustomAddTagButton);

Наконец, создаем расширение, которое подменит контрол для добавления тега в тулбаре карточки:

import { CardUIExtension, ICardUIExtensionContext } from 'tessa/ui/cards';
import { extension } from '@tessa/application';
import { CustomAddTagButtonViewModel } from './abAddTagCustomButtonViewModel';



@extension({ name: 'AbAddTagCustomButtonExtension' })
export class AddTagCustomButtonDemoExtension extends CardUIExtension {
  public initialized(context: ICardUIExtensionContext): void {
    context.toolbar.rightTagControl = new CustomAddTagButtonViewModel(context.toolbar);
  }
}

Теперь после регистрации нашего расширения для выбранного типа карточек мы увидим в правой части тулбара кастомную кнопку Добавить тег вместо стандартной.

Back to top