@gsretail.com/gui-core/build/core/Date/GuiDateTimePicker.js

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

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