@catho/quantum
Version:
Catho react components
195 lines (194 loc) • 11.3 kB
JavaScript
;
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _theme = require("../shared/theme");
var _Tab = _interopRequireDefault(require("./Tab"));
var _shared = require("../Grid/sub-components/shared");
var _jsxRuntime = require("react/jsx-runtime");
var _templateObject;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
var getSkinByThemeColor = function getSkinByThemeColor(skin, themeSkins) {
return themeSkins[skin];
};
var Navbar = _styledComponents["default"].nav.attrs({
role: 'tablist'
}).withConfig({
displayName: "TabbedView__Navbar",
componentId: "sc-131sgnr-0"
})(["display:flex;flex-grow:1;flex-shrink:1;padding:0;max-width:100%;clear:left;float:left;", ""], function (_ref) {
var skin = _ref.skin,
_ref$theme = _ref.theme,
skins = _ref$theme.components.tabbedView.skins,
breakpoints = _ref$theme.breakpoints,
large = _ref$theme.spacing.large,
fluid = _ref.fluid;
var _getSkinByThemeColor = getSkinByThemeColor(skin, skins),
background = _getSkinByThemeColor.background;
var mediumQuery = (0, _shared.query)(breakpoints).medium;
return (0, _styledComponents.css)(["background-color:", ";margin:0 0 ", "px 0;", " ", ""], background, large, fluid ? 'width: 100%; overflow-x: auto;' : null, mediumQuery(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n overflow-x: auto;\n "]))));
});
Navbar.displayName = 'Navbar';
var NavItem = _styledComponents["default"].button.attrs({
role: 'tab'
}).withConfig({
displayName: "TabbedView__NavItem",
componentId: "sc-131sgnr-1"
})(["border:none;box-sizing:border-box;cursor:pointer;flex-shrink:0;height:56px;line-height:1.5;min-width:90px;outline:none;overflow:hidden;position:relative;text-align:center;transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out;", ""], function (_ref2) {
var skin = _ref2.skin,
quantityOfItems = _ref2.quantityOfItems,
_ref2$theme = _ref2.theme,
skins = _ref2$theme.components.tabbedView.skins,
baseFontSize = _ref2$theme.baseFontSize,
medium = _ref2$theme.spacing.medium,
fluid = _ref2.fluid;
var _getSkinByThemeColor2 = getSkinByThemeColor(skin, skins),
background = _getSkinByThemeColor2.background,
text = _getSkinByThemeColor2.text,
activeText = _getSkinByThemeColor2.activeText,
hoverBackground = _getSkinByThemeColor2.hoverBackground,
border = _getSkinByThemeColor2.border;
return (0, _styledComponents.css)(["border-bottom:1px solid ", ";background-color:", ";font-size:", "px;color:", ";padding:", "px;", " &[aria-selected='true']{&::after{content:' ';background-color:", ";position:absolute;left:0px;bottom:0px;height:3px;border-radius:4px 4px 0 0;width:100%;}border-bottom:1px solid ", ";color:", ";cursor:default;}&:hover{color:", ";border-bottom:1px solid ", ";background-color:", ";}&:focus{color:", ";border:1px solid ", ";background-color:", ";padding:", "px;}"], border, background, baseFontSize, text, medium, fluid ? "\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n width: ".concat((100 / quantityOfItems).toFixed(2), "%;\n ") : null, activeText, activeText, activeText, activeText, activeText, hoverBackground, activeText, activeText, hoverBackground, medium - 1);
});
NavItem.displayName = 'NavItem';
var TitleContainer = _styledComponents["default"].span.withConfig({
displayName: "TabbedView__TitleContainer",
componentId: "sc-131sgnr-2"
})(["vertical-align:top;"]);
var BadgeContainer = _styledComponents["default"].div.withConfig({
displayName: "TabbedView__BadgeContainer",
componentId: "sc-131sgnr-3"
})(["margin-left:0px;margin-right:-8px;display:inline-block;vertical-align:top;"]);
var IconContainer = _styledComponents["default"].div.withConfig({
displayName: "TabbedView__IconContainer",
componentId: "sc-131sgnr-4"
})(["display:inline-block;height:24px;margin-left:0px;margin-right:8px;width:24px;"]);
var TabPanel = _styledComponents["default"].div.withConfig({
displayName: "TabbedView__TabPanel",
componentId: "sc-131sgnr-5"
})(["clear:left;"]);
var RenderIf = function RenderIf(_ref3) {
var conditional = _ref3.conditional,
children = _ref3.children;
return conditional && children;
};
function TabbedView(_ref4) {
var children = _ref4.children,
_ref4$activeTab = _ref4.activeTab,
activeTab = _ref4$activeTab === void 0 ? undefined : _ref4$activeTab,
_ref4$skin = _ref4.skin,
skin = _ref4$skin === void 0 ? 'neutral' : _ref4$skin,
_ref4$theme = _ref4.theme,
theme = _ref4$theme === void 0 ? {
components: _theme.components,
baseFontSize: _theme.baseFontSize,
breakpoints: _theme.breakpoints,
spacing: _theme.spacing
} : _ref4$theme,
_ref4$fluid = _ref4.fluid,
fluid = _ref4$fluid === void 0 ? false : _ref4$fluid,
_ref4$onTabClick = _ref4.onTabClick,
onTabClick = _ref4$onTabClick === void 0 ? function () {} : _ref4$onTabClick;
var _useState = (0, _react.useState)(activeTab),
_useState2 = _slicedToArray(_useState, 2),
currentTab = _useState2[0],
setCurrentTab = _useState2[1];
var tabTitles = _react.Children.toArray(children).map(function (tab) {
return tab.props.title;
});
function setDefaultTab() {
setCurrentTab(tabTitles[0]);
}
(0, _react.useEffect)(function () {
if (tabTitles.includes(activeTab)) {
setCurrentTab(activeTab);
} else {
setDefaultTab();
}
}, [activeTab]);
var handleTabClick = function handleTabClick(tab) {
setCurrentTab(tab);
onTabClick(tab);
};
var sanitize = function sanitize(str) {
return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(' ', '-').toLowerCase();
};
var quantityOfItems = _react.Children.count(children);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Navbar, {
theme: theme,
skin: skin,
fluid: fluid,
children: _react.Children.map(children, function (_ref5) {
var _ref5$props = _ref5.props,
title = _ref5$props.title,
badge = _ref5$props.badge,
icon = _ref5$props.icon;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavItem, {
fluid: fluid,
quantityOfItems: quantityOfItems,
onClick: function onClick() {
return handleTabClick(title);
},
skin: skin,
theme: theme,
id: "".concat(sanitize(title), "-tab"),
"aria-controls": "".concat(sanitize(title), "-panel"),
"aria-selected": title === currentTab,
children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, {
children: icon
}), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(TitleContainer, {
children: title
}), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(BadgeContainer, {
children: badge
})]
}, title);
})
}), _react.Children.map(children, function (_ref6) {
var _ref6$props = _ref6.props,
title = _ref6$props.title,
tabContent = _ref6$props.children;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderIf, {
conditional: title === currentTab,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabPanel, {
role: "tabpanel",
id: "".concat(sanitize(title), "-panel"),
"aria-labelledby": "".concat(sanitize(title), "-tab"),
children: tabContent
}, "".concat(sanitize(title), "-panel-key"))
});
})]
});
}
TabbedView.Tab = _Tab["default"];
TabbedView.propTypes = {
fluid: _propTypes["default"].bool,
children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
activeTab: _propTypes["default"].string,
skin: _propTypes["default"].oneOf(['neutral', 'primary']),
theme: _propTypes["default"].shape({
components: _propTypes["default"].shape({
tabbedView: _propTypes["default"].object
}),
baseFontSize: _propTypes["default"].number,
breakpoints: _propTypes["default"].object,
spacing: _propTypes["default"].object
}),
onTabClick: _propTypes["default"].func
};
TabbedView.displayName = 'TabbedView';
var _default = exports["default"] = TabbedView;