From 931ab08c38b33306d1c2766a68f8d2870546a7b0 Mon Sep 17 00:00:00 2001 From: Ion Lizarazu Date: Thu, 14 Mar 2024 00:22:32 +0100 Subject: [PATCH] add styling schema and an option to somehow hardcode some values --- src/View.jsx | 46 ++++++++++++++++++++++--- src/index.js | 47 ++++++++++++++++++++++++++ src/messages.js | 40 ++++++++++++++++++++++ src/schema.js | 90 ++++++++++++++++++++++++++++++++++++++++++------- 4 files changed, 206 insertions(+), 17 deletions(-) diff --git a/src/View.jsx b/src/View.jsx index db70283..64ef866 100644 --- a/src/View.jsx +++ b/src/View.jsx @@ -1,20 +1,58 @@ -import React from 'react'; +import config from '@plone/volto/registry'; import CountUp from 'react-countup'; import { Segment } from 'semantic-ui-react'; import { withBlockExtensions } from '@plone/volto/helpers'; const CountUpBlockView = ({ data, className }) => { - const { delay = 2 } = data; + const values = config.blocks.blocksConfig['countUpBlock'].schemaValues; + const { + delay = values.delay ?? 0, + duration = values.duration ?? 2, + prefix = values.prefix ?? '', + suffix = values.suffix ?? '', + decimal = values.decimal ?? ',', + decimals = values.decimals ?? 0, + separator = values.separator ?? '', + basic = values.basic ?? false, + inverted = values.inverted ?? false, + compact = values.compact ?? false, + circular = values.circular ?? false, + floated = values.floated ?? false, + textAlign = values.textAlign ?? false, + color = values.color ?? '', + size = values.size ?? '', + } = data; + + const countUpData = { + delay, + duration, + prefix, + suffix, + decimal, + decimals, + separator, + }; + + const segmentData = { + basic, + inverted, + compact, + circular, + floated, + textAlign, + size, + color, + }; // Title config const { title, titleTag, titlePosition = 'above' } = data; const TitleTag = titleTag || 'h2'; return ( - + {title && titlePosition === 'above' && {title}} - + {title && titlePosition === 'below' && {title}} ); diff --git a/src/index.js b/src/index.js index 2468fba..c79b99f 100644 --- a/src/index.js +++ b/src/index.js @@ -22,6 +22,53 @@ const applyConfig = (config) => { ['h4', 'h4'], ['strong', 'strong'], ], + schemaEditable: { + time: ['duration', 'delay'], + extras: ['prefix', 'suffix'], + decimals: ['decimal', 'decimals'], + thousands: ['separator'], + styling: [ + 'basic', + 'inverted', + 'compact', + 'circular', + 'floated', + 'textAlign', + 'color', + ], + }, + schemaValues: { + duration: 2, + delay: 0, + prefix: '', + suffix: '', + decimal: ',', + decimals: 0, + separator: '', + basic: false, + inverted: false, + compact: false, + circular: false, + floated: false, + textAlign: false, + color: '', + }, + colors: [ + { name: 'transparent', value: 'transparent' }, + { name: 'grey', value: 'grey' }, + { name: 'black', value: 'black' }, + { name: 'red', value: 'red' }, + { name: 'green', value: 'green' }, + { name: 'blue', value: 'blue' }, + { name: 'yellow', value: 'yellow' }, + { name: 'orange', value: 'orange' }, + { name: 'olive', value: 'olive' }, + { name: 'teal', value: 'teal' }, + { name: 'violet', value: 'violet' }, + { name: 'purple', value: 'purple' }, + { name: 'pink', value: 'pink' }, + { name: 'brown', value: 'brown' }, + ], }; return config; diff --git a/src/messages.js b/src/messages.js index 8529255..e3543a0 100644 --- a/src/messages.js +++ b/src/messages.js @@ -107,5 +107,45 @@ const messages = defineMessages({ id: 'Below', defaultMessage: 'Below', }, + basic: { + id: 'Basic', + defaultMessage: 'Basic', + }, + inverted: { + id: 'Inverted', + defaultMessage: 'Inverted', + }, + compact: { + id: 'Compact', + defaultMessage: 'Compact', + }, + circular: { + id: 'Circular', + defaultMessage: 'Circular', + }, + floated: { + id: 'Floated', + defaultMessage: 'Floated', + }, + textAlign: { + id: 'Text align', + defaultMessage: 'Text align', + }, + center: { + id: 'Center', + defaultMessage: 'Center', + }, + left: { + id: 'Left', + defaultMessage: 'Left', + }, + right: { + id: 'Right', + defaultMessage: 'Right', + }, + color: { + id: 'Color', + defaultMessage: 'Color', + }, }); export default messages; diff --git a/src/schema.js b/src/schema.js index cbe38e0..e94f1bb 100644 --- a/src/schema.js +++ b/src/schema.js @@ -2,9 +2,26 @@ import config from '@plone/volto/registry'; import messages from './messages.js'; export const CountUpBlockSchema = (intl, data) => { + const countUpConfig = config.blocks.blocksConfig['countUpBlock']; const decimals = - data.start % 1 !== 0 || data.end % 1 !== 0 ? ['decimal', 'decimals'] : []; - const thousands = data.start >= 1000 || data.end >= 1000 ? ['separator'] : []; + (data.start % 1 !== 0 || data.end % 1 !== 0) && + countUpConfig.schemaEditable.decimals.length + ? countUpConfig.schemaEditable.decimals + : []; + const thousands = + (data.start >= 1000 || data.end >= 1000) && + countUpConfig.schemaEditable.thousands.length + ? countUpConfig.schemaEditable.thousands + : []; + const time = countUpConfig.schemaEditable.time?.length + ? [ + { + id: 'time', + title: 'Time config', + fields: countUpConfig.schemaEditable.time, + }, + ] + : []; const separator = decimals.length || thousands.length ? [ @@ -15,6 +32,24 @@ export const CountUpBlockSchema = (intl, data) => { }, ] : []; + const extras = countUpConfig.schemaEditable.extras?.length + ? [ + { + id: 'extras', + title: 'Extra config', + fields: countUpConfig.schemaEditable.extras, + }, + ] + : []; + const styling = countUpConfig.schemaEditable.extras?.length + ? [ + { + id: 'styling', + title: 'Style config', + fields: countUpConfig.schemaEditable.styling, + }, + ] + : []; return { title: intl.formatMessage(messages.countupblockconfig), fieldsets: [ @@ -23,17 +58,10 @@ export const CountUpBlockSchema = (intl, data) => { title: 'Default', fields: ['start', 'end'], }, - { - id: 'time', - title: 'Time config', - fields: ['duration', 'delay'], - }, + ...time, ...separator, - { - id: 'extras', - title: 'Extra config', - fields: ['prefix', 'suffix'], - }, + ...extras, + ...styling, { id: 'title', title: 'Title', @@ -48,7 +76,7 @@ export const CountUpBlockSchema = (intl, data) => { }, titleTag: { title: intl.formatMessage(messages.titleTags), - choices: config.blocks.blocksConfig['countUpBlock'].titleTags, + choices: countUpConfig.titleTags, }, titlePosition: { title: intl.formatMessage(messages.titlePosition), @@ -101,6 +129,42 @@ export const CountUpBlockSchema = (intl, data) => { title: intl.formatMessage(messages.separator), type: 'string', }, + basic: { + title: intl.formatMessage(messages.basic), + type: 'boolean', + }, + inverted: { + title: intl.formatMessage(messages.inverted), + type: 'boolean', + }, + compact: { + title: intl.formatMessage(messages.compact), + type: 'boolean', + }, + circular: { + title: intl.formatMessage(messages.circular), + type: 'boolean', + }, + floated: { + title: intl.formatMessage(messages.floated), + choices: [ + ['left', intl.formatMessage(messages.left)], + ['right', intl.formatMessage(messages.right)], + ], + }, + textAlign: { + title: intl.formatMessage(messages.textAlign), + choices: [ + ['left', intl.formatMessage(messages.left)], + ['right', intl.formatMessage(messages.right)], + ['center', intl.formatMessage(messages.center)], + ], + }, + color: { + title: intl.formatMessage(messages.color), + widget: 'color_picker', + colors: countUpConfig.colors, + }, }, required: ['start', 'end'], };