@eeacms/volto-tabs-block 6.0.3 → 7.0.0

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

@@ -179,125 +179,117 @@ const messages = defineMessages({
   },
 });
 
-export default (config, props) => ({
-  title: props.intl.formatMessage(messages.DefaultTabsBlock),
-  fieldsets: [
-    {
-      id: 'default',
-      title: props.intl.formatMessage(messages.Default),
-      fields: ['description'],
-    },
-    {
-      id: 'menu',
-      title: props.intl.formatMessage(messages.Menu),
-      fields: [
-        'menuAlign',
-        'menuPosition',
-        'menuSize',
-        'menuColor',
-        'menuBorderless',
-        'menuCompact',
-        'menuFluid',
-        'menuInverted',
-        'menuPointing',
-        'menuSecondary',
-        'menuStackable',
-        'menuTabular',
-        'menuText',
-      ],
-    },
-  ],
-  properties: {
+export const defaultSchemaEnhancer = ({ schema, intl }) => {
+  schema.fieldsets.splice(1, 0, {
+    id: 'menu',
+    title: intl.formatMessage(messages.Menu),
+    fields: [
+      'menuAlign',
+      'menuPosition',
+      'menuSize',
+      'menuColor',
+      'menuBorderless',
+      'menuCompact',
+      'menuFluid',
+      'menuInverted',
+      'menuPointing',
+      'menuSecondary',
+      'menuStackable',
+      'menuTabular',
+      'menuText',
+    ],
+  });
+  schema.properties = {
+    ...schema.properties,
     description: {
-      title: props.intl.formatMessage(messages.Description),
+      title: intl.formatMessage(messages.Description),
     },
     menuPosition: {
-      title: props.intl.formatMessage(messages.Position),
+      title: intl.formatMessage(messages.Position),
       choices: [
-        ['top', props.intl.formatMessage(messages.Top)],
-        ['bottom', props.intl.formatMessage(messages.Bottom)],
-        ['left side', props.intl.formatMessage(messages.LeftSide)],
-        ['right side', props.intl.formatMessage(messages.RightSide)],
+        ['top', intl.formatMessage(messages.Top)],
+        ['bottom', intl.formatMessage(messages.Bottom)],
+        ['left side', intl.formatMessage(messages.LeftSide)],
+        ['right side', intl.formatMessage(messages.RightSide)],
       ],
     },
     menuAlign: {
-      title: props.intl.formatMessage(messages.Alignment),
+      title: intl.formatMessage(messages.Alignment),
       choices: [
-        ['left', props.intl.formatMessage(messages.Left)],
-        ['center', props.intl.formatMessage(messages.Center)],
-        ['right', props.intl.formatMessage(messages.Right)],
-        ['space-between', props.intl.formatMessage(messages.SpaceBetween)],
+        ['left', intl.formatMessage(messages.Left)],
+        ['center', intl.formatMessage(messages.Center)],
+        ['right', intl.formatMessage(messages.Right)],
+        ['space-between', intl.formatMessage(messages.SpaceBetween)],
       ],
     },
     menuSize: {
-      title: props.intl.formatMessage(messages.Size),
+      title: intl.formatMessage(messages.Size),
       choices: [
-        ['mini', props.intl.formatMessage(messages.Mini)],
-        ['tiny', props.intl.formatMessage(messages.Tiny)],
-        ['small', props.intl.formatMessage(messages.Small)],
-        ['large', props.intl.formatMessage(messages.Large)],
-        ['huge', props.intl.formatMessage(messages.Huge)],
-        ['massive', props.intl.formatMessage(messages.Massive)],
+        ['mini', intl.formatMessage(messages.Mini)],
+        ['tiny', intl.formatMessage(messages.Tiny)],
+        ['small', intl.formatMessage(messages.Small)],
+        ['large', intl.formatMessage(messages.Large)],
+        ['huge', intl.formatMessage(messages.Huge)],
+        ['massive', intl.formatMessage(messages.Massive)],
       ],
     },
     menuColor: {
-      title: props.intl.formatMessage(messages.Color),
-      defaultValue: 'green',
+      title: intl.formatMessage(messages.Color),
       choices: [
-        ['red', props.intl.formatMessage(messages.Red)],
-        ['orange', props.intl.formatMessage(messages.Orange)],
-        ['yellow', props.intl.formatMessage(messages.Yellow)],
-        ['olive', props.intl.formatMessage(messages.Olive)],
-        ['green', props.intl.formatMessage(messages.Green)],
-        ['teal', props.intl.formatMessage(messages.Teal)],
-        ['blue', props.intl.formatMessage(messages.Blue)],
-        ['violet', props.intl.formatMessage(messages.Violet)],
-        ['purple', props.intl.formatMessage(messages.Purple)],
-        ['pink', props.intl.formatMessage(messages.Pink)],
-        ['brown', props.intl.formatMessage(messages.Brown)],
-        ['grey', props.intl.formatMessage(messages.Grey)],
-        ['black', props.intl.formatMessage(messages.Black)],
+        ['red', intl.formatMessage(messages.Red)],
+        ['orange', intl.formatMessage(messages.Orange)],
+        ['yellow', intl.formatMessage(messages.Yellow)],
+        ['olive', intl.formatMessage(messages.Olive)],
+        ['green', intl.formatMessage(messages.Green)],
+        ['teal', intl.formatMessage(messages.Teal)],
+        ['blue', intl.formatMessage(messages.Blue)],
+        ['violet', intl.formatMessage(messages.Violet)],
+        ['purple', intl.formatMessage(messages.Purple)],
+        ['pink', intl.formatMessage(messages.Pink)],
+        ['brown', intl.formatMessage(messages.Brown)],
+        ['grey', intl.formatMessage(messages.Grey)],
+        ['black', intl.formatMessage(messages.Black)],
       ],
     },
     menuBorderless: {
-      title: props.intl.formatMessage(messages.MenuBorderless),
+      title: intl.formatMessage(messages.MenuBorderless),
       type: 'boolean',
     },
     menuCompact: {
-      title: props.intl.formatMessage(messages.MenuCompact),
+      title: intl.formatMessage(messages.MenuCompact),
       type: 'boolean',
-      defaultValue: true,
     },
     menuFluid: {
-      title: props.intl.formatMessage(messages.MenuFluid),
+      title: intl.formatMessage(messages.MenuFluid),
       type: 'boolean',
-      defaultValue: true,
+      default: true,
     },
     menuInverted: {
-      title: props.intl.formatMessage(messages.MenuInverted),
+      title: intl.formatMessage(messages.MenuInverted),
       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,
     },
     menuStackable: {
-      title: props.intl.formatMessage(messages.MenuStackable),
+      title: intl.formatMessage(messages.MenuStackable),
       type: 'boolean',
     },
     menuTabular: {
-      title: props.intl.formatMessage(messages.MenuTabular),
+      title: intl.formatMessage(messages.MenuTabular),
       type: 'boolean',
     },
     menuText: {
-      title: props.intl.formatMessage(messages.MenuText),
+      title: intl.formatMessage(messages.MenuText),
       type: 'boolean',
-      defaultValue: true,
     },
-  },
-  required: [],
-});
+  };
+  return schema;
+};

package/src/components/templates/horizontal-responsive/Edit.jsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import { useIntl } from 'react-intl';
 import { withRouter } from 'react-router';
 import { v4 as uuid } from 'uuid';
 import { isEmpty } from 'lodash';
 import cx from 'classnames';
 import { Menu, Tab, Container, Dropdown, Input } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 import { BlocksForm } from '@plone/volto/components';
 import EditBlockWrapper from '@eeacms/volto-tabs-block/components/EditBlockWrapper';
-import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
+import { defaultSchemaEnhancer } from '@eeacms/volto-tabs-block/components/templates/default/schema';
 import {
   SimpleMarkdown,
   getMenuPosition,
@@ -23,7 +23,9 @@ import '@eeacms/volto-tabs-block/less/menu.less';
 import noop from 'lodash/noop';
 const MenuItem = (props) => {
   const inputRef = React.useRef(null);
+  const intl = useIntl();
   const {
+    schema,
     activeTab = null,
     activeBlock = null,
     block = null,
@@ -36,7 +38,7 @@ const MenuItem = (props) => {
     tabsDescription,
     tabsList = [],
     tabsTitle,
-    emptyTab = noop,
+    emptyTab = () => {},
     setActiveBlock = noop,
     setActiveTab = noop,
     setEditingTab = noop,
@@ -57,7 +59,10 @@ const MenuItem = (props) => {
         blocks: {
           ...tabsData.blocks,
           [tabId]: {
-            ...emptyTab(),
+            ...emptyTab({
+              schema: schema.properties.data.schema,
+              intl,
+            }),
           },
         },
         blocks_layout: {
@@ -157,6 +162,7 @@ const MenuItem = (props) => {
 };
 
 const MenuWrapper = (props) => {
+  const intl = useIntl();
   const {
     data = {},
     panes = [],
@@ -166,11 +172,12 @@ const MenuWrapper = (props) => {
     tabs = {},
     tabsList = [],
     block = null,
-    emptyTab = noop,
+    emptyTab = () => {},
     setEditingTab = noop,
     tabsData = {},
     onChangeBlock = noop,
     setActiveTab = noop,
+    schema,
   } = props;
   const [open, setOpen] = React.useState(false);
   const addNewTab = () => {
@@ -183,7 +190,10 @@ const MenuWrapper = (props) => {
         blocks: {
           ...tabsData.blocks,
           [tabId]: {
-            ...emptyTab(),
+            ...emptyTab({
+              schema: schema.properties.data.schema,
+              intl,
+            }),
           },
         },
         blocks_layout: {
@@ -193,7 +203,7 @@ const MenuWrapper = (props) => {
     });
   };
   React.useEffect(() => {
-    if (false || !node?.current) return;
+    if (!node?.current) return;
     const items = node.current.querySelectorAll(
       '.ui.menu > .menu-wrapper > .item:not(.menu-title)',
     );
@@ -271,6 +281,7 @@ const MenuWrapper = (props) => {
 };
 
 const Edit = (props) => {
+  const intl = useIntl();
   const {
     metadata = {},
     data = {},
@@ -285,34 +296,33 @@ const Edit = (props) => {
     multiSelected = [],
     screen,
     tabsData = {},
-    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 {
@@ -326,8 +336,9 @@ const Edit = (props) => {
           blockId={props.id}
           index={index}
           lastIndex={tabsList.length - 1}
-          tabsTitle={tabsTitle}
-          tabsDescription={tabsDescription}
+          tabsTitle={title}
+          tabsDescription={description}
+          schema={schema}
         />
       ),
       pane: (
@@ -335,7 +346,7 @@ const Edit = (props) => {
           <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
             <BlocksForm
               allowedBlocks={data?.allowedBlocks}
-              description={data?.instrunctions?.data}
+              description={data?.instructions?.data}
               manage={manage}
               metadata={metadata}
               pathname={props.pathname}
@@ -358,7 +369,10 @@ const Edit = (props) => {
                       [activeTab]: {
                         ...(newFormData.blocks_layout.items.length > 0
                           ? newFormData
-                          : emptyTab()),
+                          : emptyTab({
+                              schema: schema.properties.data.schema,
+                              intl,
+                            })),
                       },
                     },
                   },
@@ -402,19 +416,19 @@ const Edit = (props) => {
         renderActiveOnly={false}
         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(data.menuAlign, { container: isContainer }),
+          className: cx(menuAlign, { container: isContainer }),
           children: (
             <MenuWrapper
               {...props}
@@ -424,8 +438,9 @@ const Edit = (props) => {
               tabsList={tabsList}
               blockId={props.id}
               lastIndex={tabsList.length - 1}
-              tabsTitle={tabsTitle}
-              tabsDescription={tabsDescription}
+              tabsTitle={title}
+              tabsDescription={description}
+              schema={schema}
             />
           ),
         }}
@@ -437,6 +452,8 @@ const Edit = (props) => {
   );
 };
 
+Edit.schemaEnhancer = defaultSchemaEnhancer;
+
 export default compose(
   connect((state) => {
     return {

package/src/components/templates/horizontal-responsive/View.jsx

@@ -4,9 +4,7 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import cx from 'classnames';
 import { Menu, Tab, Container, Dropdown, Button } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
 import { RenderBlocks } from '@plone/volto/components';
-import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import {
   SimpleMarkdown,
   getMenuPosition,
@@ -110,7 +108,7 @@ const MenuWrapper = (props) => {
   const [open, setOpen] = React.useState(false);
 
   React.useEffect(() => {
-    if (false || !node?.current) return;
+    if (!node?.current) return;
     const items = node.current.querySelectorAll(
       '.ui.menu > .menu-wrapper > .item:not(.menu-title)',
     );
@@ -191,27 +189,25 @@ const View = (props) => {
     screen,
   } = 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 {
@@ -225,8 +221,8 @@ const View = (props) => {
           blockId={props.id}
           index={index}
           lastIndex={tabsList.length - 1}
-          tabsTitle={tabsTitle}
-          tabsDescription={tabsDescription}
+          tabsTitle={title}
+          tabsDescription={description}
         />
       ),
       pane: (
@@ -256,19 +252,19 @@ const View = (props) => {
         renderActiveOnly={false}
         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(data.menuAlign, { container: isContainer }),
+          className: cx(menuAlign, { container: isContainer }),
           children: (
             <MenuWrapper
               {...props}

package/src/components/templates/horizontal-responsive/index.js

@@ -1,8 +1,3 @@
 import HorizontalResponsiveView from './View';
-import horizontalResponsiveSchema from './schema';
 import HorizontalResponsiveEdit from './Edit';
-export {
-  HorizontalResponsiveEdit,
-  HorizontalResponsiveView,
-  horizontalResponsiveSchema,
-};
+export { HorizontalResponsiveEdit, HorizontalResponsiveView };

package/src/components/templates/horizontal-responsive/schema.js

@@ -179,7 +179,7 @@ const messages = defineMessages({
   },
 });
 
-export default (config, props) => ({
+const horizontalSchema = (config, props) => ({
   title: props.intl.formatMessage(messages.HorizontalTabsBlock),
   fieldsets: [
     {
@@ -242,7 +242,6 @@ export default (config, props) => ({
     },
     menuColor: {
       title: props.intl.formatMessage(messages.Color),
-      defaultValue: 'green',
       choices: [
         ['red', props.intl.formatMessage(messages.Red)],
         ['orange', props.intl.formatMessage(messages.Orange)],
@@ -266,12 +265,11 @@ export default (config, props) => ({
     menuCompact: {
       title: props.intl.formatMessage(messages.MenuCompact),
       type: 'boolean',
-      defaultValue: true,
     },
     menuFluid: {
       title: props.intl.formatMessage(messages.MenuFluid),
       type: 'boolean',
-      defaultValue: true,
+      default: true,
     },
     menuInverted: {
       title: props.intl.formatMessage(messages.MenuInverted),
@@ -280,10 +278,12 @@ export default (config, props) => ({
     menuPointing: {
       title: props.intl.formatMessage(messages.MenuPointing),
       type: 'boolean',
+      default: true,
     },
     menuSecondary: {
       title: props.intl.formatMessage(messages.MenuSecondary),
       type: 'boolean',
+      default: true,
     },
     menuStackable: {
       title: props.intl.formatMessage(messages.MenuStackable),
@@ -296,8 +296,9 @@ export default (config, props) => ({
     menuText: {
       title: props.intl.formatMessage(messages.MenuText),
       type: 'boolean',
-      defaultValue: true,
     },
   },
   required: [],
 });
+
+export default horizontalSchema;

package/src/helpers.js

@@ -1,16 +1,17 @@
 import { v4 as uuid } from 'uuid';
-import { emptyBlocksForm } from '@plone/volto/helpers';
+import { emptyBlocksForm, applySchemaDefaults } from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
 
-export const empty = () => {
+export const empty = ({ schema, intl }) => {
   const tabId = uuid();
+  const data = {
+    '@type': 'tab',
+    ...emptyBlocksForm(),
+  };
 
   return {
     blocks: {
-      [tabId]: {
-        '@type': 'tab',
-        ...emptyBlocksForm(),
-      },
+      [tabId]: applySchemaDefaults({ data, schema, intl }),
     },
     blocks_layout: {
       items: [tabId],
@@ -18,10 +19,13 @@ export const empty = () => {
   };
 };
 
-export const emptyTab = () => ({
-  '@type': 'tab',
-  ...emptyBlocksForm(),
-});
+export const emptyTab = ({ schema, intl }) => {
+  const data = {
+    '@type': 'tab',
+    ...emptyBlocksForm(),
+  };
+  return applySchemaDefaults({ data, schema, intl });
+};
 
 export const scrollToTarget = (target, offsetHeight = 0) => {
   const bodyRect = document.body.getBoundingClientRect().top;