@cimpress/react-components
Version:
React components to support the MCP styleguide
56 lines • 3.19 kB
JavaScript
;
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 react_components_1 = require("@cimpress/react-components");
const tabcard_jsx_1 = __importDefault(require("!raw-loader!./tabcard.jsx"));
const tabcard_jsx_2 = __importDefault(require("./tabcard.jsx"));
const TabbedComponentDoc_1 = __importDefault(require("../../shared/TabbedComponentDoc"));
const CardHeaderDocs = () => {
const propInfos = [
{
name: 'tabs',
type: 'array (required)',
default: '',
description: (react_1.default.createElement("span", null,
"Array of tabs to display in the card in the format",
' ',
react_1.default.createElement("code", null, "{name: string, block: node, footer: node, href: string}"),
"where name is the name of the tab, block is the contents of the card that should be shown for that tab, footer is the (optional) card footer. href can also be optionally supplied for each tab link.")),
},
{
name: 'onSelect',
type: 'func',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "If provided, a callback function to be called when a tab has been selected."),
react_1.default.createElement("p", null,
"Signature: ",
react_1.default.createElement("code", null,
"function(event: object, selectedKey: integer) ",
'=>',
" void")),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "event:"),
" The click event"),
react_1.default.createElement("p", null,
react_1.default.createElement("code", null, "selectedKey:"),
" The currently selected tab by index"))),
},
{
name: 'selectedIndex',
type: 'number',
default: '',
description: (react_1.default.createElement("div", null,
react_1.default.createElement("p", null, "If provided the internal state is overriden and your selected tab is based on this property"),
react_1.default.createElement("p", null, "It is likely that if you are providing this value, you should pass in changes by providing `onSelect` and propertly updating this property on changes of the selected tab otherwise your clicking tabs will not propertly change"))),
},
];
return (react_1.default.createElement(TabbedComponentDoc_1.default, { name: "Tab Card", propInfos: propInfos },
react_1.default.createElement(tabcard_jsx_2.default, null),
react_1.default.createElement(react_components_1.CodeExample, { code: tabcard_jsx_1.default })));
};
exports.default = CardHeaderDocs;
//# sourceMappingURL=index.js.map