Let theme addon to set default values for default template schema

eea · Apr 4, 2022 · 55f148d · 55f148d
1 parent bbffb96
commit 55f148d
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 80 deletions.
diff --git a/src/components/templates/default/Edit.jsx b/src/components/templates/default/Edit.jsx
@@ -3,8 +3,10 @@ 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 {
   SimpleMarkdown,
@@ -22,10 +24,12 @@ const MenuItem = (props) => {
     data = {},
     editingTab = null,
     selected = false,
-    tabs = {},
     tabData = {},
+    tabs = {},
     tabsData = {},
+    tabsDescription,
     tabsList = [],
+    tabsTitle,
     emptyTab = () => {},
     setActiveBlock = () => {},
     setActiveTab = () => {},
@@ -66,6 +70,12 @@ const MenuItem = (props) => {
 
   return (
     <>
+      {index === 0 && (tabsTitle || tabsDescription) && (
+        <Menu.Item className="menu-title">
+          <SimpleMarkdown md={tabsTitle} className="title" defaultTag="##" />
+          <SimpleMarkdown md={tabsDescription} className="description" />
+        </Menu.Item>
+      )}
       <Menu.Item
         name={defaultTitle}
         active={tab === activeTab}
@@ -158,34 +168,39 @@ const Edit = (props) => {
   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 panes = tabsList.map((tab, index) => {
     return {
       id: tab,
-      menuItem: () => {
-        return (
-          <React.Fragment key={`tab-${tab}`}>
-            {index === 0 && (tabsTitle || tabsDescription) ? (
-              <Menu.Item className="menu-title">
-                <SimpleMarkdown
-                  md={tabsTitle}
-                  className="title"
-                  defaultTag="##"
-                />
-                <SimpleMarkdown md={tabsDescription} className="description" />
-              </Menu.Item>
-            ) : (
-              ''
-            )}
-            <MenuItem
-              {...props}
-              editingTab={editingTab}
-              index={index}
-              setEditingTab={setEditingTab}
-              tab={tab}
-            />
-          </React.Fragment>
-        );
-      },
+      menuItem: (
+        <MenuItem
+          {...props}
+          editingTab={editingTab}
+          index={index}
+          setEditingTab={setEditingTab}
+          tab={tab}
+          tabsTitle={tabsTitle}
+          tabsDescription={tabsDescription}
+        />
+      ),
       render: () => {
         return (
           <Tab.Pane as={isContainer ? Container : undefined}>
@@ -258,17 +273,17 @@ const Edit = (props) => {
         className="default tabs"
         menu={{
           attached: menuPosition.attached,
-          borderless: data.menuBorderless,
-          color: data.menuColor,
-          compact: data.menuCompact ?? true,
-          fluid: data.menuFluid ?? true,
-          inverted: data.menuInverted,
-          pointing: data.menuPointing,
-          secondary: data.menuSecondary,
-          size: data.menuSize,
-          stackable: data.menuStackable,
-          tabular: data.menuTabular,
-          text: data.menuText ?? true,
+          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'),
           vertical: menuPosition.vertical,
           className: cx(data.menuAlign, { container: isContainer }),
         }}

diff --git a/src/components/templates/default/View.jsx b/src/components/templates/default/View.jsx
@@ -4,7 +4,9 @@ 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 { RenderBlocks } from '@plone/volto/components';
+import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 import {
   SimpleMarkdown,
@@ -14,26 +16,40 @@ import {
 import '@eeacms/volto-tabs-block/less/menu.less';
 
 const MenuItem = (props) => {
-  const { activeTab = null, tabs = {}, setActiveTab = () => {} } = props;
+  const {
+    activeTab = null,
+    tabs = {},
+    setActiveTab = () => {},
+    tabsTitle,
+    tabsDescription,
+  } = props;
   const { tab, index } = props;
   const title = tabs[tab].title;
   const tabIndex = index + 1;
 
   const defaultTitle = `Tab ${tabIndex}`;
 
   return (
-    <Menu.Item
-      name={defaultTitle}
-      active={tab === activeTab}
-      onClick={() => {
-        if (activeTab !== tab) {
-          setActiveTab(tab);
-        }
-      }}
-    >
-      <span className={'menu-item-count'}>{tabIndex}</span>
-      <p className={'menu-item-text'}>{title || defaultTitle}</p>
-    </Menu.Item>
+    <React.Fragment>
+      {index === 0 && (tabsTitle || tabsDescription) && (
+        <Menu.Item className="menu-title">
+          <SimpleMarkdown md={tabsTitle} defaultTag="##" className="title" />
+          <SimpleMarkdown md={tabsDescription} className="description" />
+        </Menu.Item>
+      )}
+      <Menu.Item
+        name={defaultTitle}
+        active={tab === activeTab}
+        onClick={() => {
+          if (activeTab !== tab) {
+            setActiveTab(tab);
+          }
+        }}
+      >
+        <span className={'menu-item-count'}>{tabIndex}</span>
+        <p className={'menu-item-text'}>{title || defaultTitle}</p>
+      </Menu.Item>
+    </React.Fragment>
   );
 };
 
@@ -53,6 +69,25 @@ const View = (props) => {
   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],
+  );
+
   React.useEffect(() => {
     const urlHash = props.location.hash.substring(1) || '';
     if (
@@ -83,25 +118,15 @@ const View = (props) => {
   const panes = tabsList.map((tab, index) => {
     return {
       id: tab,
-      menuItem: () => {
-        return (
-          <React.Fragment key={`tab-${tab}`}>
-            {index === 0 && (tabsTitle || tabsDescription) ? (
-              <Menu.Item className="menu-title">
-                <SimpleMarkdown
-                  md={tabsTitle}
-                  defaultTag="##"
-                  className="title"
-                />
-                <SimpleMarkdown md={tabsDescription} className="description" />
-              </Menu.Item>
-            ) : (
-              ''
-            )}
-            <MenuItem {...props} tab={tab} index={index} />
-          </React.Fragment>
-        );
-      },
+      menuItem: (
+        <MenuItem
+          {...props}
+          tab={tab}
+          index={index}
+          tabsTitle={tabsTitle}
+          tabsDescription={tabsDescription}
+        />
+      ),
       render: () => {
         return (
           <Tab.Pane as={isContainer ? Container : undefined}>
@@ -119,17 +144,17 @@ const View = (props) => {
         className="default tabs"
         menu={{
           attached: menuPosition.attached,
-          borderless: data.menuBorderless,
-          color: data.menuColor,
-          compact: data.menuCompact ?? true,
-          fluid: data.menuFluid ?? true,
-          inverted: data.menuInverted,
-          pointing: data.menuPointing,
-          secondary: data.menuSecondary,
-          size: data.menuSize,
-          stackable: data.menuStackable,
-          tabular: data.menuTabular,
-          text: data.menuText ?? true,
+          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'),
           vertical: menuPosition.vertical,
           className: cx(data.menuAlign, { container: isContainer }),
         }}