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