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