@jjordy/swr-devtools
Version:
Devtools for SWR
52 lines (51 loc) • 3.05 kB
JavaScript
import React from "react";
import { Rnd } from "react-rnd";
import themes from "../themes";
import useKeysState from "./useKeysState";
import KeyItem from "./KeyItem";
import CloseIcon from "../Icons/CloseIcon";
export default function Keys({ keys, selectedKey, onSelect, onClear, onRevalidate, theme, panelWidth, children = React.createElement(React.Fragment, null), }) {
const { handleResize, query, handleSetQuery, handleClearQuery, state: { width, height }, } = useKeysState();
return (React.createElement(React.Fragment, null,
React.createElement(Rnd, { size: { width, height }, enableResizing: { right: true }, onResize: handleResize },
React.createElement("div", { style: {
flex: 1,
textOverflow: "ellipsis",
overflow: "scroll",
position: "relative",
minHeight: 400,
height: "100%",
...themes[theme].keys,
} },
React.createElement("div", { style: {
width: "100%",
boxSizing: "border-box",
paddingLeft: "0.25rem",
fontSize: 14,
fontWeight: 900,
textOverflow: "ellipsis",
display: "flex",
} },
React.createElement("input", { type: "text", value: query, onChange: handleSetQuery, style: {
height: 30,
background: "transparent",
width: "90%",
paddingLeft: "0.5rem",
}, placeholder: "Search keys...", "aria-label": "Search Keys" }),
React.createElement("button", { onClick: handleClearQuery, title: "Clear Search Query", style: {
backgroundColor: "rebeccapurple",
color: "#fff",
width: "10%",
display: "flex",
alignItems: "center",
justifyContent: "center",
} },
React.createElement(CloseIcon, { height: 8, width: 8 }))),
!query &&
keys.map((cacheKey) => (React.createElement(KeyItem, { key: cacheKey, cacheKey: cacheKey, selectedKey: selectedKey, onClear: onClear, onRevalidate: onRevalidate, onSelect: onSelect }))),
query &&
keys
.filter((k) => k.includes(query))
.map((cacheKey) => (React.createElement(KeyItem, { key: cacheKey, cacheKey: cacheKey, selectedKey: selectedKey, onClear: onClear, onRevalidate: onRevalidate, onSelect: onSelect }))))),
React.createElement("div", { style: { marginLeft: width, height: height, width: `calc(${panelWidth}px - ${width}px)` } }, children)));
}