@gsretail.com/gui-core/build/node_modules/@mui/x-date-pickers/DateTimePicker/DateTimePickerToolbar.js

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

import e from"../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";import o from"../../../@babel/runtime/helpers/esm/extends.js";import*as r from"react";import{styled as t,useThemeProps as a}from"@mui/material/styles";import{unstable_composeClasses as i}from"@mui/material";import{PickersToolbarText as s}from"../internals/components/PickersToolbarText.js";import{PickersToolbar as n}from"../internals/components/PickersToolbar.js";import{pickersToolbarClasses as l}from"../internals/components/pickersToolbarClasses.js";import{PickersToolbarButton as m}from"../internals/components/PickersToolbarButton.js";import{useUtils as c,useLocaleText as d}from"../internals/hooks/useUtils.js";import{getDateTimePickerToolbarUtilityClass as p}from"./dateTimePickerToolbarClasses.js";import{resolveViewTypeFromView as u}from"./shared.js";import{jsxs as b,jsx as f}from"react/jsx-runtime";const h=["ampm","parsedValue","isMobileKeyboardViewOpen","onChange","openView","setOpenView","toggleMobileKeyboardView","toolbarFormat","toolbarPlaceholder","toolbarTitle","views"],v=t(n,{name:"MuiDateTimePickerToolbar",slot:"Root",overridesResolver:(e,o)=>o.root})((({theme:e})=>({paddingLeft:16,paddingRight:16,justifyContent:"space-around",position:"relative",[`& .${l.penIconButton}`]:o({position:"absolute",top:8},"rtl"===e.direction?{left:8}:{right:8})}))),T=t("div",{name:"MuiDateTimePickerToolbar",slot:"DateContainer",overridesResolver:(e,o)=>o.dateContainer})({display:"flex",flexDirection:"column",alignItems:"flex-start"}),y=t("div",{name:"MuiDateTimePickerToolbar",slot:"TimeContainer",overridesResolver:(e,o)=>o.timeContainer})({display:"flex"}),C=t(s,{name:"MuiDateTimePickerToolbar",slot:"Separator",overridesResolver:(e,o)=>o.separator})({margin:"0 4px 0 2px",cursor:"default"});function w(t){const s=a({props:t,name:"MuiDateTimePickerToolbar"}),{ampm:n,parsedValue:l,isMobileKeyboardViewOpen:w,openView:k,setOpenView:g,toggleMobileKeyboardView:P,toolbarFormat:j,toolbarPlaceholder:x="––",toolbarTitle:M,views:V}=s,D=e(s,h),S=s,K=c(),R=d(),N=(e=>{const{classes:o}=e;return i({root:["root"],dateContainer:["dateContainer"],timeContainer:["timeContainer"],separator:["separator"]},p,o)})(S),O=null!=M?M:R.dateTimePickerDefaultToolbarTitle,F=r.useMemo((()=>l?j?K.formatByString(l,j):K.format(l,"shortDate"):x),[l,j,x,K]);return b(v,o({toolbarTitle:O,isMobileKeyboardViewOpen:w,toggleMobileKeyboardView:P,className:N.root,viewType:u(k)},D,{isLandscape:!1,ownerState:S,children:[b(T,{className:N.dateContainer,ownerState:S,children:[V.includes("year")&&f(m,{tabIndex:-1,variant:"subtitle1",onClick:()=>g("year"),selected:"year"===k,value:l?K.format(l,"year"):"–"}),V.includes("day")&&f(m,{tabIndex:-1,variant:"h4",onClick:()=>g("day"),selected:"day"===k,value:F})]}),b(y,{className:N.timeContainer,ownerState:S,children:[V.includes("hours")&&f(m,{variant:"h3",onClick:()=>g("hours"),selected:"hours"===k,value:l?(I=l,n?K.format(I,"hours12h"):K.format(I,"hours24h")):"--"}),V.includes("minutes")&&b(r.Fragment,{children:[f(C,{variant:"h3",value:":",className:N.separator,ownerState:S}),f(m,{variant:"h3",onClick:()=>g("minutes"),selected:"minutes"===k,value:l?K.format(l,"minutes"):"--"})]}),V.includes("seconds")&&b(r.Fragment,{children:[f(C,{variant:"h3",value:":",className:N.separator,ownerState:S}),f(m,{variant:"h3",onClick:()=>g("seconds"),selected:"seconds"===k,value:l?K.format(l,"seconds"):"--"})]})]})]}));var I}export{w as DateTimePickerToolbar};