quantumai-design-system
Version:
퀀텀에이아이의 디자인 시스템
79 lines (78 loc) • 10.2 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import styled from '@emotion/styled';
import { COLORS } from '../../../styles/theme';
import Icons from '../../Base/Icon/Icons';
import Text from '../../Base/Text';
import { transitionSet } from '../../../utils/styleSet';
import { useContext, useState } from 'react';
import { NavContext } from './NavContext';
var NavItem = function (_a) {
var icon = _a.icon, title = _a.title, to = _a.to, subMenu = _a.subMenu, onClickItem = _a.onClickItem, props = __rest(_a, ["icon", "title", "to", "subMenu", "onClickItem"]);
var _b = useContext(NavContext), pathName = _b.pathName, navigate = _b.navigate, navShow = _b.navShow, setNavShow = _b.setNavShow, menuOpenKeys = _b.menuOpenKeys, setMenuOpenKeys = _b.setMenuOpenKeys, multiMenuOpen = _b.multiMenuOpen;
var _c = useState(null), subMenuRef = _c[0], setSubMenuRef = _c[1];
var MenuOpen = !!subMenu && !!navShow && (multiMenuOpen ? menuOpenKeys === null || menuOpenKeys === void 0 ? void 0 : menuOpenKeys.includes(title) : menuOpenKeys === title);
var handleHeadClick = function (e) {
onClickItem === null || onClickItem === void 0 ? void 0 : onClickItem(e);
!!subMenu ? setNavShow === null || setNavShow === void 0 ? void 0 : setNavShow(true) : to && (navigate === null || navigate === void 0 ? void 0 : navigate(to));
if (multiMenuOpen) {
var keysArg = Array.isArray(menuOpenKeys) ? menuOpenKeys : [String(menuOpenKeys)];
return MenuOpen ? setMenuOpenKeys === null || setMenuOpenKeys === void 0 ? void 0 : setMenuOpenKeys(keysArg.filter(function (v) { return v !== title; })) : setMenuOpenKeys === null || setMenuOpenKeys === void 0 ? void 0 : setMenuOpenKeys(__spreadArray(__spreadArray([], keysArg, true), [title], false));
}
else {
MenuOpen ? setMenuOpenKeys === null || setMenuOpenKeys === void 0 ? void 0 : setMenuOpenKeys('') : setMenuOpenKeys === null || setMenuOpenKeys === void 0 ? void 0 : setMenuOpenKeys(title);
}
};
var activeItem = function (to) {
if (!pathName)
return;
if (subMenu)
return subMenu.map(function (v) { return pathName.includes(v.to); }).includes(true);
if (to)
return to === '/' ? pathName === to : pathName.startsWith(to);
};
return (_jsxs(NavItemContainer, __assign({ "data-show": navShow, "data-active": activeItem(to) }, props, { children: [_jsxs("div", { className: "itemhead", onClick: handleHeadClick, children: [_jsxs("div", { className: "itemhead__content", children: [_jsx("div", { className: "icon_wrap", children: 'string' === typeof icon ? _jsx(Icons, { size: 18, name: icon }) : icon }), _jsx("div", { className: "text_wrap", children: _jsx(Text, { type: "subTitle1", wrap: 1, children: title }) })] }), !!subMenu && _jsx(Icons, { className: "itemhead__arrowicon", name: "arrowDown", rotate: MenuOpen ? 180 : 0 })] }), !!subMenu && (_jsx("div", { className: "submenu", style: { height: MenuOpen ? subMenuRef === null || subMenuRef === void 0 ? void 0 : subMenuRef.offsetHeight : 0 }, children: _jsx("ul", { ref: setSubMenuRef, children: subMenu === null || subMenu === void 0 ? void 0 : subMenu.map(function (v, i) {
return (_jsx("li", { "data-active": pathName === null || pathName === void 0 ? void 0 : pathName.includes(v.to), onClick: function (e) {
var _a;
(_a = v.onClick) === null || _a === void 0 ? void 0 : _a.call(v, e);
navigate === null || navigate === void 0 ? void 0 : navigate(v.to);
}, children: _jsx(Text, { type: "subTitle3", wrap: 1, children: v.title }) }, i));
}) }) }))] })));
};
export default NavItem;
var NavItemContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n padding: 0 10px;\n width: 100%;\n box-sizing: border-box;\n ", "\n overflow: hidden;\n\n .itemhead {\n box-sizing: border-box;\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n cursor: pointer;\n overflow: hidden;\n color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &__content {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 114px;\n .icon_wrap {\n display: flex;\n width: 18px;\n height: 18px;\n overflow: hidden;\n svg {\n width: 100%;\n height: 100%;\n fill: ", ";\n }\n }\n .text_wrap {\n position: relative;\n flex: 1;\n width: auto;\n height: 100%;\n height: 22px;\n overflow: hidden;\n p {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n transform: translateX(-100%);\n ", "\n }\n }\n }\n &__arrowicon {\n opacity: 0;\n ", "\n }\n }\n\n .submenu {\n position: relative;\n overflow: hidden;\n ", "\n ul {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 2px 0 12px;\n box-sizing: border-box;\n ", "\n li {\n display: flex;\n align-items: center;\n width: 100%;\n align-items: center;\n height: 26px;\n padding-left: 38px;\n cursor: pointer;\n &:hover {\n background-color: ", ";\n }\n p {\n color: ", ";\n }\n &[data-active='true'] p {\n color: ", ";\n }\n }\n }\n }\n &[data-active='true'] {\n .itemhead {\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n }\n &[data-show='true'] {\n padding: 0 20px;\n\n .itemhead {\n .text_wrap p {\n transform: translateX(0);\n }\n &__arrowicon {\n opacity: 1;\n }\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n padding: 0 10px;\n width: 100%;\n box-sizing: border-box;\n ", "\n overflow: hidden;\n\n .itemhead {\n box-sizing: border-box;\n height: 38px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 10px;\n cursor: pointer;\n overflow: hidden;\n color: ", ";\n\n &:hover {\n background-color: ", ";\n }\n &__content {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 114px;\n .icon_wrap {\n display: flex;\n width: 18px;\n height: 18px;\n overflow: hidden;\n svg {\n width: 100%;\n height: 100%;\n fill: ", ";\n }\n }\n .text_wrap {\n position: relative;\n flex: 1;\n width: auto;\n height: 100%;\n height: 22px;\n overflow: hidden;\n p {\n position: absolute;\n top: 0;\n left: 0;\n box-sizing: border-box;\n transform: translateX(-100%);\n ", "\n }\n }\n }\n &__arrowicon {\n opacity: 0;\n ", "\n }\n }\n\n .submenu {\n position: relative;\n overflow: hidden;\n ", "\n ul {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n width: 100%;\n flex-direction: column;\n padding: 2px 0 12px;\n box-sizing: border-box;\n ", "\n li {\n display: flex;\n align-items: center;\n width: 100%;\n align-items: center;\n height: 26px;\n padding-left: 38px;\n cursor: pointer;\n &:hover {\n background-color: ", ";\n }\n p {\n color: ", ";\n }\n &[data-active='true'] p {\n color: ", ";\n }\n }\n }\n }\n &[data-active='true'] {\n .itemhead {\n background-color: ", ";\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n }\n &[data-show='true'] {\n padding: 0 20px;\n\n .itemhead {\n .text_wrap p {\n transform: translateX(0);\n }\n &__arrowicon {\n opacity: 1;\n }\n }\n }\n"])), transitionSet('padding'), COLORS.coolgrey5, COLORS.grey4, COLORS.coolgrey5, transitionSet('transform'), transitionSet('opacity, transform'), transitionSet('height'), transitionSet('height'), COLORS.grey4, COLORS.coolgrey4, COLORS.primary, COLORS.coolgrey2, COLORS.primary, COLORS.primary);
var templateObject_1;