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) 1.95 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),e=require("../../utils/class.js"),t=require("react"),o=require("../ui/popover.js"),s=t.forwardRef(((s,r)=>{const[i,a]=t.useState(!1),[c,l]=t.useState(!1);t.useEffect((()=>{s.isShown||i?setTimeout((()=>{l(!0)}),100):l(!1)}),[s.isShown,i]),t.useEffect((()=>{var n,e;s.isShown||i?null==(e=s.onOpen)||e.call(s):null==(n=s.onClose)||n.call(s)}),[s.isShown,i]);const d=()=>{s.setIsShown?s.setIsShown(!1):a(!1)};return n.jsxs(o.ShadPopover,{open:s.isShown||i,onOpenChange:n=>{s.handleChildrenClick&&n?s.handleChildrenClick(s.setIsShown||a):s.setIsShown?s.setIsShown(n):a(n)},children:[n.jsx(o.ShadPopoverTrigger,{asChild:!0,className:e.cn(s.className),style:{...s.width&&{width:s.width||"100%"}},children:s.children}),n.jsx(o.ShadPopoverContent,{ref:r,side:s.positionY&&"auto"!==s.positionY?s.positionY:"bottom",align:"left"===s.positionX?"start":"right"===s.positionX?"end":"center",className:e.cn("\n rn-duration-350\n rn-delay-50\n rn-transition-transform\n rn-ease-in-out\n motion-reduce:rn-transition-none\n ",{"rn-translate-y-[0rem] rn-opacity-100":c,"-rn-translate-y-[1rem] rn-opacity-0":!c},s.contentClassName),style:{zIndex:s.zIndex||1e4},onInteractOutside:n=>{s.onClickOutside&&(n.preventDefault(),s.onClickOutside(n,s.setIsShown||a))},children:n.jsx("div",{className:e.cn("\n rn-duration-350\n rn-transition-opacity\n rn-ease-in-out\n motion-reduce:rn-transition-none\n ",{"rn-opacity-100 scale-100":c,"rn-opacity-0 scale-90":!c},s.contentClassName),children:(()=>{if("function"==typeof s.content){const e=s.content({close:d});return n.jsx("div",{"data-type":"dropdown",children:e})}return n.jsx("div",{"data-type":"dropdown",children:s.content})})()})})]})}));exports.Popover=s;