wix-style-react
Version:
wix-style-react
95 lines • 4.94 kB
JavaScript
import React, { forwardRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import { SortByArrowUp, SortByArrowDown, } from '@wix/wix-ui-icons-common/system';
import { dataHooks } from './constants';
import { st, classes } from './TableListHeader.st.css';
import Checkbox from '../Checkbox';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
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';
TableListHeader.propTypes = {
dataHook: PropTypes.string,
className: PropTypes.string,
/**
* `width` supports px/%/fr
* `sortable`: Sets whether this field is sortable. If `true` clicking the header will call `onSortChange`
* `sortDescending`: Sets what sort icon to display in the column header. `true` will show an up arrow, `false` will show a down arrow, `undefined' will show no icon
* `infoTooltipProps`: Props object for column header's [tooltip](/?path=/story/components-api-components--tooltip). Note: `dataHook`, `moveBy` and `children` will not be passed to tooltip.
*/
options: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.node,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
align: PropTypes.oneOf([ALIGN.left, ALIGN.center, ALIGN.right]),
sortable: PropTypes.bool,
sortDescending: PropTypes.bool,
infoTooltipProps: PropTypes.shape(TooltipCommonProps),
})),
/**
* State of Checkbox rendered at first column. 'hidden' to not render it
*/
checkboxState: PropTypes.oneOf([
CHECKBOX_STATE.normal,
CHECKBOX_STATE.checked,
CHECKBOX_STATE.indeterminate,
CHECKBOX_STATE.hasError,
CHECKBOX_STATE.disabled,
CHECKBOX_STATE.hidden,
]),
/**
* Called when checkbox is clicked
*/
onCheckboxChange: PropTypes.func,
/**
* A callback function called on each column title click. Signature `onSortChange(colNum, nativeEvent)`
*/
onSortChange: PropTypes.func,
};
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