Function DiffOptionsControl

ts/DiffOptions.tsx:56–211

(props: Props)

type BooleanOptions = Extract<Unionize<Options>, {v: boolean}>['k'];

export function DiffOptionsControl(props: Props) {
  const {options, updateOptions, isVisible, setIsVisible} = props;
  const maxDiffWidth = options.maxDiffWidth ?? props.defaultMaxDiffWidth;

  const togglePopup = () => {
    setIsVisible(!isVisible);
  };
  const toggleField = (k: BooleanOptions) => () => {
    updateOptions(options => ({[k]: !options[k]}));
  };
  const setUnifiedContext: React.ChangeEventHandler<HTMLInputElement> = e => {
    updateOptions({unified: e.currentTarget.valueAsNumber});
  };
  const changeDiffAlgorithm: React.ChangeEventHandler<HTMLSelectElement> = e => {
    updateOptions({diffAlgorithm: e.currentTarget.value as DiffAlgorithm});
  };
  const changeMaxDiffWidth: React.ChangeEventHandler<HTMLInputElement> = e => {
    updateOptions({maxDiffWidth: e.currentTarget.valueAsNumber});
  };

  React.useEffect(() => {
    const handleKeydown = (e: KeyboardEvent) => {
      if (!isLegitKeypress(e)) return;
      if (e.code == 'KeyW') {
        updateOptions(options => ({ignoreAllSpace: !options.ignoreAllSpace}));
      } else if (e.code == 'KeyB') {
        updateOptions(options => ({ignoreSpaceChange: !options.ignoreSpaceChange}));
      }
    };
    document.addEventListener('keydown', handleKeydown);
    return () => {
      document.removeEventListener('keydown', handleKeydown);
    };
  }, [options, updateOptions]);

  const diffOptsStr = gitDiffOptionsToFlags(options).join(' ');

  return (
    <>
      <button style={gearStyle} onClick={togglePopup}>
        ⚙
      </button>
      {isVisible ? (
        <>
          <PageCover onClick={togglePopup} />
          <div style={popupStyle}>
            <button style={closeButtonStyle} onClick={togglePopup}>
              ✕
            </button>
            <table>
              <tbody>
                <tr>
                  <td style={{textAlign: 'right', verticalAlign: 'top'}} rowSpan={3}>
                    Whitespace:
                  </td>
                  <td>
                    <input
                      type="checkbox"