@gsretail.com/gui-core/build/esm/node_modules/@mui/x-date-pickers/CalendarPicker/PickersCalendarHeader.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import e from"../../../@babel/runtime/helpers/esm/extends.js";import"react";import t from"@mui/material/Fade";import{styled as r,useThemeProps as i}from"@mui/material/styles";import{unstable_composeClasses as o}from"@mui/material";import n from"@mui/material/IconButton";import{useLocaleText as a,useUtils as s}from"../internals/hooks/useUtils.js";import{PickersFadeTransitionGroup as l}from"./PickersFadeTransitionGroup.js";import{ArrowDropDown as m}from"../internals/components/icons/index.js";import{PickersArrowSwitcher as c}from"../internals/components/PickersArrowSwitcher.js";import{useNextMonthDisabled as d,usePreviousMonthDisabled as h}from"../internals/hooks/date-helpers-hooks.js";import{buildDeprecatedPropsWarning as u}from"../internals/utils/warning.js";import{getPickersCalendarHeaderUtilityClass as w}from"./pickersCalendarHeaderClasses.js";import{jsxs as p,jsx as g}from"react/jsx-runtime";const f=r("div",{name:"MuiPickersCalendarHeader",slot:"Root",overridesResolver:(e,t)=>t.root})({display:"flex",alignItems:"center",marginTop:16,marginBottom:8,paddingLeft:24,paddingRight:12,maxHeight:30,minHeight:30}),b=r("div",{name:"MuiPickersCalendarHeader",slot:"LabelContainer",overridesResolver:(e,t)=>t.labelContainer})((({theme:t})=>e({display:"flex",maxHeight:30,overflow:"hidden",alignItems:"center",cursor:"pointer",marginRight:"auto"},t.typography.body1,{fontWeight:t.typography.fontWeightMedium}))),x=r("div",{name:"MuiPickersCalendarHeader",slot:"Label",overridesResolver:(e,t)=>t.label})({marginRight:6}),C=r(n,{name:"MuiPickersCalendarHeader",slot:"SwitchViewButton",overridesResolver:(e,t)=>t.switchViewButton})({marginRight:"auto"}),V=r(m,{name:"MuiPickersCalendarHeader",slot:"SwitchViewIcon",overridesResolver:(e,t)=>t.switchViewIcon})((({theme:t,ownerState:r})=>e({willChange:"transform",transition:t.transitions.create("transform"),transform:"rotate(0deg)"},"year"===r.openView&&{transform:"rotate(180deg)"}))),v=u("Props for translation are deprecated. See https://mui.com/x/react-date-pickers/localization for more information.");function B(r){const n=i({props:r,name:"MuiPickersCalendarHeader"}),{components:m={},componentsProps:u={},currentMonth:B,disabled:k,disableFuture:P,disablePast:S,getViewSwitchingButtonText:M,leftArrowButtonText:y,maxDate:A,minDate:R,onMonthChange:H,onViewChange:I,openView:T,reduceAnimations:j,rightArrowButtonText:D,views:L,labelId:N}=n;v({leftArrowButtonText:y,rightArrowButtonText:D,getViewSwitchingButtonText:M});const F=a(),z=null!=y?y:F.previousMonth,W=null!=D?D:F.nextMonth,Y=null!=M?M:F.calendarViewSwitchingButtonAriaLabel,G=s(),K=(e=>{const{classes:t}=e;return o({root:["root"],labelContainer:["labelContainer"],label:["label"],switchViewButton:["switchViewButton"],switchViewIcon:["switchViewIcon"]},w,t)})(n),O=u.switchViewButton||{},U=d(B,{disableFuture:P,maxDate:A}),q=h(B,{disablePast:S,minDate:R});if(1===L.length&&"year"===L[0])return null;const E=n;return p(f,{ownerState:E,className:K.root,children:[p(b,{role:"presentation",onClick:()=>{if(1!==L.length&&I&&!k)if(2===L.length)I(L.find((e=>e!==T))||L[0]);else{const e=0!==L.indexOf(T)?0:1;I(L[e])}},ownerState:E,"aria-live":"polite",className:K.labelContainer,children:[g(l,{reduceAnimations:j,transKey:G.format(B,"monthAndYear"),children:g(x,{id:N,ownerState:E,className:K.label,children:G.format(B,"monthAndYear")})}),L.length>1&&!k&&g(C,e({size:"small",as:m.SwitchViewButton,"aria-label":Y(T),className:K.switchViewButton},O,{children:g(V,{as:m.SwitchViewIcon,ownerState:E,className:K.switchViewIcon})}))]}),g(t,{in:"day"===T,children:g(c,{leftArrowButtonText:z,rightArrowButtonText:W,components:m,componentsProps:u,onLeftClick:()=>H(G.getPreviousMonth(B),"right"),onRightClick:()=>H(G.getNextMonth(B),"left"),isLeftDisabled:q,isRightDisabled:U})})]})}export{B as PickersCalendarHeader};