@eeacms/volto-tabs-block 6.0.3 → 7.0.0

package/src/components/Edit.jsx

@@ -2,24 +2,28 @@ import React from 'react';
 import { without } from 'lodash';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
-import { SidebarPortal, BlocksToolbar } from '@plone/volto/components';
-import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import {
+  SidebarPortal,
+  BlocksToolbar,
+  BlockDataForm,
+} from '@plone/volto/components';
 import { getBlocksLayoutFieldname } from '@plone/volto/helpers';
 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 { schema } from './schema';
+import { useIntl } from 'react-intl';
 
 import '@eeacms/volto-tabs-block/less/edit.less';
 import '@eeacms/volto-tabs-block/less/tabs.less';
 
 const Edit = (props) => {
   const view = React.useRef(null);
+  const intl = useIntl();
   const { onChangeBlock, onChangeField } = props;
   const { data = {}, block = null } = props;
-  const template = data.template || 'default';
+  const template = data.variation || 'default';
   const tabsData = data.data || {};
   const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
@@ -32,25 +36,23 @@ const Edit = (props) => {
   const tabData = tabs[activeTab] || {};
   const theme = data.theme || 'light';
   const verticalAlign = data.verticalAlign || 'flex-start';
+  const tabsBlockConfig = config.blocks.blocksConfig[TABS_BLOCK];
 
-  const TabsEdit =
-    config.blocks.blocksConfig[TABS_BLOCK].templates?.[template]?.edit ||
-    DefaultEdit;
-  const templateSchema =
-    config.blocks.blocksConfig[TABS_BLOCK].templates?.[template]?.schema || {};
-
-  const schemaObject = schema(
-    config,
-    typeof templateSchema === 'function'
-      ? templateSchema(config, props)
-      : templateSchema,
-    props,
-  );
+  const activeTemplate = config.blocks.blocksConfig[
+    TABS_BLOCK
+  ].variations.filter((v, _i) => v.id === template);
+
+  const TabsEdit = activeTemplate?.[0]?.edit || DefaultEdit;
+
+  const schemaObject = tabsBlockConfig.blockSchema(props);
 
   React.useEffect(() => {
-    if (!Object.keys(data.data || {}).length) {
+    if (!Object.keys(data?.data?.blocks || {}).length) {
       // Initialize TABS_BLOCK
-      const tabsData = empty();
+      const tabsData = empty({
+        schema: schemaObject.properties.data.schema,
+        intl,
+      });
       onChangeBlock(block, {
         ...data,
         data: {
@@ -119,9 +121,9 @@ const Edit = (props) => {
 
     if (isMultipleSelection) {
       selected = null;
-      const blocksLayoutFieldname = getBlocksLayoutFieldname(tabData);
+      const blocksLayoutFieldName = getBlocksLayoutFieldname(tabData);
 
-      const blocks_layout = tabData[blocksLayoutFieldname].items;
+      const blocks_layout = tabData[blocksLayoutFieldName].items;
 
       if (event.shiftKey) {
         const anchor =
@@ -152,96 +154,111 @@ const Edit = (props) => {
     setActiveBlock(selected);
     setMultiSelected(newMultiSelected);
   };
+
   return (
-    <BlockStyleWrapperEdit {...props}>
-      <div
-        className={cx('tabs-block edit', theme, verticalAlign, template)}
-        ref={view}
-        role="presentation"
-        onKeyDown={(e) => {
-          handleKeyDown(e, props.index, props.block, props.blockNode.current);
-        }}
-        // The tabIndex is required for the keyboard navigation
-        /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-        tabIndex={-1}
-      >
-        <StyleWrapperView
-          {...props}
-          data={tabData}
-          styleData={tabData.styles || {}}
-          styled={true}
+    <fieldset>
+      <BlockStyleWrapperEdit {...props}>
+        <legend
+          onClick={() => {
+            setActiveBlock(null);
+            props.setSidebarTab(1);
+          }}
+          aria-hidden="true"
+        >
+          Tabs
+        </legend>
+        <div
+          className={cx('tabs-block edit', theme, verticalAlign, template)}
+          ref={view}
+          role="presentation"
+          onKeyDown={(e) => {
+            handleKeyDown(e, props.index, props.block, props.blockNode.current);
+          }}
+          // The tabIndex is required for the keyboard navigation
+          /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+          tabIndex={-1}
         >
-          <TabsEdit
+          <StyleWrapperView
             {...props}
-            activeBlock={activeBlock}
-            activeTab={activeTab}
-            activeTabIndex={activeTabIndex}
-            editingTab={editingTab}
-            empty={empty}
-            emptyTab={emptyTab}
-            metadata={props.metadata || props.properties}
-            multiSelected={multiSelected}
-            tabs={tabs}
-            tabData={tabData}
-            tabsData={tabsData}
-            tabsList={tabsList}
-            node={view}
-            template={template}
-            onChangeTabData={onChangeTabData}
-            onSelectBlock={onSelectBlock}
-            setActiveBlock={setActiveBlock}
-            setActiveTab={setActiveTab}
-            setEditingTab={setEditingTab}
-          />
-        </StyleWrapperView>
-
-        {props.selected ? (
-          <BlocksToolbar
-            formData={tabData}
-            selectedBlock={activeTab}
-            selectedBlocks={multiSelected}
-            onChangeBlocks={(newBlockData) => {
-              onChangeBlock(block, {
-                ...data,
-                data: {
-                  ...tabsData,
-                  blocks: {
-                    ...tabsData.blocks,
-                    [activeTab]: {
-                      ...tabData,
-                      ...newBlockData,
-                    },
-                  },
-                },
-              });
-            }}
-            onSetSelectedBlocks={(blockIds) => {
-              setMultiSelected(blockIds);
-            }}
-            onSelectBlock={onSelectBlock}
-          />
-        ) : (
-          ''
-        )}
-        {!data?.readOnlySettings && !activeBlock ? (
-          <SidebarPortal selected={props.selected}>
-            <InlineForm
+            data={tabData}
+            styleData={tabData.styles || {}}
+            styled={true}
+          >
+            <TabsEdit
+              {...props}
               schema={schemaObject}
-              title={schemaObject.title}
-              onChangeField={(id, value) => {
+              activeBlock={activeBlock}
+              activeTab={activeTab}
+              activeTabIndex={activeTabIndex}
+              editingTab={editingTab}
+              empty={empty}
+              emptyTab={emptyTab}
+              metadata={props.metadata || props.properties}
+              multiSelected={multiSelected}
+              tabs={tabs}
+              tabData={tabData}
+              tabsData={tabsData}
+              tabsList={tabsList}
+              node={view}
+              template={template}
+              onChangeTabData={onChangeTabData}
+              onSelectBlock={onSelectBlock}
+              setActiveBlock={setActiveBlock}
+              setActiveTab={setActiveTab}
+              setEditingTab={setEditingTab}
+            />
+          </StyleWrapperView>
+
+          {props.selected ? (
+            <BlocksToolbar
+              formData={tabData}
+              selectedBlock={activeTab}
+              selectedBlocks={multiSelected}
+              onChangeBlocks={(newBlockData) => {
                 onChangeBlock(block, {
                   ...data,
-                  [id]: value,
+                  data: {
+                    ...tabsData,
+                    blocks: {
+                      ...tabsData.blocks,
+                      [activeTab]: {
+                        ...tabData,
+                        ...newBlockData,
+                      },
+                    },
+                  },
                 });
               }}
-              formData={data}
+              onSetSelectedBlocks={(blockIds) => {
+                setMultiSelected(blockIds);
+              }}
+              onSelectBlock={onSelectBlock}
             />
-          </SidebarPortal>
-        ) : (
-          ''
-        )}
-      </div>
-    </BlockStyleWrapperEdit>
+          ) : (
+            ''
+          )}
+          {!data?.readOnlySettings && !activeBlock ? (
+            <SidebarPortal selected={props.selected}>
+              <BlockDataForm
+                block={block}
+                schema={schemaObject}
+                title={schemaObject.title}
+                onChangeBlock={onChangeBlock}
+                onChangeField={(id, value) => {
+                  onChangeBlock(block, {
+                    ...data,
+                    [id]: value,
+                  });
+                }}
+                formData={data}
+              />
+            </SidebarPortal>
+          ) : (
+            ''
+          )}
+        </div>
+      </BlockStyleWrapperEdit>
+    </fieldset>
   );
 };
 

package/src/components/View.jsx

@@ -17,7 +17,7 @@ const View = (props) => {
   const view = React.useRef(null);
   const { data = {}, uiContainer = '', location, history } = props;
   const metadata = props.metadata || props.properties;
-  const template = data.template || 'default';
+  const template = data.variation || 'default';
   const tabsData = data.data || {};
   const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
@@ -27,9 +27,11 @@ const View = (props) => {
   const theme = data.theme || 'light';
   const verticalAlign = data.verticalAlign || 'flex-start';
 
-  const TabsView =
-    config.blocks.blocksConfig[TABS_BLOCK].templates?.[template]?.view ||
-    DefaultView;
+  const activeTemplate = config.blocks.blocksConfig[
+    TABS_BLOCK
+  ].variations.filter((v, _i) => v.id === template);
+
+  const TabsView = activeTemplate?.[0]?.view || DefaultView;
 
   const useQuery = () => {
     const { search } = location;

package/src/components/index.js

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

package/src/components/layoutSchema.js

@@ -11,7 +11,7 @@ const blocksArray = (config) => {
     .filter((val) => !!val);
 };
 
-export default (config) => ({
+const layoutSchema = (config) => ({
   title: 'Tabs block settings',
   fieldsets: [
     {
@@ -78,3 +78,5 @@ export default (config) => ({
   },
   required: [],
 });
+
+export default layoutSchema;

package/src/components/schema.js

@@ -1,111 +1,211 @@
-import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { cloneDeepSchema } from '@plone/volto/helpers/Utils/Utils';
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
-  TabsBlock: {
-    id: 'tabs-block',
-    defaultMessage: 'Tabs block',
+  AssetPosition: {
+    defaultMessage: 'Asset position',
+    id: 'assetPosition',
+  },
+  AssetSize: {
+    defaultMessage: 'Asset size',
+    id: 'assetSize',
+  },
+  AssetType: {
+    defaultMessage: 'Asset type',
+    id: 'assetType',
+  },
+  Bottom: {
+    defaultMessage: 'Bottom',
+    id: 'bottom',
   },
   Default: {
-    id: 'default',
     defaultMessage: 'Default',
+    id: 'default',
   },
-  Tabs: {
-    id: 'tabs',
-    defaultMessage: 'Tabs',
+  Image: {
+    defaultMessage: 'Image',
+    id: 'image',
   },
-  Title: {
-    id: 'title',
-    defaultMessage: 'Title',
+  Icon: {
+    defaultMessage: 'Icon',
+    id: 'icon',
   },
-  Template: {
-    id: 'template',
-    defaultMessage: 'Template',
+  IconName: {
+    defaultMessage: 'Icon name',
+    id: 'iconName',
   },
-  VerticalAlign: {
-    id: 'vertical-align',
-    defaultMessage: 'Vertical align',
+  LeftSide: {
+    id: 'left-side',
+    defaultMessage: 'Left side',
   },
-  Top: {
-    id: 'top',
-    defaultMessage: 'Top',
+  RightSide: {
+    id: 'right-side',
+    defaultMessage: 'Right side',
+  },
+  Medium: {
+    defaultMessage: 'Medium',
+    id: 'Medium',
   },
   Middle: {
-    id: 'middle',
     defaultMessage: 'Middle',
+    id: 'middle',
   },
-  Bottom: {
-    id: 'bottom',
-    defaultMessage: 'Bottom',
+  Small: {
+    id: 'small',
+    defaultMessage: 'Small',
   },
-  default: {
-    id: 'default',
-    defaultMessage: 'Default',
+  Tabs: {
+    defaultMessage: 'Tabs',
+    id: 'tabs',
+  },
+  TabsBlock: {
+    defaultMessage: 'Tabs block',
+    id: 'tabs-block',
+  },
+  TabTitle: {
+    defaultMessage: 'Tab title',
+    id: 'tabTitle',
+  },
+  Title: {
+    defaultMessage: 'Title',
+    id: 'title',
   },
-  accordionResponsive: {
-    id: 'accordionResponsive',
-    defaultMessage: 'Accordion responsive',
+  Top: {
+    defaultMessage: 'Top',
+    id: 'top',
   },
-  horizontalResponsive: {
-    id: 'horizontalResponsive',
-    defaultMessage: 'Horizontal responsive',
+  VerticalAlign: {
+    defaultMessage: 'Vertical align',
+    id: 'vertical-align',
   },
-  carouselHorizontal: {
-    id: 'carouselHorizontal',
-    defaultMessage: 'Carousel horizontal',
+  Tab: {
+    id: 'tab',
+    defaultMessage: 'Tab',
   },
-  carouselVerticalPrototype: {
-    id: 'carouselVerticalPrototype',
-    defaultMessage: 'Carousel vertical (prototype)',
+  HideTitle: {
+    id: 'hideTitle',
+    defaultMessage: 'Hide tab title?',
+  },
+  Large: {
+    id: 'large',
+    defaultMessage: 'Large',
+  },
+  Description: {
+    id: 'description',
+    defaultMessage: 'Description',
   },
 });
 
-export const schema = (config, templateSchema = {}, props) => {
-  const { intl } = props;
-  const templatesConfig = config.blocks.blocksConfig[TABS_BLOCK].templates;
-  const templates = Object.keys(templatesConfig).map((template) => {
-    let templateTitle = templatesConfig[template].title || template;
-    let templateId = templatesConfig[template].id;
-    if (templateId && messages[`${templateId}`]) {
-      templateTitle = intl.formatMessage(messages[`${templateId}`]);
-    }
-    return [template, templateTitle];
-  });
+const tabSchema = (props) => {
+  const intl = props.intl;
+  return {
+    title: intl.formatMessage(messages.Tab),
 
-  const defaultFieldset = templateSchema?.fieldsets?.filter(
-    (fieldset) => fieldset.id === 'default',
-  )[0];
+    fieldsets: [
+      {
+        id: 'default',
+        title: intl.formatMessage(messages.Default),
+        fields: ['title', 'assetType'],
+      },
+    ],
 
+    properties: {
+      title: {
+        title: intl.formatMessage(messages.TabTitle),
+      },
+      assetType: {
+        title: intl.formatMessage(messages.AssetType),
+        choices: [
+          ['image', intl.formatMessage(messages.Image)],
+          ['icon', intl.formatMessage(messages.Icon)],
+        ],
+      },
+      assetPosition: {
+        title: intl.formatMessage(messages.AssetPosition),
+        choices: [
+          ['top', intl.formatMessage(messages.Top)],
+          ['left', intl.formatMessage(messages.LeftSide)],
+          ['right', intl.formatMessage(messages.RightSide)],
+        ],
+        default: 'top',
+      },
+      image: {
+        title: intl.formatMessage(messages.Image),
+        widget: 'object_browser',
+        mode: 'image',
+        allowExternals: true,
+        selectedItemAttrs: ['image_field', 'image_scales'],
+      },
+      imageSize: {
+        title: intl.formatMessage(messages.AssetSize),
+        choices: [
+          ['icon', intl.formatMessage(messages.Small)],
+          ['tile', intl.formatMessage(messages.Medium)],
+          ['thumb', intl.formatMessage(messages.Large)],
+        ],
+        default: 'icon',
+      },
+      iconSize: {
+        title: intl.formatMessage(messages.AssetSize),
+        choices: [
+          ['small', intl.formatMessage(messages.Small)],
+          ['medium', intl.formatMessage(messages.Medium)],
+          ['large', intl.formatMessage(messages.Large)],
+        ],
+        default: 'small',
+      },
+      icon: {
+        title: intl.formatMessage(messages.IconName),
+      },
+      hideTitle: {
+        title: intl.formatMessage(messages.HideTitle),
+        type: 'boolean',
+      },
+    },
+
+    required: [],
+  };
+};
+
+const toggleIconField = (schema, child) => {
+  const cloned = cloneDeepSchema(schema);
+
+  cloned.fieldsets[0].fields = [
+    ...cloned.fieldsets[0].fields,
+    ...(child.assetType === 'icon'
+      ? ['icon', 'iconSize', 'assetPosition', 'hideTitle']
+      : []),
+    ...(child.assetType === 'image'
+      ? ['image', 'imageSize', 'assetPosition', 'hideTitle']
+      : []),
+  ];
+
+  return cloned;
+};
+
+export const blockSchema = (props) => {
+  const intl = props.intl;
   return {
-    title: templateSchema?.title || intl.formatMessage(messages.TabsBlock),
+    title: intl.formatMessage(messages.TabsBlock),
     fieldsets: [
       {
         id: 'default',
         title: intl.formatMessage(messages.Default),
-        fields: [
-          'data',
-          'title',
-          'template',
-          'verticalAlign',
-          ...(defaultFieldset?.fields || []),
-        ],
+        fields: ['title', 'description', 'verticalAlign', 'data'],
       },
-      ...(templateSchema?.fieldsets?.filter(
-        (fieldset) => fieldset.id !== 'default',
-      ) || []),
     ],
     properties: {
       data: {
         title: intl.formatMessage(messages.Tabs),
         type: 'tabs',
+        schema: tabSchema(props),
+        schemaExtender: toggleIconField,
       },
       title: {
         title: intl.formatMessage(messages.Title),
       },
-      template: {
-        title: intl.formatMessage(messages.Template),
-        choices: [...templates],
-        default: 'default',
+      description: {
+        title: intl.formatMessage(messages.Description),
       },
       verticalAlign: {
         title: intl.formatMessage(messages.VerticalAlign),
@@ -116,8 +216,7 @@ export const schema = (config, templateSchema = {}, props) => {
         ],
         default: 'flex-start',
       },
-      ...(templateSchema?.properties || {}),
     },
-    required: [...(templateSchema?.required || [])],
+    required: [],
   };
 };