change(align-widget): modified widget to allow update of actions and …

…defaultActionsInfo - This way we can use this widget with other widgets that need alignment options such as Text Align - Use AlignWidget as constructor for TextAlign widget now that we can modify both the actions and the defaultActionsInfo
eea · Oct 31, 2022 · c871b2c · c871b2c
1 parent 93e329b
commit c871b2c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 86 deletions.
diff --git a/src/Widgets/Align.jsx b/src/Widgets/Align.jsx
@@ -48,23 +48,23 @@ export const messages = defineMessages({
   },
 });
 
-export const defaultActionsInfo = ({ intl }) => ({
-  left: [imageLeftSVG, intl.formatMessage(messages.left)],
-  right: [imageRightSVG, intl.formatMessage(messages.right)],
-  center: [imageFitSVG, intl.formatMessage(messages.center)],
-  narrow: [imageNarrowSVG, intl.formatMessage(messages.narrow)],
-  wide: [imageWideSVG, intl.formatMessage(messages.wide)],
-  full: [imageFullSVG, intl.formatMessage(messages.full)],
-  '': [clearSVG, intl.formatMessage(messages[''])],
-});
+export const defaultActionsInfo = {
+  left: [imageLeftSVG, messages.left],
+  right: [imageRightSVG, messages.right],
+  center: [imageFitSVG, messages.center],
+  narrow: [imageNarrowSVG, messages.narrow],
+  wide: [imageWideSVG, messages.wide],
+  full: [imageFullSVG, messages.full],
+  '': [clearSVG, messages['']],
+};
 
-const AlignWidget = (props) => {
+const AlignWidget = (props, rest) => {
   const intl = useIntl();
 
   const {
     id,
     onChange,
-    actions = ['left', 'right', 'center', 'full'],
+    actions = rest.actions || ['left', 'right', 'center', 'full'],
     actionsInfoMap = {},
     value,
   } = props;
@@ -81,30 +81,40 @@ const AlignWidget = (props) => {
   }
 
   const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
+    ...defaultActionsInfo,
     ...actionsInfoMap,
   };
 
   return (
     <FormFieldWrapper {...props} className="align-widget">
       <div className="align-buttons">
-        {actions.map((action) => (
-          <Button.Group key={action}>
-            <Button
-              icon
-              basic
-              aria-label={actionsInfo[action][1]}
-              onClick={() => onChange(id, action)}
-              active={(action === 'center' && !value) || value === action}
-            >
-              <Icon
-                name={actionsInfo[action][0]}
-                title={actionsInfo[action][1] || action}
-                size="24px"
-              />
-            </Button>
-          </Button.Group>
-        ))}
+        {actions.map((action) => {
+          const action_info_list = actionsInfo[action];
+          const title = action_info_list[1];
+          return (
+            <Button.Group key={action}>
+              <Button
+                icon
+                basic
+                aria-label={action}
+                onClick={() => onChange(id, action)}
+                active={(action === 'center' && !value) || value === action}
+              >
+                <Icon
+                  name={action_info_list[0]}
+                  title={
+                    title
+                      ? typeof title === 'string'
+                        ? title
+                        : intl.formatMessage(title)
+                      : action
+                  }
+                  size="24px"
+                />
+              </Button>
+            </Button.Group>
+          );
+        })}
       </div>
     </FormFieldWrapper>
   );

diff --git a/src/Widgets/TextAlign.jsx b/src/Widgets/TextAlign.jsx
@@ -1,13 +1,9 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
-
 import alignLeftSVG from '@plone/volto/icons/align-left.svg';
 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';
+import { defineMessages } from 'react-intl';
+import AlignWidget, { defaultActionsInfo } from './Align';
 
 export const messages = defineMessages({
   left: {
@@ -31,57 +27,13 @@ export const messages = defineMessages({
     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 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] !== '') {
-    actions.push('');
-  }
+defaultActionsInfo['left'] = [alignLeftSVG, messages.left];
+defaultActionsInfo['right'] = [alignRightSVG, messages.right];
+defaultActionsInfo['center'] = [alignCenterSVG, messages.center];
+defaultActionsInfo['justify'] = [alignJustifySVG, messages.justify];
 
-  const actionsInfo = {
-    ...defaultActionsInfo({ intl }),
-    ...actionsInfoMap,
-  };
-
-  return (
-    <FormFieldWrapper {...props}>
-      <div className="align-tools">
-        {actions.map((action, index) => (
-          <Button.Group key={`button-group-${action}-${index}`}>
-            <Button
-              icon
-              basic
-              compact
-              active={value === action}
-              aria-label={actionsInfo[action][1]}
-              onClick={() => {
-                onChange(id, action);
-              }}
-            >
-              <Icon
-                name={actionsInfo[action][0]}
-                title={actionsInfo[action][1] || action}
-                size="24px"
-              />
-            </Button>
-          </Button.Group>
-        ))}
-      </div>
-    </FormFieldWrapper>
-  );
+export default (props) => {
+  const actions = { actions: ['left', 'right', 'center', 'justify'] };
+  return AlignWidget(props, actions);
 };