UNPKG

@rnwonder/react-date-picker

Version:

A simple and reusable Datepicker component for ReactJS ([Demo](https://stackblitz.com/edit/solidjs-templates-dof6jl?file=src%2FApp.tsx))

2 lines (1 loc) 4.65 kB
"use strict";const e=require("react/jsx-runtime"),t=require("../DatePicker/index.js"),a=require("../Popover/index.js"),l=require("../../node_modules/.pnpm/@rnwonder_simple-datejs@1.0.8/node_modules/@rnwonder/simple-datejs/dist/utils.js"),o=require("../../utils/class.js"),n=require("../SelectorTwo/index.js"),r=require("react"),i=require("../Helpers/Show.js");module.exports=s=>{var u,c;const[d,p]=r.useState({label:"",value:{}}),[m,v]=r.useState(!1),[S,D]=r.useState([]),[h,b]=r.useState(!1),[j,f]=r.useState(n.defaultSelectorProps),O=r.useRef(null),g=e=>{const t=s.value||d,a=s.setValue||p;if("single"===e.type){const t=l.convertDateObjectToDate((null==e?void 0:e.selectedDate)||{}),o=l.labelFormat({date:t,option:(null==s?void 0:s.localeOptions)||{month:"short",day:"numeric",year:"numeric"},format:s.formatInputLabel,locale:s.locale});a({value:{selected:(null==t?void 0:t.toISOString())||"",selectedDateObject:(null==e?void 0:e.selectedDate)||{}},label:o})}if("range"===e.type){const t=e.startDate?l.convertDateObjectToDate(e.startDate):void 0,o=e.endDate?l.convertDateObjectToDate(e.endDate):void 0;let n="";const r={month:"short",day:"numeric",year:"numeric",...(null==s?void 0:s.localeOptions)||{},...(null==s?void 0:s.alwaysShowRangeStartYear)?{}:{year:void 0}},i=(null==s?void 0:s.localeOptions)||{month:"short",day:"numeric",year:"numeric"};let u="",c="";if(t&&o){if(t.getFullYear()===o.getFullYear()){if(s.alwaysShowRangeStartYear)return;r.year=void 0}else r.year="numeric";u=l.labelFormat({date:t,option:r,format:s.formatInputLabelRangeStart,locale:s.locale}),c=l.labelFormat({date:o,option:i,format:s.formatInputLabelRangeEnd,locale:s.locale})}t&&!o&&(u=l.labelFormat({date:t,option:r,format:s.formatInputLabelRangeStart,locale:s.locale})),!t&&o&&(c=l.labelFormat({date:o,option:i,format:s.formatInputLabelRangeEnd,locale:s.locale})),n=`${u} ${s.rangeDatesSeparator||"-"} ${c}`,a({value:{start:(null==t?void 0:t.toISOString())||"",startDateObject:(null==e?void 0:e.startDate)||{},end:(null==o?void 0:o.toISOString())||"",endDateObject:(null==e?void 0:e.endDate)||{}},label:n})}if("multiple"===e.type){const o=t.value.multipleDateObject||[],n=e.multipleDates||[];if(!t.label&&0===n.length)return;if(o.toString()===n.toString()&&t.label)return;const r=n.map((e=>{const t=l.convertDateObjectToDate(e);return l.labelFormat({date:t,option:(null==s?void 0:s.localeOptions)||{month:"short",day:"numeric",year:"numeric"},format:s.formatInputLabel,locale:s.locale})}));a({value:{multiple:n.map((e=>{var t;return(null==(t=l.convertDateObjectToDate(e))?void 0:t.toISOString())||""})).sort(((e,t)=>e.localeCompare(t))),multipleDateObject:n.sort(((e,t)=>{var a,o;const n=(null==(a=l.convertDateObjectToDate(e))?void 0:a.toISOString())||"",r=(null==(o=l.convertDateObjectToDate(t))?void 0:o.toISOString())||"";return n.localeCompare(r)}))},label:r.join(s.multipleDatesSeparator||", ")})}},w=()=>{v(!0)},y=(t=>{if(t){if("function"==typeof t){const a=t({value:s.value||d,showDate:w});return e.jsx(e.Fragment,{children:a})}return e.jsx(e.Fragment,{children:t})}})(s.renderInput);return e.jsx(a.Popover,{isShown:m,setIsShown:v,onClose:()=>{var e;D([]),b(!1),f(n.defaultSelectorProps),null==(e=s.onClose)||e.call(s)},allowedComponents:S,onOpen:()=>{var e;null==(e=s.onOpen)||e.call(s)},content:({close:a})=>{var l;return e.jsx(t.DatePicker,{...s,type:s.type||"single",value:(null==(l=s.value)?void 0:l.value)||d.value,handleOnChange:g,onChange:s.onChange,maxDate:s.maxDate,minDate:s.minDate,setAllowedComponents:D,close:a,setShowSelectorTwo:b,showSelectorTwo:h,setSelectorTwoProps:f,selectorTwoProps:j,ref:O,yearSelectorCount:s.yearSelectorCount||20})},onClickOutside:(e,t)=>{var a;(null==(a=S.concat(s.componentsToAllowOutsideClick||[]))?void 0:a.some((t=>{var a;return null==(a=null==t?void 0:t.contains)?void 0:a.call(t,null==e?void 0:e.target)})))||null==t||t(!1)},positionX:s.pickerPositionX,positionY:s.pickerPositionY,zIndex:s.zIndex,handleChildrenClick:y?()=>{}:void 0,width:s.inputWrapperWidth,className:o.cn(s.inputWrapperClass,"date-picker-input-wrapper"),children:e.jsxs("div",{className:"date-picker-input-area","data-date-picker-input-area":!0,"data-scope":"date-picker","data-part":"control",children:[e.jsx(i,{when:!!y,children:y}),e.jsx(i,{when:!y,children:e.jsx("input",{readOnly:!0,type:"text","data-scope":"date-picker","data-part":"input","aria-label":"date picker input",placeholder:s.placeholder,value:s.inputLabel||(null==(u=s.value)?void 0:u.label)||d.label,"data-type":"date-picker-input",...{...s.inputProps},className:o.cn("date-picker-input rn-w-full rn-px-1",null==(c=s.inputProps)?void 0:c.className,s.inputClass)})})]})})};