@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 1.85 kB
JavaScript
import t from"../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";import e from"../../../@babel/runtime/helpers/esm/extends.js";import*as r from"react";import{clsx as o}from"../../../clsx/dist/clsx.m.js";import{styled as s,useThemeProps as i}from"@mui/material/styles";import{unstable_composeClasses as a}from"@mui/material";import{CLOCK_HOUR_WIDTH as m,CLOCK_WIDTH as n}from"./shared.js";import{getClockPointerUtilityClass as l}from"./clockPointerClasses.js";import{jsx as c}from"react/jsx-runtime";const u=["className","hasSelected","isInner","type","value"],p=s("div",{name:"MuiClockPointer",slot:"Root",overridesResolver:(t,e)=>e.root})((({theme:t,ownerState:r})=>e({width:2,backgroundColor:t.palette.primary.main,position:"absolute",left:"calc(50% - 1px)",bottom:"50%",transformOrigin:"center bottom 0px"},r.shouldAnimate&&{transition:t.transitions.create(["transform","height"])}))),h=s("div",{name:"MuiClockPointer",slot:"Thumb",overridesResolver:(t,e)=>e.thumb})((({theme:t,ownerState:r})=>e({width:4,height:4,backgroundColor:t.palette.primary.contrastText,borderRadius:"50%",position:"absolute",top:-21,left:`calc(50% - ${m/2}px)`,border:`${(m-4)/2}px solid ${t.palette.primary.main}`,boxSizing:"content-box"},r.hasSelected&&{backgroundColor:t.palette.primary.main})));function d(s){const m=i({props:s,name:"MuiClockPointer"}),{className:d,isInner:b,type:f,value:x}=m,g=t(m,u),v=r.useRef(f);r.useEffect((()=>{v.current=f}),[f]);const y=e({},m,{shouldAnimate:v.current!==f}),j=(t=>{const{classes:e}=t;return a({root:["root"],thumb:["thumb"]},l,e)})(y);return c(p,e({style:(()=>{let t=360/("hours"===f?12:60)*x;return"hours"===f&&x>12&&(t-=360),{height:Math.round((b?.26:.4)*n),transform:`rotateZ(${t}deg)`}})(),className:o(d,j.root),ownerState:y},g,{children:c(h,{ownerState:y,className:j.thumb})}))}export{d as ClockPointer};