@gsretail.com/gui-core/build/esm/core/Date/GuiDatePicker.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__rest as e,__assign as a}from"tslib";import t from"react";import{Box as n,TextField as r}from"@mui/material";import{DesktopDatePicker as l,MobileDatePicker as o,StaticDatePicker as i}from"@mui/x-date-pickers";import{LocalizationProvider as m}from"@mui/x-date-pickers/LocalizationProvider";import{AdapterDateFns as s}from"@mui/x-date-pickers/AdapterDateFns";import d from"date-fns/locale/ko";import{Calendar as c}from"@gsretail.com/gui-icons";import u from"./GuiDatePicker.styled.js";var p={ko:d},f=u((function(d){var u=d.label,f=d.labelWidth,x=d.labelTextAlign,y=d.required,b=d.variant,g=d.width,h=d.size,k=d.readOnly,v=d.disabled,E=d.minDate,D=d.maxDate,P=d.inputFormat,A=d.mask,C=d.helperText,F=d.today,T=d.value,N=d.onChange,_=d.onAccept,w=d.onBlur,z=d.sx,B=d.className,O=d.boxProps,W=e(d,["label","labelWidth","labelTextAlign","required","variant","width","size","readOnly","disabled","minDate","maxDate","inputFormat","mask","helperText","today","value","onChange","onAccept","onBlur","sx","className","boxProps"]);return t.createElement(n,a({className:["gui-form gui-date-picker",v&&"gui-form-disabled",k&&"gui-form-readonly",B&&B].join(" "),width:g},O,{sx:z}),u&&t.createElement(n,{minWidth:f},t.createElement("label",{className:["gui-label",x&&"textAlign-"+x,y&&"Mui-required"].join(" ")},u)),t.createElement(n,{flexGrow:1,className:"gui-date-single"},t.createElement(m,{dateAdapter:s,locale:p.ko},"desktop"===b&&t.createElement(l,a({value:T,onChange:function(e,a){N(e,a)},onAccept:_,minDate:E,maxDate:D,inputFormat:P,mask:A,components:{OpenPickerIcon:c},componentsProps:{actionBar:{actions:F?["today"]:null}},renderInput:function(e){return t.createElement(t.Fragment,null,t.createElement(r,a({},e,{variant:"outlined",size:h,helperText:C,autoComplete:"off",onBlur:w})))},PopperProps:{className:"GuiCalendar"},readOnly:k,disabled:v},W)),"mobile"===b&&t.createElement(o,a({value:T,onChange:function(e,a){N(e,a)},onAccept:_,showToolbar:!1,minDate:E,maxDate:D,inputFormat:P,mask:A,componentsProps:{actionBar:{actions:F?["today"]:null}},renderInput:function(e){return t.createElement(t.Fragment,null,t.createElement(r,a({},e,{variant:"outlined",size:h,helperText:C,autoComplete:"off",onBlur:w})))},DialogProps:{className:"GuiCalendar"},readOnly:k,disabled:v},W)),"static"===b&&t.createElement(n,{sx:{position:"relative"}},t.createElement(i,a({value:T,onChange:function(e,a){N(e,a)},displayStaticWrapperAs:"desktop",minDate:E,maxDate:D,componentsProps:{actionBar:{actions:F?["today"]:null}},renderInput:function(e){return t.createElement(t.Fragment,null,t.createElement(r,a({},e,{variant:"outlined",size:h,helperText:C,autoComplete:"off"})))},readOnly:k,disabled:v},W)),v||k?t.createElement(n,{className:"disabled-static"}):null))))}));f.defaultProps={variant:"desktop",labelWidth:"auto",width:"100%",size:"small",disabled:!1,readOnly:!1,inputFormat:"yyyy-MM-dd",mask:"____-__-__",helperText:"yyyy-mm-dd",views:["year","month","day"],today:!0};export{f as GuiDatePicker,f as default};