state-management-utilities
Version:
State management utilities
54 lines (53 loc) • 3.46 kB
JavaScript
import throttle from "lodash.throttle";
import React from "react";
import PulseLoader from "react-spinners/PulseLoader.js";
import { FixedSizeList } from "react-window";
import { useFilteredLogs } from "../providers/FilteredLogsProvider";
import { useSelectedLog } from "../providers/SelectedLogProvider";
import { useStyles } from "../providers/StylesProvider";
export function Logs() {
const direction = "vertical";
const [selectedLog] = useSelectedLog();
const { filter, filteredLogs, isFiltering, setFilter } = useFilteredLogs();
const [ulSize, setUlSize] = React.useState({ width: 1, height: 1 });
const styles = useStyles();
const onChangeFilter = React.useCallback((e) => {
setFilter(e.target.value);
}, [setFilter]);
const ulRef = React.useRef(null);
const rem = React.useMemo(() => parseFloat(window.getComputedStyle(document.documentElement).fontSize), []);
React.useLayoutEffect(() => {
const handler = throttle(() => {
const ulElement = ulRef.current;
if (!ulElement)
return;
const { width, height } = ulElement.getBoundingClientRect();
const newSize = {
width: width <= 0 ? 1 : width,
height: height <= 0 ? 1 : height,
};
setUlSize(newSize);
}, 250, { leading: true, trailing: true });
handler();
window.addEventListener("resize", handler);
return function () {
window.removeEventListener("resize", handler);
};
}, []);
return (React.createElement("section", { className: styles["dashboard-visualization-logs"] },
React.createElement("input", { type: "text", value: filter, onChange: onChangeFilter }),
isFiltering ? (React.createElement("div", { className: styles["dashboard-is-filtering dashboard-status-font"] },
React.createElement("span", null, "Filtering"),
React.createElement(PulseLoader, { color: "rgba(255, 255, 255, 0.5)", size: "0.75rem", speedMultiplier: 0.65, className: styles["dashboard-status-processing"] }))) : (React.createElement("section", { className: styles["dashboard-visualization-logs-wrapper"] },
React.createElement("ul", { ref: ulRef, className: styles["dashboard-visualization-logs-list"] },
React.createElement(FixedSizeList, { width: ulSize.width, height: ulSize.height, itemCount: filteredLogs.length, itemSize: 3 * rem, itemData: filteredLogs, layout: direction, className: styles["list-virtualized"] }, ({ index, style, data }) => (React.createElement(Item, { index: index, style: style, data: data[index], isSelected: selectedLog?.number === data[index]?.number &&
selectedLog?.updatedUID === data[index]?.updatedUID }))))))));
}
function Item({ index, style, data, isSelected, }) {
const [, setSelectedLog] = useSelectedLog();
const styles = useStyles();
return (React.createElement("li", { style: style, onClick: () => setSelectedLog(data), className: styles["dashboard-visualization-logs-list-item-wrapper"] },
React.createElement("span", { className: `${styles[`dashboard-visualization-logs-list-item`]} ${isSelected ? styles["selected-log"] : ""}` },
React.createElement("span", { className: styles["dashboard-visualization-logs-list-item-description"] }, data?.updatedUID),
React.createElement("span", null, data?.number))));
}