@gsretail.com/gui-core/build/core/Date/GuiDateRangePicker.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,{useState as n,useEffect as i}from"react";import{Box as l,Popover as r}from"@mui/material";import"../../node_modules/react-date-range/dist/index.js";import"../../node_modules/react-date-range/dist/locale/index.js";import{GuiInput as o}from"../Input/GuiInput.js";import s from"./GuiDateRangePicker.styled.js";import{GuiIconButton as d}from"../Button/GuiIconButton.js";import{GuiIcon as m}from"../../node_modules/@gsretail.com/gui-icons/dist/index.js";import{__exports as c}from"../../_virtual/index.js";import{__exports as u}from"../../_virtual/index2.js";var y=s((function(s){var y=s.label,g=s.labelWidth,p=s.labelTextAlign,h=s.required,D=s.width,f=s.size,E=s.disabled,b=s.readOnly,x=s.delimiter,w=s.showDateDisplay,v=s.retainEndDateOnFirstSelection,j=s.today,M=s.range,k=s.onChange,C=s.sx,F=s.className,O=s.boxProps,_=s.reset,z=s.onReset,N=e(s,["label","labelWidth","labelTextAlign","required","width","size","disabled","readOnly","delimiter","showDateDisplay","retainEndDateOnFirstSelection","today","range","onChange","sx","className","boxProps","reset","onReset"]),P=M.startDate?M.startDate:"",R=M.endDate?M.endDate:"",I=function(e){var t=new Date(e),a=t.getFullYear(),n=""+(t.getMonth()+1),i=""+t.getDate();return n.length<2&&(n="0"+n),i.length<2&&(i="0"+i),"NaN"===n?"yyyy-mm-dd":[a,n,i].join("-")},S=n(null),A=S[0],G=S[1],W=n(0),q=W[0],B=W[1],T=Boolean(A),Y=function(e){G(e.currentTarget)},H=function(){G(null)};return i((function(){q>=2&&(H(),B(0))}),[q]),a.createElement(l,t({className:["gui-form gui-date-picker",E&&"gui-form-disabled",b&&"gui-form-readonly",F&&F].join(" "),width:D},O,{sx:C}),y&&a.createElement(l,{minWidth:g},a.createElement("label",{className:["gui-label",p&&"textAlign-"+p,h&&"Mui-required"].join(" ")},y)),a.createElement(l,{flexGrow:1,className:"gui-date-range"},a.createElement(o,{name:"startDate",value:I(P),onClick:Y,width:"50%",size:f,readOnly:b,disabled:E}),a.createElement(l,{className:"delimiter"},x||"~"),a.createElement(o,{name:"endDate",value:I(R),onClick:Y,width:"calc(50% + 28px)",size:f,endIcon:a.createElement(a.Fragment,null,_?a.createElement(d,{variant:"clear",size:"tiny",onClick:function(e){e.stopPropagation(),z()}},a.createElement(m,{name:"Close"})):null,a.createElement(d,{variant:"clear",size:"tiny",sx:_&&{marginRight:"18px !important"}},a.createElement(m,{name:"Calendar"}))),readOnly:b,disabled:E}),b||E?null:a.createElement(r,{open:T,anchorEl:A,onClose:H,anchorOrigin:{vertical:"bottom",horizontal:"left"},elevation:6},a.createElement(l,{position:"relative"},a.createElement(c.DateRange,t({ranges:[t({key:"selection"},M)],onChange:function(e){k(e),B(q+1)},editableDateInputs:!0,showMonthAndYearPickers:!0,showDateDisplay:w,moveRangeOnFirstSelection:!1,retainEndDateOnFirstSelection:v,direction:"horizontal",locale:u.ko,monthDisplayFormat:"yyyy년 MM월",weekdayDisplayFormat:"eeeee",dateDisplayFormat:"yyyy-MM-dd",startDatePlaceholder:"yyyy-MM-dd",endDatePlaceholder:"yyyy-MM-dd"},N)),j&&a.createElement(c.DefinedRange,{onChange:function(e){k(e)},ranges:[t({key:"selection"},M)]})))))}));y.defaultProps={labelWidth:"auto",width:"100%",size:"small",months:2,showDateDisplay:!1,retainEndDateOnFirstSelection:!1,today:!0,reset:!1};export{y as GuiDateRangePicker,y as default};