@eeacms/volto-tabs-block 6.0.3 → 7.0.0

package/src/components/templates/carousel/schema.js

@@ -1,14 +1,6 @@
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  CarouselTabsBlock: {
-    id: 'carousel-tabs-block',
-    defaultMessage: 'Carousel block',
-  },
-  Default: {
-    id: 'default',
-    defaultMessage: 'Default',
-  },
   Theme: {
     id: 'theme',
     defaultMessage: 'Theme',
@@ -25,27 +17,29 @@ const messages = defineMessages({
     id: 'grey',
     defaultMessage: 'Grey',
   },
+  Style: {
+    id: 'style',
+    defaultMessage: 'Style',
+  },
 });
 
-export default (config, props) => ({
-  title: props.intl.formatMessage(messages.CarouselTabsBlock),
-  fieldsets: [
-    {
-      id: 'default',
-      title: props.intl.formatMessage(messages.Default),
-      fields: ['theme'],
-    },
-  ],
-  properties: {
+export const carouselSchemaEnhancer = ({ schema, intl }) => {
+  schema.fieldsets.splice(1, 0, {
+    id: 'style',
+    title: intl.formatMessage(messages.Style),
+    fields: ['theme'],
+  });
+  schema.properties = {
+    ...schema.properties,
     theme: {
-      title: props.intl.formatMessage(messages.Theme),
+      title: intl.formatMessage(messages.Theme),
       choices: [
-        ['light', props.intl.formatMessage(messages.Light)],
-        ['dark', props.intl.formatMessage(messages.Dark)],
-        ['grey', props.intl.formatMessage(messages.Grey)],
+        ['light', intl.formatMessage(messages.Light)],
+        ['dark', intl.formatMessage(messages.Dark)],
+        ['grey', intl.formatMessage(messages.Grey)],
       ],
       default: 'light',
     },
-  },
-  required: [],
-});
+  };
+  return schema;
+};

package/src/components/templates/default/Edit.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import { isEmpty } from 'lodash';
 import { v4 as uuid } from 'uuid';
 import cx from 'classnames';
 import { Menu, Tab, Input, Container } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
 import { BlocksForm } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
-import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
+import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/default/schema';
+import { AssetTab } from '@eeacms/volto-tabs-block/components';
 import {
   SimpleMarkdown,
   getMenuPosition,
@@ -17,9 +18,11 @@ import '@eeacms/volto-tabs-block/less/menu.less';
 
 import noop from 'lodash/noop';
 
-const MenuItem = (props) => {
+export const MenuItem = (props) => {
   const inputRef = React.useRef(null);
+  const intl = useIntl();
   const {
+    schema,
     activeTab = null,
     activeBlock = null,
     block = null,
@@ -28,20 +31,22 @@ const MenuItem = (props) => {
     selected = false,
     tabData = {},
     tabs = {},
-    tabsData = {},
     tabsDescription,
-    tabsList = [],
     tabsTitle,
-    emptyTab = noop,
+    tabsData = {},
+    tabsList = [],
+    emptyTab = () => {},
     setActiveBlock = noop,
     setActiveTab = noop,
     setEditingTab = noop,
     onChangeBlock = noop,
   } = props;
   const { tab, index } = props;
-  const title = tabs[tab].title;
   const tabIndex = index + 1;
   const defaultTitle = `Tab ${tabIndex}`;
+  const tabSettings = tabs[tab];
+  const { title, assetType } = tabSettings;
+  const tabTitle = title || defaultTitle;
 
   const addNewTab = () => {
     const tabId = uuid();
@@ -53,7 +58,10 @@ const MenuItem = (props) => {
         blocks: {
           ...tabsData.blocks,
           [tabId]: {
-            ...emptyTab(),
+            ...emptyTab({
+              schema: schema.properties.data.schema,
+              intl,
+            }),
           },
         },
         blocks_layout: {
@@ -61,6 +69,7 @@ const MenuItem = (props) => {
         },
       },
     });
+    return tabId;
   };
 
   React.useEffect(() => {
@@ -81,6 +90,15 @@ const MenuItem = (props) => {
       <Menu.Item
         name={defaultTitle}
         active={tab === activeTab}
+        className="remove-margin"
+        tabIndex={0}
+        role={'tab'}
+        onKeyDown={(e) => {
+          if (e.target.tagName === 'A' && e.code === 'Space') {
+            e.preventDefault();
+            setActiveTab(tab);
+          }
+        }}
         onClick={() => {
           if (activeTab !== tab) {
             setActiveTab(tab);
@@ -120,21 +138,39 @@ const MenuItem = (props) => {
           />
         ) : (
           <>
-            <span className={'menu-item-count'}>{tabIndex}</span>
-            <p className={'menu-item-text'}>{title || defaultTitle}</p>
+            {assetType ? (
+              <AssetTab
+                props={tabSettings}
+                tabTitle={tabTitle}
+                tabIndex={tabIndex}
+              />
+            ) : (
+              <span>{tabTitle}</span>
+            )}
           </>
         )}
       </Menu.Item>
       {index === tabsList.length - 1 ? (
         <>
           <Menu.Item
+            tabIndex={0}
+            role="tab"
             name="addition"
+            onKeyDown={(e) => {
+              if (e.code === 'Space') {
+                e.preventDefault();
+                const newTab = addNewTab();
+                setActiveTab(newTab);
+              }
+            }}
             onClick={() => {
-              addNewTab();
+              const newTab = addNewTab();
+              setActiveTab(newTab);
               setEditingTab(null);
             }}
+            className="remove-margin addition-button"
           >
-            +
+            <p className="menu-item-text">+</p>
           </Menu.Item>
         </>
       ) : (
@@ -145,6 +181,7 @@ const MenuItem = (props) => {
 };
 
 const Edit = (props) => {
+  const intl = useIntl();
   const {
     activeBlock = null,
     activeTab = null,
@@ -159,36 +196,32 @@ const Edit = (props) => {
     tabs = {},
     tabsData = {},
     tabsList = [],
-    emptyTab = noop,
+    emptyTab = () => {},
     onChangeBlock = noop,
     onChangeTabData = noop,
     onSelectBlock = noop,
     setEditingTab = noop,
+    schema,
   } = props;
   const menuPosition = getMenuPosition(data);
-  const isContainer = data.align === 'full';
-  const tabsTitle = data.title;
-  const tabsDescription = data.description;
-
-  const schema = React.useMemo(
-    () =>
-      config.blocks.blocksConfig[TABS_BLOCK].templates?.['default']?.schema(
-        config,
-        props,
-      ) || {},
-    [props],
-  );
-
-  const getDataValue = React.useCallback(
-    (key) => {
-      return (
-        (schema.properties[key]?.value || data[key]) ??
-        schema.properties[key]?.defaultValue
-      );
-    },
-    [schema, data],
-  );
-
+  const {
+    title,
+    description,
+    align,
+    menuBorderless,
+    menuColor,
+    menuCompact,
+    menuFluid,
+    menuInverted,
+    menuPointing,
+    menuSecondary,
+    menuSize,
+    menuStackable,
+    menuTabular,
+    menuText,
+    menuAlign,
+  } = data;
+  const isContainer = align === 'full';
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
@@ -200,8 +233,9 @@ const Edit = (props) => {
           index={index}
           setEditingTab={setEditingTab}
           tab={tab}
-          tabsTitle={tabsTitle}
-          tabsDescription={tabsDescription}
+          tabsTitle={title}
+          tabsDescription={description}
+          schema={schema}
         />
       ),
       render: () => {
@@ -232,7 +266,10 @@ const Edit = (props) => {
                       [activeTab]: {
                         ...(newFormData.blocks_layout.items.length > 0
                           ? newFormData
-                          : emptyTab()),
+                          : emptyTab({
+                              schema: schema.properties.data.schema,
+                              intl,
+                            })),
                       },
                     },
                   },
@@ -275,21 +312,22 @@ const Edit = (props) => {
         className="default tabs"
         menu={{
           attached: menuPosition.attached,
-          borderless: getDataValue('menuBorderless'),
-          color: getDataValue('menuColor'),
-          compact: getDataValue('menuCompact'),
-          fluid: getDataValue('menuFluid'),
-          inverted: getDataValue('menuInverted'),
-          pointing: getDataValue('menuPointing'),
-          secondary: getDataValue('menuSecondary'),
-          size: getDataValue('menuSize'),
-          stackable: getDataValue('menuStackable'),
-          tabular: getDataValue('menuTabular'),
-          text: getDataValue('menuText'),
+          borderless: menuBorderless,
+          color: menuColor,
+          compact: menuCompact,
+          fluid: menuFluid,
+          inverted: menuInverted,
+          pointing: menuPointing,
+          secondary: menuSecondary,
+          size: menuSize,
+          stackable: menuStackable,
+          tabular: menuTabular,
+          text: menuText,
           vertical: menuPosition.vertical,
           className: cx(
             'tabs-secondary-variant',
             data.menuAlign,
+            menuAlign,
             menuPosition.direction === 'left' ? 'border-right' : '',
             menuPosition.direction === 'right' ? 'border-left' : '',
             menuPosition.direction === 'top' ? 'border-bottom' : '',
@@ -305,4 +343,6 @@ const Edit = (props) => {
   );
 };
 
+Edit.schemaEnhancer = defaultSchemaEnhancer;
+
 export default Edit;

package/src/components/templates/default/View.jsx

@@ -2,20 +2,77 @@ import React, { useState, useEffect } from 'react';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import cx from 'classnames';
-import { Menu, Tab, Container } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
+import { Menu, Tab, Container, Icon, Image } from 'semantic-ui-react';
 import { RenderBlocks } from '@plone/volto/components';
-import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import {
   SimpleMarkdown,
   getMenuPosition,
 } from '@eeacms/volto-tabs-block/utils';
 
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+
 import '@eeacms/volto-tabs-block/less/menu.less';
 
 import noop from 'lodash/noop';
 
+export const AssetTab = ({ props, tabIndex, tabTitle }) => {
+  const {
+    icon,
+    image,
+    assetType,
+    assetPosition,
+    iconSize,
+    imageSize,
+    hideTitle,
+  } = props;
+  const imageObject = image?.[0];
+  return (
+    <div
+      className={cx('asset-position', {
+        'asset-top': assetPosition === 'top',
+        'asset-left': assetPosition === 'left',
+        'asset-right': assetPosition === 'right',
+      })}
+    >
+      {assetType === 'icon' && icon && (
+        <Icon
+          className={cx('tab-icon', icon, iconSize, 'aligned')}
+          {...{
+            ...(hideTitle && {
+              role: 'img',
+              'aria-hidden': 'false',
+              'aria-label': tabTitle,
+            }),
+          }}
+        />
+      )}
+
+      {assetType === 'image' && imageObject && (
+        <Image
+          src={
+            isInternalURL(imageObject['@id'])
+              ? `${flattenToAppURL(imageObject['@id'])}/${
+                  imageObject?.image_scales?.image?.[0].scales?.[imageSize]
+                    ?.download || imageObject?.image_scales?.image?.[0].download
+                }`
+              : imageObject['@id']
+          }
+          className={cx('ui', imageSize, 'aligned')}
+          alt={hideTitle ? tabTitle : ''}
+        />
+      )}
+
+      {!hideTitle && (
+        <div>
+          <span className="menu-item-count">{tabIndex}</span>
+          <p className="menu-item-text">{tabTitle}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
 const MenuItem = (props) => {
   const {
     activeTab = null,
@@ -27,10 +84,12 @@ const MenuItem = (props) => {
   } = props;
 
   const { tab, index } = props;
-  const title = tabs[tab].title;
   const tabIndex = index + 1;
   const [tabChanged, setTabChanged] = useState(false);
   const defaultTitle = `Tab ${tabIndex}`;
+  const tabSettings = tabs[tab];
+  const { title, assetType } = tabSettings;
+  const tabTitle = title || defaultTitle;
 
   useEffect(() => {
     if (
@@ -56,7 +115,9 @@ const MenuItem = (props) => {
       <Menu.Item
         name={defaultTitle}
         active={tab === activeTab}
+        aria-selected={tab === activeTab}
         tabIndex={0}
+        role={'tab'}
         onClick={() => {
           if (activeTab !== tab) {
             setActiveTab(tab);
@@ -72,8 +133,20 @@ const MenuItem = (props) => {
           }
         }}
       >
-        <span className={'menu-item-count'}>{tabIndex}</span>
-        <p className={'menu-item-text'}>{title || defaultTitle}</p>
+        <>
+          {assetType ? (
+            <AssetTab
+              props={tabSettings}
+              tabTitle={tabTitle}
+              tabIndex={tabIndex}
+            />
+          ) : (
+            <>
+              <span className="menu-item-count">{tabIndex}</span>
+              <p className="menu-item-text">{tabTitle}</p>
+            </>
+          )}
+        </>
       </Menu.Item>
     </React.Fragment>
   );
@@ -94,28 +167,24 @@ const View = (props) => {
     }
   }, [data, menuPosition]);
 
-  const isContainer = data.align === 'full';
-  const tabsTitle = data.title;
-  const tabsDescription = data.description;
-
-  const schema = React.useMemo(
-    () =>
-      config.blocks.blocksConfig[TABS_BLOCK].templates?.['default']?.schema(
-        config,
-        props,
-      ) || {},
-    [props],
-  );
-
-  const getDataValue = React.useCallback(
-    (key) => {
-      return (
-        (schema.properties[key]?.value || data[key]) ??
-        schema.properties[key]?.defaultValue
-      );
-    },
-    [schema, data],
-  );
+  const {
+    title,
+    description,
+    align,
+    menuBorderless,
+    menuColor,
+    menuCompact,
+    menuFluid,
+    menuInverted,
+    menuPointing,
+    menuSecondary,
+    menuSize,
+    menuStackable,
+    menuTabular,
+    menuText,
+    menuAlign,
+  } = data;
+  const isContainer = align === 'full';
 
   const panes = tabsList.map((tab, index) => {
     return {
@@ -126,8 +195,8 @@ const View = (props) => {
           key={tab}
           tab={tab}
           index={index}
-          tabsTitle={tabsTitle}
-          tabsDescription={tabsDescription}
+          tabsTitle={title}
+          tabsDescription={description}
           blockId={props?.id || ''}
         />
       ),
@@ -157,22 +226,22 @@ const View = (props) => {
         className="default tabs tabs-accessibility"
         renderActiveOnly={false}
         menu={{
+          role: 'tablist',
           attached: menuPosition.attached,
-          borderless: getDataValue('menuBorderless'),
-          color: getDataValue('menuColor'),
-          compact: getDataValue('menuCompact'),
-          fluid: getDataValue('menuFluid'),
-          inverted: getDataValue('menuInverted'),
-          pointing: getDataValue('menuPointing'),
-          secondary: getDataValue('menuSecondary'),
-          size: getDataValue('menuSize'),
-          stackable: getDataValue('menuStackable'),
-          tabular: getDataValue('menuTabular'),
-          text: getDataValue('menuText'),
+          borderless: menuBorderless,
+          color: menuColor,
+          compact: menuCompact,
+          fluid: menuFluid,
+          inverted: menuInverted,
+          pointing: menuPointing,
+          secondary: menuSecondary,
+          size: menuSize,
+          stackable: menuStackable,
+          tabular: menuTabular,
+          text: menuText,
           vertical: menuPosition.vertical,
           className: cx(
-            'tabs-secondary-variant',
-            data.menuAlign,
+            menuAlign,
             menuPosition.direction === 'left' ? 'border-right' : '',
             menuPosition.direction === 'right' ? 'border-left' : '',
             menuPosition.direction === 'top' ? 'border-bottom' : '',

package/src/components/templates/default/index.js

@@ -1,5 +1,5 @@
 import DefaultEdit from './Edit';
 import DefaultView from './View';
-import defaultSchema from './schema';
+import { AssetTab } from './View';
 
-export { DefaultEdit, DefaultView, defaultSchema };
+export { DefaultEdit, DefaultView, AssetTab };