@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 4.88 kB
JavaScript
import e from"../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";import o from"../../../@babel/runtime/helpers/esm/extends.js";import*as t from"react";import a from"../../../prop-types/index.js";import{clsx as r}from"../../../clsx/dist/clsx.m.js";import i from"@mui/material/ButtonBase";import{unstable_composeClasses as n}from"@mui/material";import{styled as s,alpha as d,useThemeProps as l}from"@mui/material/styles";import{useForkRef as u}from"@mui/material/utils";import{useUtils as c}from"../internals/hooks/useUtils.js";import{DAY_SIZE as h,DAY_MARGIN as y}from"../internals/constants/dimensions.js";import{pickersDayClasses as m,getPickersDayUtilityClass as p}from"./pickersDayClasses.js";import{jsx as b}from"react/jsx-runtime";import g from"../../utils/esm/useEnhancedEffect.js";const M=["autoFocus","className","day","disabled","disableHighlightToday","disableMargin","hidden","isAnimating","onClick","onDaySelect","onFocus","onBlur","onKeyDown","onMouseDown","outsideCurrentMonth","selected","showDaysOutsideCurrentMonth","children","today"],f=({theme:e,ownerState:t})=>o({},e.typography.caption,{width:h,height:h,borderRadius:"50%",padding:0,backgroundColor:e.palette.background.paper,color:e.palette.text.primary,"&:hover":{backgroundColor:d(e.palette.action.active,e.palette.action.hoverOpacity)},"&:focus":{backgroundColor:d(e.palette.action.active,e.palette.action.hoverOpacity),[`&.${m.selected}`]:{willChange:"background-color",backgroundColor:e.palette.primary.dark}},[`&.${m.selected}`]:{color:e.palette.primary.contrastText,backgroundColor:e.palette.primary.main,fontWeight:e.typography.fontWeightMedium,transition:e.transitions.create("background-color",{duration:e.transitions.duration.short}),"&:hover":{willChange:"background-color",backgroundColor:e.palette.primary.dark}},[`&.${m.disabled}`]:{color:e.palette.text.disabled}},!t.disableMargin&&{margin:`0 ${y}px`},t.outsideCurrentMonth&&t.showDaysOutsideCurrentMonth&&{color:e.palette.text.secondary},!t.disableHighlightToday&&t.today&&{[`&:not(.${m.selected})`]:{border:`1px solid ${e.palette.text.secondary}`}}),D=(e,o)=>{const{ownerState:t}=e;return[o.root,!t.disableMargin&&o.dayWithMargin,!t.disableHighlightToday&&t.today&&o.today,!t.outsideCurrentMonth&&t.showDaysOutsideCurrentMonth&&o.dayOutsideMonth,t.outsideCurrentMonth&&!t.showDaysOutsideCurrentMonth&&o.hiddenDaySpacingFiller]},C=s(i,{name:"MuiPickersDay",slot:"Root",overridesResolver:D})(f),w=s("div",{name:"MuiPickersDay",slot:"Root",overridesResolver:D})((({theme:e,ownerState:t})=>o({},f({theme:e,ownerState:t}),{opacity:0,pointerEvents:"none"}))),k=()=>{},O=t.forwardRef((function(a,i){const s=l({props:a,name:"MuiPickersDay"}),{autoFocus:d=!1,className:h,day:y,disabled:m=!1,disableHighlightToday:f=!1,disableMargin:D=!1,isAnimating:O,onClick:x,onDaySelect:F,onFocus:S=k,onBlur:v=k,onKeyDown:T=k,onMouseDown:j,outsideCurrentMonth:R,selected:H=!1,showDaysOutsideCurrentMonth:B=!1,children:N,today:$=!1}=s,A=e(s,M),E=o({},s,{autoFocus:d,disabled:m,disableHighlightToday:f,disableMargin:D,selected:H,showDaysOutsideCurrentMonth:B,today:$}),W=(e=>{const{selected:o,disableMargin:t,disableHighlightToday:a,today:r,disabled:i,outsideCurrentMonth:s,showDaysOutsideCurrentMonth:d,classes:l}=e;return n({root:["root",o&&"selected",i&&"disabled",!t&&"dayWithMargin",!a&&r&&"today",s&&d&&"dayOutsideMonth",s&&!d&&"hiddenDaySpacingFiller"],hiddenDaySpacingFiller:["hiddenDaySpacingFiller"]},p,l)})(E),K=c(),P=t.useRef(null),q=u(P,i);g((()=>{!d||m||O||R||P.current.focus()}),[d,m,O,R]);return R&&!B?b(w,{className:r(W.root,W.hiddenDaySpacingFiller,h),ownerState:E,role:A.role}):b(C,o({className:r(W.root,h),ownerState:E,ref:q,centerRipple:!0,disabled:m,tabIndex:H?0:-1,onKeyDown:e=>T(e,y),onFocus:e=>S(e,y),onBlur:e=>v(e,y),onClick:e=>{m||F(y,"finish"),R&&e.currentTarget.focus(),x&&x(e)},onMouseDown:e=>{j&&j(e),R&&e.preventDefault()}},A,{children:N||K.format(y,"dayOfMonth")}))})),x=(e,o)=>e.autoFocus===o.autoFocus&&e.isAnimating===o.isAnimating&&e.today===o.today&&e.disabled===o.disabled&&e.selected===o.selected&&e.disableMargin===o.disableMargin&&e.showDaysOutsideCurrentMonth===o.showDaysOutsideCurrentMonth&&e.disableHighlightToday===o.disableHighlightToday&&e.className===o.className&&e.sx===o.sx&&e.outsideCurrentMonth===o.outsideCurrentMonth&&e.onFocus===o.onFocus&&e.onBlur===o.onBlur&&e.onDaySelect===o.onDaySelect;"production"!==process.env.NODE_ENV&&(O.propTypes={classes:a.object,day:a.any.isRequired,disabled:a.bool,disableHighlightToday:a.bool,disableMargin:a.bool,isAnimating:a.bool,onBlur:a.func,onDaySelect:a.func.isRequired,onFocus:a.func,onKeyDown:a.func,outsideCurrentMonth:a.bool.isRequired,selected:a.bool,showDaysOutsideCurrentMonth:a.bool,sx:a.oneOfType([a.arrayOf(a.oneOfType([a.func,a.object,a.bool])),a.func,a.object]),today:a.bool});const F=t.memo(O,x);export{F as PickersDay,x as areDayPropsEqual};