Merge pull request #4 from codesyntax/develop

Develop
codesyntax · Mar 20, 2024 · 12d4724 · 12d4724
2 parents d6f6210 + b7a0d31
commit 12d4724
Show file tree

Hide file tree

Showing 5 changed files with 211 additions and 17 deletions.
diff --git a/news/3.feature b/news/3.feature
@@ -0,0 +1 @@
+add styling schema @ionlizarazu
diff --git a/src/View.jsx b/src/View.jsx
@@ -1,20 +1,62 @@
-import React from 'react';
+import config from '@plone/volto/registry';
 import CountUp from 'react-countup';
+import cx from 'classnames';
 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 (
-    <Segment className={className}>
+    <Segment
+      className={cx('countup-block-wrapper', className)}
+      {...segmentData}
+    >
       {title && titlePosition === 'above' && <TitleTag>{title}</TitleTag>}
 
-      <CountUp {...data} delay={delay} />
+      <CountUp {...data} {...countUpData} />
       {title && titlePosition === 'below' && <TitleTag>{title}</TitleTag>}
     </Segment>
   );

diff --git 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
@@ -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
@@ -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'],
   };