@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.82 kB
JavaScript
import e from"../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";import t from"../../../@babel/runtime/helpers/esm/extends.js";import"react";import{clsx as o}from"../../../clsx/dist/clsx.m.js";import{styled as r,useThemeProps as s}from"@mui/material/styles";import{unstable_composeClasses as a}from"@mui/material";import{CLOCK_HOUR_WIDTH as l,CLOCK_WIDTH as i}from"./shared.js";import{clockNumberClasses as n,getClockNumberUtilityClass as d}from"./clockNumberClasses.js";import{jsx as m}from"react/jsx-runtime";const c=["className","disabled","index","inner","label","selected"],p=r("span",{name:"MuiClockNumber",slot:"Root",overridesResolver:(e,t)=>[t.root,{[`&.${n.disabled}`]:t.disabled},{[`&.${n.selected}`]:t.selected}]})((({theme:e,ownerState:o})=>t({height:l,width:l,position:"absolute",left:`calc((100% - ${l}px) / 2)`,display:"inline-flex",justifyContent:"center",alignItems:"center",borderRadius:"50%",color:e.palette.text.primary,fontFamily:e.typography.fontFamily,"&:focused":{backgroundColor:e.palette.background.paper},[`&.${n.selected}`]:{color:e.palette.primary.contrastText},[`&.${n.disabled}`]:{pointerEvents:"none",color:e.palette.text.disabled}},o.inner&&t({},e.typography.body2,{color:e.palette.text.secondary}))));function b(r){const n=s({props:r,name:"MuiClockNumber"}),{className:b,disabled:u,index:h,inner:f,label:x,selected:y}=n,j=e(n,c),M=n,$=(e=>{const{classes:t,selected:o,disabled:r}=e;return a({root:["root",o&&"selected",r&&"disabled"]},d,t)})(M),g=h%12/12*Math.PI*2-Math.PI/2,N=(i-l-2)/2*(f?.65:1),k=Math.round(Math.cos(g)*N),v=Math.round(Math.sin(g)*N);return m(p,t({className:o(b,$.root),"aria-disabled":!!u||void 0,"aria-selected":!!y||void 0,role:"option",style:{transform:`translate(${k}px, ${v+(i-l)/2}px`},ownerState:M},j,{children:x}))}export{b as ClockNumber};