@gsretail.com/gui-core
Version:
A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
2 lines (1 loc) • 3.61 kB
JavaScript
import e from"../../../@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js";import t from"../../../@babel/runtime/helpers/esm/extends.js";import*as o from"react";import s from"../../../prop-types/index.js";import{clsx as a}from"../../../clsx/dist/clsx.m.js";import{styled as r,useThemeProps as n}from"@mui/material/styles";import{unstable_composeClasses as i,useControlled as l,useEventCallback as u}from"@mui/material";import{PickersMonth as c}from"./PickersMonth.js";import{useUtils as m,useNow as h,useDefaultDates as d}from"../internals/hooks/useUtils.js";import{getMonthPickerUtilityClass as f}from"./monthPickerClasses.js";import{parseNonNullablePickerDate as b}from"../internals/utils/date-utils.js";import{jsx as p}from"react/jsx-runtime";import M from"../../system/esm/useTheme.js";const g=["className","date","disabled","disableFuture","disablePast","maxDate","minDate","onChange","shouldDisableMonth","readOnly","disableHighlightToday","autoFocus","onMonthFocus","hasFocus","onFocusedViewChange"];function D(e,o){const s=m(),a=d(),r=n({props:e,name:o});return t({disableFuture:!1,disablePast:!1},r,{minDate:b(s,r.minDate,a.minDate),maxDate:b(s,r.maxDate,a.maxDate)})}const y=r("div",{name:"MuiMonthPicker",slot:"Root",overridesResolver:(e,t)=>t.root})({width:310,display:"flex",flexWrap:"wrap",alignContent:"stretch",margin:"0 4px"}),F=o.forwardRef((function(s,r){const n=m(),d=h(),b=D(s,"MuiMonthPicker"),{className:F,date:x,disabled:k,disableFuture:j,disablePast:w,maxDate:C,minDate:v,onChange:O,shouldDisableMonth:P,readOnly:A,disableHighlightToday:T,autoFocus:N=!1,onMonthFocus:R,hasFocus:S,onFocusedViewChange:V}=b,B=e(b,g),E=b,H=(e=>{const{classes:t}=e;return i({root:["root"]},f,t)})(E),L=M(),U=o.useMemo((()=>null!=x?x:n.startOfMonth(d)),[d,n,x]),W=o.useMemo((()=>null!=x?n.getMonth(x):T?null:n.getMonth(d)),[d,x,n,T]),[q,I]=o.useState((()=>W||n.getMonth(d))),K=o.useCallback((e=>{const t=n.startOfMonth(w&&n.isAfter(d,v)?d:v),o=n.startOfMonth(j&&n.isBefore(d,C)?d:C);return!!n.isBefore(e,t)||(!!n.isAfter(e,o)||!!P&&P(e))}),[j,w,C,v,d,P,n]),_=e=>{if(A)return;const t=n.setMonth(U,e);O(t,"finish")},[z,G]=l({name:"MonthPicker",state:"hasFocus",controlled:S,default:N}),J=o.useCallback((e=>{G(e),V&&V(e)}),[G,V]),Q=o.useCallback((e=>{K(n.setMonth(U,e))||(I(e),J(!0),R&&R(e))}),[K,n,U,J,R]);o.useEffect((()=>{I((e=>null!==W&&e!==W?W:e))}),[W]);const X=u((e=>{const t=12;switch(e.key){case"ArrowUp":Q((t+q-3)%t),e.preventDefault();break;case"ArrowDown":Q((t+q+3)%t),e.preventDefault();break;case"ArrowLeft":Q((t+q+("ltr"===L.direction?-1:1))%t),e.preventDefault();break;case"ArrowRight":Q((t+q+("ltr"===L.direction?1:-1))%t),e.preventDefault()}})),Y=o.useCallback(((e,t)=>{Q(t)}),[Q]),Z=o.useCallback((()=>{J(!1)}),[J]),$=n.getMonth(d);return p(y,t({ref:r,className:a(H.root,F),ownerState:E,onKeyDown:X},B,{children:n.getMonthArray(U).map((e=>{const t=n.getMonth(e),o=n.format(e,"monthShort"),s=k||K(e);return p(c,{value:t,selected:t===W,tabIndex:t!==q||s?-1:0,hasFocus:z&&t===q,onSelect:_,onFocus:Y,onBlur:Z,disabled:s,"aria-current":$===t?"date":void 0,children:o},o)}))}))}));"production"!==process.env.NODE_ENV&&(F.propTypes={autoFocus:s.bool,classes:s.object,className:s.string,date:s.any,disabled:s.bool,disableFuture:s.bool,disableHighlightToday:s.bool,disablePast:s.bool,hasFocus:s.bool,maxDate:s.any,minDate:s.any,onChange:s.func.isRequired,onFocusedViewChange:s.func,onMonthFocus:s.func,readOnly:s.bool,shouldDisableMonth:s.func,sx:s.oneOfType([s.arrayOf(s.oneOfType([s.func,s.object,s.bool])),s.func,s.object])});export{F as MonthPicker,D as useMonthPickerDefaultizedProps};