Generate reactive <style> from React (#206)

Author: danvk

ts/DiffOptions.tsx

@@ -7,6 +7,9 @@ import {isLegitKeypress} from './file_diff';
 export interface Props {
   options: Partial<DiffOptions>;
   setOptions: (newOptions: Partial<DiffOptions>) => void;
+  defaultMaxDiffWidth: number;
+  maxDiffWidth: number;
+  setMaxDiffWidth: (maxDiffWidth: number) => void;
   isVisible: boolean;
   setIsVisible: (isVisible: boolean) => void;
 }
@@ -49,7 +52,7 @@ const popupStyle: React.CSSProperties = {
 };
 
 export function DiffOptionsControl(props: Props) {
-  const {options, setOptions, isVisible, setIsVisible} = props;
+  const {options, setOptions, isVisible, setIsVisible, maxDiffWidth, setMaxDiffWidth} = props;
 
   const togglePopup = () => {
     setIsVisible(!isVisible);
@@ -69,6 +72,9 @@ export function DiffOptionsControl(props: Props) {
   const changeDiffAlgorithm: React.ChangeEventHandler<HTMLSelectElement> = e => {
     setOptions({...options, diffAlgorithm: e.currentTarget.value as DiffAlgorithm});
   };
+  const changeMaxDiffWidth: React.ChangeEventHandler<HTMLInputElement> = e => {
+    setMaxDiffWidth(e.currentTarget.valueAsNumber);
+  };
 
   React.useEffect(() => {
     const handleKeydown = (e: KeyboardEvent) => {
@@ -169,12 +175,26 @@ export function DiffOptionsControl(props: Props) {
                     </select>
                   </td>
                 </tr>
+                <tr>
+                  <td style={{textAlign: 'right', verticalAlign: 'top'}}>Max line width:</td>
+                  <td>
+                    <input
+                      type="number"
+                      min={1}
+                      max={1000}
+                      value={maxDiffWidth}
+                      onChange={changeMaxDiffWidth}
+                    />{' '}
+                    lines
+                  </td>
+                </tr>
               </tbody>
             </table>
 
-            <p>
-              <code>git diff {diffOptsStr}</code>
-            </p>
+            {diffOptsStr ? <pre>git diff {diffOptsStr}</pre> : null}
+            {maxDiffWidth !== props.defaultMaxDiffWidth ? (
+              <pre>git config webdiff.maxDiffWidth {maxDiffWidth}</pre>
+            ) : null}
           </div>
         </>
       ) : null}

ts/Root.tsx

@@ -9,9 +9,11 @@ import {ImageDiffMode} from './ImageDiffModeSelector';
 import {filePairDisplayName} from './utils';
 import {DiffOptionsControl} from './DiffOptions';
 import {KeyboardShortcuts} from './codediff/KeyboardShortcuts';
+import {GitConfig} from './options';
 
 declare const pairs: FilePair[];
 declare const initialIdx: number;
+declare const GIT_CONFIG: GitConfig;
 
 type Props = RouteComponentProps<{index?: string}>;
 
@@ -20,6 +22,7 @@ export function Root(props: Props) {
   const [pdiffMode, setPDiffMode] = React.useState<PerceptualDiffMode>('off');
   const [imageDiffMode, setImageDiffMode] = React.useState<ImageDiffMode>('side-by-side');
   const [diffOptions, setDiffOptions] = React.useState<Partial<DiffOptions>>({});
+  const [maxDiffWidth, setMaxDiffWidth] = React.useState(GIT_CONFIG.webdiff.maxDiffWidth);
   const [showKeyboardHelp, setShowKeyboardHelp] = React.useState(false);
   const [showOptions, setShowOptions] = React.useState(false);
   // An explicit list is better, unless there are a ton of files.
@@ -69,38 +72,49 @@ export function Root(props: Props) {
     };
   }, [idx, selectIndex]);
 
+  const inlineStyle = `
+  td.code {
+    width: ${1 + maxDiffWidth}ch;
+  }`;
+
   return (
-    <div>
-      <DiffOptionsControl
-        options={diffOptions}
-        setOptions={setDiffOptions}
-        isVisible={showOptions}
-        setIsVisible={setShowOptions}
-      />
-      <FileSelector
-        selectedFileIndex={idx}
-        filePairs={pairs}
-        fileChangeHandler={selectIndex}
-        mode={fileSelectorMode}
-        onChangeMode={setFileSelectorMode}
-      />
-      {showKeyboardHelp ? (
-        <KeyboardShortcuts
-          onClose={() => {
-            setShowKeyboardHelp(false);
-          }}
+    <>
+      <style>{inlineStyle}</style>
+      <div>
+        <DiffOptionsControl
+          options={diffOptions}
+          setOptions={setDiffOptions}
+          maxDiffWidth={maxDiffWidth}
+          setMaxDiffWidth={setMaxDiffWidth}
+          defaultMaxDiffWidth={GIT_CONFIG.webdiff.maxDiffWidth}
+          isVisible={showOptions}
+          setIsVisible={setShowOptions}
+        />
+        <FileSelector
+          selectedFileIndex={idx}
+          filePairs={pairs}
+          fileChangeHandler={selectIndex}
+          mode={fileSelectorMode}
+          onChangeMode={setFileSelectorMode}
+        />
+        {showKeyboardHelp ? (
+          <KeyboardShortcuts
+            onClose={() => {
+              setShowKeyboardHelp(false);
+            }}
+          />
+        ) : null}
+        <DiffView
+          key={`diff-${idx}`}
+          thinFilePair={filePair}
+          imageDiffMode={imageDiffMode}
+          pdiffMode={pdiffMode}
+          diffOptions={diffOptions}
+          changeImageDiffMode={setImageDiffMode}
+          changePDiffMode={setPDiffMode}
+          changeDiffOptions={setDiffOptions}
         />
-      ) : null}
-      <DiffView
-        key={`diff-${idx}`}
-        thinFilePair={filePair}
-        imageDiffMode={imageDiffMode}
-        pdiffMode={pdiffMode}
-        diffOptions={diffOptions}
-        changeImageDiffMode={setImageDiffMode}
-        changePDiffMode={setPDiffMode}
-        changeDiffOptions={setDiffOptions}
-      />
-    </div>
+      </div>
+    </>
   );
 }

ts/options.ts

@@ -30,13 +30,9 @@ export interface ColorsConfig {
 declare const GIT_CONFIG: GitConfig;
 
 export function injectStylesFromConfig() {
-  const config = GIT_CONFIG.webdiff;
   const colors = GIT_CONFIG['webdiff.colors'];
   document.write(`
   <style>
-  td.code {
-    width: ${1 + config.maxDiffWidth}ch;
-  }
   .diff .delete, .before.replace {
     background-color: ${colors.delete};
   }