Merge pull request #6473 from open-sausages/pulls/4.0/breadcrumb-flex

Shift react breadcrumbs to use flexbox for placement

admin/client/dist/js/bundle.js

@@ -765,13 +765,16 @@ e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,wri
 }}Object.defineProperty(t,"__esModule",{value:!0}),t.Breadcrumb=void 0
 var l=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n]
 i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),u=n(5),d=i(u),c=n(20),f=i(c),p=n(106),h=n(142),m=function(e){
-function t(){return r(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return o(t,e),l(t,[{key:"render",value:function n(){return d["default"].createElement("ol",{className:"breadcrumb"
-},this.getBreadcrumbs())}},{key:"getBreadcrumbs",value:function i(){return"undefined"==typeof this.props.crumbs?null:[].concat(this.props.crumbs.slice(0,-1).map(function(e,t){return[d["default"].createElement("li",{
-className:"breadcrumb__item"},d["default"].createElement(h.Link,{key:t,className:"breadcrumb__item-title",to:e.href,onClick:e.onClick},e.text))]}),this.props.crumbs.slice(-1).map(function(e,t){var n=["breadcrumb__icon",e.icon?e.icon.className:""].join(" "),i=["breadcrumb__item","breadcrumb__item--last"]
+function t(){return r(this,t),a(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return o(t,e),l(t,[{key:"getLastCrumb",value:function n(){return this.props.crumbs&&this.props.crumbs[this.props.crumbs.length-1]
 
-
-return e.noCrumb&&i.push("breadcrumb__item--no-crumb"),[d["default"].createElement("li",{className:i.join(" ")},d["default"].createElement("h2",{className:"breadcrumb__item-title breadcrumb__item-title--last",
-key:t},e.text,e.icon&&d["default"].createElement("span",{className:n,onClick:e.icon.action})))]}))}}]),t}(f["default"])
+}},{key:"renderBreadcrumbs",value:function i(){return this.props.crumbs?this.props.crumbs.slice(0,-1).map(function(e,t){return d["default"].createElement("li",{key:t,className:"breadcrumb__item"},d["default"].createElement(h.Link,{
+className:"breadcrumb__item-title",to:e.href,onClick:e.onClick},e.text))}).concat([d["default"].createElement("li",{key:this.props.crumbs.length-1,className:"breadcrumb__item"})]):null}},{key:"renderLastCrumb",
+value:function s(){var e=this.getLastCrumb()
+if(!e)return null
+var t=["breadcrumb__icon"]
+return e.icon&&t.push(e.icon.className),d["default"].createElement("div",{className:"breadcrumb__item breadcrumb__item--last"},d["default"].createElement("h2",{className:"breadcrumb__item-title"},e.text,e.icon&&d["default"].createElement("span",{
+className:t.join(" "),onClick:e.icon.action})))}},{key:"render",value:function u(){return d["default"].createElement("div",{className:"breadcrumb__container fill-height"},d["default"].createElement("ol",{
+className:"breadcrumb"},this.renderBreadcrumbs()),this.renderLastCrumb())}}]),t}(f["default"])
 m.propTypes={crumbs:d["default"].PropTypes.array},t.Breadcrumb=m,t["default"]=(0,p.connect)(s)(m)},function(e,t){e.exports=ReactRouter},function(e,t,n){(function(t){e.exports=t.BreadcrumbsActions=n(144)
 
 }).call(t,function(){return this}())},function(e,t,n){"use strict"

admin/client/dist/styles/bundle.css

@@ -15022,6 +15022,9 @@ div.TreeDropdownField a.jstree-loading .jstree-pageicon{
   line-height:14px;
   margin-bottom:0;
   float:left;
+}
+
+.breadcrumb,.breadcrumb__container{
   max-height:52px;
 }
 

admin/client/src/components/Breadcrumb/Breadcrumb.js

@@ -5,53 +5,64 @@ import { Link } from 'react-router';
 
 class Breadcrumb extends SilverStripeComponent {
 
-  render() {
-    return (
-      <ol className="breadcrumb">
-        {this.getBreadcrumbs()}
-      </ol>
-    );
+  getLastCrumb() {
+    return this.props.crumbs && this.props.crumbs[this.props.crumbs.length - 1];
   }
 
-  getBreadcrumbs() {
-    if (typeof this.props.crumbs === 'undefined') {
+  renderBreadcrumbs() {
+    if (!this.props.crumbs) {
       return null;
     }
 
-    return [].concat(
-     this.props.crumbs.slice(0, -1).map((crumb, index) => [
-       <li className="breadcrumb__item">
+    return this.props.crumbs.slice(0, -1).map((crumb, index) => (
+       <li key={index} className="breadcrumb__item">
          <Link
-           key={index}
            className="breadcrumb__item-title"
            to={crumb.href}
            onClick={crumb.onClick}
          >{crumb.text}</Link>
-        </li>,
-     ]),
-       this.props.crumbs.slice(-1).map((crumb, index) => {
-         const iconClassNames = ['breadcrumb__icon', crumb.icon ? crumb.icon.className : '']
-           .join(' ');
-         const itemClassNames = ['breadcrumb__item', 'breadcrumb__item--last'];
+        </li>
+    )).concat([
+      <li
+        key={this.props.crumbs.length - 1}
+        className="breadcrumb__item"
+      />,
+    ]);
+  }
 
-         if (crumb.noCrumb) {
-           itemClassNames.push('breadcrumb__item--no-crumb');
-         }
+  renderLastCrumb() {
+    const crumb = this.getLastCrumb();
+    if (!crumb) {
+      return null;
+    }
 
-         return [
-           <li className={itemClassNames.join(' ')}>
-             <h2 className="breadcrumb__item-title breadcrumb__item-title--last" key={index}>
-               {crumb.text}
-               {crumb.icon &&
-               <span className={iconClassNames} onClick={crumb.icon.action} />
-               }
-             </h2>
-           </li>,
-         ];
-       })
+    const iconClassNames = ['breadcrumb__icon'];
+    if (crumb.icon) {
+      iconClassNames.push(crumb.icon.className);
+    }
+
+    return (
+      <div className="breadcrumb__item breadcrumb__item--last">
+        <h2 className="breadcrumb__item-title">
+          {crumb.text}
+          {crumb.icon &&
+          <span className={iconClassNames.join(' ')} onClick={crumb.icon.action} />
+          }
+        </h2>
+      </div>
     );
   }
 
+  render() {
+    return (
+      <div className="breadcrumb__container fill-height">
+        <ol className="breadcrumb">
+          {this.renderBreadcrumbs()}
+        </ol>
+        {this.renderLastCrumb()}
+      </div>
+    );
+  }
 }
 
 Breadcrumb.propTypes = {

admin/client/src/components/Breadcrumb/Breadcrumb.scss

@@ -6,6 +6,10 @@
   max-height: $toolbar-height;
 }
 
+.breadcrumb__container {
+  max-height: $toolbar-height;
+}
+
 .breadcrumb>li.breadcrumb__item--last, // TODO Fix Bootstrap clash
 .breadcrumb__item--last {
   display: block;

admin/client/src/components/Breadcrumb/tests/breadcrumb-test.js

@@ -14,7 +14,7 @@ describe('BreadcrumbsComponent', () => {
     props = {};
   });
 
-  describe('getBreadcrumbs()', () => {
+  describe('renderBreadcrumbs()', () => {
     let breadcrumbs = null;
 
     it('should convert the props.crumbs array into jsx to be rendered', () => {
@@ -32,11 +32,15 @@ describe('BreadcrumbsComponent', () => {
       breadcrumbs = ReactTestUtils.renderIntoDocument(
         <Breadcrumb {...props} />
       );
-      const listEls = breadcrumbs.getBreadcrumbs();
-      expect(listEls[0][0].props.children.props.children).toBe('breadcrumb1');
-      expect(listEls[1][0].props.children.props.children).toBe('breadcrumb2');
-      expect(listEls[2][0].props.children.props.children[0]).toBe('breadcrumb3');
-      expect(listEls[2][0].props.children.props.children[1].props.className.split(' '))
+      const listEls = breadcrumbs.renderBreadcrumbs();
+      console.log(listEls[2].props.children);
+      expect(listEls[0].props.children.props.children).toBe('breadcrumb1');
+      expect(listEls[1].props.children.props.children).toBe('breadcrumb2');
+      expect(listEls[2].props.children).toBe(undefined);
+
+      const lastEl = breadcrumbs.renderLastCrumb();
+      expect(lastEl.props.children.props.children[0]).toBe('breadcrumb3');
+      expect(lastEl.props.children.props.children[1].props.className.split(' '))
         .toContain('breadcrumb3icon');
     });
 
@@ -45,7 +49,7 @@ describe('BreadcrumbsComponent', () => {
         <Breadcrumb {...props} />
       );
 
-      const listEls = breadcrumbs.getBreadcrumbs();
+      const listEls = breadcrumbs.renderBreadcrumbs();
       expect(listEls).toBe(null);
     });
   });