♻️ DRY the shared tab titles/definitions

open-formulieren · Aug 25, 2023 · 7d06a88 · 7d06a88
1 parent 803fab1
commit 7d06a88
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 69 deletions.
diff --git a/src/components/builder/index.ts b/src/components/builder/index.ts
@@ -23,3 +23,4 @@ export * as Validate from './validate';
 export * as Registration from './registration';
 export * as Prefill from './prefill';
 export * as Translations from './i18n';
+export * as BuilderTabs from './tabs';
diff --git a/src/components/builder/tabs.tsx b/src/components/builder/tabs.tsx
@@ -0,0 +1,57 @@
+import {FormattedMessage} from 'react-intl';
+
+import {Tab} from '@/components/formio';
+
+export interface TabProps {
+  hasErrors: boolean;
+}
+
+export const Basic: React.FC<TabProps> = props => (
+  <Tab {...props}>
+    <FormattedMessage
+      description="Component edit form tab title for 'Basic' tab"
+      defaultMessage="Basic"
+    />
+  </Tab>
+);
+
+export const Advanced: React.FC<TabProps> = props => (
+  <Tab {...props}>
+    <FormattedMessage
+      description="Component edit form tab title for 'Advanced' tab"
+      defaultMessage="Advanced"
+    />
+  </Tab>
+);
+export const Validation: React.FC<TabProps> = props => (
+  <Tab {...props}>
+    <FormattedMessage
+      description="Component edit form tab title for 'Validation' tab"
+      defaultMessage="Validation"
+    />
+  </Tab>
+);
+export const Registration: React.FC<TabProps> = props => (
+  <Tab {...props}>
+    <FormattedMessage
+      description="Component edit form tab title for 'Registration' tab"
+      defaultMessage="Registration"
+    />
+  </Tab>
+);
+export const Prefill: React.FC<TabProps> = props => (
+  <Tab {...props}>
+    <FormattedMessage
+      description="Component edit form tab title for 'Prefill' tab"
+      defaultMessage="Prefill"
+    />
+  </Tab>
+);
+export const Translations: React.FC<TabProps> = props => (
+  <Tab {...props}>
+    <FormattedMessage
+      description="Component edit form tab title for 'Translations' tab"
+      defaultMessage="Translations"
+    />
+  </Tab>
+);
diff --git a/src/registry/email/edit.tsx b/src/registry/email/edit.tsx
@@ -4,6 +4,7 @@ import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 
 import {
   AutoComplete,
+  BuilderTabs,
   ClearOnHide,
   Description,
   Hidden,
@@ -19,7 +20,7 @@ import {
   Validate,
   useDeriveComponentKey,
 } from '@/components/builder';
-import {Checkbox, Tab, TabList, TabPanel, Tabs, TextField} from '@/components/formio';
+import {Checkbox, TabList, TabPanel, Tabs, TextField} from '@/components/formio';
 import {getErrorNames} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
@@ -52,7 +53,7 @@ const EditForm: EditFormDefinition<EmailComponentSchema> = () => {
   return (
     <Tabs>
       <TabList>
-        <Tab
+        <BuilderTabs.Basic
           hasErrors={hasAnyError(
             'label',
             'key',
@@ -68,36 +69,12 @@ const EditForm: EditFormDefinition<EmailComponentSchema> = () => {
             'defaultValue',
             'autocomplete'
           )}
-        >
-          <FormattedMessage
-            description="Component edit form tab title for 'Basic' tab"
-            defaultMessage="Basic"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('conditional')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Advanced' tab"
-            defaultMessage="Advanced"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('validate')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Validation' tab"
-            defaultMessage="Validation"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('registration')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Registration' tab"
-            defaultMessage="Registration"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('openForms.translations')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Translations' tab"
-            defaultMessage="Translations"
-          />
-        </Tab>
+        />
+        <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
+        <BuilderTabs.Validation hasErrors={hasAnyError('validate')} />
+        <BuilderTabs.Registration hasErrors={hasAnyError('registration')} />
+        <BuilderTabs.Prefill hasErrors={hasAnyError('prefill')} />
+        <BuilderTabs.Translations hasErrors={hasAnyError('openForms.translations')} />
       </TabList>
 
       {/* Basic tab */}

diff --git a/src/registry/textfield/edit.tsx b/src/registry/textfield/edit.tsx
@@ -4,6 +4,7 @@ import {FormattedMessage, useIntl} from 'react-intl';
 
 import {
   AutoComplete,
+  BuilderTabs,
   ClearOnHide,
   ComponentSelect,
   Description,
@@ -62,7 +63,7 @@ const EditForm: EditFormDefinition<TextFieldComponentSchema> = () => {
   return (
     <Tabs>
       <TabList>
-        <Tab
+        <BuilderTabs.Basic
           hasErrors={hasAnyError(
             'label',
             'key',
@@ -81,12 +82,7 @@ const EditForm: EditFormDefinition<TextFieldComponentSchema> = () => {
             'placeholder',
             'showCharCount'
           )}
-        >
-          <FormattedMessage
-            description="Component edit form tab title for 'Basic' tab"
-            defaultMessage="Basic"
-          />
-        </Tab>
+        />
         <Tab
           hasErrors={hasAnyError(
             'deriveStreetName',
@@ -100,36 +96,11 @@ const EditForm: EditFormDefinition<TextFieldComponentSchema> = () => {
             defaultMessage="Location"
           />
         </Tab>
-        <Tab hasErrors={hasAnyError('conditional')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Advanced' tab"
-            defaultMessage="Advanced"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('validate')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Validation' tab"
-            defaultMessage="Validation"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('registration')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Registration' tab"
-            defaultMessage="Registration"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('prefill')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Prefill' tab"
-            defaultMessage="Prefill"
-          />
-        </Tab>
-        <Tab hasErrors={hasAnyError('openForms.translations')}>
-          <FormattedMessage
-            description="Component edit form tab title for 'Translations' tab"
-            defaultMessage="Translations"
-          />
-        </Tab>
+        <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
+        <BuilderTabs.Validation hasErrors={hasAnyError('validate')} />
+        <BuilderTabs.Registration hasErrors={hasAnyError('registration')} />
+        <BuilderTabs.Prefill hasErrors={hasAnyError('prefill')} />
+        <BuilderTabs.Translations hasErrors={hasAnyError('openForms.translations')} />
       </TabList>
 
       {/* Basic tab */}