large snake added

web/src/components/DialogTorrentDetailsContent/TorrentCache/LargeSnake.jsx

@@ -0,0 +1,58 @@
+import { FixedSizeGrid as Grid } from 'react-window'
+import AutoSizer from 'react-virtualized-auto-sizer'
+
+import { getLargeSnakeColors } from './colors'
+
+const Cell = ({ columnIndex, rowIndex, style, data }) => {
+  const { columnCount, cacheMap, gutterSize, borderSize, pieces } = data
+  const itemIndex = rowIndex * columnCount + columnIndex
+
+  const { borderColor, backgroundColor } = getLargeSnakeColors(cacheMap[itemIndex] || {})
+
+  const newStyle = {
+    ...style,
+    left: style.left + gutterSize,
+    top: style.top + gutterSize,
+    width: style.width - gutterSize,
+    height: style.height - gutterSize,
+    border: `${borderSize}px solid ${borderColor}`,
+    display: itemIndex >= pieces ? 'none' : null,
+    background: backgroundColor,
+  }
+
+  return <div style={newStyle} />
+}
+
+const gutterSize = 2
+const borderSize = 1
+const pieceSize = 12
+const pieceSizeWithSpacing = pieceSize + gutterSize
+
+export default function LargeSnake({ cacheMap }) {
+  const pieces = cacheMap.length
+
+  return (
+    <div style={{ height: '60vh', overflow: 'hidden' }}>
+      <AutoSizer>
+        {({ height, width }) => {
+          const columnCount = Math.floor(width / (gutterSize + pieceSize)) - 1
+          const rowCount = pieces / columnCount + 1
+
+          return (
+            <Grid
+              columnCount={columnCount}
+              rowCount={rowCount}
+              columnWidth={pieceSizeWithSpacing}
+              rowHeight={pieceSizeWithSpacing}
+              height={height}
+              width={width}
+              itemData={{ columnCount, cacheMap, gutterSize, borderSize, pieces }}
+            >
+              {Cell}
+            </Grid>
+          )
+        }}
+      </AutoSizer>
+    </div>
+  )
+}