react-breadcrumbs-context
Version:
Flexible, router agnostic breadcrumbs implemented using React's context API.
100 lines • 9.29 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
}
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var context_1 = require("./context");
/**
* Wrap the base Provider with breadcrumb management implementation
*/
var BreadcrumbsProvider = /** @class */ (function (_super) {
__extends(BreadcrumbsProvider, _super);
function BreadcrumbsProvider() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
crumbs: []
};
_this.addCrumb = function (crumb) {
// use function version of set state
// to get accurate tracking between state
_this.setState(function (_a) {
var prevCrumbs = _a.crumbs;
return ({
crumbs: prevCrumbs.concat([crumb])
});
});
};
_this.findCrumb = function (crumb, crumbs) {
for (var i = 0; i < crumbs.length; i++) {
var _a = crumbs[i], title = _a.title, path = _a.path;
if (crumb.title === title && crumb.path === path) {
return i;
}
}
return undefined;
};
_this.removeCrumb = function (crumbToRemove) {
_this.setState(function (_a) {
var prevCrumbs = _a.crumbs;
var crumbIndex = _this.findCrumb(crumbToRemove, prevCrumbs);
var crumbs;
if (crumbIndex !== undefined) {
crumbs = prevCrumbs.slice();
crumbs.splice(crumbIndex, 1);
}
else {
crumbs = prevCrumbs;
}
return { crumbs: crumbs };
});
};
_this.replaceCrumb = function (crumbToReplace, crumbReplacement) {
_this.setState(function (_a) {
var prevCrumbs = _a.crumbs;
var crumbIndex = _this.findCrumb(crumbToReplace, prevCrumbs);
var crumbs;
if (crumbIndex !== undefined) {
crumbs = prevCrumbs.slice();
crumbs.splice(crumbIndex, 1, crumbReplacement);
}
else {
crumbs = prevCrumbs;
}
return { crumbs: crumbs };
});
};
return _this;
}
BreadcrumbsProvider.prototype.render = function () {
var crumbs = this.state.crumbs;
var children = this.props.children;
var context = {
crumbs: crumbs,
addCrumb: this.addCrumb,
removeCrumb: this.removeCrumb,
replaceCrumb: this.replaceCrumb
};
return react_1.default.createElement(context_1.Provider, { value: context }, children);
};
return BreadcrumbsProvider;
}(react_1.Component));
exports.BreadcrumbsProvider = BreadcrumbsProvider;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiUHJvdmlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvUHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSw2Q0FBc0Q7QUFDdEQscUNBQW9DO0FBWXBDOztHQUVHO0FBQ0g7SUFBa0MsdUNBQXVCO0lBQXpEO1FBQUEscUVBdUVDO1FBdEVDLFdBQUssR0FBRztZQUNOLE1BQU0sRUFBRSxFQUFFO1NBQ1gsQ0FBQTtRQUVELGNBQVEsR0FBRyxVQUFDLEtBQVk7WUFDdEIsb0NBQW9DO1lBQ3BDLHlDQUF5QztZQUN6QyxLQUFJLENBQUMsUUFBUSxDQUFDLFVBQUMsRUFBc0I7b0JBQXBCLHNCQUFrQjtnQkFBTyxPQUFBLENBQUM7b0JBQ3pDLE1BQU0sRUFBTSxVQUFVLFNBQUUsS0FBSyxFQUFDO2lCQUMvQixDQUFDO1lBRndDLENBRXhDLENBQUMsQ0FBQTtRQUNMLENBQUMsQ0FBQTtRQUVELGVBQVMsR0FBRyxVQUFDLEtBQVksRUFBRSxNQUFlO1lBQ3hDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxNQUFNLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO2dCQUNoQyxJQUFBLGNBQTJCLEVBQXpCLGdCQUFLLEVBQUUsY0FBSSxDQUFlO2dCQUNsQyxJQUFJLEtBQUssQ0FBQyxLQUFLLEtBQUssS0FBSyxJQUFJLEtBQUssQ0FBQyxJQUFJLEtBQUssSUFBSSxFQUFFO29CQUNoRCxPQUFPLENBQUMsQ0FBQztpQkFDVjthQUNGO1lBRUQsT0FBTyxTQUFTLENBQUM7UUFDbkIsQ0FBQyxDQUFBO1FBRUQsaUJBQVcsR0FBRyxVQUFDLGFBQW9CO1lBQ2pDLEtBQUksQ0FBQyxRQUFRLENBQUMsVUFBQyxFQUFzQjtvQkFBcEIsc0JBQWtCO2dCQUNqQyxJQUFNLFVBQVUsR0FBRyxLQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsRUFBRSxVQUFVLENBQUMsQ0FBQztnQkFFN0QsSUFBSSxNQUFNLENBQUE7Z0JBRVYsSUFBSSxVQUFVLEtBQUssU0FBUyxFQUFFO29CQUM1QixNQUFNLEdBQU8sVUFBVSxRQUFDLENBQUE7b0JBQ3hCLE1BQU0sQ0FBQyxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUMsQ0FBQyxDQUFBO2lCQUM3QjtxQkFBTTtvQkFDTCxNQUFNLEdBQUcsVUFBVSxDQUFBO2lCQUNwQjtnQkFFRCxPQUFPLEVBQUUsTUFBTSxRQUFBLEVBQUUsQ0FBQTtZQUNuQixDQUFDLENBQUMsQ0FBQTtRQUNKLENBQUMsQ0FBQTtRQUVELGtCQUFZLEdBQUcsVUFBQyxjQUFxQixFQUFFLGdCQUF1QjtZQUM1RCxLQUFJLENBQUMsUUFBUSxDQUFDLFVBQUMsRUFBc0I7b0JBQXBCLHNCQUFrQjtnQkFDakMsSUFBTSxVQUFVLEdBQUcsS0FBSSxDQUFDLFNBQVMsQ0FBQyxjQUFjLEVBQUUsVUFBVSxDQUFDLENBQUM7Z0JBRTlELElBQUksTUFBTSxDQUFBO2dCQUVWLElBQUksVUFBVSxLQUFLLFNBQVMsRUFBRTtvQkFDNUIsTUFBTSxHQUFPLFVBQVUsUUFBQyxDQUFDO29CQUN6QixNQUFNLENBQUMsTUFBTSxDQUFDLFVBQVUsRUFBRSxDQUFDLEVBQUUsZ0JBQWdCLENBQUMsQ0FBQztpQkFDaEQ7cUJBQU07b0JBQ0wsTUFBTSxHQUFHLFVBQVUsQ0FBQztpQkFDckI7Z0JBRUQsT0FBTyxFQUFFLE1BQU0sUUFBQSxFQUFFLENBQUM7WUFDcEIsQ0FBQyxDQUFDLENBQUE7UUFDSixDQUFDLENBQUE7O0lBZUgsQ0FBQztJQWJDLG9DQUFNLEdBQU47UUFDVSxJQUFBLDBCQUFNLENBQWU7UUFDckIsSUFBQSw4QkFBUSxDQUFlO1FBRS9CLElBQU0sT0FBTyxHQUFHO1lBQ2QsTUFBTSxRQUFBO1lBQ04sUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRO1lBQ3ZCLFdBQVcsRUFBRSxJQUFJLENBQUMsV0FBVztZQUM3QixZQUFZLEVBQUUsSUFBSSxDQUFDLFlBQVk7U0FDaEMsQ0FBQTtRQUVELE9BQU8sOEJBQUMsa0JBQVEsSUFBQyxLQUFLLEVBQUUsT0FBTyxJQUFHLFFBQVEsQ0FBWSxDQUFBO0lBQ3hELENBQUM7SUFDSCwwQkFBQztBQUFELENBQUMsQUF2RUQsQ0FBa0MsaUJBQVMsR0F1RTFDO0FBRVEsa0RBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IENvbXBvbmVudCwgUmVhY3RFbGVtZW50IH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyBQcm92aWRlciB9IGZyb20gJy4vY29udGV4dCdcblxuaW1wb3J0IHsgQ3J1bWIgfSBmcm9tICcuL3R5cGVzJ1xuXG5pbnRlcmZhY2UgUHJvcHMge1xuICBjaGlsZHJlbjogUmVhY3RFbGVtZW50PGFueT4gfCBSZWFjdEVsZW1lbnQ8YW55PltdXG59XG5cbmludGVyZmFjZSBTdGF0ZSB7XG4gIGNydW1iczogQ3J1bWJbXVxufVxuXG4vKipcbiAqIFdyYXAgdGhlIGJhc2UgUHJvdmlkZXIgd2l0aCBicmVhZGNydW1iIG1hbmFnZW1lbnQgaW1wbGVtZW50YXRpb25cbiAqL1xuY2xhc3MgQnJlYWRjcnVtYnNQcm92aWRlciBleHRlbmRzIENvbXBvbmVudDxQcm9wcywgU3RhdGU+IHtcbiAgc3RhdGUgPSB7XG4gICAgY3J1bWJzOiBbXVxuICB9XG5cbiAgYWRkQ3J1bWIgPSAoY3J1bWI6IENydW1iKSA9PiB7XG4gICAgLy8gdXNlIGZ1bmN0aW9uIHZlcnNpb24gb2Ygc2V0IHN0YXRlXG4gICAgLy8gdG8gZ2V0IGFjY3VyYXRlIHRyYWNraW5nIGJldHdlZW4gc3RhdGVcbiAgICB0aGlzLnNldFN0YXRlKCh7IGNydW1iczogcHJldkNydW1icyB9KSA9PiAoe1xuICAgICAgY3J1bWJzOiBbLi4ucHJldkNydW1icywgY3J1bWJdXG4gICAgfSkpXG4gIH1cblxuICBmaW5kQ3J1bWIgPSAoY3J1bWI6IENydW1iLCBjcnVtYnM6IENydW1iW10pOiBudW1iZXIgfCB1bmRlZmluZWQgPT4ge1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgY3J1bWJzLmxlbmd0aDsgaSsrKSB7XG4gICAgICBjb25zdCB7IHRpdGxlLCBwYXRoIH0gPSBjcnVtYnNbaV07XG4gICAgICBpZiAoY3J1bWIudGl0bGUgPT09IHRpdGxlICYmIGNydW1iLnBhdGggPT09IHBhdGgpIHtcbiAgICAgICAgcmV0dXJuIGk7XG4gICAgICB9XG4gICAgfVxuXG4gICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgfVxuXG4gIHJlbW92ZUNydW1iID0gKGNydW1iVG9SZW1vdmU6IENydW1iKSA9PiB7XG4gICAgdGhpcy5zZXRTdGF0ZSgoeyBjcnVtYnM6IHByZXZDcnVtYnMgfSkgPT4ge1xuICAgICAgY29uc3QgY3J1bWJJbmRleCA9IHRoaXMuZmluZENydW1iKGNydW1iVG9SZW1vdmUsIHByZXZDcnVtYnMpO1xuXG4gICAgICBsZXQgY3J1bWJzXG5cbiAgICAgIGlmIChjcnVtYkluZGV4ICE9PSB1bmRlZmluZWQpIHtcbiAgICAgICAgY3J1bWJzID0gWy4uLnByZXZDcnVtYnNdXG4gICAgICAgIGNydW1icy5zcGxpY2UoY3J1bWJJbmRleCwgMSlcbiAgICAgIH0gZWxzZSB7XG4gICAgICAgIGNydW1icyA9IHByZXZDcnVtYnNcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHsgY3J1bWJzIH1cbiAgICB9KVxuICB9XG5cbiAgcmVwbGFjZUNydW1iID0gKGNydW1iVG9SZXBsYWNlOiBDcnVtYiwgY3J1bWJSZXBsYWNlbWVudDogQ3J1bWIpID0+IHtcbiAgICB0aGlzLnNldFN0YXRlKCh7IGNydW1iczogcHJldkNydW1icyB9KSA9PiB7XG4gICAgICBjb25zdCBjcnVtYkluZGV4ID0gdGhpcy5maW5kQ3J1bWIoY3J1bWJUb1JlcGxhY2UsIHByZXZDcnVtYnMpO1xuXG4gICAgICBsZXQgY3J1bWJzXG5cbiAgICAgIGlmIChjcnVtYkluZGV4ICE9PSB1bmRlZmluZWQpIHtcbiAgICAgICAgY3J1bWJzID0gWy4uLnByZXZDcnVtYnNdO1xuICAgICAgICBjcnVtYnMuc3BsaWNlKGNydW1iSW5kZXgsIDEsIGNydW1iUmVwbGFjZW1lbnQpO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY3J1bWJzID0gcHJldkNydW1icztcbiAgICAgIH1cblxuICAgICAgcmV0dXJuIHsgY3J1bWJzIH07XG4gICAgfSlcbiAgfVxuXG4gIHJlbmRlcigpIHtcbiAgICBjb25zdCB7IGNydW1icyB9ID0gdGhpcy5zdGF0ZVxuICAgIGNvbnN0IHsgY2hpbGRyZW4gfSA9IHRoaXMucHJvcHNcblxuICAgIGNvbnN0IGNvbnRleHQgPSB7XG4gICAgICBjcnVtYnMsXG4gICAgICBhZGRDcnVtYjogdGhpcy5hZGRDcnVtYixcbiAgICAgIHJlbW92ZUNydW1iOiB0aGlzLnJlbW92ZUNydW1iLFxuICAgICAgcmVwbGFjZUNydW1iOiB0aGlzLnJlcGxhY2VDcnVtYlxuICAgIH1cblxuICAgIHJldHVybiA8UHJvdmlkZXIgdmFsdWU9e2NvbnRleHR9PntjaGlsZHJlbn08L1Byb3ZpZGVyPlxuICB9XG59XG5cbmV4cG9ydCB7IEJyZWFkY3J1bWJzUHJvdmlkZXIgfVxuIl19