change(textAlign): modeled TextAlign widget to code from Align widget

- Added clear selection to Align widget
eea · Oct 28, 2022 · 248ce49 · 248ce49
1 parent 8901c45
commit 248ce49
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 16 deletions.
diff --git a/src/Widgets/Align.jsx b/src/Widgets/Align.jsx
@@ -15,8 +15,9 @@ import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageNarrowSVG from '@eeacms/volto-block-style/icons/image-narrow.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
+import clearSVG from '@plone/volto/icons/clear.svg';
 
-const messages = defineMessages({
+export const messages = defineMessages({
   left: {
     id: 'Left',
     defaultMessage: 'Left',
@@ -41,6 +42,10 @@ const messages = defineMessages({
     id: 'Full',
     defaultMessage: 'Full',
   },
+  '': {
+    id: 'Clear selection',
+    defaultMessage: 'Clear selection',
+  },
 });
 
 export const defaultActionsInfo = ({ intl }) => ({
@@ -50,6 +55,7 @@ export const defaultActionsInfo = ({ intl }) => ({
   narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
   wide: [imageWideSVG, intl.formatMessage(messages.wide)],
   full: [imageFullSVG, intl.formatMessage(messages.full)],
+  '': [clearSVG, intl.formatMessage(messages[''])],
 });
 
 const AlignWidget = (props) => {
@@ -69,6 +75,11 @@ const AlignWidget = (props) => {
     }
   });
 
+  // add clear selection button to the actions mapping if it's not already present
+  if (actions[actions.length - 1] !== '') {
+    actions.push('');
+  }
+
   const actionsInfo = {
     ...defaultActionsInfo({ intl }),
     ...actionsInfoMap,

diff --git a/src/Widgets/TextAlign.jsx b/src/Widgets/TextAlign.jsx
@@ -7,37 +7,77 @@ import alignRightSVG from '@plone/volto/icons/align-right.svg';
 import alignJustifySVG from '@plone/volto/icons/align-justify.svg';
 import alignCenterSVG from '@plone/volto/icons/align-center.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
+import { defineMessages, useIntl } from 'react-intl';
 
-export const TEXT_ALIGN_VALUE_MAP = [
-  ['left', alignLeftSVG, 'Left align'],
-  ['right', alignRightSVG, 'Right align'],
-  ['center', alignCenterSVG, 'Center align'],
-  ['justify', alignJustifySVG, 'Justify align'],
-];
+export const messages = defineMessages({
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+  justify: {
+    id: 'Justify',
+    defaultMessage: 'Justify',
+  },
+  '': {
+    id: 'Clear selection',
+    defaultMessage: 'Clear selection',
+  },
+});
+const defaultActionsInfo = ({ intl }) => ({
+  left: [alignLeftSVG, intl.formatMessage(messages.left)],
+  right: [alignRightSVG, intl.formatMessage(messages.right)],
+  center: [alignCenterSVG, intl.formatMessage(messages.center)],
+  justify: [alignJustifySVG, intl.formatMessage(messages.justify)],
+  '': [clearSVG, intl.formatMessage(messages[''])],
+});
 
 export default (props) => {
-  const { value, onChange, id, actions = TEXT_ALIGN_VALUE_MAP } = props;
+  const intl = useIntl();
+  const {
+    onChange,
+    id,
+    actions = ['left', 'right', 'center', 'justify'],
+    actionsInfoMap = {},
+    value,
+  } = props;
   // add clear selection button to the actions mapping if it's not already present
-  if (actions[actions.length - 1][0] !== '') {
-    actions.push(['', clearSVG, 'Clear selection']);
+  if (actions[actions.length - 1] !== '') {
+    actions.push('');
   }
 
+  const actionsInfo = {
+    ...defaultActionsInfo({ intl }),
+    ...actionsInfoMap,
+  };
+
   return (
     <FormFieldWrapper {...props}>
       <div className="align-tools">
-        {actions.map(([name, icon, title], index) => (
-          <Button.Group key={`button-group-${name}-${index}`}>
+        {actions.map((action, index) => (
+          <Button.Group key={`button-group-${action}-${index}`}>
             <Button
               icon
               basic
               compact
-              active={value === name}
-              aria-label={name}
+              active={value === action}
+              aria-label={actionsInfo[action][1]}
               onClick={() => {
-                onChange(id, name);
+                onChange(id, action);
               }}
             >
-              <Icon name={icon} title={title || name} size="24px" />
+              <Icon
+                name={actionsInfo[action][0]}
+                title={actionsInfo[action][1] || action}
+                size="24px"
+              />
             </Button>
           </Button.Group>
         ))}