WIP

eea · Sep 26, 2022 · b4f3880 · b4f3880
1 parent d46f7ba
commit b4f3880
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 77 deletions.
diff --git a/src/blocks/Listing/SearchItemTemplate.jsx b/src/blocks/Listing/SearchItemTemplate.jsx
@@ -1,4 +1,5 @@
 import cx from 'classnames';
+import messages from '@eeacms/volto-listing-block/messages';
 import PreviewImage from '@eeacms/volto-listing-block/PreviewImage';
 
 const BodyText = ({ item, hasDescription }) => {
@@ -59,3 +60,16 @@ const BasicItem = (props) => {
 export const SearchItemLayout = (props) => {
   return <BasicItem {...props} />;
 };
+SearchItemLayout.styleSchemaEnhancer = ({ schema, intl }) => {
+  const styleSchema = schema.properties.styles.schema;
+  styleSchema.fieldsets[0].fields.push('rounded');
+  styleSchema.properties = {
+    ...styleSchema.properties,
+    rounded: {
+      title: intl.formatMessage(messages.Rounded),
+      description: intl.formatMessage(messages.RoundedHelp),
+      type: 'boolean',
+    },
+  };
+  return schema;
+};
diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js
@@ -26,7 +26,7 @@ const applyConfig = (config) => {
 
   const { schemaEnhancer } = listing;
 
-  // listing.stylesSchema = BasicListingBlockStylesSchema;
+  listing.stylesSchema = BasicListingBlockStylesSchema;
 
   listing.schemaEnhancer = (props) => {
     // NOTE: this is a schema finalizer
@@ -93,7 +93,7 @@ const applyConfig = (config) => {
         isDefault: false,
         title: 'Search Item',
         view: SearchItemLayout,
-        // stylesSchema: ListingStylingSchemaEnhancer,
+        stylesSchema: SearchItemLayout.styleSchemaEnhancer,
       },
     ],
     cardTemplates: [

diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js
@@ -1,4 +1,5 @@
-import { defineMessages } from 'react-intl';
+import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema';
+import messages from '@eeacms/volto-listing-block/messages';
 
 import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
@@ -10,73 +11,21 @@ const ALIGN_VALUE_MAP = [
   ['', clearSVG],
 ];
 
-const messages = defineMessages({
-  styling: {
-    id: 'Styling',
-    defaultMessage: 'Styling',
-  },
-
-  Type: {
-    id: 'Listing',
-    defaultMessage: 'Listing',
-  },
-  Theme: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
-  ThemeHelp: {
-    id: 'Theme',
-    defaultMessage: 'Theme',
-  },
-  ThemeDefault: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  ThemePrimary: {
-    id: 'Primary',
-    defaultMessage: 'Primary',
-  },
-  ThemeSecondary: {
-    id: 'Secondary',
-    defaultMessage: 'Secondary',
-  },
-  ThemeTertiary: {
-    id: 'Tertiary',
-    defaultMessage: 'Tertiary',
-  },
-  Rounded: {
-    id: 'Rounded',
-    defaultMessage: 'Rounded',
-  },
-  RoundedHelp: {
-    id: 'Rounded Image',
-    defaultMessage: 'Rounded Image',
-  },
-  Inverted: {
-    id: 'Inverted',
-    defaultMessage: 'Inverted',
-  },
-  InvertedHelp: {
-    id: 'InvertedHelp',
-    defaultMessage: 'Inverted theme',
-  },
-});
-
 export const ListingStylingSchemaEnhancer = ({ schema }) => {
   return schema;
 };
 
-export const BasicListingBlockStylesSchema = ({ schema, intl }) => {
-  // return schema;
-  schema.fieldsets[0].fields.push(
+export const BasicListingBlockStylesSchema = ({ intl, formData }) => {
+  const styleSchema = defaultStyleSchema({ intl, formData });
+  styleSchema.fieldsets[0].fields.push(
     'theme',
     'text_align',
     // 'rounded',
     // 'inverted',
   );
 
-  schema.properties = {
-    ...schema.properties,
+  styleSchema.properties = {
+    ...styleSchema.properties,
     theme: {
       title: intl.formatMessage(messages.Theme),
       description: intl.formatMessage(messages.ThemeHelp),
@@ -92,17 +41,12 @@ export const BasicListingBlockStylesSchema = ({ schema, intl }) => {
       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',
     // },
   };
 
-  return schema;
+  return styleSchema;
 };
diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx
@@ -1,11 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment'; // TODO: this needs to be lazyloaded!!!
+
 import { ConditionalLink } from '@plone/volto/components';
 import UniversalItem from '@eeacms/volto-listing-block/components/UniversalItem/UniversalItem';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { isInternalURL } from '@plone/volto/helpers/Url/Url';
 import config from '@plone/volto/registry';
-import moment from 'moment';
-import PropTypes from 'prop-types';
-import React from 'react';
+import messages from '@eeacms/volto-listing-block/messages';
 
 const SummaryListing = (props) => {
   const { block, items, linkTitle, linkHref, isEditMode } = props;
@@ -43,8 +45,18 @@ const SummaryListing = (props) => {
 
 SummaryListing.schemaEnhancer = UniversalItem.schemaEnhancer;
 
-SummaryListing.styleSchemaEnhancer = ({ schema }) => {
-  console.log('style', schema);
+SummaryListing.styleSchemaEnhancer = ({ schema, intl }) => {
+  const styleSchema = schema.properties.styles.schema;
+  styleSchema.fieldsets[0].fields.push('inverted');
+  styleSchema.properties = {
+    ...styleSchema.properties,
+    inverted: {
+      title: intl.formatMessage(messages.Inverted),
+      description: intl.formatMessage(messages.InvertedHelp),
+      type: 'boolean',
+    },
+  };
+
   return schema;
 };
 

diff --git a/src/schema-utils.js b/src/schema-utils.js
@@ -2,7 +2,6 @@ import { cloneDeep } from 'lodash';
 import config from '@plone/volto/registry';
 
 import { defineMessages } from 'react-intl';
-import { defaultStyleSchema } from '@plone/volto/components/manage/Blocks/Block/StylesSchema';
 
 const addTypeSelect = ({ intl, schema, extensionName, messages }) => {
   const field = '@type';
@@ -70,6 +69,8 @@ const addStylesField = ({ schema, intl, formData }) => {
   // We omit the first step in ladder because of bugs in Volto < 16.0.0-alpha.36
   // In later versions we won't have to redefine the styles field
 
+  const defaultStyleSchema = config.blocks.blocksConfig.listing.stylesSchema;
+
   if (schema.properties.styles) return schema;
 
   schema.fieldsets.push({
@@ -81,7 +82,7 @@ const addStylesField = ({ schema, intl, formData }) => {
   schema.properties.styles = {
     widget: 'object',
     title: intl.formatMessage(messages.styling),
-    schema: defaultStyleSchema({ formData, intl }),
+    schema: defaultStyleSchema({ formData, intl, schema }),
   };
 
   return schema;
@@ -98,13 +99,15 @@ export const enhanceStylingSchema = ({
 
   // first, enhance styling schema based on the variation
   // then, enhance it based on the `${extensionName}`
-  // TODO: use resolveExtensions() from Volto
 
   const blockConfig = config.blocks.blocksConfig[blockType];
-  const activeVariation =
+  const activeVariationId =
     formData['variation'] ||
-    blockConfig.variations?.find(({ isDefault }) => isDefault) ||
-    {};
+    blockConfig.variations?.find(({ isDefault }) => isDefault)?.id;
+  // TODO: use resolveExtensions() from Volto
+  const activeVariation = activeVariationId
+    ? blockConfig.variations.find(({ id }) => id === activeVariationId)
+    : {};
 
   // TODO: not needed when we will use latest Volto
   const variationStyleSchema = activeVariation?.stylesSchema;