feat: replace remove symbolizer button with removable tabs (#2152)

geostyler · May 12, 2023 · 34ad73d · 34ad73d
1 parent 84baa7b
commit 34ad73d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/src/Component/Rule/Rule.spec.tsx b/src/Component/Rule/Rule.spec.tsx
@@ -170,7 +170,7 @@ describe('Rule', () => {
         fireEvent.click(map);
       });
 
-      const btn = wrapper.queryByText('Add');
+      const btn = wrapper.queryAllByLabelText('Add tab')[0];
 
       await act(async () => {
         fireEvent.click(btn);

diff --git a/src/Component/Symbolizer/MultiEditor/MultiEditor.spec.tsx b/src/Component/Symbolizer/MultiEditor/MultiEditor.spec.tsx
@@ -60,7 +60,7 @@ describe('MultiEditor', () => {
 
   it('adds a Symbolizer', async () => {
     const textEditor = render(<MultiEditor {...props} />);
-    const addButton = await textEditor.findByText(en_US.MultiEditor.add);
+    const addButton = (await textEditor.findAllByLabelText('Add tab'))[0];
     const got = [
       ...dummySymbolizers,
       {'color': '#0E1058', 'kind': 'Mark', 'wellKnownName': 'circle'}
@@ -73,7 +73,7 @@ describe('MultiEditor', () => {
 
   it('removes a Symbolizer', async () => {
     const textEditor = render(<MultiEditor {...props} />);
-    const removeButton = await textEditor.findByText(en_US.MultiEditor.remove);
+    const removeButton = (await textEditor.findAllByLabelText('remove'))[0];
     const got = [{
       kind: 'Mark',
       wellKnownName: 'circle',

diff --git a/src/Component/Symbolizer/MultiEditor/MultiEditor.tsx b/src/Component/Symbolizer/MultiEditor/MultiEditor.tsx
@@ -38,7 +38,7 @@ import './MultiEditor.less';
 import 'ol/ol.css';
 import { Data } from 'geostyler-data';
 
-import { Tabs, Button } from 'antd';
+import { Tabs } from 'antd';
 import Editor from '../Editor/Editor';
 
 import { localize } from '../../LocaleWrapper/LocaleWrapper';
@@ -101,48 +101,51 @@ export const MultiEditor: React.FC<MultiEditorProps> = ({
     }
   };
 
+  const onTabEdit = (targetKey: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => {
+    if (action === 'add') {
+      addSymbolizer();
+    } else {
+      try {
+        if (symbolizers.length === 1) {
+          return;
+        }
+        const key = parseInt(targetKey.toString(), 10);
+        removeSymbolizer(key);
+      } catch {
+        // eslint-disable-next-line no-console
+        console.log('Could not remove symbolizer. Invalid key.');
+      }
+    }
+  };
+
   const tabs: Tab[] = symbolizers.map((symbolizer: Symbolizer, idx: number) => {
     return {
       className: 'gs-symbolizer-multi-editor-tab',
       key: idx.toString(),
       closable: true,
       label: `${symbolizer.kind} (${idx})`,
       children: (
-        <>
-          <Editor
-            symbolizer={symbolizer}
-            onSymbolizerChange={(sym: Symbolizer) => {
-              onSymbolizerChange(sym, idx);
-            }}
-            internalDataDef={internalDataDef}
-            iconLibraries={iconLibraries}
-            {...editorProps}
-          />
-          {symbolizers.length === 1 ? null :
-            <Button
-              onClick={() => {
-                removeSymbolizer(idx);
-              }}
-            >
-              {locale.remove}
-            </Button>
-          }
-        </>
+        <Editor
+          symbolizer={symbolizer}
+          onSymbolizerChange={(sym: Symbolizer) => {
+            onSymbolizerChange(sym, idx);
+          }}
+          internalDataDef={internalDataDef}
+          iconLibraries={iconLibraries}
+          {...editorProps}
+        />
       )
     };
   });
 
   return (
     <Tabs
-      className="gs-symbolizer-multi-editor"
-      defaultActiveKey="0"
-      animated={false}
-      tabBarExtraContent={(
-        <Button onClick={addSymbolizer}>
-          {locale.add}
-        </Button>
-      )}
+      className='gs-symbolizer-multi-editor'
+      type='editable-card'
+      defaultActiveKey='0'
       items={tabs}
+      animated={false}
+      onEdit={onTabEdit}
       {...passThroughProps}
     />
   );