@eeacms/volto-tabs-block 8.0.1 → 9.0.0

package/src/components/Edit.jsx

@@ -12,7 +12,8 @@ import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { empty, emptyTab } from '@eeacms/volto-tabs-block/helpers';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { BlockStyleWrapperEdit } from '@eeacms/volto-block-style/BlockStyleWrapper';
-import { DefaultEdit } from './templates/default';
+import { getVariation } from '@eeacms/volto-tabs-block/helpers';
+import { DefaultEdit } from './variations/default';
 import { useIntl } from 'react-intl';
 
 import '@eeacms/volto-tabs-block/less/edit.less';
@@ -23,7 +24,7 @@ const Edit = (props) => {
   const intl = useIntl();
   const { onChangeBlock, onChangeField } = props;
   const { data = {}, block = null } = props;
-  const template = data.variation || 'default';
+  const variation = getVariation(data);
   const tabsData = data.data || {};
   const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
@@ -38,11 +39,11 @@ const Edit = (props) => {
   const verticalAlign = data.verticalAlign || 'flex-start';
   const tabsBlockConfig = config.blocks.blocksConfig[TABS_BLOCK];
 
-  const activeTemplate = config.blocks.blocksConfig[
+  const activeVariation = config.blocks.blocksConfig[
     TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === template);
+  ].variations.filter((v, _i) => v.id === variation);
 
-  const TabsEdit = activeTemplate?.[0]?.edit || DefaultEdit;
+  const TabsEdit = activeVariation?.[0]?.edit || DefaultEdit;
 
   const schemaObject = tabsBlockConfig.blockSchema(props);
 
@@ -168,7 +169,7 @@ const Edit = (props) => {
           Tabs
         </legend>
         <div
-          className={cx('tabs-block edit', theme, verticalAlign, template)}
+          className={cx('tabs-block edit', theme, verticalAlign, variation)}
           ref={view}
           role="presentation"
           onKeyDown={(e) => {
@@ -200,7 +201,6 @@ const Edit = (props) => {
               tabsData={tabsData}
               tabsList={tabsList}
               node={view}
-              template={template}
               onChangeTabData={onChangeTabData}
               onSelectBlock={onSelectBlock}
               setActiveBlock={setActiveBlock}

package/src/components/EditBlockWrapper.jsx

@@ -122,9 +122,9 @@ class EditBlockWrapper extends React.Component {
                   basic
                   title="Add block"
                   onClick={() => {
-                    this.setState({
-                      addNewBlockOpened: !this.state.addNewBlockOpened,
-                    });
+                    this.setState((prevState) => ({
+                      addNewBlockOpened: !prevState.addNewBlockOpened,
+                    }));
                   }}
                   className="column-block-add-button"
                 >

package/src/components/View.jsx

@@ -4,8 +4,12 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
-import { DefaultView } from './templates/default';
+import {
+  getVariation,
+  isTabEmpty,
+  getParentTabFromHash,
+} from '@eeacms/volto-tabs-block/helpers';
+import { DefaultView } from './variations/default';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import config from '@plone/volto/registry';
@@ -17,21 +21,23 @@ const View = (props) => {
   const view = React.useRef(null);
   const { data = {}, uiContainer = '', location, history } = props;
   const metadata = props.metadata || props.properties;
-  const template = data.variation || 'default';
+  const variation = getVariation(data);
   const tabsData = data.data || {};
-  const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
+  const tabsList = (tabsData.blocks_layout?.items || []).filter((tab) => {
+    return data.hideEmptyTabs ? !isTabEmpty(tabs[tab]) : true;
+  });
   const [activeTab, setActiveTab] = React.useState(tabsList?.[0]);
   const activeTabIndex = tabsList.indexOf(activeTab);
   const tabData = tabs[activeTab] || {};
   const theme = data.theme || 'light';
   const verticalAlign = data.verticalAlign || 'flex-start';
 
-  const activeTemplate = config.blocks.blocksConfig[
+  const activeVariation = config.blocks.blocksConfig[
     TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === template);
+  ].variations.filter((v, _i) => v.id === variation);
 
-  const TabsView = activeTemplate?.[0]?.view || DefaultView;
+  const TabsView = activeVariation?.[0]?.view || DefaultView;
 
   const query = React.useMemo(() => {
     const { search } = location;
@@ -90,7 +96,7 @@ const View = (props) => {
       styled={true}
     >
       <div
-        className={cx('tabs-block', template, theme, verticalAlign)}
+        className={cx('tabs-block', variation, theme, verticalAlign)}
         id={props.id}
         ref={view}
       >
@@ -112,7 +118,6 @@ const View = (props) => {
             tabData={tabData}
             tabsData={tabsData}
             tabsList={tabsList}
-            template={template}
             uiContainer={uiContainer}
             setActiveTab={handleActiveTabChange}
           />

package/src/components/index.js

@@ -7,7 +7,7 @@ export { TabsEdit, TabsView };
 export { layoutSchema };
 
 export * from './schema';
-export * from './templates/default';
-export * from './templates/accordion';
-export * from './templates/horizontal-responsive';
-export * from './templates/carousel';
+export * from './variations/default';
+export * from './variations/accordion';
+export * from './variations/horizontal-responsive';
+export * from './variations/carousel';

package/src/components/schema.js

@@ -86,6 +86,10 @@ const messages = defineMessages({
     id: 'hideTitle',
     defaultMessage: 'Hide tab title?',
   },
+  HideEmptyTabs: {
+    id: 'hideEmptyTabs',
+    defaultMessage: 'Hide empty tabs in view?',
+  },
   Large: {
     id: 'large',
     defaultMessage: 'Large',
@@ -191,7 +195,13 @@ export const blockSchema = (props) => {
       {
         id: 'default',
         title: intl.formatMessage(messages.Default),
-        fields: ['title', 'description', 'verticalAlign', 'data'],
+        fields: [
+          'title',
+          'description',
+          'verticalAlign',
+          'hideEmptyTabs',
+          'data',
+        ],
       },
     ],
     properties: {
@@ -216,6 +226,10 @@ export const blockSchema = (props) => {
         ],
         default: 'flex-start',
       },
+      hideEmptyTabs: {
+        title: intl.formatMessage(messages.HideEmptyTabs),
+        type: 'boolean',
+      },
     },
     required: [],
   };

package/src/components/{templates → variations}/accordion/Edit.jsx

@@ -1,5 +1,5 @@
-import Edit from '@eeacms/volto-tabs-block/components/templates/default/Edit';
-import { accordionSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/accordion/schema';
+import Edit from '@eeacms/volto-tabs-block/components/variations/default/Edit';
+import { accordionSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/accordion/schema';
 import cx from 'classnames';
 
 const AccordionEdit = (props) => {

package/src/components/{templates → variations}/accordion/View.jsx

@@ -17,6 +17,7 @@ import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import '@eeacms/volto-tabs-block/less/menu.less';
+import { getVariation } from '../../../helpers';
 
 class Tab extends React.Component {
   render() {
@@ -39,9 +40,11 @@ const View = (props) => {
     id,
   } = props;
 
+  const variation = getVariation(data);
+
   const accordionConfig = config.blocks.blocksConfig[
     TABS_BLOCK
-  ].variations.filter((v, _i) => v.id === data.variation);
+  ].variations.filter((v, _i) => v.id === variation);
   const {
     icons,
     semanticIcon,

package/src/components/{templates → variations}/carousel/HorizontalView.jsx

@@ -6,7 +6,7 @@ import { Icon, RenderBlocks } from '@plone/volto/components';
 
 import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-key.svg';
 import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-key.svg';
-import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/carousel/schema';
+import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/carousel/schema';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';

package/src/components/{templates → variations}/carousel/VerticalView.jsx

@@ -6,7 +6,7 @@ import { RenderBlocks } from '@plone/volto/components';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import '@eeacms/volto-tabs-block/less/carousel.less';
-import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/carousel/schema';
+import { carouselSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/carousel/schema';
 
 const Slider = loadable(() => import('react-slick'));
 

package/src/components/{templates → variations}/default/Edit.jsx

@@ -7,7 +7,7 @@ import { Menu, Tab, Input, Container } from 'semantic-ui-react';
 import { BlocksForm } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/default/schema';
+import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/default/schema';
 import { AssetTab } from '@eeacms/volto-tabs-block/components';
 import {
   SimpleMarkdown,

package/src/components/{templates → variations}/horizontal-responsive/Edit.jsx

@@ -10,7 +10,7 @@ import { Menu, Tab, Container, Dropdown, Input } from 'semantic-ui-react';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import { BlocksForm } from '@plone/volto/components';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/default/schema';
+import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/variations/default/schema';
 import {
   SimpleMarkdown,
   getMenuPosition,

package/src/helpers.js

@@ -1,7 +1,27 @@
 import { v4 as uuid } from 'uuid';
-import { emptyBlocksForm, applySchemaDefaults } from '@plone/volto/helpers';
+import {
+  emptyBlocksForm,
+  applySchemaDefaults,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
 
+const variationsMapping = {
+  carousel: 'carousel-horizontal',
+  carousel_vertical: 'carousel-vertical',
+};
+
+export const getVariation = (data) => {
+  const { variation, template } = data;
+  return (
+    variationsMapping[variation || template] ||
+    variation ||
+    template ||
+    'default'
+  );
+};
+
 export const empty = ({ schema, intl }) => {
   const tabId = uuid();
   const data = {
@@ -56,3 +76,22 @@ export const getParentTabFromHash = (tabsBlockData, urlHash) => {
   }
   return null;
 };
+
+export const isTabEmpty = (content) => {
+  const blocks_field = getBlocksFieldname(content);
+  const blocks_layout_field = getBlocksLayoutFieldname(content);
+  const blocks = content[blocks_field] || {};
+  const blocksNo = content[blocks_layout_field]?.items?.length || 0;
+
+  if (blocksNo === 1) {
+    const blockId = content[blocks_layout_field].items[0];
+    const block = blocks[blockId];
+    if (block['@type'] === 'slate' && !block['plaintext']) {
+      return true;
+    }
+  }
+  if (blocksNo === 0) {
+    return true;
+  }
+  return false;
+};

package/src/helpers.test.js

@@ -3,6 +3,7 @@ import {
   emptyTab,
   scrollToTarget,
   getParentTabFromHash,
+  isTabEmpty,
 } from './helpers';
 // import { emptyBlocksForm } from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
@@ -42,6 +43,19 @@ describe('emptyTab function', () => {
   });
 });
 
+describe('isTabEmpty function', () => {
+  it('returns if a tab is empty', () => {
+    // emptyBlocksForm.mockReturnValue({});
+    const result = isTabEmpty({
+      blocks: {},
+      blocks_layout: {
+        items: [],
+      },
+    });
+    expect(result).toEqual(true);
+  });
+});
+
 describe('scrollToTarget', () => {
   it('should call window.scrollTo with the correct arguments', () => {
     window.scrollTo = jest.fn();