Handle Styles in React component

handle-styles.jsx

// — — — — — BEGIN handle styles — — — — — — — //
 // count the number of buttons we want to show
 const numberOfButtons = [canAddColumns, canHideColumns, canRemoveColumns, canSearch, canSort].reduce(
 (acc, showButton) => showButton ? acc+1 : acc,
 0
 )
const totalColumnIconsWidth = numberOfButtons * (sheetsVariables.columnIconsSize + sheetsVariables.columnIconsMargin)
// styles object
 const headerCellStyles = {
 columnIcons: encodeStyles({
 width: totalColumnIconsWidth
 }),
 columnOptions: encodeStyles({
 …(columnHasError ? { pointerEvents: “none” } : hideIfTrue(searching || sorting)),
 right: -1 * totalColumnIconsWidth,
 }),
 }
// — — — — — END handle styles — — — — — — — //