@kubit-ui-web/react-components/dist/cjs/components/table/component/listColumnHeaderPriority.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ListColumnHeaderPriority = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const text_1 = require("../../../components/text/text");
const component_1 = require("../../../components/text/types/component");
const type_1 = require("../../button/types/type");
const elementOrIcon_1 = require("../../elementOrIcon/elementOrIcon");
const useContent_1 = require("../hooks/useContent");
const table_styled_1 = require("../table.styled");
const ListColumnHeaderPriority = (props) => {
    return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.headers
            // By now you can't have a divider in a column header priority
            .filter(header => !header.config?.hasDivider)
            .map((header, indexHeader) => {
            return ((0, jsx_runtime_1.jsxs)(table_styled_1.ListRowContainerHeaderPriorityStyled, { 
                // By now you can't have a divider in a column header priority
                hasDivider: false, lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles, children: [header.label && ((0, jsx_runtime_1.jsx)(table_styled_1.ListHeaderItemStylesStyled, { "aria-hidden": header.config?.['aria-hidden'], customAlign: header?.config?.alignHeader?.[props.device] || header?.config?.alignHeader, customBackgroundColor: header?.config?.backgroundColor, customWidth: header?.config?.width, flexWidth: header?.config?.flexWidth, hidden: props.hiddenHeaderOn?.[props.device], index: indexHeader, lineSeparatorBottomOnHeader: props.lineSeparatorBottomOnHeader, lineSeparatorLineStyles: props.lineSeparatorLineStyles, lineSeparatorTopOnHeader: props.lineSeparatorTopOnHeader, styles: props.styles.header?.[props.headerVariant], children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles.header?.[props.headerVariant]?.typography, children: header.label }) })), (0, jsx_runtime_1.jsx)(table_styled_1.ListRowHeaderPriorityStyled, { styles: props.styles, children: props.values.map((value, indexValue) => {
                            return ((0, jsx_runtime_1.jsx)(ListColumnHeaderValue, { ...props, hasExpandedIcon: indexValue === 0, header: header, indexHeader: indexHeader, value: value }, indexValue));
                        }) })] }, indexHeader));
        }) }));
};
exports.ListColumnHeaderPriority = ListColumnHeaderPriority;
const ListColumnHeaderValue = (props) => {
    const { rowHeader, getExpandedAria, getValue, getCellTokenValue, handleShowExpandedContent, hasExpandedContentRow, showExpandedContent, rowVariant, } = (0, useContent_1.useContent)({ ...props });
    return ((0, jsx_runtime_1.jsxs)("li", { children: [rowHeader && ((0, jsx_runtime_1.jsx)(table_styled_1.ListHeaderItemStylesStyled, { customAlign: rowHeader?.config?.alignHeader?.[props.device] || rowHeader?.config?.alignHeader, customBackgroundColor: rowHeader?.config?.backgroundColor, customWidth: rowHeader?.config?.width, flexWidth: rowHeader?.config?.flexWidth, hidden: props.hiddenHeaderOn?.[props.device], lineSeparatorBottomOnHeader: props.lineSeparatorBottomOnHeader, lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles.header?.[rowHeader.variant], children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles.header?.[rowHeader.variant]?.typography, children: rowHeader.label }) })), (0, jsx_runtime_1.jsx)("ul", { children: (0, jsx_runtime_1.jsxs)(table_styled_1.ListItemHeaderPriorityStyled, { borderPosition: props.value.rowBorderPosition, customAlign: getCellTokenValue({ headerValue: props.header, token: 'align' }) ||
                        props.header?.config?.alignValue?.[props.device] ||
                        props.header?.config?.alignValue ||
                        props.header?.config?.alignHeader?.[props.device] ||
                        props.header?.config?.alignHeader, customBackgroundColor: getCellTokenValue({ headerValue: props.header, token: 'backgroundColor' }) ??
                        props.value.backgroundColor, customWidth: props.header?.config?.width, flexWidth: props.header?.config?.flexWidth, hasSomeExpandedContent: props.hasSomeExpandedContent, lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles.bodyRows?.[rowVariant], children: [props.hasExpandedIcon && hasExpandedContentRow && ((0, jsx_runtime_1.jsx)(table_styled_1.TableExpandedButton, { "aria-label": getExpandedAria(), styles: props.styles.bodyRows?.[rowVariant], type: type_1.ButtonType.BUTTON, onClick: () => {
                                props.onExpandedContentOpen?.(!showExpandedContent, getValue(props.header), props.indexHeader);
                                handleShowExpandedContent(!showExpandedContent);
                            }, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.bodyRows?.[rowVariant]?.accordionIcon, rotate: showExpandedContent ? '180deg' : '0deg', ...props.accordionIcon }) })), getValue(props.header), props.hasExpandedIcon && hasExpandedContentRow && ((0, jsx_runtime_1.jsx)(table_styled_1.ListItemExpandedStyled, { showExpandedContent: showExpandedContent, styles: props.styles.bodyRows?.[rowVariant], children: showExpandedContent && props.value.expandedContent
                                ? props.value.expandedContent[props.device]
                                : props.expandedContentHelpMessage }))] }) })] }));
};
//# sourceMappingURL=listColumnHeaderPriority.js.map