react-breadcrumbs - npm Package Compare versions

Comparing version 1.6.5 to 1.6.6

demo/app.jsx

@@ -13,2 +13,3 @@ import React from 'react';
   render(){
+    console.log(this.props.params)
     return (
@@ -15,0 +16,0 @@ <div className="animated fadeIn">

demo/routes.jsx

 import React from 'react'
-import { Router, Route, NoMatch, IndexRoute } from 'react-router'
-import { App, Info, Users, User, UserDetails } from './app.jsx';
-import { hashHistory } from 'react-router'
+import {Router, Route, NoMatch, IndexRoute} from 'react-router'
+import {App, Info, Users, User, UserDetails} from './app.jsx';
+import {hashHistory} from 'react-router'
 
 export default (
   <Router history={hashHistory}>
-    <Route path="/" name="Examples" component={App} >
+    <Route path="/" name="Examples" component={App}>
       <Route name="Users" path="users" component={Users}>
-        <Route name="UserLocator" path=":userId" component={User}>
-          <Route name="UserDetails" path="details(/:baz)" component={UserDetails} />
+        <Route name="UserLocator" path=":userId" component={User}
+               getDisplayName={param => Number(param.userId) === 1 ? "John" : "Rambo"}>
+          <Route name="UserDetails" path="details" component={UserDetails}/>
         </Route>
@@ -19,3 +20,4 @@ </Route>
               <Route name='RouteName5' path=':item2' component={Info}>
-                <Route name='RouteName6' path='child3' component={Info} getDisplayName={() => "A fixed displayname from routes"}>
+                <Route name='RouteName6' path='child3' component={Info}
+                       getDisplayName={() => "A fixed displayname from routes"}>
                 </Route>
@@ -22,0 +24,0 @@ </Route>

dist/react-breadcrumbs.min.js

@@ -1,2 +0,2 @@
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var p=t[r];p.enumerable=p.enumerable||!1,p.configurable=!0,"value"in p&&(p.writable=!0),Object.defineProperty(e,p.key,p)}}return function(t,r,p){return r&&e(t.prototype,r),p&&e(t,p),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactRouter=require("react-router"),_exenv=require("exenv"),_exenv2=_interopRequireDefault(_exenv),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),Breadcrumbs=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.displayName="Breadcrumbs",r}return _inherits(t,e),_createClass(t,[{key:"_getDisplayName",value:function(e){var t=null;return"function"==typeof e.getDisplayName&&(t=e.getDisplayName()),t=e.indexRoute?t||e.indexRoute.displayName||null:t||e.displayName||null,!t&&Boolean(e.name)&&(t=e.name),!t&&this.props.displayMissing&&(t=this.props.displayMissingText),t}},{key:"_addKeyToElement",value:function(e){return e&&!e.key&&e.type?Object.assign({},e,{key:100*Math.random()}):e}},{key:"_addKeyToArrayElements",value:function(e){var t=this;return e.map(function(e){return t._addKeyToElement(e)})}},{key:"_processCustomElements",value:function(e){var t=this;return e.map(function(e){return e?Array.isArray(e)?t._addKeyToArrayElements(e):t._addKeyToElement(e):null})}},{key:"_appendAndPrependElements",value:function(e){var t=[],r=this._processCustomElements([e.shift(),e.pop()]);return r[0]&&t.unshift(r[0]),t.push(e[0]),r[1]&&t.push(r[1]),t.reduce(function(e,t){return e.concat(t)},[]).filter(function(e){return e})}},{key:"_resolveRouteName",value:function(e){var t=this._getDisplayName(e);return!t&&e.breadcrumbName&&(t=e.breadcrumbName),!t&&e.name&&(t=e.name),t}},{key:"_processRoute",value:function(e,t,r,p){var s=this;if(!e.path&&this.props.hideNoPath)return null;var n="",a=this._resolveRouteName(e);if(a&&"excludes"in this.props&&this.props.excludes.some(function(e){return e===a}))return null;var o=!0;o&&(o=Boolean(e.childRoutes)),n=r?"":this.props.separator,o||(n=""),Object.prototype.hasOwnProperty.call(e,"breadcrumblink")&&(o=e.breadcrumblink);var i=e.path.split("/")[e.path.split("/").length-1],u=void 0;if(e.path.split("/").forEach(function(t){if(":"===t.substring(0,1)&&s.props.params){u=Object.keys(s.props.params).map(function(e){return s.props.params[e]});var r=e.path.split("/").map(function(e){return":"===e.substring(0,1)?u.shift():e});e.path=r.reduce(function(e,t){return e+"/"+t}),e.staticName||":"!==i.substring(0,1)||(a=r.reduce(function(e,t){return t})),"function"==typeof e.prettifyParam&&(a=e.prettifyParam(a,s.props.params))}}),!a)return null;this.props.prettify&&(a=a.replace(/-/g," "),a=a.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}));var l=a,c=this.props.itemClass;return o?p&&(l=_react2["default"].createElement(this.props.Link||_reactRouter.Link,{to:e.path},a)):c+=" "+this.props.activeItemClass,p?_react2["default"].createElement(this.props.itemElement,{className:c,key:100*Math.random()},l,n):l}},{key:"_buildRoutes",value:function(e,t,r,p){var s=this,n=[],a="/";return e=e.map(function(e,t){var r=Object.assign({},e);if("function"==typeof e.prettifyParam&&(r.prettifyParam=e.prettifyParam),"props"in r&&"path"in r.props&&(r.path=r.props.path,r.children=r.props.children,r.name=r.props.name,r.prettifyParam=r.props.prettifyParam),!r.path)return null;"/"===r.path.charAt(0)?a=r.path:("/"!==a.charAt(a.length-1)&&(a+="/"),a+=r.path),t>0&&"/"!==r.path.charAt(0)&&(r.path=a);var p=s._resolveRouteName(r);return!s.props.displayMissing&&!p||"excludes"in s.props&&s.props.excludes.some(function(e){return e===p})?null:r}).filter(function(e){return Boolean(e)}),n=e.map(function(r,p){return s._processRoute(r,e.length,e.length===p+1,t)}).filter(function(e){return Boolean(e)}),_exenv2["default"].canUseDOM&&window&&window.document&&"setDocumentTitle"in this.props&&this.props.setDocumentTitle&&n[n.length-1].props.children[0]>0&&(window.document.title=n[n.length-1].props.children[0].props.children),(r||p)&&(n=this._appendAndPrependElements([r,n,p])),t?_react2["default"].createElement(this.props.wrapperElement,{className:this.props.customClass||this.props.wrapperClass},n):n}},{key:"render",value:function(){return this._buildRoutes(this.props.routes,this.props.createElement,this.props.prepend,this.props.append)}}]),t}(_react2["default"].Component);Breadcrumbs.propTypes={params:_propTypes2["default"].object.isRequired,prepend:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),append:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),separator:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),createElement:_propTypes2["default"].bool,Link:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),displayMissing:_propTypes2["default"].bool,prettify:_propTypes2["default"].bool,displayMissingText:_propTypes2["default"].string,wrapperElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),wrapperClass:_propTypes2["default"].string,itemElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),itemClass:_propTypes2["default"].string,customClass:_propTypes2["default"].string,activeItemClass:_propTypes2["default"].string,excludes:_propTypes2["default"].arrayOf(_propTypes2["default"].string),hideNoPath:_propTypes2["default"].bool,routes:_propTypes2["default"].arrayOf(_propTypes2["default"].object).isRequired,setDocumentTitle:_propTypes2["default"].bool},Breadcrumbs.defaultProps={prepend:!1,append:!1,separator:" > ",createElement:!0,displayMissing:!0,displayMissingText:"Missing name prop from Route",wrapperElement:"div",wrapperClass:"breadcrumbs",itemElement:"span",itemClass:"",activeItemClass:"",excludes:[""],prettify:!1,hideNoPath:!0,setDocumentTitle:!1},exports["default"]=Breadcrumbs;
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var p=t[r];p.enumerable=p.enumerable||!1,p.configurable=!0,"value"in p&&(p.writable=!0),Object.defineProperty(e,p.key,p)}}return function(t,r,p){return r&&e(t.prototype,r),p&&e(t,p),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactRouter=require("react-router"),_exenv=require("exenv"),_exenv2=_interopRequireDefault(_exenv),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),Breadcrumbs=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.displayName="Breadcrumbs",r}return _inherits(t,e),_createClass(t,[{key:"_getDisplayName",value:function(e){var t=null;return"function"==typeof e.getDisplayName&&(t=e.getDisplayName.bind(null,this.props.params)()),t=e.indexRoute?t||e.indexRoute.displayName||null:t||e.displayName||null,!t&&Boolean(e.name)&&(t=e.name),!t&&this.props.displayMissing&&(t=this.props.displayMissingText),t}},{key:"_addKeyToElement",value:function(e){return e&&!e.key&&e.type?Object.assign({},e,{key:100*Math.random()}):e}},{key:"_addKeyToArrayElements",value:function(e){var t=this;return e.map(function(e){return t._addKeyToElement(e)})}},{key:"_processCustomElements",value:function(e){var t=this;return e.map(function(e){return e?Array.isArray(e)?t._addKeyToArrayElements(e):t._addKeyToElement(e):null})}},{key:"_appendAndPrependElements",value:function(e){var t=[],r=this._processCustomElements([e.shift(),e.pop()]);return r[0]&&t.unshift(r[0]),t.push(e[0]),r[1]&&t.push(r[1]),t.reduce(function(e,t){return e.concat(t)},[]).filter(function(e){return e})}},{key:"_resolveRouteName",value:function(e){var t=this._getDisplayName(e);return!t&&e.breadcrumbName&&(t=e.breadcrumbName),!t&&e.name&&(t=e.name),t}},{key:"_processRoute",value:function(e,t,r,p){var s=this;if(!e.path&&this.props.hideNoPath)return null;var a="",n=this._resolveRouteName(e);if(n&&"excludes"in this.props&&this.props.excludes.some(function(e){return e===n}))return null;var o=!0;o&&(o=Boolean(e.childRoutes)),a=r?"":this.props.separator,o||(a=""),Object.prototype.hasOwnProperty.call(e,"breadcrumblink")&&(o=e.breadcrumblink);var i=e.path.split("/")[e.path.split("/").length-1],u=void 0;if(e.path.split("/").forEach(function(t){if(":"===t.substring(0,1)&&s.props.params){u=Object.keys(s.props.params).map(function(e){return s.props.params[e]});var r=e.path.split("/").map(function(e){return":"===e.substring(0,1)?u.shift():e});e.path=r.reduce(function(e,t){return e+"/"+t}),e.staticName||":"!==i.substring(0,1)||(n="function"==typeof e.getDisplayName?e.getDisplayName.bind(null,s.props.params)():r.reduce(function(e,t){return t})),"function"==typeof e.prettifyParam&&(n=e.prettifyParam(n,s.props.params))}}),!n)return null;this.props.prettify&&(n=n.replace(/-/g," "),n=n.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}));var l=n,c=this.props.itemClass;return o?p&&(l=_react2["default"].createElement(this.props.Link||_reactRouter.Link,{to:e.path},n)):c+=" "+this.props.activeItemClass,p?_react2["default"].createElement(this.props.itemElement,{className:c,key:100*Math.random()},l,a):l}},{key:"_buildRoutes",value:function(e,t,r,p){var s=this,a=[],n="/";return e=e.map(function(e,t){var r=Object.assign({},e);if("function"==typeof e.prettifyParam&&(r.prettifyParam=e.prettifyParam),"props"in r&&"path"in r.props&&(r.path=r.props.path,r.children=r.props.children,r.name=r.props.name,r.prettifyParam=r.props.prettifyParam),!r.path)return null;"/"===r.path.charAt(0)?n=r.path:("/"!==n.charAt(n.length-1)&&(n+="/"),n+=r.path),t>0&&"/"!==r.path.charAt(0)&&(r.path=n);var p=s._resolveRouteName(r);return!s.props.displayMissing&&!p||"excludes"in s.props&&s.props.excludes.some(function(e){return e===p})?null:r}).filter(function(e){return Boolean(e)}),a=e.map(function(r,p){return s._processRoute(r,e.length,e.length===p+1,t)}).filter(function(e){return Boolean(e)}),_exenv2["default"].canUseDOM&&window&&window.document&&"setDocumentTitle"in this.props&&this.props.setDocumentTitle&&a[a.length-1].props.children[0]>0&&(window.document.title=a[a.length-1].props.children[0].props.children),(r||p)&&(a=this._appendAndPrependElements([r,a,p])),t?_react2["default"].createElement(this.props.wrapperElement,{className:this.props.customClass||this.props.wrapperClass},a):a}},{key:"render",value:function(){return this._buildRoutes(this.props.routes,this.props.createElement,this.props.prepend,this.props.append)}}]),t}(_react2["default"].Component);Breadcrumbs.propTypes={params:_propTypes2["default"].object.isRequired,prepend:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),append:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),separator:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),createElement:_propTypes2["default"].bool,Link:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),displayMissing:_propTypes2["default"].bool,prettify:_propTypes2["default"].bool,displayMissingText:_propTypes2["default"].string,wrapperElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),wrapperClass:_propTypes2["default"].string,itemElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),itemClass:_propTypes2["default"].string,customClass:_propTypes2["default"].string,activeItemClass:_propTypes2["default"].string,excludes:_propTypes2["default"].arrayOf(_propTypes2["default"].string),hideNoPath:_propTypes2["default"].bool,routes:_propTypes2["default"].arrayOf(_propTypes2["default"].object).isRequired,setDocumentTitle:_propTypes2["default"].bool},Breadcrumbs.defaultProps={prepend:!1,append:!1,separator:" > ",createElement:!0,displayMissing:!0,displayMissingText:"Missing name prop from Route",wrapperElement:"div",wrapperClass:"breadcrumbs",itemElement:"span",itemClass:"",activeItemClass:"",excludes:[""],prettify:!1,hideNoPath:!0,setDocumentTitle:!1},exports["default"]=Breadcrumbs;
 //# sourceMappingURL=dist/react-breadcrumbs.min.js.map

index.js

@@ -1,2 +0,2 @@
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var p=t[r];p.enumerable=p.enumerable||!1,p.configurable=!0,"value"in p&&(p.writable=!0),Object.defineProperty(e,p.key,p)}}return function(t,r,p){return r&&e(t.prototype,r),p&&e(t,p),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactRouter=require("react-router"),_exenv=require("exenv"),_exenv2=_interopRequireDefault(_exenv),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),Breadcrumbs=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.displayName="Breadcrumbs",r}return _inherits(t,e),_createClass(t,[{key:"_getDisplayName",value:function(e){var t=null;return"function"==typeof e.getDisplayName&&(t=e.getDisplayName()),t=e.indexRoute?t||e.indexRoute.displayName||null:t||e.displayName||null,!t&&Boolean(e.name)&&(t=e.name),!t&&this.props.displayMissing&&(t=this.props.displayMissingText),t}},{key:"_addKeyToElement",value:function(e){return e&&!e.key&&e.type?Object.assign({},e,{key:100*Math.random()}):e}},{key:"_addKeyToArrayElements",value:function(e){var t=this;return e.map(function(e){return t._addKeyToElement(e)})}},{key:"_processCustomElements",value:function(e){var t=this;return e.map(function(e){return e?Array.isArray(e)?t._addKeyToArrayElements(e):t._addKeyToElement(e):null})}},{key:"_appendAndPrependElements",value:function(e){var t=[],r=this._processCustomElements([e.shift(),e.pop()]);return r[0]&&t.unshift(r[0]),t.push(e[0]),r[1]&&t.push(r[1]),t.reduce(function(e,t){return e.concat(t)},[]).filter(function(e){return e})}},{key:"_resolveRouteName",value:function(e){var t=this._getDisplayName(e);return!t&&e.breadcrumbName&&(t=e.breadcrumbName),!t&&e.name&&(t=e.name),t}},{key:"_processRoute",value:function(e,t,r,p){var s=this;if(!e.path&&this.props.hideNoPath)return null;var n="",a=this._resolveRouteName(e);if(a&&"excludes"in this.props&&this.props.excludes.some(function(e){return e===a}))return null;var o=!0;o&&(o=Boolean(e.childRoutes)),n=r?"":this.props.separator,o||(n=""),Object.prototype.hasOwnProperty.call(e,"breadcrumblink")&&(o=e.breadcrumblink);var i=e.path.split("/")[e.path.split("/").length-1],u=void 0;if(e.path.split("/").forEach(function(t){if(":"===t.substring(0,1)&&s.props.params){u=Object.keys(s.props.params).map(function(e){return s.props.params[e]});var r=e.path.split("/").map(function(e){return":"===e.substring(0,1)?u.shift():e});e.path=r.reduce(function(e,t){return e+"/"+t}),e.staticName||":"!==i.substring(0,1)||(a=r.reduce(function(e,t){return t})),"function"==typeof e.prettifyParam&&(a=e.prettifyParam(a,s.props.params))}}),!a)return null;this.props.prettify&&(a=a.replace(/-/g," "),a=a.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}));var l=a,c=this.props.itemClass;return o?p&&(l=_react2["default"].createElement(this.props.Link||_reactRouter.Link,{to:e.path},a)):c+=" "+this.props.activeItemClass,p?_react2["default"].createElement(this.props.itemElement,{className:c,key:100*Math.random()},l,n):l}},{key:"_buildRoutes",value:function(e,t,r,p){var s=this,n=[],a="/";return e=e.map(function(e,t){var r=Object.assign({},e);if("function"==typeof e.prettifyParam&&(r.prettifyParam=e.prettifyParam),"props"in r&&"path"in r.props&&(r.path=r.props.path,r.children=r.props.children,r.name=r.props.name,r.prettifyParam=r.props.prettifyParam),!r.path)return null;"/"===r.path.charAt(0)?a=r.path:("/"!==a.charAt(a.length-1)&&(a+="/"),a+=r.path),t>0&&"/"!==r.path.charAt(0)&&(r.path=a);var p=s._resolveRouteName(r);return!s.props.displayMissing&&!p||"excludes"in s.props&&s.props.excludes.some(function(e){return e===p})?null:r}).filter(function(e){return Boolean(e)}),n=e.map(function(r,p){return s._processRoute(r,e.length,e.length===p+1,t)}).filter(function(e){return Boolean(e)}),_exenv2["default"].canUseDOM&&window&&window.document&&"setDocumentTitle"in this.props&&this.props.setDocumentTitle&&n[n.length-1].props.children[0]>0&&(window.document.title=n[n.length-1].props.children[0].props.children),(r||p)&&(n=this._appendAndPrependElements([r,n,p])),t?_react2["default"].createElement(this.props.wrapperElement,{className:this.props.customClass||this.props.wrapperClass},n):n}},{key:"render",value:function(){return this._buildRoutes(this.props.routes,this.props.createElement,this.props.prepend,this.props.append)}}]),t}(_react2["default"].Component);Breadcrumbs.propTypes={params:_propTypes2["default"].object.isRequired,prepend:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),append:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),separator:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),createElement:_propTypes2["default"].bool,Link:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),displayMissing:_propTypes2["default"].bool,prettify:_propTypes2["default"].bool,displayMissingText:_propTypes2["default"].string,wrapperElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),wrapperClass:_propTypes2["default"].string,itemElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),itemClass:_propTypes2["default"].string,customClass:_propTypes2["default"].string,activeItemClass:_propTypes2["default"].string,excludes:_propTypes2["default"].arrayOf(_propTypes2["default"].string),hideNoPath:_propTypes2["default"].bool,routes:_propTypes2["default"].arrayOf(_propTypes2["default"].object).isRequired,setDocumentTitle:_propTypes2["default"].bool},Breadcrumbs.defaultProps={prepend:!1,append:!1,separator:" > ",createElement:!0,displayMissing:!0,displayMissingText:"Missing name prop from Route",wrapperElement:"div",wrapperClass:"breadcrumbs",itemElement:"span",itemClass:"",activeItemClass:"",excludes:[""],prettify:!1,hideNoPath:!0,setDocumentTitle:!1},exports["default"]=Breadcrumbs;
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var p=t[r];p.enumerable=p.enumerable||!1,p.configurable=!0,"value"in p&&(p.writable=!0),Object.defineProperty(e,p.key,p)}}return function(t,r,p){return r&&e(t.prototype,r),p&&e(t,p),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactRouter=require("react-router"),_exenv=require("exenv"),_exenv2=_interopRequireDefault(_exenv),_propTypes=require("prop-types"),_propTypes2=_interopRequireDefault(_propTypes),Breadcrumbs=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.displayName="Breadcrumbs",r}return _inherits(t,e),_createClass(t,[{key:"_getDisplayName",value:function(e){var t=null;return"function"==typeof e.getDisplayName&&(t=e.getDisplayName.bind(null,this.props.params)()),t=e.indexRoute?t||e.indexRoute.displayName||null:t||e.displayName||null,!t&&Boolean(e.name)&&(t=e.name),!t&&this.props.displayMissing&&(t=this.props.displayMissingText),t}},{key:"_addKeyToElement",value:function(e){return e&&!e.key&&e.type?Object.assign({},e,{key:100*Math.random()}):e}},{key:"_addKeyToArrayElements",value:function(e){var t=this;return e.map(function(e){return t._addKeyToElement(e)})}},{key:"_processCustomElements",value:function(e){var t=this;return e.map(function(e){return e?Array.isArray(e)?t._addKeyToArrayElements(e):t._addKeyToElement(e):null})}},{key:"_appendAndPrependElements",value:function(e){var t=[],r=this._processCustomElements([e.shift(),e.pop()]);return r[0]&&t.unshift(r[0]),t.push(e[0]),r[1]&&t.push(r[1]),t.reduce(function(e,t){return e.concat(t)},[]).filter(function(e){return e})}},{key:"_resolveRouteName",value:function(e){var t=this._getDisplayName(e);return!t&&e.breadcrumbName&&(t=e.breadcrumbName),!t&&e.name&&(t=e.name),t}},{key:"_processRoute",value:function(e,t,r,p){var s=this;if(!e.path&&this.props.hideNoPath)return null;var a="",n=this._resolveRouteName(e);if(n&&"excludes"in this.props&&this.props.excludes.some(function(e){return e===n}))return null;var o=!0;o&&(o=Boolean(e.childRoutes)),a=r?"":this.props.separator,o||(a=""),Object.prototype.hasOwnProperty.call(e,"breadcrumblink")&&(o=e.breadcrumblink);var i=e.path.split("/")[e.path.split("/").length-1],u=void 0;if(e.path.split("/").forEach(function(t){if(":"===t.substring(0,1)&&s.props.params){u=Object.keys(s.props.params).map(function(e){return s.props.params[e]});var r=e.path.split("/").map(function(e){return":"===e.substring(0,1)?u.shift():e});e.path=r.reduce(function(e,t){return e+"/"+t}),e.staticName||":"!==i.substring(0,1)||(n="function"==typeof e.getDisplayName?e.getDisplayName.bind(null,s.props.params)():r.reduce(function(e,t){return t})),"function"==typeof e.prettifyParam&&(n=e.prettifyParam(n,s.props.params))}}),!n)return null;this.props.prettify&&(n=n.replace(/-/g," "),n=n.replace(/\w\S*/g,function(e){return e.charAt(0).toUpperCase()+e.substr(1).toLowerCase()}));var l=n,c=this.props.itemClass;return o?p&&(l=_react2["default"].createElement(this.props.Link||_reactRouter.Link,{to:e.path},n)):c+=" "+this.props.activeItemClass,p?_react2["default"].createElement(this.props.itemElement,{className:c,key:100*Math.random()},l,a):l}},{key:"_buildRoutes",value:function(e,t,r,p){var s=this,a=[],n="/";return e=e.map(function(e,t){var r=Object.assign({},e);if("function"==typeof e.prettifyParam&&(r.prettifyParam=e.prettifyParam),"props"in r&&"path"in r.props&&(r.path=r.props.path,r.children=r.props.children,r.name=r.props.name,r.prettifyParam=r.props.prettifyParam),!r.path)return null;"/"===r.path.charAt(0)?n=r.path:("/"!==n.charAt(n.length-1)&&(n+="/"),n+=r.path),t>0&&"/"!==r.path.charAt(0)&&(r.path=n);var p=s._resolveRouteName(r);return!s.props.displayMissing&&!p||"excludes"in s.props&&s.props.excludes.some(function(e){return e===p})?null:r}).filter(function(e){return Boolean(e)}),a=e.map(function(r,p){return s._processRoute(r,e.length,e.length===p+1,t)}).filter(function(e){return Boolean(e)}),_exenv2["default"].canUseDOM&&window&&window.document&&"setDocumentTitle"in this.props&&this.props.setDocumentTitle&&a[a.length-1].props.children[0]>0&&(window.document.title=a[a.length-1].props.children[0].props.children),(r||p)&&(a=this._appendAndPrependElements([r,a,p])),t?_react2["default"].createElement(this.props.wrapperElement,{className:this.props.customClass||this.props.wrapperClass},a):a}},{key:"render",value:function(){return this._buildRoutes(this.props.routes,this.props.createElement,this.props.prepend,this.props.append)}}]),t}(_react2["default"].Component);Breadcrumbs.propTypes={params:_propTypes2["default"].object.isRequired,prepend:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),append:_propTypes2["default"].oneOfType([_propTypes2["default"].node,_propTypes2["default"].bool]),separator:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),createElement:_propTypes2["default"].bool,Link:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),displayMissing:_propTypes2["default"].bool,prettify:_propTypes2["default"].bool,displayMissingText:_propTypes2["default"].string,wrapperElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),wrapperClass:_propTypes2["default"].string,itemElement:_propTypes2["default"].oneOfType([_propTypes2["default"].element,_propTypes2["default"].string]),itemClass:_propTypes2["default"].string,customClass:_propTypes2["default"].string,activeItemClass:_propTypes2["default"].string,excludes:_propTypes2["default"].arrayOf(_propTypes2["default"].string),hideNoPath:_propTypes2["default"].bool,routes:_propTypes2["default"].arrayOf(_propTypes2["default"].object).isRequired,setDocumentTitle:_propTypes2["default"].bool},Breadcrumbs.defaultProps={prepend:!1,append:!1,separator:" > ",createElement:!0,displayMissing:!0,displayMissingText:"Missing name prop from Route",wrapperElement:"div",wrapperClass:"breadcrumbs",itemElement:"span",itemClass:"",activeItemClass:"",excludes:[""],prettify:!1,hideNoPath:!0,setDocumentTitle:!1},exports["default"]=Breadcrumbs;
 //# sourceMappingURL=dist/react-breadcrumbs.min.js.map

index.jsx

@@ -15,5 +15,5 @@ /* global window */
 import React from 'react'
-import { Link } from 'react-router'
+import {Link} from 'react-router'
 import ExecutionEnvironment from 'exenv'
-import PropTypes from "prop-types"
+import PropTypes from 'prop-types'
 
@@ -31,3 +31,3 @@ class Breadcrumbs extends React.Component {
     if (typeof route.getDisplayName === 'function') {
-      name = route.getDisplayName()
+      name = route.getDisplayName.bind(null, this.props.params)()
     }
@@ -58,3 +58,3 @@
     return (el && !el.key && el.type)
-      ? Object.assign({}, el, { 'key': Math.random() * 100 })
+      ? Object.assign({}, el, {'key': Math.random() * 100})
       : el
@@ -157,6 +157,11 @@ }
       })
+
       if (!route.staticName && currentKey.substring(0, 1) === ':') {
+        if (typeof route.getDisplayName === 'function') {
+          name = route.getDisplayName.bind(null, this.props.params)()
+        } else {
         name = pathWithParam.reduce((start, link) => {
           return link
         })
+        }
       }
@@ -187,3 +192,3 @@
           this.props.Link || Link,
-          { 'to': route.path },
+          {'to': route.path},
           name
@@ -201,3 +206,3 @@ )
       this.props.itemElement,
-      { 'className': itemClass, 'key': Math.random() * 100 },
+      {'className': itemClass, 'key': Math.random() * 100},
       link,
@@ -273,3 +278,3 @@ separator
       this.props.wrapperElement,
-      { 'className': this.props.customClass || this.props.wrapperClass },
+      {'className': this.props.customClass || this.props.wrapperClass},
       crumbs
@@ -276,0 +281,0 @@ )

package.json

 {
   "name": "react-breadcrumbs",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Automatic breadcrumbs for react-router",
@@ -76,8 +76,8 @@ "main": "index.js",
     "postcss-cli": "^3.1.1",
-    "prop-types": "^15.5.7",
+    "prop-types": "^15.5.8",
     "react": "^15.3.2",
-    "react-addons-test-utils": "^15.3.2",
-    "react-dom": "^15.3.2",
+    "react-dom": "^15.5.4",
     "react-router": "3.x",
-    "tape": "^4.2.2",
+    "react-test-renderer": "^15.5.4",
+    "tape": "^4.6.3",
     "uglifyjs": "^2.4.10",
@@ -84,0 +84,0 @@ "webpack": "^2.3.3",

README.md

@@ -65,2 +65,10 @@ # React Breadcrumbs
 
+You can also access props from the component itself to name the crumb dynamically, like so (from *routes.jsx* in the demo folder):
+
+```jsx
+    <Route name="UserLocator" path=":userId" component={User}
+               getDisplayName={param => Number(param.userId) === 1 ? "John" : "Rambo"}>
+```
+
+
 ## Usage
@@ -67,0 +75,0 @@

test/usersRoute.js

@@ -1,13 +0,12 @@
-import React from 'react';
-import { Route }from 'react-router';
-import Breadcrumbs from '../index.jsx';
-import test from 'tape';
-import ReactTestUtils from 'react-addons-test-utils';
+import React from 'react'
+import Breadcrumbs from '../index.jsx'
+import test from 'tape'
+import shallow from 'react-test-renderer/shallow'
 
 var userlist = [
-  {id:"1", name:"John"},
-  {id:"2", name:"Rambo"},
-];
+  {id: "1", name: "John"},
+  {id: "2", name: "Rambo"},
+]
 
-var UserRoutes=[
+var UserRoutes = [
   {
@@ -42,81 +41,84 @@ "name": "Users",
   }
-];
+]
 
-var prepend = <section />;
-var append = <section />;
-var arrayOfItems = [ <section />, <output /> ];
+var prepend = <section />
+var append = <section />
+var arrayOfItems = [<section />, <output />]
 
 test('Render breadcrumbs', (assert) => {
-  var builder = new Breadcrumbs;
-  builder.props={routes:UserRoutes};
-  var res = builder.render(false);
+  var builder = new Breadcrumbs
+  builder.props = {routes: UserRoutes}
+  var res = builder.render(false)
   assert.equal(
-    res.reduce((initialName,name)=>
-               {return initialName+","+name}),
-               'Users,User-locator',
-               'User Breadcrumbs generated'
-  );
-  assert.end();
-});
+    res.reduce((initialName, name)=> {
+      return initialName + "," + name
+    }),
+    'Users,User-locator',
+    'User Breadcrumbs generated'
+  )
+  assert.end()
+})
 
 test('Render breadcrumbs, removing one with excludes', (assert) => {
-  var builder = new Breadcrumbs;
-  builder.props={routes:UserRoutes,excludes:['User-locator']};
-  var res = builder.render(false);
+  var builder = new Breadcrumbs
+  builder.props = {routes: UserRoutes, excludes: ['User-locator']}
+  var res = builder.render(false)
   assert.equal(
-    res.reduce((initialName,name)=>
-               {return initialName+","+name}),
-               'Users',
-               'User Breadcrumbs generated'
-  );
-  assert.end();
-});
+    res.reduce((initialName, name)=> {
+      return initialName + "," + name
+    }),
+    'Users',
+    'User Breadcrumbs generated'
+  )
+  assert.end()
+})
 
 test('Render breadcrumbs, prettify words', (assert) => {
-  var builder = new Breadcrumbs;
-  builder.props={routes:UserRoutes,prettify:true};
-  var res = builder.render(false);
+  var builder = new Breadcrumbs
+  builder.props = {routes: UserRoutes, prettify: true}
+  var res = builder.render(false)
   assert.equal(
-    res.reduce((initialName,name)=>
-               {return initialName+","+name}),
-               'Users,User Locator',
-               'User Breadcrumbs generated'
-  );
-  assert.end();
-});
+    res.reduce((initialName, name)=> {
+      return initialName + "," + name
+    }),
+    'Users,User Locator',
+    'User Breadcrumbs generated'
+  )
+  assert.end()
+})
 
 test('Render breadcrumbs and prepend element child', (assert) => {
-  var renderer = ReactTestUtils.createRenderer();
-  renderer.render(<Breadcrumbs routes={UserRoutes} prepend={prepend} />);
-  const res = renderer.getRenderOutput();
+  var renderer = shallow.createRenderer()
+  renderer.render(<Breadcrumbs params={{userId: "UserDetails"}} routes={UserRoutes} prepend={prepend}/>)
+  const res = renderer.getRenderOutput()
   // 2 for breadcrumbs, 1 for prepend
-  assert.equal(res.props.children.length, 3);
-  assert.end();
-});
+  assert.equal(res.props.children.length, 3)
+  assert.end()
+})
 
 test('Render breadcrumbs and append element child', (assert) => {
-  var renderer = ReactTestUtils.createRenderer();
-  renderer.render(<Breadcrumbs routes={UserRoutes} append={append} />);
-  const res = renderer.getRenderOutput();
+  var renderer = shallow.createRenderer()
+  renderer.render(<Breadcrumbs params={{userId: "UserDetails"}} routes={UserRoutes} append={append}/>)
+  const res = renderer.getRenderOutput()
   // 2 for breadcrumbs, 1 for append
-  assert.equal(res.props.children.length, 3);
-  assert.end();
-});
+  assert.equal(res.props.children.length, 3)
+  assert.end()
+})
 
 test('Render breadcrumbs and prepend and append element child', (assert) => {
-  var renderer = ReactTestUtils.createRenderer();
-  renderer.render(<Breadcrumbs routes={UserRoutes} prepend={prepend} append={append} />);
-  const res = renderer.getRenderOutput();
+  var renderer = shallow.createRenderer()
+  renderer.render(<Breadcrumbs params={{userId: "UserDetails"}} routes={UserRoutes} prepend={prepend} append={append}/>)
+  const res = renderer.getRenderOutput()
   // 2 for breadcrumbs, 1 for prepend, 1 for append
-  assert.equal(res.props.children.length, 4);
-  assert.end();
-});
+  assert.equal(res.props.children.length, 4)
+  assert.end()
+})
 
 test('Render breadcrumbs and append and prepend array of element child', (assert) => {
-  var renderer = ReactTestUtils.createRenderer();
-  renderer.render(<Breadcrumbs routes={UserRoutes} append={arrayOfItems} prepend={arrayOfItems}/>);
-  const res = renderer.getRenderOutput();
+  var renderer = shallow.createRenderer()
+  renderer.render(<Breadcrumbs params={{userId: "UserDetails"}} routes={UserRoutes} append={arrayOfItems} prepend={arrayOfItems}/>)
+  const res = renderer.getRenderOutput()
   // 2 for breadcrumbs, 2 x size of array of items
-  assert.equal(res.props.children.length, 2 + arrayOfItems.length * 2);
-  assert.end();
-});
+  assert.equal(res.props.children.length, 2 + arrayOfItems.length * 2)
+  assert.end()
+})

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1343005

increased by0.07%

Lines of code

4530

increased by0.2%

Number of lines in readme file

197

increased by4.23%

No dependency changes