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