SelectableItemList = { const Grid = reactWindow.VariableSizeGrid; const scrollbarWidth = (() => { const div = document.createElement("div"); div.style.cssText = "overflow:scroll; visibility:hidden; position:absolute; width:100px"; document.body.appendChild(div); const width = div.offsetWidth - div.clientWidth; div.remove(); return Math.ceil(Math.max(width, 0)); })(); const ItemWrapper = component(({ style, id, name, onToggle, disabled, children }) => { const toggle = useCallback(() => { if (!onToggle) { return; } onToggle(id) }, [onToggle, id]); const adjustedStyle = useMemo(() => ({ ...style, lineHeight: `${style.height}px`, opacity: onToggle && disabled ? .33 : 1, cursor: 'pointer', overflow: 'hidden', }), [style, onToggle, disabled]); return jsx`

${ children }

`; }); const ItemCheckbox = component(({ id, isSelected, onToggle }) => { const toggle = useCallback(() => onToggle(id), [onToggle, id]); return jsx`<${CheckboxComponent} state=${ isSelected } onChange=${ toggle }/>`; }); const ItemName = component(({ name }) => jsx`${ name }`); const ItemMetric = component(({ overallMetric }) => jsx`

${ overallMetric }

`); const ItemBreakdown = component(({ metricBreakdown }) => jsx`<${SparklineBars} items=${ metricBreakdown }/>`); return ({ name, filterPlaceholder, items, isFiltered, onSelectionChange, initialSelection, initialFilterStr }) => { const [selected, setSelected] = useState(initialSelection ?? items.map(i => i.id)); const [filterStr, setFilterStr] = useState(initialFilterStr ?? ''); const filteredItems = useMemo(() => { const filter = filterStr.trim().toLowerCase(); if (!filter) { return items; } return items.filter(({ name }) => name.toLowerCase().includes(filter)); }, [items, filterStr]); const visibleSelectedItems = useMemo(() => filteredItems.filter(i => selected.includes(i.id)), [selected, filteredItems]); useEffect(() => onSelectionChange(visibleSelectedItems.map(i => i.id)), [visibleSelectedItems]); const numTotal = items.length; const numSelected = selected.length; const overallSelectionState = useMemo(() => { if (filteredItems.length === visibleSelectedItems.length) { return CheckboxComponent.State.checked; } if (visibleSelectedItems.length === 0) { return CheckboxComponent.State.unchecked; } return CheckboxComponent.State.mixed; }, [filteredItems, visibleSelectedItems]); const onToggleOverallSelection = useCallback(() => { if (overallSelectionState === CheckboxComponent.State.checked) { // Was checked — unselect all return setSelected([]); } // Was unchecked or mixed — select all filtered setSelected(filteredItems.map(i => i.id)); }, [overallSelectionState, filteredItems, setSelected]); const onItemToggled = useCallback(id => { const idx = selected.indexOf(id); if (idx === -1) { return setSelected([...selected, id]); } // Remove the item from selected setSelected([...selected.slice(0, idx), ...selected.slice(idx + 1)]); }, [selected, setSelected]); const wrapperRef = useRef(null); const [width, setWidth] = useState(0); useEffect(() => { if (!wrapperRef.current) { return; } setWidth(Math.max(0, wrapperRef.current.clientWidth - scrollbarWidth)); const observer = new ResizeObserver((observerEntry) => { const { width } = observerEntry[0].contentRect; setWidth(Math.max(0, Math.round(width) - scrollbarWidth)); }); observer.observe(wrapperRef.current); return () => observer.disconnect(); }, [wrapperRef.current, setWidth]); const rowHeight = 20; const getRowHeight = useCallback(() => rowHeight, [rowHeight]); const checkboxWidth = 24; const metricToNameOffset = 8; const longestOverallMetricChars = Math.max(...items.map(i => i.overallMetric.length), 0); const metricWidth = metricToNameOffset + longestOverallMetricChars * 10; const chartsWidth = Math.round(width / 4); const columnWidths = useMemo(() => [ checkboxWidth, width - chartsWidth - checkboxWidth - metricWidth, metricWidth, chartsWidth, ], [width, metricWidth, chartsWidth, checkboxWidth]); const getColumnWidth = useCallback(index => columnWidths[index], [columnWidths]); const overallSelectionCheckboxWidth = useMemo(() => ({ width: `${ columnWidths[0] }px` }), [columnWidths]); const listNameWidth = useMemo(() => ({ width: `${ columnWidths[1] }px` }), [columnWidths]); const filterWidth = useMemo(() => ({ width: `${ columnWidths[3] + columnWidths[2] }px` }), [columnWidths]); const Cell = useMemo(() => { const getContent = (colIndex, rowIndex) => { const item = filteredItems[rowIndex]; switch (colIndex) { case 0: return jsx`<${ ItemCheckbox } ...${item} isSelected=${ selected.includes(item.id) } onToggle=${onItemToggled}/>`; case 1: return jsx`<${ ItemName } ...${item}/>`; case 2: return jsx`<${ ItemMetric } ...${item}/>`; case 3: return jsx`<${ ItemBreakdown } ...${item}/>`; default: throw new Error(`Unhandled column index ${ colIndex }`); } } return ({ columnIndex, rowIndex, style }) => { const item = filteredItems[rowIndex]; return jsx`<${ ItemWrapper } style=${ style } ...${item} onToggle=${ columnIndex > 0 ? onItemToggled : undefined }> ${ getContent(columnIndex, rowIndex) } `; }; }, [filteredItems, selected, onItemToggled]); const cellHorizontalOffset = '16px'; const rowVerticalOffset = '0px'; return jsx`

<${CheckboxComponent} state=${ overallSelectionState } onChange=${ onToggleOverallSelection }/> ${ name } (${ visibleSelectedItems.filter(x => !x.disabled).length }) ${ isFiltered ? jsx`<${ FilterInputComponent } value=${ filterStr } onChange=${ setFilterStr } placeholder=${ filterPlaceholder } />` : null }

<${Grid} key=${ columnWidths.join('-') } columnCount=${4} columnWidth=${getColumnWidth} rowCount=${filteredItems.length} rowHeight=${getRowHeight} width=${ width + scrollbarWidth } height=${ Math.min(items.length * rowHeight, 200) } >${Cell}

`; } }