@gsretail.com/gui-core/build/node_modules/@mui/x-date-pickers/ClockPicker/Clock.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*as o from"react";import{clsx as t}from"../../../clsx/dist/clsx.m.js";import r from"@mui/material/IconButton";import a from"@mui/material/Typography";import{styled as n,useThemeProps as s}from"@mui/material/styles";import{ClockPointer as i}from"./ClockPointer.js";import{useUtils as l}from"../internals/hooks/useUtils.js";import{WrapperVariantContext as m}from"../internals/components/wrappers/WrapperVariantContext.js";import{getMinutes as c,getHours as u}from"./shared.js";import{getClockUtilityClass as p}from"./clockClasses.js";import{jsxs as d,jsx as h}from"react/jsx-runtime";import v from"../../utils/esm/composeClasses/composeClasses.js";import f from"../../utils/esm/useEnhancedEffect.js";const k=n("div",{name:"MuiClock",slot:"Root",overridesResolver:(e,o)=>o.root})((({theme:e})=>({display:"flex",justifyContent:"center",alignItems:"center",margin:e.spacing(2)}))),b=n("div",{name:"MuiClock",slot:"Clock",overridesResolver:(e,o)=>o.clock})({backgroundColor:"rgba(0,0,0,.07)",borderRadius:"50%",height:220,width:220,flexShrink:0,position:"relative",pointerEvents:"none"}),C=n("div",{name:"MuiClock",slot:"Wrapper",overridesResolver:(e,o)=>o.wrapper})({"&:focus":{outline:"none"}}),g=n("div",{name:"MuiClock",slot:"SquareMask",overridesResolver:(e,o)=>o.squareMask})((({ownerState:o})=>e({width:"100%",height:"100%",position:"absolute",pointerEvents:"auto",outline:0,touchAction:"none",userSelect:"none"},o.disabled?{}:{"@media (pointer: fine)":{cursor:"pointer",borderRadius:"50%"},"&:active":{cursor:"move"}}))),M=n("div",{name:"MuiClock",slot:"Pin",overridesResolver:(e,o)=>o.pin})((({theme:e})=>({width:6,height:6,borderRadius:"50%",backgroundColor:e.palette.primary.main,position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"}))),w=n(r,{name:"MuiClock",slot:"AmButton",overridesResolver:(e,o)=>o.amButton})((({theme:o,ownerState:t})=>e({zIndex:1,position:"absolute",bottom:t.ampmInClock?64:8,left:8},"am"===t.meridiemMode&&{backgroundColor:o.palette.primary.main,color:o.palette.primary.contrastText,"&:hover":{backgroundColor:o.palette.primary.light}}))),y=n(r,{name:"MuiClock",slot:"PmButton",overridesResolver:(e,o)=>o.pmButton})((({theme:o,ownerState:t})=>e({zIndex:1,position:"absolute",bottom:t.ampmInClock?64:8,right:8},"pm"===t.meridiemMode&&{backgroundColor:o.palette.primary.main,color:o.palette.primary.contrastText,"&:hover":{backgroundColor:o.palette.primary.light}})));function x(e){const r=s({props:e,name:"MuiClock"}),{ampm:n,ampmInClock:x,autoFocus:R,children:B,date:j,getClockLabelText:S,handleMeridiemChange:I,isTimeDisabled:T,meridiemMode:E,minutesStep:N=1,onChange:D,selectedId:q,type:A,value:P,disabled:F,readOnly:U,className:z}=r,W=r,X=l(),Y=o.useContext(m),H=o.useRef(!1),K=(e=>{const{classes:o}=e;return v({root:["root"],clock:["clock"],wrapper:["wrapper"],squareMask:["squareMask"],pin:["pin"],amButton:["amButton"],pmButton:["pmButton"]},p,o)})(W),L=T(P,A),O=!n&&"hours"===A&&(P<1||P>12),V=(e,o)=>{F||U||T(e,A)||D(e,o)},G=(e,o)=>{let{offsetX:t,offsetY:r}=e;if(void 0===t){const o=e.target.getBoundingClientRect();t=e.changedTouches[0].clientX-o.left,r=e.changedTouches[0].clientY-o.top}const a="seconds"===A||"minutes"===A?c(t,r,N):u(t,r,Boolean(n));V(a,o)},J=o.useMemo((()=>"hours"===A||P%5==0),[A,P]),Q="minutes"===A?N:1,Z=o.useRef(null);f((()=>{R&&Z.current.focus()}),[R]);return d(k,{className:t(z,K.root),children:[d(b,{className:K.clock,children:[h(g,{onTouchMove:e=>{H.current=!0,G(e,"shallow")},onTouchEnd:e=>{H.current&&(G(e,"finish"),H.current=!1)},onMouseUp:e=>{H.current&&(H.current=!1),G(e.nativeEvent,"finish")},onMouseMove:e=>{e.buttons>0&&G(e.nativeEvent,"shallow")},ownerState:{disabled:F},className:K.squareMask}),!L&&d(o.Fragment,{children:[h(M,{className:K.pin}),j&&h(i,{type:A,value:P,isInner:O,hasSelected:J})]}),h(C,{"aria-activedescendant":q,"aria-label":S(A,j,X),ref:Z,role:"listbox",onKeyDown:e=>{if(!H.current)switch(e.key){case"Home":V(0,"partial"),e.preventDefault();break;case"End":V("minutes"===A?59:23,"partial"),e.preventDefault();break;case"ArrowUp":V(P+Q,"partial"),e.preventDefault();break;case"ArrowDown":V(P-Q,"partial"),e.preventDefault()}},tabIndex:0,className:K.wrapper,children:B})]}),n&&("desktop"===Y||x)&&d(o.Fragment,{children:[h(w,{onClick:U?void 0:()=>I("am"),disabled:F||null===E,ownerState:W,className:K.amButton,children:h(a,{variant:"caption",children:"AM"})}),h(y,{disabled:F||null===E,onClick:U?void 0:()=>I("pm"),ownerState:W,className:K.pmButton,children:h(a,{variant:"caption",children:"PM"})})]})]})}export{x as Clock};