@kwiz/fluentui/dist/controls/list.js

KWIZ common controls for FluentUI

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { makeStyles, tokens } from '@fluentui/react-components';
import { LOGO_BLUE_SQUARE, LOGO_WHITE_SQUARE, isNullOrUndefined, isString } from '@kwiz/common';
import { useKWIZFluentContext } from '../helpers/context-internal';
import { KnownClassNames, mixins } from '../styles/styles';
import { Horizontal } from './horizontal';
import { Section } from './section';
import { Vertical } from './vertical';
const useStyles = makeStyles({
    list: {
        rowGap: 0
    },
    listItem: {
        padding: tokens.spacingVerticalS,
        ':hover': {
            backgroundColor: tokens.colorNeutralBackground1Hover
        }
    },
    listItemSelected: {
        backgroundColor: tokens.colorNeutralBackground1Selected
    },
    media: {
        width: '32px',
        fontSize: tokens.fontSizeBase600,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center'
    },
    image: {
        width: tokens.lineHeightBase600,
        height: tokens.lineHeightBase600,
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        borderRadius: tokens.borderRadiusCircular,
        border: `1px solid ${tokens.colorNeutralStroke1}`
    },
    listItemBody: {
        rowGap: 0,
        width: 'calc(100% - 44px)'
    },
    listItemHeader: mixins.ellipsis,
    listItemContent: Object.assign(Object.assign({}, mixins.ellipsis), { fontSize: tokens.fontSizeBase200 }),
    listItemMedia: Object.assign(Object.assign({}, mixins.ellipsis), { maxWidth: '20%', '& svg': {
            height: tokens.fontSizeBase300
        }, '& button': {
            padding: 0,
            minWidth: 0,
            minHeight: 0,
            height: '14px'
        } }),
    listItemMediaNoTrim: {
        overflow: 'visible',
        maxWidth: 'fit-content'
    },
    listItemMultilineContent: {
        whiteSpace: 'pre-line'
    }
});
export const ListEx = (props) => {
    const ctx = useKWIZFluentContext();
    const cssNames = useStyles();
    const isDark = ctx.dark === true || props.dark === true;
    const listItemElm = (item) => _jsxs(Horizontal, { css: [cssNames.listItem, item.selected && cssNames.listItemSelected], onClick: item.onClick, children: [item.media && _jsx(Section, { css: [cssNames.media], onClick: (e) => {
                    if (!item.onClickOnMedia)
                        e.stopPropagation(); //media may have its on onclick
                }, children: isString(item.media)
                    ? _jsx("div", { className: cssNames.image, style: { backgroundImage: `url('${encodeURI(item.media)}'), url('${isDark ? LOGO_WHITE_SQUARE : LOGO_BLUE_SQUARE}')` } })
                    : item.media }), _jsxs(Vertical, { main: true, css: [cssNames.listItemBody], children: [_jsxs(Horizontal, { main: true, children: [_jsx(Section, { main: true, css: [cssNames.listItemHeader], children: item.header }), item.headerMedia && _jsx(Section, { onClick: (e) => {
                                    e.stopPropagation(); //media may have its on onclick
                                }, css: [cssNames.listItemMedia, props.showAllHeaderMedia && cssNames.listItemMediaNoTrim], children: item.headerMedia })] }), !isNullOrUndefined(item.content)
                        ? (Array.isArray(item.content) ? item.content : [item.content]).map((c, idx) => isNullOrUndefined(c) ? undefined : _jsx(Section, { css: [cssNames.listItemContent, props.multiline ? cssNames.listItemMultilineContent : undefined], children: c }, idx))
                        : undefined] })] }, item.key);
    return (_jsx(Vertical, { css: [cssNames.list, KnownClassNames.list], children: props.items.map(item => listItemElm(item)) }));
};
//# sourceMappingURL=list.js.map