Dynamic-grid-with-pointers-between-items-with-trails.js

import React from 'react'

const DynamicGrid = ({ xy, squareSize, data }) => {
  console.log(data);
  const rowCells = xy * 2 + 1
  let rowFlag = true
  let rowEnd = '20'
  let gutter = '1'
  let insertSpacesAtIndex = []
  let dataCopy = [...data]

  // Find row ends
  for (let r = xy; r < dataCopy.length; r += xy) {
    insertSpacesAtIndex.push(r)
  }
  // Insert Ends
  for (let y = insertSpacesAtIndex.length - 1; y >= 0; y--) {
    dataCopy.splice(insertSpacesAtIndex[y], 0, 'endSpacer')
  }

  // Add begging spacers around end spacers
  // in a new array
  let startEndDataArr = []
  for (let z = 0; z < dataCopy.length; z++) {
    if (z === 0) {
      startEndDataArr.push('beggingingSpacer')
    }
    startEndDataArr.push(dataCopy[z])
    if (dataCopy[z] === 'endSpacer') {
      startEndDataArr.push('beggingingSpacer')
    }
  }

  // Add inner spacers between data items
  // in a new array
  let innerSpacerDataArr = []
  for (let i = 0; i < startEndDataArr.length; i++) {
    innerSpacerDataArr.push(startEndDataArr[i])
    if (
      startEndDataArr[i] !== 'beggingingSpacer' &&
      startEndDataArr[i] !== 'endSpacer'
    ) {
      if (
        startEndDataArr[i + 1] !== 'beggingingSpacer' &&
        startEndDataArr[i + 1] !== 'endSpacer'
      ) {
        innerSpacerDataArr.push('innerSpacer')
      }
    }
  }

  // Terminate data with an end spacer
  if (
    innerSpacerDataArr[innerSpacerDataArr.length - 1] === 'innerSpacer' ||
    innerSpacerDataArr[innerSpacerDataArr.length - 1] === 'beggingingSpacer'
  ) {
    innerSpacerDataArr[innerSpacerDataArr.length - 1] = 'endSpacer'
  }

  // Create an empty row
  let emptyRow = Array(rowCells - 2).fill('emptyRowCell')
  emptyRow.push('endSpacer')
  emptyRow.push('beggingingSpacer')

  // Add empty rows xyere needed
  let gridWithEmpyRows = []
  for (let g = 0; g < innerSpacerDataArr.length; g++) {
    gridWithEmpyRows.push(innerSpacerDataArr[g])
    if (g !== 0 && g % rowCells === 0) {
      gridWithEmpyRows.push(...emptyRow)
    }
  }

  let grid = gridWithEmpyRows

  return (
    <ul className="grid">
      {grid.map((item, idx) => {
        if (idx % rowCells === 0) {
          rowFlag = !rowFlag
        }
        return (
          <li
            key={'grid-cell-' + idx}
            className={
              (rowFlag ? 'row-even' : 'row-odd') +
              ' ' +
              (idx % 2 !== 0 ? 'cell-odd' : 'cell-even') +
              (idx % rowCells === 0
                ? ' row-first-child'
                : idx % rowCells === rowCells - 1
                  ? ' row-last-child'
                  : idx === grid.length-1 
                    ? ' row-last-child'
                    : ''
              )
            }
          >
            {!!item &&
              item.blockNo !== 'beggingingSpacer' &&
              item.blockNo !== 'innerSpacer' &&
              item.blockNo !== 'endSpacer' &&
              item.blockNo !== undefined &&
              String(item.blockNo).substring(0, 4)}
            {!rowFlag ? (
              !(idx % 2 !== 0 || idx === 0) ? (
                <div className="arrow">
                  <span className="arrow-head">{'<'}</span>
                  <span className="arrow-length" />
                  <span className="arrow-base" />
                  <span className="arrow-gradient" />
                  <style>{`
                      .arrow {
                        position: absolute;
                        top: 50%;
                        left: 0;
                        top: calc(50% - 5px);
                        height: 10px;
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                      }
              
                      .arrow-head {
                        background: red;
                      }
                      .arrow-length {
                        background: purple;
                        flex: 1;
                        height: 100%;
                        background-image: radial-gradient(#212121 20%, #e53935 20%);
                        background-position: 0 0;
                        background-size: 10px 10px;
                        height: 10px;
                        width: 100%;
                      }
                      .arrow-base {
                        background: green;
                        width: 10px;
                        height: 100%;
                      }
                      .arrow-gradient {
                        background: rgba(0, 0, 0, 0.5);
                      }
                    `}</style>
                </div>
              ) : (
                ''
              )
            ) : (
              ''
            )}
          </li>
        )
      })}
      <style>{`
        .grid {
          display: grid;
          grid-template-columns:${rowEnd}px ${Array(xy)
            .fill('x')
            .map((i, idx) => {
              return idx !== xy - 1
                ? `${squareSize}px ${gutter}fr`
                : `${squareSize}px ${rowEnd}px`
            })
            .join(' ')};
          grid-template-rows: ${Array(xy * rowCells)
            .fill('x')
            .map((i, idx) => `${squareSize}px ${0}px`)
            .join(' ')};
          grid-column-gap: 0px;
          grid-row-gap: 10px;
          list-style: none;

          ${xy === 1 && `
            grid-template-columns: ${rowEnd}px ${'100%'} ${rowEnd}px;
            grid-template-rows: ${Array(data.length).fill('x').map((i, idx) => `${squareSize}px ${0}px`).join(' ')};
          `}
        }
        [class*='cell'] { position: relative }
        .cell-even {background: grey;}
        .cell-odd {background: darkgray;}        
        `}</style>
    </ul>
  )
}

export default DynamicGrid