Multi Checkbox

In this challenge, you'll build a MultiCheckbox component which allows the user to click and drag to check/uncheck multiple checkboxes:

Difficulty

This challenge is way trickier than I was originally expecting it to be. There are lots of little gotchas with this one.

Rules

Immer has been installed in this playground, if you wish to use it. Otherwise, no third-party libraries are allowed.
Feel free to google anything you'd like.

Playground

Code Playground

Acceptance Criteria:

• The `MultiCheckbox` component should be made into a generic, reusable component.

• Clicking and dragging on a checkbox should toggle all checkboxes, until the left mouse button is released.

• The user shouldn't have to hover over the checkbox specifically. The label should also trigger this effect.

• When mousing over checkboxes, they should all be toggled in the same direction (either all toggled on, or all toggled off).

• The checkboxes should work normally for keyboard users. Focusing and hitting the "Space" key should toggle the checkbox.

• Don't worry about mobile / touchscreen inputs. In practice, this is something we'd want to solve for, but the playground doesn't make it easy to test touch events.

import React from 'react';

import MultiCheckbox from './MultiCheckbox';

const DAYS = [

{ label: 'Monday', value: 'monday' },

{ label: 'Tuesday', value: 'tuesday' },

{ label: 'Wednesday', value: 'wednesday' },

{ label: 'Thursday', value: 'thursday' },

{ label: 'Friday', value: 'friday' },

{ label: 'Saturday', value: 'saturday' },

{ label: 'Sunday', value: 'sunday' },

];

function App() {

return (

<h1>Foodorama Order Form</h1>

<p>

</p>

<form>

<h2>

Select days:

</h2>

Confirm Order

</button>

</form>

</footer>

</>

)

}

export default App;

My attempt

Full disclosure: I recorded my attempt solving this problem, and then accidentally deleted it when I was doing some hard drive cleanup. 🙈

So, this isn't my first attempt to solve this problem, but I waited about 2 months between attempts, so that I had pretty much entirely forgotten what my original approach looked like.

Attempt code (success)

I forgot to fix the key warning in my attempt video! This has been fixed in the code below.

// App.js
import React from 'react';

import MultiCheckbox from './MultiCheckbox';

const DAYS = [
  { label: 'Monday', value: 'monday' },
  { label: 'Tuesday', value: 'tuesday' },
  { label: 'Wednesday', value: 'wednesday' },
  { label: 'Thursday', value: 'thursday' },
  { label: 'Friday', value: 'friday' },
  { label: 'Saturday', value: 'saturday' },
  { label: 'Sunday', value: 'sunday' },
];

function App() {
  const [selectedDays, setSelectedDays] = React.useState({});

  function handleToggle(value, nextChecked) {
    setSelectedDays({
      ...selectedDays,
      [value]:
        typeof nextChecked === 'boolean'
          ? nextChecked
          : !selectedDays[value],
    });
  }

  return (
    <>
      <h1>Foodorama Order Form</h1>
      <p>Sign up to receive daily meal delivery service.</p>
      <form>
        <h2>Select days:</h2>
        <MultiCheckbox
          options={DAYS}
          selectedValues={selectedDays}
          handleToggle={handleToggle}
        />

        <button>Confirm Order</button>
      </form>
      <footer>Copyright Foodorama. All Rights Reserved.</footer>
    </>
  );
}

export default App;

// MultiCheckbox.js
import React from 'react';

import styles from './MultiCheckbox.module.css';

function MultiCheckbox({ options, selectedValues, handleToggle }) {
  const id = React.useId();
  // true | false | null
  const [selectingMode, setSelectingMode] = React.useState(false);

  React.useEffect(() => {
    if (typeof selectingMode !== 'boolean') {
      return;
    }

    function handleMouseUp() {
      setSelectingMode(null);
    }

    window.addEventListener('mouseup', handleMouseUp);

    return () => {
      window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [selectingMode]);

  return (
    <ol className={styles.wrapper}>
      {options.map(({ label, value }) => {
        const optionId = `multi-checkbox-${value}-${id}`;
        const currentChecked = !!selectedValues[value];
        const nextChecked = !currentChecked;

        return (
          <li
            key={value}
            className={styles.option}
            onMouseDown={() => {
              handleToggle(value);
              setSelectingMode(nextChecked);
            }}
            onMouseEnter={() => {
              if (selectingMode === null) {
                return;
              }
              handleToggle(value, selectingMode);
            }}
          >
            <input
              type="checkbox"
              id={optionId}
              value={value}
              checked={currentChecked}
              onKeyDown={(event) => {
                if (event.code === 'Space') {
                  handleToggle(value);
                }
              }}
            />
            <label htmlFor={optionId}>{label}</label>
          </li>
        );
      })}
    </ol>
  );
}

export default MultiCheckbox;