oneframe-react
Version:
Oneframe React ## Components, Hooks, Helper Functions & State Management
48 lines (47 loc) • 2.57 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const core_1 = require("@material-ui/core");
const prop_types_1 = __importDefault(require("prop-types"));
const lodash_1 = require("lodash");
const BreadcrumbComponent = (props) => {
const { data, type, separator, maxItems, className, itemsAfterCollapse, itemsBeforeCollapse } = props;
const renderData = () => {
return data.map((item, i) => {
if (type === 'a') {
return (react_1.default.createElement(core_1.Link, { href: item.href, onClick: () => item.onClick && item.onClick(), className: `oneframe-breadcrumbs-link`, key: i },
item.icon,
item.label));
}
else {
let chipAvatar = {};
if (item.icon) {
chipAvatar = {
avatar: (react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center' } }, item.icon)),
};
}
return (react_1.default.createElement(core_1.Chip, Object.assign({ component: "a", href: item.href, label: item.label, onClick: () => item.onClick && item.onClick(), className: `oneframe-breadcrumbs-chip`, key: i }, chipAvatar)));
}
});
};
return data && data.length ? (react_1.default.createElement(core_1.Breadcrumbs, { separator: separator, maxItems: maxItems, className: `oneframe-breadcrumbs ${className}`, itemsBeforeCollapse: itemsBeforeCollapse, itemsAfterCollapse: itemsAfterCollapse }, renderData())) : null;
};
BreadcrumbComponent.propTypes = {
data: prop_types_1.default.arrayOf(prop_types_1.default.shape({
label: prop_types_1.default.string.isRequired,
href: prop_types_1.default.string.isRequired,
icon: prop_types_1.default.node,
onClick: prop_types_1.default.func,
})).isRequired,
type: prop_types_1.default.oneOf(['a', 'chip']),
className: prop_types_1.default.string,
maxItems: prop_types_1.default.number,
itemsAfterCollapse: prop_types_1.default.number,
itemsBeforeCollapse: prop_types_1.default.number,
separator: prop_types_1.default.node,
};
exports.BreadcrumbsTmp = BreadcrumbComponent;
exports.default = react_1.default.memo(BreadcrumbComponent, (p, n) => lodash_1.isEqual(p.data, n.data));