@eeacms/volto-tabs-block 6.0.3 → 7.0.1

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

@@ -1,183 +1,29 @@
 import React from 'react';
 import cx from 'classnames';
-import { compose } from 'redux';
 import { isEmpty } from 'lodash';
-import { v4 as uuid } from 'uuid';
-import { withRouter } from 'react-router';
+import { useIntl } from 'react-intl';
 import Tabs from 'react-responsive-tabs';
-import AnimateHeight from 'react-animate-height';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
+import { MenuItem } from '@eeacms/volto-tabs-block/components/templates/default/Edit';
 import { emptyBlocksForm } from '@plone/volto/helpers';
-import { Menu, Input, Icon } from 'semantic-ui-react';
+import { Icon } from 'semantic-ui-react';
 import { Icon as VoltoIcon, BlocksForm } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import noop from 'lodash/noop';
-import '@eeacms/volto-tabs-block/less/menu.less';
 
-const MenuItem = (props) => {
-  const inputRef = React.useRef(null);
-  const {
-    activeTab = null,
-    activeBlock = null,
-    block = null,
-    data = {},
-    editingTab = null,
-    selected = false,
-    tabData = {},
-    tabs = {},
-
-    tabsData = {},
-    tabsDescription,
-    tabsList = [],
-    tabsTitle,
-    emptyTab = noop,
-    setActiveBlock = noop,
-    setActiveTab = noop,
-    setEditingTab = noop,
-    onChangeBlock = noop,
-  } = props;
-  const { tab, index } = props;
-  const tabIndex = index + 1;
-  const defaultTitle = `Tab ${tabIndex}`;
-  const title = tabs[tab]?.title;
-  const addNewTab = () => {
-    const tabId = uuid();
-
-    onChangeBlock(block, {
-      ...data,
-      data: {
-        ...tabsData,
-        blocks: {
-          ...tabsData.blocks,
-          [tabId]: {
-            ...emptyTab(),
-          },
-        },
-        blocks_layout: {
-          items: [...tabsData.blocks_layout.items, tabId],
-        },
-      },
-    });
-  };
-
-  React.useEffect(() => {
-    if (editingTab === tab && inputRef.current) {
-      inputRef.current.focus();
-    }
-    /* eslint-disable-next-line */
-  }, [editingTab]);
-
-  return (
-    <>
-      {index === 0 && (tabsTitle || tabsDescription) && (
-        <div className="menu-title"></div>
-      )}
-
-      <Menu.Item
-        role="tab"
-        aria-hidden="true"
-        name={defaultTitle}
-        active={tab === activeTab}
-        onClick={() => {
-          if (activeTab !== tab) {
-            setActiveTab(tab);
-          }
-          if (activeBlock) {
-            setActiveBlock(null);
-          }
-          if (editingTab !== tab) {
-            setEditingTab(null);
-          }
-        }}
-        onDoubleClick={() => {
-          setEditingTab(tab);
-        }}
-        className="remove-margin"
-      >
-        {editingTab === tab && selected ? (
-          <Input
-            placeholder={defaultTitle}
-            ref={inputRef}
-            transparent
-            value={title}
-            onChange={(e) => {
-              onChangeBlock(block, {
-                ...data,
-                data: {
-                  ...tabsData,
-                  blocks: {
-                    ...tabsData.blocks,
-                    [tab]: {
-                      ...(tabData || {}),
-                      title: e.target.value,
-                    },
-                  },
-                },
-              });
-            }}
-          />
-        ) : (
-          <>
-            <p className={'menu-item-text'}>{title || defaultTitle}</p>
-          </>
-        )}
-      </Menu.Item>
-      {index === tabsList.length - 1 ? (
-        <>
-          <Menu.Item
-            role="tab"
-            aria-hidden="true"
-            name="addition"
-            onClick={() => {
-              addNewTab();
-              setEditingTab(null);
-            }}
-            className="remove-margin addition-button"
-          >
-            <p className={'menu-item-text'}>+</p>
-          </Menu.Item>
-        </>
-      ) : (
-        ''
-      )}
-    </>
-  );
-};
+import '@eeacms/volto-tabs-block/less/menu.less';
+import { accordionSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/accordion/schema';
 
 class Tab extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      height: 0,
-    };
-  }
-
-  componentDidMount() {
-    if (this.state.height === 0) {
-      requestAnimationFrame(() => {
-        this.setState({ height: 'auto' });
-      });
-    }
-  }
-
   render() {
-    return (
-      <AnimateHeight
-        animateOpacity
-        duration={500}
-        height={this.state.height}
-        aria-hidden={false}
-      >
-        {this.props.children}
-      </AnimateHeight>
-    );
+    return this.props.children;
   }
 }
 
 const Edit = (props) => {
+  const intl = useIntl();
   const {
     data = {},
     tabsList = [],
@@ -198,41 +44,22 @@ const Edit = (props) => {
     onSelectBlock = noop,
     emptyTab = noop,
     tabsData = {},
+    schema,
   } = props;
 
-  const accordionConfig =
-    config.blocks.blocksConfig[TABS_BLOCK].templates?.['accordion'] || {};
-  const { icons, semanticIcon, transformWidth = 800 } = accordionConfig;
+  const { menuInverted, menuSecondary, menuPointing } = data;
+  const accordionConfig = config.blocks.blocksConfig[
+    TABS_BLOCK
+  ].variations.filter((v, _i) => v.id === data.variation);
+  const { icons, semanticIcon, transformWidth = 800 } = accordionConfig?.[0];
 
   const tabsContainer = React.useRef();
   const [mounted, setMounted] = React.useState(false);
   const [hashTab, setHashTab] = React.useState(false);
   const [initialWidth, setInitialWidth] = React.useState(transformWidth);
 
-  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 items = tabsList.map((tab, index) => {
-    const title = tabs[tab]?.title;
-    const defaultTitle = `Tab ${index + 1}`;
     const active = activeTabIndex === index;
-    const tabsDescription = data.description;
 
     return {
       title: (
@@ -259,8 +86,7 @@ const Edit = (props) => {
             index={index}
             setEditingTab={setEditingTab}
             tab={tab}
-            tabsTitle={title || defaultTitle}
-            tabsDescription={tabsDescription}
+            schema={schema}
           />
         </>
       ),
@@ -268,7 +94,7 @@ const Edit = (props) => {
         <Tab {...props} tab={tab} content={tabs[tab]} aria-hidden={false}>
           <BlocksForm
             allowedBlocks={data?.allowedBlocks}
-            description={data?.instrunctions?.data}
+            description={data?.instructions?.data}
             manage={manage}
             metadata={metadata}
             pathname={props.pathname}
@@ -289,7 +115,10 @@ const Edit = (props) => {
                     [activeTab]: {
                       ...(newFormData.blocks_layout.items.length > 0
                         ? newFormData
-                        : emptyTab()),
+                        : emptyTab({
+                            schema: schema.properties.data.schema,
+                            intl,
+                          })),
                     },
                   },
                 },
@@ -347,16 +176,14 @@ const Edit = (props) => {
       selectedTabKey={tabsList[activeTabIndex]}
       unmountOnExit={false}
       items={items}
-      onChange={(tab) => {
+      onChange={() => {
         const { blockWidth } = tabsContainer.current?.state || {};
         const tabWithHash = getParentTabFromHash(
           data,
-          props.location.hash.substring(1),
+          props?.location?.hash.substring(1),
         );
-        if (tabWithHash === tabsList[activeTabIndex] && !hashTab)
+        if (tabWithHash === tabsList[activeTabIndex] && !hashTab) {
           setHashTab(true);
-        else if (tab !== tabsList[activeTabIndex]) {
-          setActiveTab(tab);
         } else if (blockWidth <= initialWidth) {
           setActiveTab(null);
         }
@@ -367,13 +194,13 @@ const Edit = (props) => {
         'tabs-accessibility',
         data?.theme ? `${data?.theme}` : '',
         {
-          inverted: getDataValue('menuInverted'),
+          inverted: menuInverted,
         },
         {
-          pointing: getDataValue('menuPointing'),
+          pointing: menuPointing,
         },
         {
-          secondary: getDataValue('menuSecondary'),
+          secondary: menuSecondary,
         },
       )}
       showMore={false}
@@ -381,4 +208,6 @@ const Edit = (props) => {
   );
 };
 
-export default compose(withScrollToTarget, withRouter)(Edit);
+Edit.schemaEnhancer = accordionSchemaEnhancer;
+
+export default Edit;

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

@@ -1,52 +1,28 @@
 import React, { useLayoutEffect } from 'react';
-import cx from 'classnames';
 import { compose } from 'redux';
 import { withRouter } from 'react-router';
-import Tabs from 'react-responsive-tabs';
-import AnimateHeight from 'react-animate-height';
+import { withResizeDetector } from 'react-resize-detector';
+import cx from 'classnames';
+import noop from 'lodash/noop';
+
 import { Icon } from 'semantic-ui-react';
+import { Icon as VoltoIcon } from '@plone/volto/components';
+import { RenderBlocks } from '@plone/volto/components';
 import config from '@plone/volto/registry';
-import { Icon as VoltoIcon, RenderBlocks } from '@plone/volto/components';
+
+import Tabs from 'react-responsive-tabs';
+import { AssetTab } from '@eeacms/volto-tabs-block/components';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
-import noop from 'lodash/noop';
-
-import { withResizeDetector } from 'react-resize-detector';
+import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import '@eeacms/volto-tabs-block/less/menu.less';
 
 class Tab extends React.Component {
-  constructor() {
-    super();
-    this.animateId = null;
-    this.state = {
-      height: 0,
-    };
-  }
-
-  componentDidMount() {
-    if (this.state.height === 0) {
-      this.animateId = requestAnimationFrame(() => {
-        this.setState({ height: 'auto' });
-      });
-    }
-  }
-  componentWillUnmount() {
-    cancelAnimationFrame(this.animateId);
-  }
-
   render() {
     return (
       <div id={this.props.title} className="tab-name">
-        <AnimateHeight
-          animateOpacity
-          duration={500}
-          height={this.state.height}
-          aria-hidden={false}
-        >
-          <RenderBlocks {...this.props} />
-        </AnimateHeight>
+        <RenderBlocks {...this.props} />
       </div>
     );
   }
@@ -62,9 +38,11 @@ const View = (props) => {
     width,
     id,
   } = props;
-  const accordionConfig =
-    config.blocks.blocksConfig[TABS_BLOCK].templates?.['accordion'] || {};
-  const { icons, semanticIcon, transformWidth = 800 } = accordionConfig;
+
+  const accordionConfig = config.blocks.blocksConfig[
+    TABS_BLOCK
+  ].variations.filter((v, _i) => v.id === data.variation);
+  const { icons, semanticIcon, transformWidth = 800 } = accordionConfig?.[0];
 
   const tabsContainer = React.useRef();
   const [mounted, setMounted] = React.useState(false);
@@ -75,29 +53,13 @@ const View = (props) => {
     tabs_width < initialWidth,
   );
 
-  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 items = tabsList.map((tab, index) => {
-    const title = tabs[tab].title;
     const defaultTitle = `Tab ${index + 1}`;
     const active = activeTabIndex === index;
+    const tabSettings = tabs[tab];
+    const { title, assetType } = tabSettings;
+    const tabIndex = index + 1;
+    const tabTitle = title || defaultTitle;
 
     return {
       title: (
@@ -112,7 +74,15 @@ const View = (props) => {
               size={icons.size}
             />
           )}
-          <span>{title || defaultTitle} </span>
+          {assetType ? (
+            <AssetTab
+              props={tabSettings}
+              tabTitle={tabTitle}
+              tabIndex={tabIndex}
+            />
+          ) : (
+            <span>{title || defaultTitle}</span>
+          )}
         </>
       ),
       content: (
@@ -143,6 +113,13 @@ const View = (props) => {
 
   React.useEffect(() => {
     if (!mounted) return;
+
+    // set role="tablist" on RRT_tabs for proper aria role accessibility
+    const tabsWrapper = tabsContainer.current?.tabsWrapper.current;
+    if (tabsWrapper) {
+      tabsWrapper.querySelector('.RRT__tabs').setAttribute('role', 'tablist');
+    }
+
     const { blockWidth, tabsTotalWidth } = tabsContainer.current?.state || {};
     setInitialWidth(
       tabsTotalWidth < blockWidth ? tabsTotalWidth + 1 : blockWidth + 1,
@@ -170,7 +147,7 @@ const View = (props) => {
 
   return (
     <div
-      tabIndex="0"
+      className={'tab-accordion-container'}
       onKeyDown={(e) => {
         if (e.key === 'Enter') {
           e.preventDefault();
@@ -178,7 +155,8 @@ const View = (props) => {
           if (focusedElement) focusedElement.click();
         }
       }}
-      role="tab"
+      role={'presentation'}
+      tabIndex={-1}
     >
       <Tabs
         ref={tabsContainer}
@@ -209,13 +187,13 @@ const View = (props) => {
             : 'ui menu tabs-accessibility tabs-secondary-variant',
           data?.theme ? `${data?.theme}` : '',
           {
-            inverted: getDataValue('menuInverted'),
+            inverted: data.menuInverted,
           },
           {
-            pointing: getDataValue('menuPointing'),
+            pointing: data.menuPointing,
           },
           {
-            secondary: getDataValue('menuSecondary'),
+            secondary: data.menuSecondary,
           },
         )}
         showMore={false}

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

@@ -1,5 +1,4 @@
 import AccordionEdit from './Edit';
 import AccordionView from './View';
-import accordionSchema from './schema';
 
-export { AccordionEdit, AccordionView, accordionSchema };
+export { AccordionEdit, AccordionView };

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

@@ -1,4 +1,5 @@
 import { defineMessages } from 'react-intl';
+import config from '@plone/volto/registry';
 
 const messages = defineMessages({
   AccordionTabsBlock: {
@@ -51,58 +52,50 @@ const messages = defineMessages({
   },
 });
 
-export default (config, props) => ({
-  title: props.intl.formatMessage(messages.AccordionTabsBlock),
-  fieldsets: [
-    {
-      id: 'default',
-      title: props.intl.formatMessage(messages.Default),
-      fields: ['description'],
-    },
-    {
-      id: 'menu',
-      title: props.intl.formatMessage(messages.Menu),
-      fields: [
-        'menuInverted',
-        'menuSecondary',
-        'menuPointing',
-        'accordionIconRight',
-      ],
-    },
-    {
-      id: 'style',
-      title: props.intl.formatMessage(messages.Style),
-      fields: ['theme'],
-    },
-  ],
-  properties: {
-    description: {
-      title: props.intl.formatMessage(messages.Description),
-    },
+export const accordionSchemaEnhancer = ({ schema, intl }) => {
+  schema.fieldsets.splice(1, 0, {
+    id: 'menu',
+    title: intl.formatMessage(messages.Menu),
+    fields: [
+      'menuInverted',
+      'menuSecondary',
+      'menuPointing',
+      'accordionIconRight',
+    ],
+  });
+
+  schema.fieldsets.splice(2, 0, {
+    id: 'style',
+    title: intl.formatMessage(messages.Style),
+    fields: ['theme'],
+  });
+
+  schema.properties = {
+    ...schema.properties,
     accordionIconRight: {
-      title: props.intl.formatMessage(messages.IconPositionOnTheRight),
-      description: props.intl.formatMessage(
+      title: intl.formatMessage(messages.IconPositionOnTheRight),
+      description: intl.formatMessage(
         messages.PositionLeftRightIconAccordionTab,
       ),
       type: 'boolean',
     },
     menuInverted: {
-      title: props.intl.formatMessage(messages.Inverted),
+      title: intl.formatMessage(messages.Inverted),
       type: 'boolean',
     },
     menuPointing: {
-      title: props.intl.formatMessage(messages.MenuPointing),
+      title: intl.formatMessage(messages.MenuPointing),
       type: 'boolean',
+      default: true,
     },
     menuSecondary: {
-      title: props.intl.formatMessage(messages.MenuSecondary),
+      title: intl.formatMessage(messages.MenuSecondary),
       type: 'boolean',
+      default: true,
     },
     theme: {
-      title: props.intl.formatMessage(messages.Theme),
-      description: props.intl.formatMessage(
-        messages.SetThemeAccordionTabsBlock,
-      ),
+      title: intl.formatMessage(messages.Theme),
+      description: intl.formatMessage(messages.SetThemeAccordionTabsBlock),
       widget: 'theme_picker',
       colors: [
         ...(config.settings && config.settings.themeColors
@@ -113,6 +106,6 @@ export default (config, props) => ({
           : []),
       ],
     },
-  },
-  required: [],
-});
+  };
+  return schema;
+};

package/src/components/templates/carousel/HorizontalView.jsx

@@ -6,6 +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 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -189,4 +190,6 @@ const View = (props) => {
   );
 };
 
+View.schemaEnhancer = carouselSchemaEnhancer;
+
 export default withRouter(View);

package/src/components/templates/carousel/VerticalView.jsx

@@ -6,6 +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';
 
 const Slider = loadable(() => import('react-slick'));
 
@@ -50,4 +51,6 @@ const View = (props) => {
   );
 };
 
+View.schemaEnhancer = carouselSchemaEnhancer;
+
 export default withRouter(View);

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

@@ -1,5 +1,4 @@
 import HorizontalCarouselView from './HorizontalView';
 import VerticalCarouselView from './VerticalView';
-import carouselSchema from './schema';
 
-export { HorizontalCarouselView, VerticalCarouselView, carouselSchema };
+export { HorizontalCarouselView, VerticalCarouselView };