@gsretail.com/gui-core/build/esm/node_modules/@mui/x-date-pickers/TimePicker/TimePickerToolbar.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"react";import{styled as a,useThemeProps as r,useTheme as i}from"@mui/material/styles";import{unstable_composeClasses as t}from"@mui/material";import{PickersToolbarText as s}from"../internals/components/PickersToolbarText.js";import{PickersToolbarButton as n}from"../internals/components/PickersToolbarButton.js";import{PickersToolbar as l}from"../internals/components/PickersToolbar.js";import{pickersToolbarClasses as m}from"../internals/components/pickersToolbarClasses.js";import{arrayIncludes as p}from"../internals/utils/utils.js";import{useUtils as c,useLocaleText as u}from"../internals/hooks/useUtils.js";import{useMeridiemMode as d}from"../internals/hooks/date-helpers-hooks.js";import{timePickerToolbarClasses as b,getTimePickerToolbarUtilityClass as h}from"./timePickerToolbarClasses.js";import{jsx as L,jsxs as f}from"react/jsx-runtime";const v=["ampm","ampmInClock","parsedValue","isLandscape","isMobileKeyboardViewOpen","onChange","openView","setOpenView","toggleMobileKeyboardView","toolbarTitle","views","disabled","readOnly"],M=a(l,{name:"MuiTimePickerToolbar",slot:"Root",overridesResolver:(e,o)=>o.root})({[`& .${m.penIconButtonLandscape}`]:{marginTop:"auto"}}),T=a(s,{name:"MuiTimePickerToolbar",slot:"Separator",overridesResolver:(e,o)=>o.separator})({outline:0,margin:"0 4px 0 2px",cursor:"default"}),k=a("div",{name:"MuiTimePickerToolbar",slot:"HourMinuteLabel",overridesResolver:(e,o)=>[{[`&.${b.hourMinuteLabelLandscape}`]:o.hourMinuteLabelLandscape,[`&.${b.hourMinuteLabelReverse}`]:o.hourMinuteLabelReverse},o.hourMinuteLabel]})((({theme:e,ownerState:a})=>o({display:"flex",justifyContent:"flex-end",alignItems:"flex-end"},a.isLandscape&&{marginTop:"auto"},"rtl"===e.direction&&{flexDirection:"row-reverse"}))),g=a("div",{name:"MuiTimePickerToolbar",slot:"AmPmSelection",overridesResolver:(e,o)=>[{[`.${b.ampmLabel}`]:o.ampmLabel},{[`&.${b.ampmLandscape}`]:o.ampmLandscape},o.ampmSelection]})((({ownerState:e})=>o({display:"flex",flexDirection:"column",marginRight:"auto",marginLeft:12},e.isLandscape&&{margin:"4px 0 auto",flexDirection:"row",justifyContent:"space-around",flexBasis:"100%"},{[`& .${b.ampmLabel}`]:{fontSize:17}})));function w(a){const s=r({props:a,name:"MuiTimePickerToolbar"}),{ampm:l,ampmInClock:m,parsedValue:b,isLandscape:w,isMobileKeyboardViewOpen:x,onChange:y,openView:C,setOpenView:j,toggleMobileKeyboardView:P,toolbarTitle:S,views:V,disabled:R,readOnly:I}=s,O=e(s,v),K=c(),N=u(),$=null!=S?S:N.timePickerDefaultToolbarTitle,D=i(),B=Boolean(l&&!m),{meridiemMode:z,handleMeridiemChange:A}=d(b,l,y),H=s,U=(e=>{const{theme:o,isLandscape:a,classes:r}=e,i={root:["root"],separator:["separator"],hourMinuteLabel:["hourMinuteLabel",a&&"hourMinuteLabelLandscape","rtl"===o.direction&&"hourMinuteLabelReverse"],ampmSelection:["ampmSelection",a&&"ampmLandscape"],ampmLabel:["ampmLabel"]};return t(i,h,r)})(o({},H,{theme:D})),W=L(T,{tabIndex:-1,value:":",variant:"h3",selected:!1,className:U.separator});return f(M,o({viewType:"clock",landscapeDirection:"row",toolbarTitle:$,isLandscape:w,isMobileKeyboardViewOpen:x,toggleMobileKeyboardView:P,ownerState:H,className:U.root},O,{children:[f(k,{className:U.hourMinuteLabel,ownerState:H,children:[p(V,"hours")&&L(n,{tabIndex:-1,variant:"h3",onClick:()=>j("hours"),selected:"hours"===C,value:b?(q=b,l?K.format(q,"hours12h"):K.format(q,"hours24h")):"--"}),p(V,["hours","minutes"])&&W,p(V,"minutes")&&L(n,{tabIndex:-1,variant:"h3",onClick:()=>j("minutes"),selected:"minutes"===C,value:b?K.format(b,"minutes"):"--"}),p(V,["minutes","seconds"])&&W,p(V,"seconds")&&L(n,{variant:"h3",onClick:()=>j("seconds"),selected:"seconds"===C,value:b?K.format(b,"seconds"):"--"})]}),B&&f(g,{className:U.ampmSelection,ownerState:H,children:[L(n,{disableRipple:!0,variant:"subtitle2",selected:"am"===z,typographyClassName:U.ampmLabel,value:K.getMeridiemText("am"),onClick:I?void 0:()=>A("am"),disabled:R}),L(n,{disableRipple:!0,variant:"subtitle2",selected:"pm"===z,typographyClassName:U.ampmLabel,value:K.getMeridiemText("pm"),onClick:I?void 0:()=>A("pm"),disabled:R})]})]}));var q}export{w as TimePickerToolbar};