react-breadcrumbs
Advanced tools
Comparing version 1.6.6 to 2.1.0
@@ -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.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 | ||
!function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=12)}([function(t,e){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e){t.exports=void 0},function(t,e){t.exports=void 0},function(t,e,n){(function(e){var n,r=e.crypto||e.msCrypto;if(r&&r.getRandomValues){var o=new Uint8Array(16);n=function(){return r.getRandomValues(o),o}}if(!n){var i=new Array(16);n=function(){for(var t,e=0;e<16;e++)0==(3&e)&&(t=4294967296*Math.random()),i[e]=t>>>((3&e)<<3)&255;return i}}t.exports=n}).call(e,n(0))},function(t,e){function n(t,e){var n=e||0,o=r;return o[t[n++]]+o[t[n++]]+o[t[n++]]+o[t[n++]]+"-"+o[t[n++]]+o[t[n++]]+"-"+o[t[n++]]+o[t[n++]]+"-"+o[t[n++]]+o[t[n++]]+"-"+o[t[n++]]+o[t[n++]]+o[t[n++]]+o[t[n++]]+o[t[n++]]+o[t[n++]]}for(var r=[],o=0;o<256;++o)r[o]=(o+256).toString(16).substr(1);t.exports=n},function(t,e){t.exports=function(t){return t.webpackPolyfill||(t.deprecate=function(){},t.paths=[],t.children||(t.children=[]),Object.defineProperty(t,"loaded",{enumerable:!0,get:function(){return t.l}}),Object.defineProperty(t,"id",{enumerable:!0,get:function(){return t.i}}),t.webpackPolyfill=1),t}},function(t,e,n){"use strict";function r(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}n.d(e,"a",function(){return c});var o=n(18),i=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=arguments[1];switch(e.type){case"ADD_CRUMB":return[].concat(r(t),[e.payload]);case"UPDATE_CRUMB":return t.map(function(t){return t.id===e.payload.id?e.payload:t});case"REMOVE_CRUMB":return t.filter(function(t){return t.id!==e.payload.id});default:return t}},a=Object(o.a)(i);e.b=a;var c=a.dispatch},function(t,e,n){"use strict";function r(t,e,n){function i(){y===b&&(y=b.slice())}function u(){return v}function s(t){if("function"!=typeof t)throw new Error("Expected listener to be a function.");var e=!0;return i(),y.push(t),function(){if(e){e=!1,i();var n=y.indexOf(t);y.splice(n,1)}}}function f(t){if(!Object(o.a)(t))throw new Error("Actions must be plain objects. Use custom middleware for async actions.");if(void 0===t.type)throw new Error('Actions may not have an undefined "type" property. Have you misspelled a constant?');if(_)throw new Error("Reducers may not dispatch actions.");try{_=!0,v=h(v,t)}finally{_=!1}for(var e=b=y,n=0;n<e.length;n++){(0,e[n])()}return t}function l(t){if("function"!=typeof t)throw new Error("Expected the nextReducer to be a function.");h=t,f({type:c.INIT})}function p(){var t,e=s;return t={subscribe:function(t){function n(){t.next&&t.next(u())}if("object"!=typeof t)throw new TypeError("Expected the observer to be an object.");return n(),{unsubscribe:e(n)}}},t[a.a]=function(){return this},t}var d;if("function"==typeof e&&void 0===n&&(n=e,e=void 0),void 0!==n){if("function"!=typeof n)throw new Error("Expected the enhancer to be a function.");return n(r)(t,e)}if("function"!=typeof t)throw new Error("Expected the reducer to be a function.");var h=t,v=e,b=[],y=b,_=!1;return f({type:c.INIT}),d={dispatch:f,subscribe:s,getState:u,replaceReducer:l},d[a.a]=p,d}n.d(e,"a",function(){return c}),e.b=r;var o=n(8),i=n(27),a=n.n(i),c={INIT:"@@redux/INIT"}},function(t,e,n){"use strict";function r(t){if(!Object(a.a)(t)||Object(o.a)(t)!=c)return!1;var e=Object(i.a)(t);if(null===e)return!0;var n=l.call(e,"constructor")&&e.constructor;return"function"==typeof n&&n instanceof n&&f.call(n)==p}var o=n(19),i=n(24),a=n(26),c="[object Object]",u=Function.prototype,s=Object.prototype,f=u.toString,l=s.hasOwnProperty,p=f.call(Object);e.a=r},function(t,e,n){"use strict";var r=n(20),o=r.a.Symbol;e.a=o},function(t,e,n){"use strict"},function(t,e,n){"use strict";function r(){for(var t=arguments.length,e=Array(t),n=0;n<t;n++)e[n]=arguments[n];return 0===e.length?function(t){return t}:1===e.length?e[0]:e.reduce(function(t,e){return function(){return t(e.apply(void 0,arguments))}})}e.a=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=n(13);n.d(e,"Breadcrumb",function(){return r.a});var o=n(33);n.d(e,"Breadcrumbs",function(){return o.a})},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var a=n(1),c=n.n(a),u=n(2),s=n.n(u),f=n(14),l=n.n(f),p=n(17),d=n.n(p),h=n(6),v=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},b=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),y=function(t){function e(){var t,n,i,a;r(this,e);for(var c=arguments.length,u=Array(c),s=0;s<c;s++)u[s]=arguments[s];return n=i=o(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(u))),i.state={id:l.a.v4()},a=n,o(i,a)}return i(e,t),b(e,[{key:"render",value:function(){return this.props.children}},{key:"componentDidMount",value:function(){var t=this.props,e=t.data;t.hidden||this._dispatch("ADD_CRUMB",e)}},{key:"componentWillReceiveProps",value:function(t){var e=t.data,n=t.hidden;d()(e,this.props.data)||this._dispatch("UPDATE_CRUMB",e),n&&!this.props.hidden?this._dispatch("REMOVE_CRUMB",e):!n&&this.props.hidden&&this._dispatch("ADD_CRUMB",e)}},{key:"componentWillUnmount",value:function(){this._dispatch("REMOVE_CRUMB",this.props.data)}},{key:"_dispatch",value:function(t,e){var n=this.state.id;Object(h.a)({type:t,payload:v({id:n},e)})}}]),e}(c.a.Component);y.propTypes={data:s.a.object.isRequired,hidden:s.a.bool,children:s.a.element.isRequired},y.defaultProps={hidden:!1},e.a=y},function(t,e,n){var r=n(15),o=n(16),i=o;i.v1=r,i.v4=o,t.exports=i},function(t,e,n){function r(t,e,n){var r=e&&n||0,o=e||[];t=t||{};var a=void 0!==t.clockseq?t.clockseq:u,l=void 0!==t.msecs?t.msecs:(new Date).getTime(),p=void 0!==t.nsecs?t.nsecs:f+1,d=l-s+(p-f)/1e4;if(d<0&&void 0===t.clockseq&&(a=a+1&16383),(d<0||l>s)&&void 0===t.nsecs&&(p=0),p>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");s=l,f=p,u=a,l+=122192928e5;var h=(1e4*(268435455&l)+p)%4294967296;o[r++]=h>>>24&255,o[r++]=h>>>16&255,o[r++]=h>>>8&255,o[r++]=255&h;var v=l/4294967296*1e4&268435455;o[r++]=v>>>8&255,o[r++]=255&v,o[r++]=v>>>24&15|16,o[r++]=v>>>16&255,o[r++]=a>>>8|128,o[r++]=255&a;for(var b=t.node||c,y=0;y<6;++y)o[r+y]=b[y];return e||i(o)}var o=n(3),i=n(4),a=o(),c=[1|a[0],a[1],a[2],a[3],a[4],a[5]],u=16383&(a[6]<<8|a[7]),s=0,f=0;t.exports=r},function(t,e,n){function r(t,e,n){var r=e&&n||0;"string"==typeof t&&(e="binary"==t?new Array(16):null,t=null),t=t||{};var a=t.random||(t.rng||o)();if(a[6]=15&a[6]|64,a[8]=63&a[8]|128,e)for(var c=0;c<16;++c)e[r+c]=a[c];return e||i(a)}var o=n(3),i=n(4);t.exports=r},function(t,e,n){(function(t,n){function r(t,e){for(var n=-1,r=null==t?0:t.length,o=0,i=[];++n<r;){var a=t[n];e(a,n,t)&&(i[o++]=a)}return i}function o(t,e){for(var n=-1,r=e.length,o=t.length;++n<r;)t[o+n]=e[n];return t}function i(t,e){for(var n=-1,r=null==t?0:t.length;++n<r;)if(e(t[n],n,t))return!0;return!1}function a(t,e){for(var n=-1,r=Array(t);++n<t;)r[n]=e(n);return r}function c(t,e){return t.has(e)}function u(t,e){return null==t?void 0:t[e]}function s(t){var e=-1,n=Array(t.size);return t.forEach(function(t,r){n[++e]=[r,t]}),n}function f(t){var e=-1,n=Array(t.size);return t.forEach(function(t){n[++e]=t}),n}function l(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}function p(){this.__data__=Ee?Ee(null):{},this.size=0}function d(t){var e=this.has(t)&&delete this.__data__[t];return this.size-=e?1:0,e}function h(t){var e=this.__data__;if(Ee){var n=e[t];return n===_t?void 0:n}return ae.call(e,t)?e[t]:void 0}function v(t){var e=this.__data__;return Ee?void 0!==e[t]:ae.call(e,t)}function b(t,e){var n=this.__data__;return this.size+=this.has(t)?0:1,n[t]=Ee&&void 0===e?_t:e,this}function y(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}function _(){this.__data__=[],this.size=0}function j(t){var e=this.__data__,n=I(e,t);return!(n<0)&&(n==e.length-1?e.pop():he.call(e,n,1),--this.size,!0)}function g(t){var e=this.__data__,n=I(e,t);return n<0?void 0:e[n][1]}function m(t){return I(this.__data__,t)>-1}function w(t,e){var n=this.__data__,r=I(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this}function O(t){var e=-1,n=null==t?0:t.length;for(this.clear();++e<n;){var r=t[e];this.set(r[0],r[1])}}function E(){this.size=0,this.__data__={hash:new l,map:new(ge||y),string:new l}}function A(t){var e=Y(this,t).delete(t);return this.size-=e?1:0,e}function x(t){return Y(this,t).get(t)}function P(t){return Y(this,t).has(t)}function k(t,e){var n=Y(this,t),r=n.size;return n.set(t,e),this.size+=n.size==r?0:1,this}function M(t){var e=-1,n=null==t?0:t.length;for(this.__data__=new O;++e<n;)this.add(t[e])}function z(t){return this.__data__.set(t,_t),this}function R(t){return this.__data__.has(t)}function S(t){var e=this.__data__=new y(t);this.size=e.size}function T(){this.__data__=new y,this.size=0}function U(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}function C(t){return this.__data__.get(t)}function N(t){return this.__data__.has(t)}function B(t,e){var n=this.__data__;if(n instanceof y){var r=n.__data__;if(!ge||r.length<yt-1)return r.push([t,e]),this.size=++n.size,this;n=this.__data__=new O(r)}return n.set(t,e),this.size=n.size,this}function D(t,e){var n=Ce(t),r=!n&&Ue(t),o=!n&&!r&&Ne(t),i=!n&&!r&&!o&&Be(t),c=n||r||o||i,u=c?a(t.length,String):[],s=u.length;for(var f in t)!e&&!ae.call(t,f)||c&&("length"==f||o&&("offset"==f||"parent"==f)||i&&("buffer"==f||"byteLength"==f||"byteOffset"==f)||et(f,s))||u.push(f);return u}function I(t,e){for(var n=t.length;n--;)if(ct(t[n][0],e))return n;return-1}function F(t,e,n){var r=e(t);return Ce(t)?r:o(r,n(t))}function W(t){return null==t?void 0===t?It:St:ve&&ve in Object(t)?tt(t):it(t)}function V(t){return dt(t)&&W(t)==wt}function $(t,e,n,r,o){return t===e||(null==t||null==e||!dt(t)&&!dt(e)?t!==t&&e!==e:L(t,e,n,r,$,o))}function L(t,e,n,r,o,i){var a=Ce(t),c=Ce(e),u=a?Ot:Te(t),s=c?Ot:Te(e);u=u==wt?Tt:u,s=s==wt?Tt:s;var f=u==Tt,l=s==Tt,p=u==s;if(p&&Ne(t)){if(!Ne(e))return!1;a=!0,f=!1}if(p&&!f)return i||(i=new S),a||Be(t)?J(t,e,n,r,o,i):K(t,e,u,n,r,o,i);if(!(n&jt)){var d=f&&ae.call(t,"__wrapped__"),h=l&&ae.call(e,"__wrapped__");if(d||h){var v=d?t.value():t,b=h?e.value():e;return i||(i=new S),o(v,b,n,r,i)}}return!!p&&(i||(i=new S),Q(t,e,n,r,o,i))}function q(t){return!(!pt(t)||rt(t))&&(ft(t)?se:$t).test(at(t))}function G(t){return dt(t)&<(t.length)&&!!qt[W(t)]}function H(t){if(!ot(t))return _e(t);var e=[];for(var n in Object(t))ae.call(t,n)&&"constructor"!=n&&e.push(n);return e}function J(t,e,n,r,o,a){var u=n&jt,s=t.length,f=e.length;if(s!=f&&!(u&&f>s))return!1;var l=a.get(t);if(l&&a.get(e))return l==e;var p=-1,d=!0,h=n>?new M:void 0;for(a.set(t,e),a.set(e,t);++p<s;){var v=t[p],b=e[p];if(r)var y=u?r(b,v,p,e,t,a):r(v,b,p,t,e,a);if(void 0!==y){if(y)continue;d=!1;break}if(h){if(!i(e,function(t,e){if(!c(h,e)&&(v===t||o(v,t,n,r,a)))return h.push(e)})){d=!1;break}}else if(v!==b&&!o(v,b,n,r,a)){d=!1;break}}return a.delete(t),a.delete(e),d}function K(t,e,n,r,o,i,a){switch(n){case Wt:if(t.byteLength!=e.byteLength||t.byteOffset!=e.byteOffset)return!1;t=t.buffer,e=e.buffer;case Ft:return!(t.byteLength!=e.byteLength||!i(new pe(t),new pe(e)));case At:case xt:case Rt:return ct(+t,+e);case Pt:return t.name==e.name&&t.message==e.message;case Ct:case Bt:return t==e+"";case zt:var c=s;case Nt:var u=r&jt;if(c||(c=f),t.size!=e.size&&!u)return!1;var l=a.get(t);if(l)return l==e;r|=gt,a.set(t,e);var p=J(c(t),c(e),r,o,i,a);return a.delete(t),p;case Dt:if(Re)return Re.call(t)==Re.call(e)}return!1}function Q(t,e,n,r,o,i){var a=n&jt,c=X(t),u=c.length;if(u!=X(e).length&&!a)return!1;for(var s=u;s--;){var f=c[s];if(!(a?f in e:ae.call(e,f)))return!1}var l=i.get(t);if(l&&i.get(e))return l==e;var p=!0;i.set(t,e),i.set(e,t);for(var d=a;++s<u;){f=c[s];var h=t[f],v=e[f];if(r)var b=a?r(v,h,f,e,t,i):r(h,v,f,t,e,i);if(!(void 0===b?h===v||o(h,v,n,r,i):b)){p=!1;break}d||(d="constructor"==f)}if(p&&!d){var y=t.constructor,_=e.constructor;y!=_&&"constructor"in t&&"constructor"in e&&!("function"==typeof y&&y instanceof y&&"function"==typeof _&&_ instanceof _)&&(p=!1)}return i.delete(t),i.delete(e),p}function X(t){return F(t,ht,Se)}function Y(t,e){var n=t.__data__;return nt(e)?n["string"==typeof e?"string":"hash"]:n.map}function Z(t,e){var n=u(t,e);return q(n)?n:void 0}function tt(t){var e=ae.call(t,ve),n=t[ve];try{t[ve]=void 0;var r=!0}catch(t){}var o=ue.call(t);return r&&(e?t[ve]=n:delete t[ve]),o}function et(t,e){return!!(e=null==e?mt:e)&&("number"==typeof t||Lt.test(t))&&t>-1&&t%1==0&&t<e}function nt(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t}function rt(t){return!!ce&&ce in t}function ot(t){var e=t&&t.constructor;return t===("function"==typeof e&&e.prototype||re)}function it(t){return ue.call(t)}function at(t){if(null!=t){try{return ie.call(t)}catch(t){}try{return t+""}catch(t){}}return""}function ct(t,e){return t===e||t!==t&&e!==e}function ut(t){return null!=t&<(t.length)&&!ft(t)}function st(t,e){return $(t,e)}function ft(t){if(!pt(t))return!1;var e=W(t);return e==kt||e==Mt||e==Et||e==Ut}function lt(t){return"number"==typeof t&&t>-1&&t%1==0&&t<=mt}function pt(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}function dt(t){return null!=t&&"object"==typeof t}function ht(t){return ut(t)?D(t):H(t)}function vt(){return[]}function bt(){return!1}var yt=200,_t="__lodash_hash_undefined__",jt=1,gt=2,mt=9007199254740991,wt="[object Arguments]",Ot="[object Array]",Et="[object AsyncFunction]",At="[object Boolean]",xt="[object Date]",Pt="[object Error]",kt="[object Function]",Mt="[object GeneratorFunction]",zt="[object Map]",Rt="[object Number]",St="[object Null]",Tt="[object Object]",Ut="[object Proxy]",Ct="[object RegExp]",Nt="[object Set]",Bt="[object String]",Dt="[object Symbol]",It="[object Undefined]",Ft="[object ArrayBuffer]",Wt="[object DataView]",Vt=/[\\^$.*+?()[\]{}|]/g,$t=/^\[object .+?Constructor\]$/,Lt=/^(?:0|[1-9]\d*)$/,qt={};qt["[object Float32Array]"]=qt["[object Float64Array]"]=qt["[object Int8Array]"]=qt["[object Int16Array]"]=qt["[object Int32Array]"]=qt["[object Uint8Array]"]=qt["[object Uint8ClampedArray]"]=qt["[object Uint16Array]"]=qt["[object Uint32Array]"]=!0,qt[wt]=qt[Ot]=qt[Ft]=qt[At]=qt[Wt]=qt[xt]=qt[Pt]=qt[kt]=qt[zt]=qt[Rt]=qt[Tt]=qt[Ct]=qt[Nt]=qt[Bt]=qt["[object WeakMap]"]=!1;var Gt="object"==typeof t&&t&&t.Object===Object&&t,Ht="object"==typeof self&&self&&self.Object===Object&&self,Jt=Gt||Ht||Function("return this")(),Kt="object"==typeof e&&e&&!e.nodeType&&e,Qt=Kt&&"object"==typeof n&&n&&!n.nodeType&&n,Xt=Qt&&Qt.exports===Kt,Yt=Xt&&Gt.process,Zt=function(){try{return Yt&&Yt.binding&&Yt.binding("util")}catch(t){}}(),te=Zt&&Zt.isTypedArray,ee=Array.prototype,ne=Function.prototype,re=Object.prototype,oe=Jt["__core-js_shared__"],ie=ne.toString,ae=re.hasOwnProperty,ce=function(){var t=/[^.]+$/.exec(oe&&oe.keys&&oe.keys.IE_PROTO||"");return t?"Symbol(src)_1."+t:""}(),ue=re.toString,se=RegExp("^"+ie.call(ae).replace(Vt,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),fe=Xt?Jt.Buffer:void 0,le=Jt.Symbol,pe=Jt.Uint8Array,de=re.propertyIsEnumerable,he=ee.splice,ve=le?le.toStringTag:void 0,be=Object.getOwnPropertySymbols,ye=fe?fe.isBuffer:void 0,_e=function(t,e){return function(n){return t(e(n))}}(Object.keys,Object),je=Z(Jt,"DataView"),ge=Z(Jt,"Map"),me=Z(Jt,"Promise"),we=Z(Jt,"Set"),Oe=Z(Jt,"WeakMap"),Ee=Z(Object,"create"),Ae=at(je),xe=at(ge),Pe=at(me),ke=at(we),Me=at(Oe),ze=le?le.prototype:void 0,Re=ze?ze.valueOf:void 0;l.prototype.clear=p,l.prototype.delete=d,l.prototype.get=h,l.prototype.has=v,l.prototype.set=b,y.prototype.clear=_,y.prototype.delete=j,y.prototype.get=g,y.prototype.has=m,y.prototype.set=w,O.prototype.clear=E,O.prototype.delete=A,O.prototype.get=x,O.prototype.has=P,O.prototype.set=k,M.prototype.add=M.prototype.push=z,M.prototype.has=R,S.prototype.clear=T,S.prototype.delete=U,S.prototype.get=C,S.prototype.has=N,S.prototype.set=B;var Se=be?function(t){return null==t?[]:(t=Object(t),r(be(t),function(e){return de.call(t,e)}))}:vt,Te=W;(je&&Te(new je(new ArrayBuffer(1)))!=Wt||ge&&Te(new ge)!=zt||me&&"[object Promise]"!=Te(me.resolve())||we&&Te(new we)!=Nt||Oe&&"[object WeakMap]"!=Te(new Oe))&&(Te=function(t){var e=W(t),n=e==Tt?t.constructor:void 0,r=n?at(n):"";if(r)switch(r){case Ae:return Wt;case xe:return zt;case Pe:return"[object Promise]";case ke:return Nt;case Me:return"[object WeakMap]"}return e});var Ue=V(function(){return arguments}())?V:function(t){return dt(t)&&ae.call(t,"callee")&&!de.call(t,"callee")},Ce=Array.isArray,Ne=ye||bt,Be=te?function(t){return function(e){return t(e)}}(te):G;n.exports=st}).call(e,n(0),n(5)(t))},function(t,e,n){"use strict";var r=n(7);n(30),n(31),n(32),n(11),n(10);n.d(e,"a",function(){return r.b})},function(t,e,n){"use strict";function r(t){return null==t?void 0===t?u:c:s&&s in Object(t)?Object(i.a)(t):Object(a.a)(t)}var o=n(9),i=n(22),a=n(23),c="[object Null]",u="[object Undefined]",s=o.a?o.a.toStringTag:void 0;e.a=r},function(t,e,n){"use strict";var r=n(21),o="object"==typeof self&&self&&self.Object===Object&&self,i=r.a||o||Function("return this")();e.a=i},function(t,e,n){"use strict";(function(t){var n="object"==typeof t&&t&&t.Object===Object&&t;e.a=n}).call(e,n(0))},function(t,e,n){"use strict";function r(t){var e=a.call(t,u),n=t[u];try{t[u]=void 0;var r=!0}catch(t){}var o=c.call(t);return r&&(e?t[u]=n:delete t[u]),o}var o=n(9),i=Object.prototype,a=i.hasOwnProperty,c=i.toString,u=o.a?o.a.toStringTag:void 0;e.a=r},function(t,e,n){"use strict";function r(t){return i.call(t)}var o=Object.prototype,i=o.toString;e.a=r},function(t,e,n){"use strict";var r=n(25),o=Object(r.a)(Object.getPrototypeOf,Object);e.a=o},function(t,e,n){"use strict";function r(t,e){return function(n){return t(e(n))}}e.a=r},function(t,e,n){"use strict";function r(t){return null!=t&&"object"==typeof t}e.a=r},function(t,e,n){t.exports=n(28)},function(t,e,n){"use strict";(function(t,r){Object.defineProperty(e,"__esModule",{value:!0});var o,i=n(29),a=function(t){return t&&t.__esModule?t:{default:t}}(i);o="undefined"!=typeof self?self:"undefined"!=typeof window?window:void 0!==t?t:r;var c=(0,a.default)(o);e.default=c}).call(e,n(0),n(5)(t))},function(t,e,n){"use strict";function r(t){var e,n=t.Symbol;return"function"==typeof n?n.observable?e=n.observable:(e=n("observable"),n.observable=e):e="@@observable",e}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";n(7),n(8),n(10)},function(t,e,n){"use strict"},function(t,e,n){"use strict";n(11),Object.assign},function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}var a=n(1),c=n.n(a),u=n(2),s=n.n(u),f=n(34),l=(n.n(f),n(6)),p=function(){function t(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}return function(e,n,r){return n&&t(e.prototype,n),r&&t(e,r),e}}(),d="breadcrumbs",h=function(t){function e(){var t,n,i,a;r(this,e);for(var c=arguments.length,u=Array(c),s=0;s<c;s++)u[s]=arguments[s];return n=i=o(this,(t=e.__proto__||Object.getPrototypeOf(e)).call.apply(t,[this].concat(u))),i._unsubscribe=null,a=n,o(i,a)}return i(e,t),p(e,[{key:"render",value:function(){var t=this,e=this.props,n=e.className,r=e.hidden,o=e.wrapper,i=r?d+"--hidden":"",a=l.b.getState();return c.a.createElement("div",{className:n},c.a.createElement(o,{className:d+" "+i},c.a.createElement("div",{className:d+"__inner"},a.sort(function(t,e){return t.pathname.length-e.pathname.length}).map(function(e,n){return c.a.createElement("span",{key:e.id,className:d+"__section"},c.a.createElement(f.NavLink,{exact:!0,className:d+"__crumb",activeClassName:d+"__crumb--active",to:{pathname:e.pathname,search:e.search,state:e.state}},e.title),n<a.length-1?c.a.createElement("span",{className:d+"__separator"},t.props.separator):null)}))),this.props.children)}},{key:"componentWillMount",value:function(){var t=this;this._unsubscribe=l.b.subscribe(function(){t.forceUpdate()})}},{key:"componentWillUnmount",value:function(){this._unsubscribe()}}]),e}(c.a.Component);h.propTypes={className:s.a.string,hidden:s.a.bool,separator:s.a.node,wrapper:s.a.oneOfType([s.a.func,s.a.instanceOf(c.a.Component)]),children:s.a.oneOfType([s.a.node,s.a.arrayOf(s.a.node)])},h.defaultProps={className:"",hidden:!1,separator:">",wrapper:function(t){return c.a.createElement("nav",t,t.children)}},e.a=h},function(t,e){t.exports=void 0}]); | ||
//# sourceMappingURL=react-breadcrumbs.min.js.map |
{ | ||
"name": "react-breadcrumbs", | ||
"version": "1.6.6", | ||
"version": "2.1.0", | ||
"description": "Automatic breadcrumbs for react-router", | ||
"main": "index.js", | ||
"author": "Sven Anders Robbestad <anders@robbestad.com>", | ||
"homepage": "https://github.com/svenanders/react-breadcrumbs", | ||
"license": "ISC", | ||
"main": "src/index.js", | ||
"scripts": { | ||
"preversion": "make prepublish", | ||
"lint": "eslint index.jsx", | ||
"precommit": "npm run lint", | ||
"test": "./node_modules/.bin/babel-tape-runner test/*", | ||
"coverage": "NODE_ENV=test ./node_modules/nyc/bin/nyc.js npm test", | ||
"coverage-html": "NODE_ENV=test ./node_modules/nyc/bin/nyc.js npm test && ./node_modules/nyc/bin/nyc.js report --reporter=html", | ||
"build:dev": "cd demo && ../node_modules/.bin/webpack && cd ..", | ||
"watch:dev": "sane './node_modules/.bin/babel-tape-runner test/dom.js' --glob=**/*.js*" | ||
"build": "webpack", | ||
"release": "standard-version" | ||
}, | ||
"npmName": "react-breadcrumbs", | ||
"npmFileMap": [ | ||
@@ -25,13 +21,2 @@ { | ||
], | ||
"nyc": { | ||
"include": [], | ||
"extension": [ | ||
".jsx" | ||
], | ||
"require": [ | ||
"babel-register" | ||
], | ||
"sourceMap": false, | ||
"instrument": false | ||
}, | ||
"repository": { | ||
@@ -41,2 +26,5 @@ "type": "git", | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/svenanders/react-breadcrumbs/issues" | ||
}, | ||
"keywords": [ | ||
@@ -48,45 +36,30 @@ "react-component", | ||
], | ||
"author": "Sven Anders Robbestad <anders@robbestad.com>", | ||
"license": "ISC", | ||
"bugs": { | ||
"url": "https://github.com/svenanders/react-breadcrumbs/issues" | ||
}, | ||
"homepage": "https://github.com/svenanders/react-breadcrumbs", | ||
"peerDependencies": { | ||
"react": ">=0.13.2 || <16.x", | ||
"react-router": ">2.5.0 || <4.x" | ||
"react": "^15.0.0", | ||
"react-router-dom": "^4.0.0", | ||
"prop-types": "^15.5.7" | ||
}, | ||
"devDependencies": { | ||
"autoprefixer": "^6.5.1", | ||
"babel-cli": "^6.5.1", | ||
"babel-core": "^6.5.1", | ||
"babel-loader": "^6.2.2", | ||
"babel-plugin-istanbul": "^4.0.0", | ||
"babel-eslint": "^8.0.0", | ||
"babel-loader": "^7.1.2", | ||
"babel-plugin-transform-object-rest-spread": "^6.26.0", | ||
"babel-preset-es2015": "^6.18.0", | ||
"babel-preset-react": "^6.5.0", | ||
"babel-register": "^6.23.0", | ||
"babel-tape-runner": "^2.0.0", | ||
"babel-preset-stage-0": "^6.24.1", | ||
"eslint": "^3.17.0", | ||
"eslint-config-xo": "^0.18.1", | ||
"eslint-config-xo-react": "^0.11.1", | ||
"eslint-plugin-react": "^6.10.0", | ||
"eslint-plugin-unicorn": "^2.0.1", | ||
"history": "^4.3.0", | ||
"minify": "^2.0.12", | ||
"nyc": "^10.1.2", | ||
"postcss": "^5.2.5", | ||
"postcss-cli": "^3.1.1", | ||
"eslint-loader": "^1.9.0", | ||
"eslint-plugin-react": "^7.3.0", | ||
"prop-types": "^15.5.8", | ||
"react": "^15.3.2", | ||
"react-dom": "^15.5.4", | ||
"react-router": "3.x", | ||
"react-test-renderer": "^15.5.4", | ||
"tape": "^4.6.3", | ||
"uglifyjs": "^2.4.10", | ||
"webpack": "^2.3.3", | ||
"webpack-dev-server": "^2.4.2" | ||
"react-router-dom": "^4.1.1", | ||
"standard-version": "^4.2.0", | ||
"webpack": "^3.5.6" | ||
}, | ||
"dependencies": { | ||
"exenv": "^1.2.0" | ||
"lodash.isequal": "^4.5.0", | ||
"redux": "^3.6.0", | ||
"uuid": "^3.0.1" | ||
} | ||
} |
203
README.md
# React Breadcrumbs | ||
[React][1] Component for [React-Router][4]. | ||
[React][1] component use to generate a breadcrumb trail (compatible with | ||
[React Router][2]). | ||
## Installation | ||
```sh | ||
npm install react-breadcrumbs --save | ||
npm install --save react-breadcrumbs | ||
``` | ||
## Versioning | ||
The aim is to be compatible with the current | ||
version of react-router. | ||
**Please use the _master_ branch only** | ||
## Demo | ||
[>> TO THE DEMO][2] | ||
The `/demo` directory and live demo site provide one example of how this | ||
package can be used. See the [`/demo`][3] for the code powering the small | ||
site. | ||
The demo shows how the breadcrumbs will use the named routes for parent paths and | ||
parameterized paths when provided with :parameter in your routes. | ||
[>> TO THE LIVE DEMO][4] | ||
The demo is using this route setup: | ||
```jsx | ||
<Router history={hashHistory}> | ||
<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" component={UserDetails} /> | ||
</Route> | ||
</Route> | ||
<Route name='RouteName1' path='parent' component={Info}> | ||
<Route name='RouteName2' path='child1' component={Info}> | ||
<Route name='RouteName3' path=':item1' component={Info}> | ||
<Route name='RouteName4' path='child2' component={Info}> | ||
<Route name='RouteName5' path=':item2' component={Info}> | ||
<Route name='RouteName6' path='child3' component={Info}> | ||
</Route> | ||
</Route> | ||
</Route> | ||
</Route> | ||
</Route> | ||
</Route> | ||
</Route> | ||
<Route name="404: No Match for route" path="*" component={NoMatch}/> | ||
</Router> | ||
``` | ||
Routes with parameterized paths default to using the parameter value as the breadcrumb name. However, there may be a case where you want to override this behavior. | ||
If you want to force the route to use the name value provided you can add the `staticName` prop to the `Route`: | ||
```jsx | ||
<Route name="UserLocator" staticName={true} path=":userId" component={User}> | ||
``` | ||
You can then use the `getDisplayName` prop for dynamic labels as well: | ||
```jsx | ||
<Route name="UserLocator" component={User} getDisplayName={() => `Current time is ${new DateTime()}`} /> | ||
``` | ||
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 | ||
```jsx | ||
var Breadcrumbs = require('react-breadcrumbs'); | ||
This package exposes two components, a `<Breadcrumbs>` component to wrap | ||
the entire application and a `<Breadcrumb>` component to use throughout | ||
the different sections (e.g. `<Route>`s) within the application. | ||
MyComponent = React.createClass({ | ||
render: function() { | ||
return ( | ||
<div> | ||
<Breadcrumbs | ||
routes={this.props.routes} | ||
params={this.props.params} | ||
/> | ||
</div> | ||
); | ||
} | ||
}); | ||
``` | ||
### Breadcrumbs | ||
Optionally, you can add this prop (string or React element) to replace the default separator: | ||
The top-level `<Breadcrumbs>` component accepts the following `props`: | ||
```jsx | ||
<Breadcrumbs separator=" | " /> | ||
``` | ||
- `className` (string): A class name for the outer wrapper element. | ||
- `hidden` (bool): Hide the inner breadcrumbs wrapper. | ||
- `wrapper` (func|class): A react component to use for the inner wrapper. | ||
The breadcrumbs will automatically populate based on your | ||
route configuration. It requires that you have a name="" parameter | ||
in your routes for every route. It will use the displayName parameter | ||
for the Breadcrumb link. | ||
### Breadcrumb | ||
Another optional is _breadcrumbName_: | ||
- `data` (object): An extended [location descriptor][5]. See below... | ||
- `hidden` (bool): Hide an individual breadcrumb (rarely needed). | ||
```jsx | ||
<Breadcrumbs breadcrumbName="My breadcrumb name" /> | ||
``` | ||
The `data` object allows any valid [location descriptor][5] key (e.g. | ||
`pathname` or `search`) as well as a `title` prop: | ||
The point of this property is to provide a method to set a breadcrumb name for the final breadcrumb. | ||
```jsx | ||
<Breadcrumbs excludes={['App']} /> | ||
``` js | ||
{ | ||
title: 'Home', // Any valid `PropTypes.node` | ||
pathname: '/', | ||
// ... any other location descriptor values | ||
} | ||
``` | ||
This will print all breadcrumbs, except for the one where the route name is `App`. | ||
```jsx | ||
<Breadcrumbs setDocumentTitle={true} /> | ||
``` | ||
The fact that the `title` can be any valid `PropTypes.node` makes allows | ||
a huge amount of customization. The following values are all valid: | ||
Starting with v1.3.4, this will set the document title to your last item in the breadcrumbs. | ||
```jsx | ||
<Breadcrumbs createElement={false} /> | ||
``` jsx | ||
title: 'Home' | ||
title: <span title="Hovered!">Home</span> | ||
title: <CustomComponent title="Home" icon="house" /> | ||
``` | ||
This property allows you to choose whether a wrapper element is created around the breadcrumb. When false, | ||
no wrapper element is created, allowing you to create your own wrapper with custom props. | ||
```jsx | ||
<Breadcrumbs displayMissing="true|false" displayMissingText="This title is missing" /> | ||
``` | ||
This property set allows you determine if you want to display routes in the hierarchy with missing display names. | ||
default = true. When true, uses the displayMissingText property as an override to the default text. | ||
```jsx | ||
<Breadcrumbs wrapperElement="ol" itemElement="li" /> | ||
``` | ||
These properties allow you to override the default div and span elements to specify an alternate set based on your styling | ||
and markup needs. | ||
```jsx | ||
<Breadcrumbs wrapperClass="breadcrumbs" itemClass="step" /> | ||
``` | ||
These properties allow you to override the default class set on the breadcrumbs node and item elements. | ||
```jsx | ||
<Breadcrumbs hideNoPath="true|false" /> | ||
``` | ||
These properties allow you to append and/or prepend an arbitrary amount of react elements | ||
```jsx | ||
<Breadcrumbs prepend={<SingleComponent />} append={[<this>too</this>, <this>also</this]} /> | ||
``` | ||
In some cases React-Router may not have a path in the parent node. This is a valid use case when you want to wrap components | ||
with other components but they are not true routes. For these you can use the "hideNoPath" property (default=true) to either | ||
hide or show these in the breadcrumbs. | ||
## Styling | ||
The breadcrumbs are set up in a div with the class name "breadcrumbs". | ||
## Dynamic and Asynchronous data | ||
Sometimes you could like to display in the breadcrumbs something taken from a server-size call; in this case route params are meaningful for a database instead of something for being displayed in a breadcrumbs (a common case when you are working with a RESTful API). | ||
In this case you would like to display something more complex in the breadcrumbs instead of the raw param. | ||
You can use the `getDisplayName` prop combined with `staticName` to handle parametrized paths (example below suppose Redux usage): | ||
```jsx | ||
<Route name="UserLocator" component={User} staticName={true} getDisplayName={() => store.getStore().something.foo} /> | ||
``` | ||
You can also handle asynchronous loading of data in the store: | ||
```jsx | ||
<Route name="UserLocator" component={User} staticName={true} getDisplayName={() => store.getStore().something.foo || '...'} /> | ||
``` | ||
Probably initially data in the store will be empty, so in this case you need to trigger a re-render when data change. | ||
Just pass proper params to the Breadcrumbs: | ||
```jsx | ||
<Breadcrumbs something={something} /> | ||
``` | ||
[1]: https://facebook.github.io/react | ||
[2]: http://breadcrumbs.surge.sh/index.html | ||
[3]: https://github.com/svenanders/react-breadcrumbs/issues/1 | ||
[4]: https://github.com/rackt/react-router | ||
[5]: https://github.com/svenanders/react-breadcrumbs | ||
[2]: https://github.com/rackt/react-router | ||
[3]: https://github.com/svenanders/react-breadcrumbs/tree/master/demo | ||
[4]: http://breadcrumbs.surge.sh/index.html | ||
[5]: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
16
31
0
0
514541
6
746
67
1
+ Addedlodash.isequal@^4.5.0
+ Addedredux@^3.6.0
+ Addeduuid@^3.0.1
+ Added@babel/runtime@7.26.0(transitive)
+ Addedasap@2.0.6(transitive)
+ Addedcore-js@1.2.7(transitive)
+ Addedcreate-react-class@15.7.0(transitive)
+ Addedencoding@0.1.13(transitive)
+ Addedfbjs@0.8.18(transitive)
+ Addedhistory@4.10.1(transitive)
+ Addedhoist-non-react-statics@2.5.5(transitive)
+ Addediconv-lite@0.6.3(transitive)
+ Addedinvariant@2.2.4(transitive)
+ Addedis-stream@1.1.0(transitive)
+ Addedisarray@0.0.1(transitive)
+ Addedisomorphic-fetch@2.2.1(transitive)
+ Addedlodash@4.17.21(transitive)
+ Addedlodash-es@4.17.21(transitive)
+ Addedlodash.isequal@4.5.0(transitive)
+ Addednode-fetch@1.7.3(transitive)
+ Addedobject-assign@4.1.1(transitive)
+ Addedpath-to-regexp@1.9.0(transitive)
+ Addedpromise@7.3.1(transitive)
+ Addedprop-types@15.8.1(transitive)
+ Addedreact@15.7.0(transitive)
+ Addedreact-is@16.13.1(transitive)
+ Addedreact-router@4.3.1(transitive)
+ Addedreact-router-dom@4.3.1(transitive)
+ Addedredux@3.7.2(transitive)
+ Addedregenerator-runtime@0.14.1(transitive)
+ Addedresolve-pathname@3.0.0(transitive)
+ Addedsafer-buffer@2.1.2(transitive)
+ Addedsetimmediate@1.0.5(transitive)
+ Addedsymbol-observable@1.2.0(transitive)
+ Addedtiny-invariant@1.3.3(transitive)
+ Addedtiny-warning@1.0.3(transitive)
+ Addedua-parser-js@0.7.39(transitive)
+ Addeduuid@3.4.0(transitive)
+ Addedvalue-equal@1.0.1(transitive)
+ Addedwarning@4.0.3(transitive)
+ Addedwhatwg-fetch@3.6.20(transitive)
- Removedexenv@^1.2.0
- Removed@remix-run/router@1.20.0(transitive)
- Removedexenv@1.2.2(transitive)
- Removedreact@18.3.1(transitive)
- Removedreact-router@6.27.0(transitive)