Checkpoint

eea · Dec 30, 2022 · 6182dad · 6182dad
1 parent 058bd2c
commit 6182dad
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 37 deletions.
diff --git a/src/SearchBlock/BlockContainer/BlockContainer.jsx b/src/SearchBlock/BlockContainer/BlockContainer.jsx
@@ -1,11 +1,7 @@
 import React from 'react';
-import { Button } from 'semantic-ui-react';
 import { useLocation } from 'react-router-dom';
-import { Icon, RenderBlocks } from '@plone/volto/components';
+import { RenderBlocks } from '@plone/volto/components';
 import config from '@plone/volto/registry';
-
-import clearSVG from '@plone/volto/icons/clear.svg';
-
 import BlockEdit from '@plone/volto/components/manage/Blocks/Block/Edit';
 import NewBlockAddButton from './NewBlockAddButton';
 
@@ -17,7 +13,7 @@ export default function BlockContainer(props) {
     data,
     selected = false,
     onChangeSlotfill,
-    onDeleteSlotfill,
+    // onDeleteSlotfill,
     onSelectSlotfill,
     properties,
     metadata,
@@ -45,35 +41,24 @@ export default function BlockContainer(props) {
   return mode === 'view' ? (
     <RenderBlocks content={content} metadata={metadata} location={location} />
   ) : data ? (
-    <div>
-      <Button
-        icon
-        basic
-        aria-label="Delete block"
-        onClick={() => onDeleteSlotfill(block)}
-      >
-        <Icon name={clearSVG} size="24px" />
-      </Button>
-
-      <BlockEdit
-        id={block}
-        block={block}
-        data={data}
-        type={data['@type']}
-        properties={properties}
-        metadata={metadata}
-        selected={selected}
-        multiSelected={false}
-        onMoveBlock={() => {}}
-        onDeleteBlock={() => {}}
-        onChangeBlock={onChangeSlotfill}
-        onSelectBlock={(id, isSelected) => onSelectSlotfill(id)}
-        pathname={location.pathname}
-        index={index}
-        disableNewBlocks={true}
-        blocksConfig={blocksConfig}
-      />
-    </div>
+    <BlockEdit
+      id={block}
+      block={block}
+      data={data}
+      type={data['@type']}
+      properties={properties}
+      metadata={metadata}
+      selected={selected}
+      multiSelected={false}
+      onMoveBlock={() => {}}
+      onDeleteBlock={() => {}}
+      onChangeBlock={onChangeSlotfill}
+      onSelectBlock={(id, isSelected) => onSelectSlotfill(id)}
+      pathname={location.pathname}
+      index={index}
+      disableNewBlocks={true}
+      blocksConfig={blocksConfig}
+    />
   ) : (
     <div>
       <NewBlockAddButton block={block} onMutateBlock={onChangeSlotfill} />

diff --git a/src/SearchBlock/BlockContainer/SlotEditor.jsx b/src/SearchBlock/BlockContainer/SlotEditor.jsx
@@ -3,9 +3,12 @@
  */
 
 import React from 'react';
-import { Tab } from 'semantic-ui-react';
+import { Tab, Button } from 'semantic-ui-react';
 import { SEARCH_STATES } from '@eeacms/search';
+import { Icon } from '@plone/volto/components';
 import BlockContainer from './BlockContainer';
+import clearSVG from '@plone/volto/icons/delete.svg';
+import cx from 'classnames';
 
 export default function SlotEditor(props) {
   const {
@@ -20,13 +23,40 @@ export default function SlotEditor(props) {
     mode,
   } = props;
 
+  const [activeIndex, setActiveIndex] = React.useState(0);
+
   return (
     <Tab
       className="aboveSearchblockOverlay"
+      activeIndex={activeIndex}
       panes={SEARCH_STATES.map(([state, label]) => {
         const blockId = `${name}-${state}`;
+        const hasData = !!data?.[blockId];
         return {
-          menuItem: label,
+          menuItem: (el, { active, index }) => {
+            return (
+              <div className={cx('menu item', { active })}>
+                <Button
+                  icon
+                  compact
+                  basic
+                  onClick={() => setActiveIndex(index)}
+                >
+                  {label}
+                </Button>
+                {active && hasData && (
+                  <Button
+                    icon
+                    basic
+                    aria-label="Delete block"
+                    onClick={() => onDeleteSlotfill(blockId)}
+                  >
+                    <Icon name={clearSVG} size="24px" />
+                  </Button>
+                )}
+              </div>
+            );
+          },
           render: () => (
             <Tab.Pane>
               <BlockContainer