@bikdotai/bik-component-library 0.0.635-3 → 0.0.635-4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-calendar"),a=require("../../hooks/useOutside.js"),n=require("../../utils/DateUtils.js"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/calendar.svg.js"),s=require("../TypographyStyle.js"),l=require("./DatePickerWrapper.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c,d=u(r);exports.DateButtonType=void 0,(c=exports.DateButtonType||(exports.DateButtonType={})).DEFAULT="default",c.LARGE="large";exports.DatePickerWrapper=r=>{let{val:u,onChange:c,calendarProps:O,disabled:p,pickerStyles:y,nativeID:g,maxDate:D,minDate:S,dateButtonType:L,dateButtonStyles:C}=r;const[v,b]=t.useState(!1),[f,j]=t.useState(!1),x=t.useRef(null),m=t.useRef(null);a.useOutside(m,(()=>{b(!1)})),t.useEffect((()=>{if(x.current&&m.current){const e=x.current.getBoundingClientRect(),t=m.current.offsetHeight,r=window.innerHeight-e.bottom;j(r<t)}}),[v]);const R=()=>{var e,t,r,a;return u?Array.isArray(u)?(null===(e=null==u?void 0:u[0])||void 0===e?void 0:e.toString())&&(null===(t=null==u?void 0:u[1])||void 0===t?void 0:t.toString())?`${new Date(null===(r=null==u?void 0:u[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(a=null==u?void 0:u[1])||void 0===a?void 0:a.toString()).toLocaleDateString()}`:`${n.default.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(u.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return e.jsxs(e.Fragment,{children:[e.jsxs(l.DateBtn,Object.assign({id:g,ref:x,bgColor:p?o.COLORS.background.base:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary,onClick:()=>b(!v),dateButtonType:L||exports.DateButtonType.DEFAULT,style:C},{children:[L===exports.DateButtonType.LARGE?e.jsx(s.BodyPrimary,Object.assign({style:{color:p?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:R()})):e.jsx(s.BodySecondary,Object.assign({style:{color:p?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:R()})),e.jsx(i.default,{width:L===exports.DateButtonType.LARGE?24:20,height:L===exports.DateButtonType.LARGE?24:20,color:p?o.COLORS.content.inactive:o.COLORS.content.primary})]})),e.jsx(l.PickerContainer,Object.assign({ref:m,style:Object.assign(Object.assign({},y),{top:f?"auto":"calc(100% + 8px)",bottom:f?"calc(100% + 8px)":"auto"}),contentPrimary:o.COLORS.content.primary,subDued:o.COLORS.surface.subdued,brandColor:o.COLORS.background.brand,bgColor:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary},{children:e.jsx(d.default,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:e=>{c(e),b(!1)},maxDate:D,minDate:S,value:u?Array.isArray(u)?2===u.length?[new Date(u[0]),new Date(u[1])]:null:new Date(u):null},O))}))]})};
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-calendar"),a=require("../../hooks/useOutside.js"),n=require("../../utils/DateUtils.js"),o=require("../../constants/Theme.js"),i=require("../../assets/icons/calendar.svg.js"),s=require("../TypographyStyle.js"),l=require("./DatePickerWrapper.styled.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c,d=u(r);exports.DateButtonType=void 0,(c=exports.DateButtonType||(exports.DateButtonType={})).DEFAULT="default",c.LARGE="large";exports.DatePickerWrapper=r=>{let{val:u,onChange:c,calendarProps:O,disabled:p,pickerStyles:y,nativeID:g,maxDate:D,minDate:S,dateButtonType:L,dateButtonStyles:C}=r;const[v,b]=t.useState(!1),[f,j]=t.useState(!1),x=t.useRef(null),m=t.useRef(null);a.useOutside(m,(()=>{b(!1)})),t.useEffect((()=>{if(x.current&&m.current){const e=x.current.getBoundingClientRect(),t=m.current.offsetHeight,r=window.innerHeight-e.bottom;j(r<t)}}),[v]);const R=()=>{var e,t,r,a;return u?Array.isArray(u)?(null===(e=null==u?void 0:u[0])||void 0===e?void 0:e.toString())&&(null===(t=null==u?void 0:u[1])||void 0===t?void 0:t.toString())?`${new Date(null===(r=null==u?void 0:u[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(a=null==u?void 0:u[1])||void 0===a?void 0:a.toString()).toLocaleDateString()}`:`${n.default.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(u.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return e.jsxs(e.Fragment,{children:[e.jsxs(l.DateBtn,Object.assign({id:g,ref:x,bgColor:p?o.COLORS.background.base:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary,onClick:()=>b(!v),dateButtonType:L||exports.DateButtonType.DEFAULT,style:C},{children:[L===exports.DateButtonType.LARGE?e.jsx(s.BodyPrimary,Object.assign({style:{color:p?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:R()})):e.jsx(s.BodySecondary,Object.assign({style:{color:p?o.COLORS.content.inactive:o.COLORS.content.primary,flex:1}},{children:R()})),e.jsx(i.default,{width:L===exports.DateButtonType.LARGE?24:20,height:L===exports.DateButtonType.LARGE?24:20,color:p?o.COLORS.content.inactive:o.COLORS.content.primary})]})),v&&!p&&e.jsx(l.PickerContainer,Object.assign({ref:m,style:Object.assign(Object.assign({},y),{top:f?"auto":"calc(100% + 8px)",bottom:f?"calc(100% + 8px)":"auto"}),contentPrimary:o.COLORS.content.primary,subDued:o.COLORS.surface.subdued,brandColor:o.COLORS.background.brand,bgColor:o.COLORS.surface.standard,borderColor:o.COLORS.stroke.primary},{children:e.jsx(d.default,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:e=>{c(e),b(!1)},maxDate:D,minDate:S,value:u?Array.isArray(u)?2===u.length?[new Date(u[0]),new Date(u[1])]:null:new Date(u):null},O))}))]})};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as t,Fragment as e,jsx as r}from"react/jsx-runtime";import{useState as n,useRef as o,useEffect as a}from"react";import i from"react-calendar";import{useOutside as l}from"../../hooks/useOutside.js";import c from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import d from"../../assets/icons/calendar.svg.js";import{BodyPrimary as u,BodySecondary as m}from"../TypographyStyle.js";import{DateBtn as g,PickerContainer as p}from"./DatePickerWrapper.styled.js";var D;!function(t){t.DEFAULT="default",t.LARGE="large"}(D||(D={}));const y=y=>{let{val:b,onChange:f,calendarProps:v,disabled:h,pickerStyles:j,nativeID:S,maxDate:w,minDate:L,dateButtonType:A,dateButtonStyles:C}=y;const[k,x]=n(!1),[O,E]=n(!1),T=o(null),R=o(null);l(R,(()=>{x(!1)})),a((()=>{if(T.current&&R.current){const t=T.current.getBoundingClientRect(),e=R.current.offsetHeight,r=window.innerHeight-t.bottom;E(r<e)}}),[k]);const B=()=>{var t,e,r,n;return b?Array.isArray(b)?(null===(t=null==b?void 0:b[0])||void 0===t?void 0:t.toString())&&(null===(e=null==b?void 0:b[1])||void 0===e?void 0:e.toString())?`${new Date(null===(r=null==b?void 0:b[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(n=null==b?void 0:b[1])||void 0===n?void 0:n.toString()).toLocaleDateString()}`:`${c.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(b.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return t(e,{children:[t(g,Object.assign({id:S,ref:T,bgColor:h?s.background.base:s.surface.standard,borderColor:s.stroke.primary,onClick:()=>x(!k),dateButtonType:A||D.DEFAULT,style:C},{children:[A===D.LARGE?r(u,Object.assign({style:{color:h?s.content.inactive:s.content.primary,flex:1}},{children:B()})):r(m,Object.assign({style:{color:h?s.content.inactive:s.content.primary,flex:1}},{children:B()})),r(d,{width:A===D.LARGE?24:20,height:A===D.LARGE?24:20,color:h?s.content.inactive:s.content.primary})]})),r(p,Object.assign({ref:R,style:Object.assign(Object.assign({},j),{top:O?"auto":"calc(100% + 8px)",bottom:O?"calc(100% + 8px)":"auto"}),contentPrimary:s.content.primary,subDued:s.surface.subdued,brandColor:s.background.brand,bgColor:s.surface.standard,borderColor:s.stroke.primary},{children:r(i,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:t=>{f(t),x(!1)},maxDate:w,minDate:L,value:b?Array.isArray(b)?2===b.length?[new Date(b[0]),new Date(b[1])]:null:new Date(b):null},v))}))]})};export{D as DateButtonType,y as DatePickerWrapper};
|
|
1
|
+
import{jsxs as t,Fragment as e,jsx as r}from"react/jsx-runtime";import{useState as n,useRef as o,useEffect as a}from"react";import i from"react-calendar";import{useOutside as l}from"../../hooks/useOutside.js";import c from"../../utils/DateUtils.js";import{COLORS as s}from"../../constants/Theme.js";import d from"../../assets/icons/calendar.svg.js";import{BodyPrimary as u,BodySecondary as m}from"../TypographyStyle.js";import{DateBtn as g,PickerContainer as p}from"./DatePickerWrapper.styled.js";var D;!function(t){t.DEFAULT="default",t.LARGE="large"}(D||(D={}));const y=y=>{let{val:b,onChange:f,calendarProps:v,disabled:h,pickerStyles:j,nativeID:S,maxDate:w,minDate:L,dateButtonType:A,dateButtonStyles:C}=y;const[k,x]=n(!1),[O,E]=n(!1),T=o(null),R=o(null);l(R,(()=>{x(!1)})),a((()=>{if(T.current&&R.current){const t=T.current.getBoundingClientRect(),e=R.current.offsetHeight,r=window.innerHeight-t.bottom;E(r<e)}}),[k]);const B=()=>{var t,e,r,n;return b?Array.isArray(b)?(null===(t=null==b?void 0:b[0])||void 0===t?void 0:t.toString())&&(null===(e=null==b?void 0:b[1])||void 0===e?void 0:e.toString())?`${new Date(null===(r=null==b?void 0:b[0])||void 0===r?void 0:r.toString()).toLocaleDateString()}-${new Date(null===(n=null==b?void 0:b[1])||void 0===n?void 0:n.toString()).toLocaleDateString()}`:`${c.getPastDate(new Date,30).toLocaleDateString()}-${(new Date).toLocaleDateString()}`:new Date(b.toString()).toLocaleDateString():(new Date).toLocaleDateString()};return t(e,{children:[t(g,Object.assign({id:S,ref:T,bgColor:h?s.background.base:s.surface.standard,borderColor:s.stroke.primary,onClick:()=>x(!k),dateButtonType:A||D.DEFAULT,style:C},{children:[A===D.LARGE?r(u,Object.assign({style:{color:h?s.content.inactive:s.content.primary,flex:1}},{children:B()})):r(m,Object.assign({style:{color:h?s.content.inactive:s.content.primary,flex:1}},{children:B()})),r(d,{width:A===D.LARGE?24:20,height:A===D.LARGE?24:20,color:h?s.content.inactive:s.content.primary})]})),k&&!h&&r(p,Object.assign({ref:R,style:Object.assign(Object.assign({},j),{top:O?"auto":"calc(100% + 8px)",bottom:O?"calc(100% + 8px)":"auto"}),contentPrimary:s.content.primary,subDued:s.surface.subdued,brandColor:s.background.brand,bgColor:s.surface.standard,borderColor:s.stroke.primary},{children:r(i,Object.assign({tileClassName:["custom__tile"],className:["custom__calendar"],onChange:t=>{f(t),x(!1)},maxDate:w,minDate:L,value:b?Array.isArray(b)?2===b.length?[new Date(b[0]),new Date(b[1])]:null:new Date(b):null},v))}))]})};export{D as DateButtonType,y as DatePickerWrapper};
|