@cimpress/react-components
Version:
React components to support the MCP styleguide
41 lines • 2.67 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = ComponentDoc;
const react_1 = __importDefault(require("react"));
const react_router_dom_1 = require("react-router-dom");
const react_components_1 = require("@cimpress/react-components"); // eslint-disable-line import/no-unresolved
const ComponentDocTabs = ({ activeTab, basePath }) => {
const tabs = [
{
displayName: 'Example',
route: '',
},
{
displayName: 'Props',
route: '/props',
},
];
return (react_1.default.createElement(react_components_1.NavTab, null, tabs.map(tab => (react_1.default.createElement(react_components_1.NavTabItem, { key: tab.displayName, active: activeTab === tab.route },
react_1.default.createElement(react_router_dom_1.Link, { to: `${basePath}${tab.route}` }, tab.displayName))))));
};
function ComponentDoc({ name, includeTabs = true, propInfos = [], children, remarks, }) {
// eslint-disable-line
const propsTable = (propInfos === null || propInfos === void 0 ? void 0 : propInfos.length) ? react_1.default.createElement(react_components_1.PropsTable, { propInfos: propInfos }) : null;
const { path } = (0, react_router_dom_1.useRouteMatch)();
const location = (0, react_router_dom_1.useLocation)();
return (react_1.default.createElement("div", null,
react_1.default.createElement("div", { className: "row", style: { paddingBottom: '10px' } },
react_1.default.createElement("div", { className: "col-md-12" },
react_1.default.createElement("h2", null, name),
includeTabs ? react_1.default.createElement(ComponentDocTabs, { activeTab: location.pathname.replace(path, ''), basePath: path }) : null,
react_1.default.createElement(react_router_dom_1.Switch, null,
react_1.default.createElement(react_router_dom_1.Route, { path: `${path}/example`, render: () => react_1.default.createElement("div", null, children) }),
react_1.default.createElement(react_router_dom_1.Route, { path: `${path}/props`, render: () => (react_1.default.createElement(react_1.default.Fragment, null,
remarks || null,
propsTable)) }),
react_1.default.createElement(react_router_dom_1.Route, { path: path, render: () => react_1.default.createElement("div", null, children) }))))));
}
//# sourceMappingURL=TabbedComponentDoc.js.map