Add styling schema demo

eea · Sep 24, 2022 · 9d95279 · 9d95279
1 parent aeed63d
commit 9d95279
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 59 deletions.
diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js
@@ -11,7 +11,7 @@ import {
 import { DefaultItemLayout } from './ItemTemplates';
 import { SearchItemLayout } from './SearchItemTemplate';
 
-import { ListingStylingSchema } from './schema';
+import { ListingStylingSchemaEnhancer } from './schema';
 
 const applyConfig = (config) => {
   // moment date locale. See https://momentjs.com/ - Multiple Locale Support
@@ -84,6 +84,7 @@ const applyConfig = (config) => {
         isDefault: false,
         title: 'Search Item',
         view: SearchItemLayout,
+        stylesSchema: ListingStylingSchemaEnhancer,
       },
     ],
     cardTemplates: [
@@ -112,10 +113,8 @@ const applyConfig = (config) => {
   };
 
   // Theming
-  if (!listing.enableStyling) {
-    listing.enableStyling = true;
-    listing.stylesSchema = ListingStylingSchema;
-  }
+  // This bug needs to be fixed first: https://github.com/plone/volto/issues/3675
+  // listing.enableStyling = true;
 
   return config;
 };

diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
@@ -11,6 +11,11 @@ const ALIGN_VALUE_MAP = [
 ];
 
 const messages = defineMessages({
+  styling: {
+    id: 'Styling',
+    defaultMessage: 'Styling',
+  },
+
   Type: {
     id: 'Listing',
     defaultMessage: 'Listing',
@@ -57,42 +62,60 @@ const messages = defineMessages({
   },
 });
 
-export const ListingStylingSchema = ({ intl }) => ({
-  title: intl.formatMessage(messages.Type),
-  block: 'listing',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: ['theme', 'text_align', 'rounded', 'inverted'],
-    },
-  ],
-  properties: {
-    theme: {
-      title: intl.formatMessage(messages.Theme),
-      description: intl.formatMessage(messages.ThemeHelp),
-      choices: [
-        ['', intl.formatMessage(messages.ThemeDefault)],
-        ['primary', intl.formatMessage(messages.ThemePrimary)],
-        ['secondary', intl.formatMessage(messages.ThemeSecondary)],
-        ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
-      ],
-    },
-    text_align: {
-      title: 'Text align',
-      widget: 'style_text_align',
-      actions: ALIGN_VALUE_MAP,
-    },
-    inverted: {
-      title: intl.formatMessage(messages.Inverted),
-      description: intl.formatMessage(messages.InvertedHelp),
-      type: 'boolean',
-    },
-    rounded: {
-      title: intl.formatMessage(messages.Rounded),
-      description: intl.formatMessage(messages.RoundedHelp),
-      type: 'boolean',
+export const ListingStylingSchemaEnhancer = ({ schema, intl }) => {
+  // console.log('schema', schema);
+
+  schema.fieldsets.push({
+    id: 'styling',
+    title: intl.formatMessage(messages.styling),
+    fields: ['styles'],
+  });
+
+  const stylesSchema = {
+    title: intl.formatMessage(messages.Type),
+    block: 'listing',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['theme', 'text_align', 'rounded', 'inverted'],
+      },
+    ],
+    properties: {
+      theme: {
+        title: intl.formatMessage(messages.Theme),
+        description: intl.formatMessage(messages.ThemeHelp),
+        choices: [
+          ['', intl.formatMessage(messages.ThemeDefault)],
+          ['primary', intl.formatMessage(messages.ThemePrimary)],
+          ['secondary', intl.formatMessage(messages.ThemeSecondary)],
+          ['tertiary', intl.formatMessage(messages.ThemeTertiary)],
+        ],
+      },
+      text_align: {
+        title: 'Text align',
+        widget: 'style_text_align',
+        actions: ALIGN_VALUE_MAP,
+      },
+      inverted: {
+        title: intl.formatMessage(messages.Inverted),
+        description: intl.formatMessage(messages.InvertedHelp),
+        type: 'boolean',
+      },
+      rounded: {
+        title: intl.formatMessage(messages.Rounded),
+        description: intl.formatMessage(messages.RoundedHelp),
+        type: 'boolean',
+      },
     },
-  },
-  required: [],
-});
+    required: [],
+  };
+
+  schema.properties.styles = {
+    widget: 'object',
+    title: intl.formatMessage(messages.styling),
+    schema: stylesSchema,
+  };
+
+  return schema;
+};
diff --git a/src/blocks/Teaser/index.js b/src/blocks/Teaser/index.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import TeaserCardTemplate from './Card';
-import { ListingStylingSchema } from '../Listing/schema';
+import { ListingStylingSchemaEnhancer } from '../Listing/schema';
 import { adjustTeaserSchema } from './schema';
 import { UniversalCard } from '@eeacms/volto-listing-block';
 
@@ -21,7 +21,7 @@ export default (config) => {
       },
     ];
     config.blocks.blocksConfig.teaser.enableStyling = true;
-    config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchema;
+    config.blocks.blocksConfig.teaser.stylesSchema = ListingStylingSchemaEnhancer;
   }
 
   // Teaser Grid

diff --git a/src/components/UniversalItem/UniversalItem.jsx b/src/components/UniversalItem/UniversalItem.jsx
@@ -2,7 +2,7 @@ import config from '@plone/volto/registry';
 import { resolveExtension } from '@plone/volto/helpers/Extensions/withBlockExtensions';
 import { Item } from './model';
 
-import schemaEnhancer from './schema';
+import universalItemSchemaEnhancer from './schema';
 
 const UniversalItem = (props) => {
   const { itemModel = {}, item, ...rest } = props;
@@ -16,6 +16,6 @@ const UniversalItem = (props) => {
   return <ItemTemplate item={new Item(item)} itemModel={itemModel} {...rest} />;
 };
 
-UniversalItem.schemaEnhancer = schemaEnhancer;
+UniversalItem.schemaEnhancer = universalItemSchemaEnhancer;
 
 export default UniversalItem;
diff --git a/src/components/UniversalItem/schema.js b/src/components/UniversalItem/schema.js
@@ -1,4 +1,7 @@
-import { enhanceSchema } from '@eeacms/volto-listing-block/schema-utils';
+import {
+  enhanceSchema,
+  addStylingSchema,
+} from '@eeacms/volto-listing-block/schema-utils';
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
@@ -74,8 +77,11 @@ const ItemSchema = ({ formData }) => {
 
 export default function universalItemSchemaEnhancer(props) {
   const { schema } = props;
-  const enhancer = enhanceSchema({ extensionName: 'itemTemplates', messages });
-  return {
+  const enhanceItemModel = enhanceSchema({
+    extensionName: 'itemTemplates',
+    messages,
+  });
+  const baseSchema = {
     ...schema,
     fieldsets: [
       ...schema.fieldsets,
@@ -90,11 +96,21 @@ export default function universalItemSchemaEnhancer(props) {
       itemModel: {
         title: 'Item model',
         widget: 'object',
-        schema: enhancer({
+        schema: enhanceItemModel({
           ...props,
           schema: ItemSchema(props),
         }),
       },
     },
   };
+
+  console.log('1schema', baseSchema);
+
+  const styledSchema = addStylingSchema({
+    ...props,
+    schema: baseSchema,
+    formData: props.formData?.itemModel || {},
+  });
+
+  return styledSchema;
 }
diff --git a/src/schema-utils.js b/src/schema-utils.js
@@ -15,14 +15,16 @@ const addTypeSelect = ({ intl, schema, extensionName, messages }) => {
   return schema;
 };
 
-export const enhanceSchema = ({ extensionName, messages }) => ({
-  schema: originalSchema,
-  formData,
-  intl,
-}) => {
-  // const extensionName = 'itemTemplates';
-  const extensionType = '@type'; // property name in stored block data
-  const extensions = config.blocks.blocksConfig.listing.extensions;
+export const enhanceSchema = ({
+  extensionName,
+  messages,
+  blockType = 'listing',
+}) => ({ schema: originalSchema, formData, intl }) => {
+  const extensionType = '@type'; // the attribute name that's stored in the block data
+  // it identifies the type of extension that's
+  // applied. Similar in scope, for example, with the block @type
+  const blockConfig = config.blocks.blocksConfig[blockType];
+  const extensions = blockConfig.extensions;
   const variations = extensions[extensionName];
 
   const activeItemName = formData?.[extensionType];
@@ -38,6 +40,45 @@ export const enhanceSchema = ({ extensionName, messages }) => ({
   return addTypeSelect({ schema, intl, extensionName, messages });
 };
 
+export const addStylingSchema = ({
+  formData,
+  schema,
+  blockType = 'listing',
+  extensionName = 'itemTemplates',
+  intl,
+}) => {
+  const extensionType = '@type'; // the attribute name that's stored in the block data
+  const activeItemName = formData?.[extensionType];
+  const blockConfig = config.blocks.blocksConfig[blockType];
+  const activeVariation =
+    formData['variation'] ||
+    blockConfig.variations?.find(({ isDefault }) => isDefault) ||
+    {};
+  const extensions = blockConfig.extensions;
+  const variations = extensions[extensionName];
+  let activeItem = variations?.find((item) => item.id === activeItemName);
+
+  const variationStyleSchema = activeVariation.stylesSchema;
+  schema = variationStyleSchema
+    ? variationStyleSchema({ schema: cloneDeep(schema), formData, intl })
+    : schema;
+
+  const stylingSchema = activeItem?.['stylesSchema'];
+  schema = stylingSchema
+    ? stylingSchema({ schema: cloneDeep(schema), formData, intl })
+    : schema;
+
+  console.log('activeItem', {
+    activeItem,
+    activeVariation,
+    variationStyleSchema,
+    stylingSchema,
+    schema,
+  });
+
+  return schema;
+};
+
 export const getVoltoStyles = (props) => {
   const styles = props ? props : {};
   const output = {};