@gsretail.com/gui-core/build/esm/core/Date/GuiTimePicker.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 i,TextField as r}from"@mui/material";import{DesktopTimePicker as l,MobileTimePicker as n,StaticTimePicker as m}from"@mui/x-date-pickers";import{LocalizationProvider as o}from"@mui/x-date-pickers/LocalizationProvider";import{AdapterDateFns as s}from"@mui/x-date-pickers/AdapterDateFns";import p from"date-fns/locale/ko";import{Time as d}from"@gsretail.com/gui-icons";import u from"./GuiTimePicker.styled.js";var c={ko:p},f=u((function(p){var u=p.label,f=p.labelWidth,x=p.labelTextAlign,b=p.required,h=p.variant;p.displayStaticWrapperAs;var g=p.width,v=p.size,T=p.disabled,k=p.readOnly,E=p.ampm,A=p.minTime,y=p.maxTime,w=p.views,C=p.inputFormat,P=p.mask,F=p.helperText,N=p.value,W=p.onChange,z=p.onAccept,O=p.onBlur,_=p.sx,B=p.className,G=p.boxProps,H=e(p,["label","labelWidth","labelTextAlign","required","variant","displayStaticWrapperAs","width","size","disabled","readOnly","ampm","minTime","maxTime","views","inputFormat","mask","helperText","value","onChange","onAccept","onBlur","sx","className","boxProps"]);return t.createElement(i,a({className:["gui-form gui-date-picker",T&&"gui-form-disabled",k&&"gui-form-readonly",B&&B].join(" "),width:g},G,{sx:_}),u&&t.createElement(i,{minWidth:f},t.createElement("label",{className:["gui-label",x&&"textAlign-"+x,b&&"Mui-required"].join(" ")},u)),t.createElement(i,{flexGrow:1,className:"gui-date-single"},t.createElement(o,{dateAdapter:s,locale:c.ko},"desktop"===h&&t.createElement(l,a({value:N,onChange:function(e,a){W(e,a)},onAccept:z,disableOpenPicker:!1,components:{OpenPickerIcon:d},ampm:E,minTime:A,maxTime:y,inputFormat:C,mask:P,renderInput:function(e){return t.createElement(t.Fragment,null,t.createElement(r,a({},e,{variant:"outlined",size:v,helperText:F,autoComplete:"off",onBlur:O})))},PopperProps:{className:"GuiCalendar"},disabled:T,readOnly:k},H)),"mobile"===h&&t.createElement(n,a({value:N,onChange:function(e,a){W(e,a)},onAccept:z,showToolbar:!1,ampm:E,minTime:A,maxTime:y,views:w||["hours","minutes","seconds"],inputFormat:C,mask:P,renderInput:function(e){return t.createElement(t.Fragment,null,t.createElement(r,a({},e,{variant:"outlined",size:v,helperText:F,autoComplete:"off",onBlur:O})))},DialogProps:{className:"GuiCalendar"},disabled:T,readOnly:k},H)),"static"===h&&t.createElement(i,{sx:{position:"relative"}},t.createElement(m,a({value:N,onChange:function(e,a){W(e,a)},ampm:E,minTime:A,maxTime:y,views:w||["hours","minutes","seconds"],displayStaticWrapperAs:"desktop",renderInput:function(e){return t.createElement(t.Fragment,null,t.createElement(r,a({},e,{variant:"outlined",size:v,helperText:F,autoComplete:"off"})))},disabled:T,readOnly:k},H)),T||k?t.createElement(i,{className:"disabled-static"}):null))))}));f.defaultProps={variant:"desktop",displayStaticWrapperAs:"desktop",labelWidth:"auto",width:"100%",size:"small",inputFormat:"HH:mm:ss",ampm:!1,mask:"__:__:__",helperText:"HH:mm:ss"};export{f as GuiTimePicker,f as default};