From a4c7ae5f11443833f936fa182ecbbf8b4a2db46f Mon Sep 17 00:00:00 2001 From: Tiberiu Ichim Date: Mon, 26 Sep 2022 18:24:25 +0300 Subject: [PATCH] WIP --- src/blocks/Listing/index.js | 33 +++++---- src/blocks/Listing/schema.js | 87 ++++++++++-------------- src/blocks/Listing/templates/Summary.jsx | 5 ++ src/components/UniversalCard/schema.js | 7 +- src/components/UniversalItem/schema.js | 15 ++-- src/schema-utils.js | 69 ++++++++++++++++--- 6 files changed, 138 insertions(+), 78 deletions(-) diff --git a/src/blocks/Listing/index.js b/src/blocks/Listing/index.js index 30263b56..9adf16dc 100644 --- a/src/blocks/Listing/index.js +++ b/src/blocks/Listing/index.js @@ -1,17 +1,21 @@ import CardsCarousel from './templates/CardsCarousel'; -import CustomCardsGalleryTemplate from './templates/CardsGallery'; -import CustomNewsListTemplate from './templates/NewsList'; -import CustomSummaryListingBlockTemplate from './templates/Summary'; +import CardsGallery from './templates/CardsGallery'; +import NewsList from './templates/NewsList'; +import Summary from './templates/Summary'; + import { DefaultCardLayout, ImageCardLayout, LeftImageCardLayout, RightImageCardLayout, } from './CardTemplates'; + import { DefaultItemLayout } from './ItemTemplates'; import { SearchItemLayout } from './SearchItemTemplate'; -import { ListingStylingSchemaEnhancer } from './schema'; +import { BasicListingBlockStylesSchema } from './schema'; + +// import { ListingStylingSchemaEnhancer } from './schema'; const applyConfig = (config) => { // moment date locale. See https://momentjs.com/ - Multiple Locale Support @@ -22,9 +26,12 @@ const applyConfig = (config) => { const { schemaEnhancer } = listing; + // listing.stylesSchema = BasicListingBlockStylesSchema; + listing.schemaEnhancer = (props) => { + // NOTE: this is a schema finalizer const schema = schemaEnhancer ? schemaEnhancer(props) : props.schema; - // + // move querystring to its own fieldset; schema.fieldsets[0].fields = schema.fieldsets[0].fields.filter( (f) => f !== 'querystring', @@ -44,8 +51,9 @@ const applyConfig = (config) => { id: 'summary', isDefault: false, title: 'Item listing', - template: CustomSummaryListingBlockTemplate, - schemaEnhancer: CustomSummaryListingBlockTemplate.schemaEnhancer, + template: Summary, + schemaEnhancer: Summary.schemaEnhancer, + stylesSchema: Summary.styleSchemaEnhancer, }, { id: 'cardsCarousel', @@ -53,20 +61,21 @@ const applyConfig = (config) => { title: 'Cards carousel', template: CardsCarousel, schemaEnhancer: CardsCarousel.schemaEnhancer, + stylesSchema: CardsCarousel.styleSchemaEnhancer, }, { id: 'customCardsGalleryVariationId', isDefault: false, title: 'Cards gallery', - template: CustomCardsGalleryTemplate, - schemaEnhancer: CustomCardsGalleryTemplate.schemaEnhancer, + template: CardsGallery, + schemaEnhancer: CardsGallery.schemaEnhancer, }, { id: 'customNewsListVariationId', isDefault: false, title: 'News List', - template: CustomNewsListTemplate, - schemaEnhancer: CustomNewsListTemplate.schemaEnhancer, + template: NewsList, + schemaEnhancer: NewsList.schemaEnhancer, }, ]; @@ -84,7 +93,7 @@ const applyConfig = (config) => { isDefault: false, title: 'Search Item', view: SearchItemLayout, - stylesSchema: ListingStylingSchemaEnhancer, + // stylesSchema: ListingStylingSchemaEnhancer, }, ], cardTemplates: [ diff --git a/src/blocks/Listing/schema.js b/src/blocks/Listing/schema.js index 0fd46842..d92b7bcf 100644 --- a/src/blocks/Listing/schema.js +++ b/src/blocks/Listing/schema.js @@ -62,59 +62,46 @@ const messages = defineMessages({ }, }); -export const ListingStylingSchemaEnhancer = ({ schema, intl }) => { - // console.log('schema', schema); +export const ListingStylingSchemaEnhancer = ({ schema }) => { + return schema; +}; - schema.fieldsets.push({ - id: 'styling', - title: intl.formatMessage(messages.styling), - fields: ['styles'], - }); +export const BasicListingBlockStylesSchema = ({ schema, intl }) => { + // return schema; + schema.fieldsets[0].fields.push( + 'theme', + 'text_align', + // 'rounded', + // 'inverted', + ); - 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', - }, + schema.properties = { + ...schema.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)], + ], }, - required: [], - }; - - schema.properties.styles = { - widget: 'object', - title: intl.formatMessage(messages.styling), - schema: stylesSchema, + 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', + // }, }; return schema; diff --git a/src/blocks/Listing/templates/Summary.jsx b/src/blocks/Listing/templates/Summary.jsx index 0e9df3a6..4428d99d 100644 --- a/src/blocks/Listing/templates/Summary.jsx +++ b/src/blocks/Listing/templates/Summary.jsx @@ -46,6 +46,11 @@ SummaryListing.schemaEnhancer = (args) => { return schema; }; +SummaryListing.styleSchemaEnhancer = ({ schema }) => { + // console.log('style', schema); + return schema; +}; + SummaryListing.propTypes = { items: PropTypes.arrayOf(PropTypes.any).isRequired, linkMore: PropTypes.any, diff --git a/src/components/UniversalCard/schema.js b/src/components/UniversalCard/schema.js index ca3d3482..72c25b26 100644 --- a/src/components/UniversalCard/schema.js +++ b/src/components/UniversalCard/schema.js @@ -1,5 +1,5 @@ import { defineMessages } from 'react-intl'; -import { enhanceSchema } from '@eeacms/volto-listing-block/schema-utils'; +import { schemaEnhancerFactory } from '@eeacms/volto-listing-block/schema-utils'; const messages = defineMessages({ title: { @@ -110,7 +110,10 @@ const CardSchema = ({ formData }) => { export default function universalCardSchemaEnhancer(props) { const { schema } = props; - const enhancer = enhanceSchema({ extensionName: 'cardTemplates', messages }); + const enhancer = schemaEnhancerFactory({ + extensionName: 'cardTemplates', + messages, + }); return { ...schema, fieldsets: [ diff --git a/src/components/UniversalItem/schema.js b/src/components/UniversalItem/schema.js index e2a99f0d..fe657b90 100644 --- a/src/components/UniversalItem/schema.js +++ b/src/components/UniversalItem/schema.js @@ -1,6 +1,6 @@ import { - enhanceSchema, - addStylingSchema, + schemaEnhancerFactory, + enhanceStylingSchema, } from '@eeacms/volto-listing-block/schema-utils'; import { defineMessages } from 'react-intl'; @@ -77,10 +77,14 @@ const ItemSchema = ({ formData }) => { export default function universalItemSchemaEnhancer(props) { const { schema } = props; - const enhanceItemModel = enhanceSchema({ + + const enhanceItemModel = schemaEnhancerFactory({ extensionName: 'itemTemplates', messages, + blockType: 'listing', + extensionField: '@type', }); + const baseSchema = { ...schema, fieldsets: [ @@ -104,10 +108,11 @@ export default function universalItemSchemaEnhancer(props) { }, }; - const styledSchema = addStylingSchema({ + const styledSchema = enhanceStylingSchema({ ...props, schema: baseSchema, - formData: props.formData?.itemModel || {}, + // schema: baseSchema.properties.styles.schema, + formData: props.formData, }); return styledSchema; diff --git a/src/schema-utils.js b/src/schema-utils.js index 7ede36bb..9a513845 100644 --- a/src/schema-utils.js +++ b/src/schema-utils.js @@ -1,6 +1,9 @@ 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'; const extensions = config.blocks.blocksConfig.listing.extensions; @@ -15,21 +18,25 @@ const addTypeSelect = ({ intl, schema, extensionName, messages }) => { return schema; }; -export const enhanceSchema = ({ +// Creates a factory that can trigger schemaEnhancer for a given extension +export const schemaEnhancerFactory = ({ extensionName, messages, blockType = 'listing', + extensionField = '@type', }) => ({ schema: originalSchema, formData, intl }) => { - const extensionType = '@type'; // the attribute name that's stored in the block data + // + // 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 templates = extensions[extensionName]; - const activeItemName = formData?.[extensionType]; - let activeItem = variations?.find((item) => item.id === activeItemName); - if (!activeItem) activeItem = variations?.find((item) => item.isDefault); + const activeItemName = formData?.[extensionField]; + let activeItem = templates?.find((item) => item.id === activeItemName); + if (!activeItem) activeItem = templates?.find((item) => item.isDefault); const schemaEnhancer = activeItem?.['schemaEnhancer']; @@ -40,13 +47,55 @@ export const enhanceSchema = ({ return addTypeSelect({ schema, intl, extensionName, messages }); }; -export const addStylingSchema = ({ +const messages = defineMessages({ + variation: { + id: 'Variation', + defaultMessage: 'Variation', + }, + styling: { + id: 'Styling', + defaultMessage: 'Styling', + }, +}); + +const addStylesField = ({ schema, intl, formData }) => { + // Add the default style schema as the first step in the "ladder". + // The order is as follows: + // + // - default volto style schema + // - listing block -> default style schema enhancer + // - listing block variation -> style schema enhancer + // - listing block card/item extension -> style schema enhancer + // + // 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 + + if (schema.properties.styles) return schema; + + schema.fieldsets.push({ + id: 'styling', + title: intl.formatMessage(messages.styling), + fields: ['styles'], + }); + + schema.properties.styles = { + widget: 'object', + title: intl.formatMessage(messages.styling), + schema: defaultStyleSchema({ formData, intl }), + }; + + return schema; +}; +export const enhanceStylingSchema = ({ formData, schema, blockType = 'listing', - extensionName = 'itemTemplates', + extensionName = 'itemModel', intl, }) => { + // Adds (to the limited styles schema) the new styling schema enhancements + schema = addStylesField({ formData, schema, intl }); + const extensionType = '@type'; // the attribute name that's stored in the block data const activeItemName = formData?.[extensionType]; const blockConfig = config.blocks.blocksConfig[blockType]; @@ -58,10 +107,12 @@ export const addStylingSchema = ({ const variations = extensions[extensionName]; let activeItem = variations?.find((item) => item.id === activeItemName); - const variationStyleSchema = activeVariation.stylesSchema; + // TODO: not needed after bug fix in Volto + const variationStyleSchema = activeVariation?.stylesSchema; schema = variationStyleSchema ? variationStyleSchema({ schema: cloneDeep(schema), formData, intl }) : schema; + // end TODO const stylingSchema = activeItem?.['stylesSchema']; schema = stylingSchema