@wix/design-system/dist/esm/TableListHeader/TableListHeader.js

@wix/design-system

import React, { forwardRef, useCallback } from 'react';
import { SortByArrowUp, SortByArrowDown, } from '@wix/wix-ui-icons-common/system';
import { dataHooks } from './constants';
import { st, classes } from './TableListHeader.st.css.js';
import { Checkbox } from '../Checkbox';
import { InfoIcon } from '../InfoIcon';
import { useIcons } from '../WixDesignSystemIconThemeProvider';
const ALIGN = {
    left: 'left',
    center: 'center',
    right: 'right',
};
const CHECKBOX_STATE = {
    normal: 'normal',
    checked: 'checked',
    indeterminate: 'indeterminate',
    hasError: 'hasError',
    disabled: 'disabled',
    hidden: 'hidden',
};
const getWidthStyle = options => options.reduce((acc, { width }) => `${acc} ${typeof width === 'number' ? width + 'px' : width || '1fr'}`, '');
/** TableListHeader */
const TableListHeader = forwardRef(({ options = [], checkboxState = CHECKBOX_STATE.hidden, onCheckboxChange = () => { }, onSortChange = () => { }, className, dataHook, skin = 'standard', }, ref) => {
    const onColumnClick = useCallback((sortable, colNum) => evt => {
        sortable && onSortChange && onSortChange(colNum, evt);
    }, [onSortChange]);
    return (React.createElement("div", { ref: ref, className: st(classes.root, { skin }, className), "data-hook": dataHook },
        checkboxState !== CHECKBOX_STATE.hidden && (React.createElement(Checkbox, { dataHook: dataHooks.tableListHeaderCheckbox, checked: checkboxState === CHECKBOX_STATE.checked, indeterminate: checkboxState === CHECKBOX_STATE.indeterminate, hasError: checkboxState === CHECKBOX_STATE.hasError, disabled: checkboxState === CHECKBOX_STATE.disabled, selectionArea: "none", selectionAreaSkin: "filled", selectionAreaPadding: "13px var(--wds-table-list-header-checkbox-padding-right, 12px) 13px var(--wds-table-list-header-checkbox-padding-left, 6px)", onChange: onCheckboxChange })),
        React.createElement("div", { className: classes.optionsContainer, style: {
                gridTemplateColumns: getWidthStyle(options),
            }, "data-hook": dataHooks.tableListHeaderOptionsContainer }, options.map(({ value, align, sortable, sortDescending, infoTooltipProps }, index) => (React.createElement("div", { className: st(classes.option, {
                position: ALIGN[align],
                sortable,
            }), key: index, "data-hook": dataHooks.tableListHeaderValue, onClick: onColumnClick(sortable, index) },
            value,
            React.createElement(TableListHeaderSortingArrow, { sortDescending: sortDescending }),
            React.createElement(TableListHeaderInfoTooltip, { tooltipProps: infoTooltipProps })))))));
});
TableListHeader.displayName = 'TableListHeader';
export { TableListHeader };
const TableListHeaderSortingArrow = ({ sortDescending }) => {
    const icons = useIcons('TableListHeader', {
        SortByArrowUp,
        SortByArrowDown,
    });
    if (sortDescending === undefined) {
        return null;
    }
    const Arrow = sortDescending ? icons.SortByArrowDown : icons.SortByArrowUp;
    const dataHook = sortDescending
        ? dataHooks.tableListHeaderArrowDescending
        : dataHooks.tableListHeaderArrowAscending;
    return (React.createElement(Arrow, { "data-hook": dataHook, className: classes.sortArrow, height: 12 }));
};
const TableListHeaderInfoTooltip = ({ tooltipProps }) => {
    if (tooltipProps === undefined) {
        return null;
    }
    return (React.createElement(InfoIcon, { dataHook: dataHooks.tableListHeaderInfoIcon, ...tooltipProps }));
};
//# sourceMappingURL=TableListHeader.js.map