factoring yes

open-formulieren · Aug 16, 2024 · ed93978 · ed93978
1 parent a521b87
commit ed93978
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 39 deletions.
diff --git a/src/components/ModeToggle.tsx b/src/components/ModeToggle.tsx
@@ -26,6 +26,10 @@ export interface ModeToggleProps<T extends string> {
    * Any additional classnames to apply to the container element.
    */
   className?: string;
+  /**
+   * Toggle button classname(s).
+   */
+  btnClassName?: string;
 }
 
 /**
@@ -40,11 +44,12 @@ function ModeToggle<T extends string>({
   currentMode,
   onToggle,
   className,
+  btnClassName = 'btn-secondary',
 }: ModeToggleProps<T>) {
   return (
     <div className={clsx('btn-group', 'btn-group-toggle', className)}>
       {modes.map(({value, label}) => (
-        <label className={clsx('btn', 'btn-sm', 'btn-secondary', {active: value === currentMode})}>
+        <label className={clsx('btn', 'btn-sm', btnClassName, {active: value === currentMode})}>
           <input
             type="radio"
             name={name}

diff --git a/src/registry/columns/panel-preview.tsx b/src/registry/columns/panel-preview.tsx
@@ -3,55 +3,49 @@ import clsx from 'clsx';
 import {useState} from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import ModeToggle from '@/components/ModeToggle';
+
 import {ComponentPreviewProps} from '../types';
 
-interface ViewportToggleProps {
-  mobile: boolean;
-  onChange: (isMobile: boolean) => void;
-}
-
-const ViewportToggle: React.FC<ViewportToggleProps> = ({mobile, onChange}) => {
-  return (
-    <div className="btn-group btn-group-toggle">
-      <label className={clsx('btn', 'btn-sm', 'btn-light', {active: !mobile})}>
-        <input
-          type="radio"
-          name="previewViewport"
-          value="desktop"
-          autoComplete="off"
-          checked={!mobile}
-          onChange={() => onChange(false)}
-        />
-        <FormattedMessage
-          description="Columns 'desktop' preview viewport"
-          defaultMessage="Default"
-        />
-      </label>
-      <label className={clsx('btn', 'btn-sm', 'btn-light', {active: mobile})}>
-        <input
-          type="radio"
-          name="previewViewport"
-          value="mobile"
-          autoComplete="off"
-          checked={mobile}
-          onChange={() => onChange(true)}
-        />
-        <FormattedMessage description="Columns 'mobile' preview viewport" defaultMessage="Mobile" />
-      </label>
-    </div>
-  );
-};
+type ViewportMode = 'desktop' | 'mobile';
 
 /**
  * Show a formio columns component preview.
  */
 const Preview: React.FC<ComponentPreviewProps<ColumnsComponentSchema>> = ({component}) => {
-  const [isMobile, setIsMobile] = useState(false);
+  const [viewportMode, setViewportMode] = useState<ViewportMode>('desktop');
+
   const {columns} = component;
+  const isMobile = viewportMode === 'mobile';
   return (
     <>
       <div className="d-flex justify-content-end align-items-center">
-        <ViewportToggle mobile={isMobile} onChange={newIsMobile => setIsMobile(newIsMobile)} />
+        <ModeToggle<ViewportMode>
+          name="previewViewport"
+          currentMode={viewportMode}
+          btnClassName="btn-light"
+          onToggle={setViewportMode}
+          modes={[
+            {
+              value: 'desktop',
+              label: (
+                <FormattedMessage
+                  description="Columns 'desktop' preview viewport"
+                  defaultMessage="Default"
+                />
+              ),
+            },
+            {
+              value: 'mobile',
+              label: (
+                <FormattedMessage
+                  description="Columns 'mobile' preview viewport"
+                  defaultMessage="Mobile"
+                />
+              ),
+            },
+          ]}
+        />
       </div>
 
       <div className={clsx('offb-columns-preview', {'offb-columns-preview--mobile': isMobile})}>