Display dynamic list with selectable items

[ASSIGNMENT] Close Frontend Application Quiz

by zarf

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<div id="root"></div>

CSS

.List {
  margin: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 60px;
  grid-gap: 16px;
}

.List__item {
  line-height: 60px;
  text-align: center;
  color: white;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05);
}

/* The use of a white border for *non*-selected items is a cheap hack to keep the grid layout working. IIn a real design, I'd rely on a known height rather than line-height of the contents. */

.ListItemBox {
  height: 60px;
  padding: 2px;
  border: 4px solid white;
  border-radius: 4px;
}
.ListItemBox.Selected {
  border: 4px solid #44F;
}

p {
  margin: 1em 2em;
}

/* Taken from https://clrs.cc/ */

.List__item--navy {
  background-color: #001f3f;
}

.List__item--blue {
  background-color: #0074d9;
}

.List__item--aqua {
  background-color: #7fdbff;
}

.List__item--teal {
  background-color: #39cccc;
}

.List__item--olive {
  background-color: #3d9970;
}

.List__item--green {
  background-color: #2ecc40;
}

.List__item--lime {
  background-color: #01ff70;
}

.List__item--yellow {
  background-color: #ffdc00;
}

.List__item--orange {
  background-color: #ff851b;
}

.List__item--red {
  background-color: #ff4136;
}

.List__item--maroon {
  background-color: #85144b;
}

.List__item--fuchsia {
  background-color: #f012be;
}

.List__item--purple {
  background-color: #b10dc9;
}

.List__item--black {
  background-color: #111111;
}

.List__item--gray {
  background-color: #aaaaaa;
}

.List__item--silver {
  background-color: #dddddd;
}

React

const { Fragment, useState } = React;

// List of items
function List({ items }) {
  const [ selected, setSelected ] = useState([]);
  
  function ev_click(ev) {
    // Click in background: deselect all
    ev.preventDefault();
    ev.stopPropagation();
    setSelected([]);
  }
    
  return (
    <Fragment>
      <p>(Shift-click for multiple selection.)</p>
      { selected.length == 0 ?
        <p>No items selected.</p>
        :
        <p>Selected items: { selected.join(', ') }</p>
      }
      <ul className="List" onClick={ ev_click }>
        { items.map(item => (
          <ListItem key={ item.name } item={ item } selected={ selected } setSelected={ setSelected } />
        )) }
      </ul>
    </Fragment>
  );
}

// Single list item.
// I'm passing selected and setSelected in as props. In a more complicated layout, it would probably be worth using a Context.
function ListItem({ item, selected, setSelected }) {
  let issel = (selected.indexOf(item.name) >= 0);
  
  function ev_click(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    
    // We implement the standard selection behavior: regular click means select one item at a time; shift-click means select multiple items.
    // This isn't quite the letter of the assignment, but it's what your fingers expect! Mine, anyway.
    
    let pos = selected.indexOf(item.name);
    let newsel;
    if (!ev.shiftKey) {
      // Regular click: select the clicked item (only) unless it is the only selection, in which case we deselect it.
      if (pos >= 0 && selected.length == 1) {
        newsel = [];
      }
      else {
        newsel = [ item.name ];
      }
    }
    else {
      // Shift click: select or deselect the clicked item, leaving the rest of the selection intact.
      if (pos >= 0) {
        newsel = selected.toSpliced(pos, 1);
      }
      else {
        newsel = [ ...selected, item.name ];
      }
    }
    setSelected(newsel);
  };
  
  return (
    <li className={ issel ? 'ListItemBox...