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