@knowmax/genericlist-fluentuiv9/dist/components/list/List.js

Knowmax Generic list with basic CRUD support with Fluent V9 user interface implementation.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { observer } from 'mobx-react-lite';
import { tokens } from '@fluentui/tokens';
import { makeStyles, mergeClasses } from '@griffel/react';
import { Text } from '@fluentui/react-text';
import { useGenericListSettings } from '@knowmax/genericlist-core';
import { Loader, ErrorMessage } from '../../components/core';
import { LANGUAGE_LABELNORESULTS } from '../../types/language';
import { ListPanel, PagerWrapper } from '.';
const useClasses = makeStyles({
    listroot: {
        display: 'flex',
        flexDirection: 'column',
        rowGap: tokens.spacingVerticalM
    }
});
/** Generic component to render list for items in provided @see GenericList. */
// somehow I need to use <T,> since <T> is not working
export const List = observer(({ list, onRenderListItem, showPager = true, className }) => {
    const classes = useClasses();
    const settings = useGenericListSettings();
    return (_jsxs(_Fragment, { children: [list.error &&
                _jsx(ErrorMessage, { error: list.error }), (!list.loaded || list.list.length === 0) && list.loading &&
                _jsx(Loader, {}), list.loaded && !list.loading && list.list.length === 0 &&
                _jsx(Text, { children: settings.onTranslate(LANGUAGE_LABELNORESULTS) }), _jsxs("div", { className: mergeClasses(classes.listroot, className), children: [list.loaded &&
                        _jsx(ListPanel, { loading: list.loading, children: list.list.map((item, index) => onRenderListItem(item, index)) }), showPager &&
                        _jsx(PagerWrapper, { list: list })] })] }));
});