MetaEntitiesSelect

Компонент выбора мета-сущностей Трекера — проекты, портфели, цели, отчеты — на основе саджеста. Отображает каждую сущность с иконкой и именем, поддерживает асинхронную загрузку, состояние загрузки, отображение ошибок и кнопку очистки.

Базовое использование

import {MetaEntitiesSelect} from '@weavix/tracker-components';

<MetaEntitiesSelect
    getItems={(text) => fetchProjects(text)}
    onChange={(entity) => console.log('selected', entity)}
/>;

Использование с Tracker API

import React, {useState} from 'react';
import {MetaEntitiesSelect} from '@weavix/tracker-components';
import type {MetaEntityV2} from '@weavix/tracker-api-types';

interface Props {
    trackerApi: TrackerApi;
    onChange: (entity: MetaEntityV2) => void;
}

export const ProjectSelect: React.FC<Props> = ({trackerApi, onChange}) => {
    const [error, setError] = useState<string | undefined>(undefined);

    const getItems = async (input: string): Promise<MetaEntityV2[]> => {
        setError(undefined);
        try {
            const result = await trackerApi.v3.post['/entities/{entityType}/_search']({
                pathParams: {entityType: 'project'},
                queryParams: {fields: ['summary'], page: 1, perPage: 50},
                bodyParams: {filter: {}, filterTypes: ['ALL'], input},
            });
            return result.data;
        } catch (err) {
            setError(err instanceof Error ? err.message : 'Не удалось загрузить проекты');
            return [];
        }
    };

    return (
        <MetaEntitiesSelect
            getItems={getItems}
            onChange={onChange}
            error={error}
            placeholder="Выберите проект"
        />
    );
};

Типы сущностей: параметр entityType принимает значения 'portfolio' | 'project' | 'report' | 'goal'.

Основные свойства

Свойство	Тип	По умолчанию	Описание
`getItems`	`(text: string) => MetaEntityV2[] \| Promise<MetaEntityV2[]>`	—	Функция загрузки элементов. Вызывается при монтировании и при каждом изменении текста
`onChange`	`(entity: MetaEntityV2) => void`	—	Колбэк при выборе сущности
`onTextChange`	`(text: string) => void`	—	Колбэк при изменении текста в поле ввода
`text`	`string`	—	Текущее значение поля ввода (управляемый режим)
`placeholder`	`string`	`'Выберите проект'`	Плейсхолдер при пустом поле
`error`	`string	boolean`	—	Сообщение об ошибке или флаг ошибки
`hasClear`	`boolean`	`true`	Показывать кнопку очистки (×)
`className`	`string`	—	Дополнительный CSS-класс корневого элемента
`itemClassName`	`string`	—	Дополнительный CSS-класс каждого элемента списка

Была ли статья полезна?

IssueTypeIcon

MetaEntityIcon