@cimpress/react-components
Version:
React components to support the MCP styleguide
41 lines • 2.37 kB
JavaScript
import React, { Component } from 'react';
import { NavTab, NavTabItem } from '@cimpress/react-components';
const HOME_TAB = 'HOME';
const PROFILE_TAB = 'PROFILE';
export default class NavTabDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: { selectedTab: 'HOME' }
});
}
render() {
const { selectedTab } = this.state;
const homeTabContent = React.createElement("div", null, "This is the home tab.");
const profileTabContent = React.createElement("div", null, "This is the profile tab.");
const tabContent = selectedTab === HOME_TAB ? homeTabContent : profileTabContent;
return (React.createElement(React.Fragment, null,
React.createElement("div", null,
React.createElement(NavTab, null,
React.createElement(NavTabItem, { active: selectedTab === HOME_TAB },
React.createElement("button", { onClick: () => this.setState({ selectedTab: HOME_TAB }) }, "Home")),
React.createElement(NavTabItem, { active: selectedTab === PROFILE_TAB },
React.createElement("button", { onClick: () => this.setState({ selectedTab: PROFILE_TAB }) }, "Profile")),
React.createElement(NavTabItem, { disabled: true },
React.createElement("button", null, "Disabled")))),
React.createElement("div", null,
React.createElement("h3", null, "Vertically stacked"),
React.createElement(NavTab, { vertical: true },
React.createElement(NavTabItem, { active: selectedTab === HOME_TAB },
React.createElement("button", { onClick: () => this.setState({ selectedTab: HOME_TAB }) }, "Home")),
React.createElement(NavTabItem, { active: selectedTab === PROFILE_TAB },
React.createElement("button", { onClick: () => this.setState({ selectedTab: PROFILE_TAB }) }, "Profile")),
React.createElement(NavTabItem, { disabled: true },
React.createElement("button", null, "Disabled")))),
tabContent));
}
}
//# sourceMappingURL=navtab.js.map