@up-group-ui/react-controls
Version:
Up shared react controls
23 lines • 1.97 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TabHeads = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var typestyle_1 = require("typestyle");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var framer_motion_1 = require("framer-motion");
var styles_1 = require("./styles");
var TabHeads = function (props) {
var heads = props.heads.map(function (v, i) {
return ((0, jsx_runtime_1.jsx)(TabHeadItem, { selectTabKey: props.selectTabKey, tab: v, tabKey: i, selectedTabKey: props.selectedTabKey }, i));
});
return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimateSharedLayout, { children: (0, jsx_runtime_1.jsx)("ul", (0, tslib_1.__assign)({ className: (0, classnames_1.default)('up-nav-tab', (0, typestyle_1.style)((0, tslib_1.__assign)({}, styles_1.tabHeader))), style: { transform: 'translateZ(0)' } }, { children: heads }), void 0) }, void 0));
};
exports.TabHeads = TabHeads;
var TabHeadItem = function (props) {
var selectedTabClass = props.selectedTabKey == props.tabKey ? 'up-nav-tab-item__selected' : '';
return ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.li, (0, tslib_1.__assign)({ animate: true, className: (0, classnames_1.default)('up-nav-tab-item', selectedTabClass, (0, typestyle_1.style)((0, tslib_1.__assign)({}, (0, styles_1.tabItem)(props)))), onClick: function () {
props.selectTabKey(props.tabKey);
} }, { children: [props.selectedTabKey == props.tabKey && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { animate: true, layoutId: styles_1.headTabBorder, className: styles_1.headTabBorder }, void 0), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { animate: true, layoutId: styles_1.headTabArrow, className: styles_1.headTabArrow }, void 0)] }, void 0)), props.tab.head] }), void 0));
};
//# sourceMappingURL=UpNavTabHead.js.map