Add schemaComposer

eea · Nov 1, 2022 · 2b7b3c7 · 2b7b3c7
1 parent 4564772
commit 2b7b3c7
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 97 deletions.
diff --git a/src/blocks/Item/index.js b/src/blocks/Item/index.js
@@ -1,8 +1,12 @@
-import codeSVG from '@plone/volto/icons/code.svg';
+import { compose } from 'redux';
+import { addStyling } from '@plone/volto/helpers';
+
 import ItemEdit from './Edit';
 import ItemView from './View';
 import { setItemStyling } from './schema';
 
+import codeSVG from '@plone/volto/icons/code.svg';
+
 export default (config) => {
   config.blocks.blocksConfig.item = {
     id: 'item',
@@ -19,7 +23,7 @@ export default (config) => {
       addPermission: [],
       view: [],
     },
-    schemaEnhancer: setItemStyling,
+    schemaEnhancer: compose(addStyling, setItemStyling),
   };
 
   config.settings.blocksWithFootnotesSupport = {

diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js
@@ -1,4 +1,8 @@
 import { compose } from 'redux';
+import { addStyling } from '@plone/volto/helpers';
+import UniversalCard from '@eeacms/volto-listing-block/components/UniversalCard/UniversalCard';
+import { composeSchema } from '@eeacms/volto-listing-block/schema-utils';
+
 import Carousel from './layout-templates/Carousel';
 import Gallery from './layout-templates/Gallery';
 import Listing from './layout-templates/Listing';
@@ -19,8 +23,6 @@ import {
 import { DefaultItemLayout } from './item-templates/ItemTemplates';
 import { SearchItemLayout } from './item-templates/SearchItemTemplate';
 
-// import universalCardSchemaEnhancer from '@eeacms/volto-listing-block/components/UniversalCard/schema';
-
 const applyConfig = (config) => {
   // moment date locale. See https://momentjs.com/ - Multiple Locale Support
   config.settings.dateLocale = config.settings.dateLocale ?? 'en';
@@ -36,6 +38,13 @@ const applyConfig = (config) => {
   // The variation takes care of how the individual item is displayed.
   // With our own variations being based on the UniversalCard, we have another
   // level of control on how each item is displayed.
+  // console.log(
+  //   composeSchema(
+  //     addStyling,
+  //     setBasicStylingSchema,
+  //     UniversalCard.schemaEnhancer,
+  //   ),
+  // );
 
   listing.variations = [
     ...listing.variations.filter(({ id }) => blacklist.indexOf(id) === -1),
@@ -44,21 +53,35 @@ const applyConfig = (config) => {
       isDefault: false,
       title: 'Listing',
       template: Listing,
-      schemaEnhancer: compose(setBasicStylingSchema, Listing.schemaEnhancer),
+      schemaEnhancer: composeSchema(
+        addStyling,
+        setBasicStylingSchema,
+        UniversalCard.schemaEnhancer,
+      ),
     },
     {
       id: 'cardsCarousel',
       isDefault: false,
       title: 'Carousel',
       template: Carousel,
-      schemaEnhancer: compose(setBasicStylingSchema, Carousel.schemaEnhancer),
+      // schemaEnhancer: compose(
+      //   addStyling,
+      //   setBasicStylingSchema,
+      //   UniversalCard.schemaEnhancer,
+      //   Carousel.schemaEnhancer,
+      // ),
     },
     {
       id: 'cardsGallery', //  'customCardsGalleryVariationId'
       isDefault: false,
       title: 'Gallery',
       template: Gallery,
-      schemaEnhancer: compose(setBasicStylingSchema, Gallery.schemaEnhancer),
+      // schemaEnhancer: compose(
+      //   addStyling,
+      //   setBasicStylingSchema,
+      //   UniversalCard.schemaEnhancer,
+      //   Gallery.schemaEnhancer,
+      // ),
     },
   ];
 
@@ -70,32 +93,32 @@ const applyConfig = (config) => {
         isDefault: true,
         title: 'Card (default)',
         template: DefaultCardLayout,
-        schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
+        schemaEnhancer: composeSchema(setCardModelSchema, setCardStylingSchema),
       },
       {
         id: 'imageCard',
         title: 'Image Card',
         template: ImageCardLayout,
-        schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
+        schemaEnhancer: composeSchema(setCardModelSchema, setCardStylingSchema),
       },
       {
         id: 'imageOnLeft',
         title: 'Image on left',
         template: LeftImageCardLayout,
-        schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
+        schemaEnhancer: composeSchema(setCardModelSchema, setCardStylingSchema),
       },
       {
         id: 'imageOnRight',
         title: 'Image on right',
         template: RightImageCardLayout,
-        schemaEnhancer: compose(setCardModelSchema, setCardStylingSchema),
+        schemaEnhancer: composeSchema(setCardModelSchema, setCardStylingSchema),
       },
       {
         id: 'item',
         isDefault: true,
         title: 'Listing Item',
         template: DefaultItemLayout,
-        schemaEnhancer: compose(
+        schemaEnhancer: composeSchema(
           setItemModelSchema,
           setCardStylingSchema,
           DefaultItemLayout.schemaEnhancer,
@@ -106,7 +129,7 @@ const applyConfig = (config) => {
         isDefault: false,
         title: 'Search Item',
         template: SearchItemLayout,
-        schemaEnhancer: compose(
+        schemaEnhancer: composeSchema(
           setCardStylingSchema,
           SearchItemLayout.schemaEnhancer,
         ),

diff --git a/src/blocks/Listing/layout-templates/Carousel.jsx b/src/blocks/Listing/layout-templates/Carousel.jsx
@@ -115,7 +115,8 @@ const CardsCarousel = ({ block, items, ...rest }) => {
   );
 };
 
-CardsCarousel.schemaEnhancer = ({ schema }) => {
+CardsCarousel.schemaEnhancer = (args) => {
+  const { schema } = args;
   // const schema = UniversalCard.schemaEnhancer(args);
 
   schema.fieldsets.splice(1, 0, {

diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
@@ -8,7 +8,9 @@ const ALIGN_INFO_MAP = {
   align_center: [alignCenterSVG, 'Center'],
 };
 
-export const setBasicStylingSchema = ({ schema, intl }) => {
+export const setBasicStylingSchema = (args) => {
+  const { schema, intl } = args;
+  console.log('setBasicStylingSchema', args);
   schema.properties.styles.schema = {
     fieldsets: [
       {
@@ -52,10 +54,10 @@ const CallToActionSchema = ({ formData }) => {
         id: 'default',
         fields: [
           'enable',
-          ...(formData.itemModel?.callToAction?.enable
+          ...(formData?.itemModel?.callToAction?.enable
             ? [
                 'label',
-                formData['@type'] === 'listing' ? 'urlTemplate' : 'href',
+                formData?.['@type'] === 'listing' ? 'urlTemplate' : 'href',
               ]
             : []),
         ], //
@@ -89,7 +91,9 @@ const CallToActionSchema = ({ formData }) => {
   };
 };
 
-export const setCardModelSchema = ({ formData, schema }) => {
+export const setCardModelSchema = (args) => {
+  const { formData, schema } = args;
+  console.log('setCardModelSchema', args);
   const CardSchema = {
     fieldsets: [
       {
@@ -148,7 +152,9 @@ export const setCardModelSchema = ({ formData, schema }) => {
   return schema;
 };
 
-export const setItemModelSchema = ({ formData, schema }) => {
+export const setItemModelSchema = (args) => {
+  const { formData, schema } = args;
+  console.log('setItemModelSchema', args);
   const ItemSchema = {
     fieldsets: [
       {

diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js
@@ -1,4 +1,5 @@
 import { compose } from 'redux';
+import { addStyling } from '@plone/volto/helpers';
 
 import TeaserCardTemplate from './Card';
 import { adjustTeaserSchema } from './schema';
@@ -13,9 +14,10 @@ export default (config) => {
         title: 'Card (top image)',
         template: TeaserCardTemplate,
         schemaEnhancer: compose(
+          addStyling,
           adjustTeaserSchema,
-          setCardModelSchema,
           setCardStylingSchema,
+          setCardModelSchema,
         ),
       },
       // ...(config.blocks.blocksConfig.teaser.variations || []),

diff --git a/src/components/UniversalCard/schema.js b/src/components/UniversalCard/schema.js
@@ -12,6 +12,7 @@ const messages = defineMessages({
 });
 
 export default function universalCardSchemaEnhancer(args) {
+  console.log('universalCardSchemaEnhancer', args);
   const props = { ...args };
   const { schema } = props;
 

diff --git a/src/components/UniversalItem/UniversalItem.jsx b/src/components/UniversalItem/UniversalItem.jsx
diff --git a/src/components/UniversalItem/schema.js b/src/components/UniversalItem/schema.js
diff --git a/src/schema-utils.js b/src/schema-utils.js
@@ -69,3 +69,15 @@ export const getVoltoStyles = (props) => {
   }
   return output;
 };
+
+export function composeSchema() {
+  const enhancers = Array.from(arguments);
+  const composer = (args) => {
+    const props = enhancers.reduce(
+      (acc, enhancer) => (enhancer ? { ...acc, schema: enhancer(acc) } : acc),
+      { ...args },
+    );
+    return props.schema;
+  };
+  return composer;
+}