@wix/design-system
Version:
@wix/design-system
56 lines • 3.25 kB
JavaScript
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';
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, }, ref) => {
const onColumnClick = useCallback((sortable, colNum) => evt => {
sortable && onSortChange && onSortChange(colNum, evt);
}, [onSortChange]);
return (React.createElement("div", { ref: ref, className: st(classes.root, 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 12px 13px 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 default TableListHeader;
const TableListHeaderSortingArrow = ({ sortDescending }) => {
if (sortDescending === undefined) {
return null;
}
const Arrow = sortDescending ? SortByArrowDown : 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