@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 3.58 kB
JavaScript
import{__assign as e}from"../../../../node_modules/tslib/tslib.es6.js";import t from"react";import{observer as l}from"mobx-react";import{Input as r,Typography as n,Menu as a,Stack as i,Box as o,Popover as m}from"@mui/material";import{GuiIcon as c}from"../../../../node_modules/@gsretail.com/gui-icons/dist/index.js";import{GuiAvatar as s}from"../../../Avatar/GuiAvatar.js";import{GuiButton as u}from"../../../Button/GuiButton.js";import{GuiIconButton as p}from"../../../Button/GuiIconButton.js";import{marginRSpacing as E}from"../../../../assets/theme/styles/spacing.js";import"@mui/material/styles";import"../../../../assets/theme/basicStyle.js";import{HeaderContainer as d,LogoContainer as g,HeaderRightSideContainer as f,SearchInputContainer as h,MyFavoriteMenu as x,IconBox as v,UserInfo as y,FullscreenButton as b}from"./styled.js";var w=l((function(l){var w=l.hidden,C=l.logo,S=l.url,j=l.userImgUrl,k=l.userTeam,z=l.userId,I=l.userNm,N=l.onClickLogout,B=l.favoritesItems,F=l.onClickFullscreen,T=l.fullscreen,L=l.darkMode,R=t.useState(null),A=R[0],G=R[1],U=Boolean(A),D=t.useState(null),W=D[0],_=D[1],M=Boolean(W),O=M?"simple-popover":void 0;return t.createElement(t.Fragment,null,t.createElement(d,{hidden:w,style:e({},T&&{display:"none"})},t.createElement(g,null,t.createElement("a",{href:S||"javascript:"},t.createElement("img",{src:C||"",alt:"logo"}))),t.createElement(f,null,t.createElement(h,{sx:L&&null!==L?{marginRight:"18px"}:{marginRight:"16px"}},t.createElement(c,{name:"Search",color:"#7D8493",width:30}),t.createElement(r,{disableUnderline:!0,fullWidth:!0,placeholder:"메뉴 검색"}),t.createElement(x,{onClick:function(e){G(e.currentTarget)}},t.createElement(v,null,t.createElement(c,{name:"StarCircleFill",color:"#ffc70e",width:20})),t.createElement(n,null,"즐겨찾기"),t.createElement(v,null,t.createElement(c,{name:"ChevronSortDown",color:"#565C72",width:20}))),t.createElement(a,{id:"basic-menu",anchorEl:A,open:U,onClose:function(){G(null)}},B)),L&&null!==L?L:null,t.createElement(p,{variant:"clear",size:"large",sx:{marginRight:"10px"}},t.createElement(c,{name:"Sms",width:30,color:"rgb(139, 139, 159)"})),t.createElement(i,{direction:"row",sx:{marginRight:"13px"}},t.createElement(p,{size:"large",variant:"clear",onClick:function(e){_(e.currentTarget)}},j?t.createElement(s,{alt:I,src:j,sx:{height:25,width:25}}):t.createElement(s,{sx:{height:25,width:25}},t.createElement(c,{name:"User"}))),I&&t.createElement(o,{sx:{display:"flex",gap:1,verticalAlign:"text-top",marginLeft:"2px"}},t.createElement("span",{style:{fontSize:"13px",display:"inline-flex",alignItems:"center",color:"#0062ff",fontWeight:"bold",whiteSpace:"nowrap"}},I),t.createElement("span",{style:{marginLeft:"-5px",fontSize:"11px",color:"rgb(139, 139, 159)",marginTop:"2px",display:"inline-flex",alignItems:"center"}},"님"))),t.createElement(m,{id:O,open:M,anchorEl:W,onClose:function(){_(null)},anchorOrigin:{vertical:"bottom",horizontal:"left"}},t.createElement(y,null,t.createElement(o,{className:"userTeam"},t.createElement(n,null,k)),t.createElement(o,{className:"user"},t.createElement(n,{variant:"caption",className:"userId"},z),t.createElement(n,{variant:"caption",className:"userNm"},I)),t.createElement(o,{className:"logout"},t.createElement(u,{size:"tiny",variant:"contained",onClick:N},"Logout")))),t.createElement(p,{variant:"clear",size:"large",style:E(15),onClick:F},t.createElement(c,{name:"Fullscreen",width:30,color:"rgb(139, 139, 159)"})))),T&&t.createElement(b,{onClick:F},t.createElement(c,{name:"FullscreenExit",color:"black",width:16})))}));export{w as default};