♻️ Extracted the component preview toggle

The preview toggle is re-implemented based on the toggle mode component so that it can be re-used in the preview panel and the content edit form. The component is moved to its own component file to declutter and make it more clear where each component is implemented. The ComponentPreview is cleaned up to make use of the new component, and the same applies for the Content edit form.
open-formulieren · Aug 16, 2024 · 30cbdfe · 30cbdfe
1 parent 7e3e106
commit 30cbdfe
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 49 deletions.
diff --git a/src/components/ComponentPreview.tsx b/src/components/ComponentPreview.tsx
@@ -1,9 +1,9 @@
 import {JSONEditor} from '@open-formulieren/monaco-json-editor';
-import clsx from 'clsx';
 import {Formik} from 'formik';
 import React, {useContext, useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import PreviewModeToggle, {PreviewState} from '@/components/PreviewModeToggle';
 import {BuilderContext} from '@/context';
 import {getRegistryEntry} from '@/registry';
 import {AnyComponentSchema, hasOwnProperty} from '@/types';
@@ -27,7 +27,7 @@ const ComponentPreviewWrapper: React.FC<ComponentPreviewWrapperProps> = ({
   onComponentChange,
   children,
 }) => {
-  const [previewMode, setpreviewMode] = useState<PreviewState>('rich');
+  const [previewMode, setPreviewMode] = useState<PreviewState>('rich');
   const builderContext = useContext(BuilderContext);
 
   return (
@@ -36,10 +36,7 @@ const ComponentPreviewWrapper: React.FC<ComponentPreviewWrapperProps> = ({
         <h4 className="card-title mb-0">
           <FormattedMessage description="Component preview card title" defaultMessage="Preview" />
         </h4>
-        <PreviewModeToggle
-          mode={previewMode}
-          onChange={event => setpreviewMode(event.target.value as PreviewState)}
-        />
+        <PreviewModeToggle previewMode={previewMode} setPreviewMode={setPreviewMode} />
       </div>
 
       {previewMode === 'JSON' ? (
@@ -114,42 +111,4 @@ const GenericComponentPreview: React.FC<GenericComponentPreviewProps> = ({
   );
 };
 
-export type PreviewState = 'rich' | 'JSON';
-
-interface PreviewModeToggleProps {
-  mode: PreviewState;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const PreviewModeToggle: React.FC<PreviewModeToggleProps> = ({mode, onChange}) => {
-  const isRichPreview = mode === 'rich';
-  const isJSON = mode === 'JSON';
-  return (
-    <div className="btn-group btn-group-toggle">
-      <label className={clsx('btn', 'btn-sm', 'btn-secondary', {active: isRichPreview})}>
-        <input
-          type="radio"
-          name="previewMode"
-          value="rich"
-          autoComplete="off"
-          checked={isRichPreview}
-          onChange={onChange}
-        />
-        <FormattedMessage description="Component 'Rich' preview mode" defaultMessage="Form" />
-      </label>
-      <label className={clsx('btn', 'btn-sm', 'btn-secondary', {active: isJSON})}>
-        <input
-          type="radio"
-          name="previewMode"
-          value="JSON"
-          autoComplete="off"
-          checked={isJSON}
-          onChange={onChange}
-        />
-        <FormattedMessage description="Component 'JSON' preview mode" defaultMessage="JSON" />
-      </label>
-    </div>
-  );
-};
-
 export default GenericComponentPreview;
diff --git a/src/components/PreviewModeToggle.tsx b/src/components/PreviewModeToggle.tsx
@@ -0,0 +1,34 @@
+import {FormattedMessage} from 'react-intl';
+
+import ModeToggle from '@/components/ModeToggle';
+
+export type PreviewState = 'rich' | 'JSON';
+
+export interface PreviewModeToggleProps {
+  previewMode: PreviewState;
+  setPreviewMode: (mode: PreviewState) => void;
+}
+
+const PreviewModeToggle: React.FC<PreviewModeToggleProps> = ({previewMode, setPreviewMode}) => (
+  <ModeToggle<PreviewState>
+    name="previewMode"
+    currentMode={previewMode}
+    onToggle={mode => setPreviewMode(mode)}
+    modes={[
+      {
+        value: 'rich',
+        label: (
+          <FormattedMessage description="Component 'Rich' preview mode" defaultMessage="Form" />
+        ),
+      },
+      {
+        value: 'JSON',
+        label: (
+          <FormattedMessage description="Component 'JSON' preview mode" defaultMessage="JSON" />
+        ),
+      },
+    ]}
+  />
+);
+
+export default PreviewModeToggle;
diff --git a/src/registry/content/edit.tsx b/src/registry/content/edit.tsx
@@ -4,7 +4,7 @@ import {useFormikContext} from 'formik';
 import React, {useContext, useEffect, useRef, useState} from 'react';
 import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 
-import {PreviewModeToggle, PreviewState} from '@/components/ComponentPreview';
+import PreviewModeToggle, {PreviewState} from '@/components/PreviewModeToggle';
 import {
   BuilderTabs,
   Hidden,
@@ -57,10 +57,7 @@ const EditForm: EditFormDefinition<ContentComponentSchema> = () => {
     <>
       <div className="card panel preview-panel">
         <div className="card-header d-flex justify-content-end">
-          <PreviewModeToggle
-            mode={previewMode}
-            onChange={event => setPreviewMode(event.target.value as PreviewState)}
-          />
+          <PreviewModeToggle previewMode={previewMode} setPreviewMode={setPreviewMode} />
         </div>
         <div className="card-body">
           {previewMode === 'JSON' ? (