refactor(breadcrumbs): component, make it functional and pluggable #32 …

…#94
eea · Mar 8, 2022 · 9f42e80 · 9f42e80
2 parents 6051724 + 3c8e1c6
commit 9f42e80
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 111 deletions.
diff --git a/src/ui/Breadcrumbs/Breadcrumb.stories.jsx b/src/ui/Breadcrumbs/Breadcrumb.stories.jsx
@@ -64,7 +64,7 @@ const Template = (args) => (
             <Breadcrumb.Divider icon={`${args.icon}`} key={index} />
           ),
           index < sections.length - 1 ? (
-            <Link key={section.href} to={section.href} className="section">
+            <Link key={section.key} to={section.href} className="section">
               {section.content}{' '}
             </Link>
           ) : (

diff --git a/src/ui/Breadcrumbs/Breadcrumbs.jsx b/src/ui/Breadcrumbs/Breadcrumbs.jsx
@@ -3,125 +3,57 @@
  * @module components/theme/Breadcrumbs/Breadcrumbs
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { compose } from 'redux';
 import { Link } from 'react-router-dom';
-import { Breadcrumb, Container, Segment } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { Icon } from '@plone/volto/components';
-import { getBreadcrumbs } from '@plone/volto/actions';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-
-import homeSVG from '@plone/volto/icons/home.svg';
-
-const messages = defineMessages({
-  home: {
-    id: 'Home',
-    defaultMessage: 'Home',
-  },
-  breadcrumbs: {
-    id: 'Breadcrumbs',
-    defaultMessage: 'Breadcrumbs',
-  },
-});
-
-/**
- * Breadcrumbs container class.
- * @class Breadcrumbs
- * @extends Component
- */
-class Breadcrumbs extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    getBreadcrumbs: PropTypes.func.isRequired,
-    pathname: PropTypes.string.isRequired,
-    root: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      }),
-    ).isRequired,
-  };
-
-  componentDidMount() {
-    if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-      this.props.getBreadcrumbs(getBaseUrl(this.props.pathname));
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.pathname !== this.props.pathname) {
-      if (!hasApiExpander('breadcrumbs', getBaseUrl(this.props.pathname))) {
-        this.props.getBreadcrumbs(getBaseUrl(nextProps.pathname));
-      }
-    }
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    return (
-      <Segment
-        role="navigation"
-        aria-label={this.props.intl.formatMessage(messages.breadcrumbs)}
-        className="breadcrumbs"
-        secondary
-        vertical
-      >
-        <Container>
-          <Breadcrumb size={'tiny'}>
-            <Link
-              to={this.props.root || '/'}
-              className="section"
-              title={this.props.intl.formatMessage(messages.home)}
-            >
-              <Icon name={homeSVG} size="18px" />
-            </Link>
-            {this.props.items.map((item, index, items) => [
-              <Breadcrumb.Divider key={`divider-${item.url}`} />,
+import { Breadcrumb, Container, Image, Segment } from 'semantic-ui-react';
+
+import homeIcon from '@eeacms/volto-eea-design-system/../theme/themes/eea/assets/images/home-icon.svg';
+
+const Breadcrumbs = ({ root, sections = [], icon, size = 'tiny' }) => {
+  return (
+    <Segment
+      role="navigation"
+      aria-label={'breadcrumbs'}
+      className="breadcrumbs"
+      attached
+    >
+      <Container>
+        <Breadcrumb size={size}>
+          <Link to={root || '/'} className="section" title={'Home'}>
+            <Image src={homeIcon} alt="home" />
+          </Link>
+          {sections.length > 0 &&
+            sections.map((item, index, items) => [
+              <Breadcrumb.Divider icon={icon} key={`divider-${item.href}`} />,
               index < items.length - 1 ? (
-                <Link key={item.url} to={item.url} className="section">
+                <Link key={item.key} to={item.href} className="section">
                   {item.title}
                 </Link>
               ) : (
-                <Breadcrumb.Section key={item.url} active>
+                <Breadcrumb.Section key={item.key} active>
                   {item.title}
                 </Breadcrumb.Section>
               ),
             ])}
-          </Breadcrumb>
-        </Container>
-      </Segment>
-    );
-  }
-}
+        </Breadcrumb>
+      </Container>
+    </Segment>
+  );
+};
+
+Breadcrumbs.propTypes = {
+  root: PropTypes.string,
+  sections: PropTypes.arrayOf(
+    PropTypes.shape({
+      title: PropTypes.string,
+      href: PropTypes.string,
+      key: PropTypes.string,
+    }),
+  ).isRequired,
+  size: PropTypes.string,
+};
 
 export const BreadcrumbsComponent = Breadcrumbs;
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      items: state.breadcrumbs.items,
-      root: state.breadcrumbs.root,
-    }),
-    { getBreadcrumbs },
-  ),
-)(Breadcrumbs);
+
+export default Breadcrumbs;