@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS
252 lines (217 loc) • 19.4 kB
JavaScript
"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{t as ee}from"../useTheme-TjNOC1gT.js";import{Button as i}from"../Button/Button.js";import{InputText as te}from"../InputText/InputText.js";import{Dialog as ne}from"../Dialog/Dialog.js";import{DEFAULT_PICKER_VARIANT as re,DEFAULT_TIME_VARIANT as ie,GROUP_NAME as a}from"./DateTimePicker.constants.js";import{Popover as ae}from"../Popover/Popover.js";import{Tab as oe}from"../Tabs/Tab.js";import{TabContent as se}from"../Tabs/TabContent.js";import{Tabs as ce}from"../Tabs/Tabs.js";import{forwardRef as o,useEffect as le,useId as ue,useImperativeHandle as de,useMemo as fe,useRef as s,useState as pe}from"react";import c from"lodash/fp/isEmpty.js";import l from"lodash/fp/isFunction.js";import me from"lodash/fp/isString.js";import u from"lodash/fp/omit.js";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{Label as he}from"@radix-ui/react-label";import ge from"lodash/fp/isError.js";import{UilAngleLeftB as _e,UilAngleRightB as ve,UilCalendarAlt as ye,UilClock as be}from"@tooni/iconscout-unicons-react";import xe from"react-calendar";import m from"react-timekeeper";import h from"lodash/fp/isDate.js";import g from"lodash/fp/pick.js";const Se=l(m)?m:l(m.default)&&m.default,_=o(({amPm:o=!1,clearable:m=!0,defaultOpen:_,defaultValue:v,description:Ce,disabled:y=!1,error:b,fullWidth:x=!1,i18n:S,id:we,label:C,labelElement:Te,maxDate:Ee,maxDateTime:w,maxTime:De,minDate:Oe,minDateTime:T,minTime:E,modal:D,name:ke,onChange:O,onClear:Ae,onClose:je,onDateChange:Me,onDismiss:Ne,onFieldChange:Pe,onNow:Fe,onOpen:Ie,onOpenChange:Le,onTimeChange:Re,onToday:ze,open:Be,orientation:k=`responsive`,pickerVariant:A=re,placeholder:Ve,popover:He,readOnly:j=!1,required:Ue=!1,staticPicker:M=!1,success:N,theme:We,timeVariant:P=ie,value:F,withClose:I=!0,withDatePicker:L=!0,withNow:R=!0,withPicker:Ge=!0,withTimePicker:z=!0,withToday:B=!0,...Ke},qe)=>{let V=ee(We),Je=ue(),Ye=(we??Je)||Je,Xe=s(null),H=s(null),Ze=s(null);de(qe,()=>({get calendar(){return Ze?.current??null},get input(){return Xe?.current??null},get picker(){return H?.current??null}}));let Qe=ge(b)?b.message:b,$e=b!==!0&&!!Qe,et=N!==!0&&!!N,U=$e||b===!0||ge(b),tt=(et||N===!0)&&!U,W=!y&&!j,[nt,rt]=pe(_||Be),G=e=>{if(!W)return;let t=nt;rt(e),l(Le)&&t!==e&&Le(e),!t&&e&&l(Ie)&&Ie(),t&&!e&&l(je)&&je()},it=()=>{G(!1),l(Ne)&&Ne()},at=()=>{!W||!l(O)||(l(Ae)&&Ae(),Me?.(null,null),Re?.(null,null),O?.(null))};le(()=>{G(!!(_||Be))},[_,Be]);let[ot,st]=pe(`date`),ct=e=>{st(e)},lt=e=>{if(!W||!l(O)&&!l(Me)||!h(e))return;let t=h(F)?F:v,n=new Date(e.toISOString());n.setHours(h(t)?t.getHours():0),n.setMinutes(h(t)?t.getMinutes():0),Me?.(e,n),O?.(n)},ut=e=>{if(!W||!l(O)&&!l(Re)||c(e)||!e.isValid)return;let t=h(F)?F:v,n=h(t)?new Date(t):new Date;n.setHours(e.hour),n.setMinutes(e.minute),Re?.(e,n),O?.(n)},dt=()=>{W&&(l(ze)&&ze(),lt(new Date))},ft=()=>{if(!W)return;l(Fe)&&Fe();let e=new Date;ut({formatted12:e.toLocaleTimeString(void 0,{hour:`numeric`,hour12:!0,minute:`numeric`}).toLocaleLowerCase(),formatted24:e.toLocaleTimeString(void 0,{hour:`numeric`,hourCycle:`h23`,minute:`numeric`}),formattedSimple:e.toLocaleTimeString(void 0,{hour:`numeric`,hourCycle:o?`h12`:`h23`,minute:`numeric`}),hour:e.getHours(),hour12:e.getHours()%12,isValid:!0,meridiem:e.getHours()<12?`am`:`pm`,minute:e.getMinutes()})},K={day:`2-digit`,hour:`2-digit`,hourCycle:o?`h12`:`h23`,minute:`2-digit`,month:`2-digit`,year:`numeric`},pt=g([`day`,`month`,`year`],K),mt=g([`hour`,`hourCycle`,`minute`],K),q=h(F)?F:v,ht=h(q)?q.toLocaleTimeString(void 0,g([`hour`,`hourCycle`,`minute`],K)):`00:00`,gt=null;T?gt=T===`now`?new Date:T:Oe&&(gt=Oe===`today`?new Date:Oe);let _t=null;w?_t=w===`now`?new Date:w:Ee&&(_t=Ee===`today`?new Date:Ee);let J=null;T?J=T===`now`?new Date:T:E&&(J=E===`now`?new Date:E);let Y=null;w?Y=w===`now`?new Date:w:De&&(Y=De===`now`?new Date:De);let vt=y||j?{from:`00:00`,to:`23:59`}:h(J)||h(Y)?{from:h(Y)?`${Y.getHours()}:${Y.getMinutes()}`:`00:00`,to:h(J)?`${J.getHours()}:${J.getMinutes()}`:`00:00`}:void 0,X=`
--rgb-accent: var(--color-brand-primary-light);
--rgb-background: var(--color-background-body-white);
--rgb-hover-background: var(--color-decorative-pink-90);
--rgb-color: var(--color-text-dark);
--rgb-hover-color: var(--color-text-dark);
`,Z=`
--rgb-accent: var(--color-brand-primary-dark);
--rgb-background: var(--color-brand-body-dark);
--rgb-hover-background: var(--color-decorative-pink-90);
--rgb-color: var(--color-text-light);
--rgb-hover-color: var(--color-text-dark);
`,Q=fe(()=>`
background-color: ${M?`transparent`:`var(--rgb-background)`};
border: none;
box-sizing: border-box;
display: flex;
flex-direction: column;
font-family: var(--typography-body-2-font-family);
font-size: var(--typography-body-2-font-size);
gap: var(--size-spacing-1);
letter-spacing: 0;
line-height: var(--typography-body-2-line-height);
min-width: calc((var(--size-spacing-5) * 7) + var(--size-spacing-1));
max-width: calc((var(--size-spacing-5) * 7) + var(--size-spacing-1));
width: ${x?`100%`:`calc((var(--size-spacing-5) * 7) + var(--size-spacing-1))`};
margin: 0 auto;
`,[x,M]),yt=fe(()=>`
.fractal-${a}__picker__date--light {
${X}
}
.fractal-${a}__picker__date--dark {
${Z}
}
.react-calendar {
${Q}
}
.react-calendar button {
background-color: transparent;
color: var(--rgb-color);
cursor: pointer;
padding-block: 0;
padding-inline: 0;
text-align: left;
}
.react-calendar__navigation {
align-items: center;
display: flex;
font-family: var(--typography-body-1-bold-font-family);
font-size: var(--typography-body-1-bold-font-size);
font-weight: var(--typography-body-1-bold-font-weight);
justify-content: space-between;
letter-spacing: 0;
line-height: var(--typography-body-1-bold-line-height);
padding-left: var(--size-spacing-1);
padding-top: var(--size-spacing-1);
}
.react-calendar__navigation button {
align-items: center;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.react-calendar__navigation__label {
align-items: center;
display: flex;
gap: var(--size-spacing-1);
order: 0;
text-transform: capitalize;
}
.react-calendar__navigation__label::after {
content: '▼';
font-size: xx-small;
}
button.react-calendar__navigation__arrow {
border-radius: var(--size-radius-rounded);
justify-content: center;
padding: var(--size-spacing-1);
}
button.react-calendar__navigation__arrow:hover {
background-color: var(--rgb-hover-background);
}
.react-calendar__navigation__prev2-button {
display: none;
order: 1;
}
.react-calendar__navigation__prev-button {
display: flex;
order: 2;
}
.react-calendar__navigation__next-button {
display: flex;
order: 3;
}
.react-calendar__navigation__next2-button {
display: none;
order: 4;
}
.react-calendar__month-view__weekdays {
margin-bottom: var(--size-spacing-1);
}
.react-calendar__month-view__weekdays__weekday,
button.react-calendar__tile {
text-align: center;
}
.react-calendar__month-view button.react-calendar__tile {
min-width: var(--size-spacing-5);
${x?``:`
max-width: var(--size-spacing-5);
width: var(--size-spacing-5);
`}
}
.react-calendar__month-view__weekdays abbr {
font-family: var(--typography-caption-bold-font-family);
font-size: var(--typography-caption-bold-font-size);
font-weight: var(--typography-caption-bold-font-weight);
letter-spacing: 0;
line-height: var(--typography-caption-bold-line-height);
text-decoration: none;
text-transform: uppercase;
}
button.react-calendar__month-view__days__day--neighboringMonth {
color: var(--color-text-placeholder);
}
button.react-calendar__tile {
align-items: center;
border-radius: var(--size-radius-rounded);
display: flex;
font-family: var(--typography-body-2-font-family);
font-size: var(--typography-body-2-font-size);
font-weight: var(--typography-body-2-font-weight);
height: var(--size-spacing-5);
justify-content: center;
letter-spacing: 0;
line-height: var(--typography-body-2-line-height);
max-height: var(--size-spacing-5);
min-height: var(--size-spacing-5);
text-transform: capitalize;
}
button.react-calendar__tile:disabled {
color: var(--color-text-disabled);
cursor: not-allowed;
}
button.react-calendar__tile:not(.react-calendar__tile--active, :disabled):hover {
color: var(--rgb-hover-color);
background-color: var(--rgb-hover-background);
}
button.react-calendar__tile--now {
font-family: var(--typography-body-2-bold-font-family);
font-size: var(--typography-body-2-bold-font-size);
font-weight: var(--typography-body-2-bold-font-weight);
letter-spacing: 0;
line-height: var(--typography-body-2-bold-line-height);
}
button.react-calendar__tile--active {
background-color: var(--rgb-accent);
}
`,[Z,x,X,Q]),bt=fe(()=>`
.fractal-${a}__picker__time--light {
${X}
}
.fractal-${a}__picker__time--dark {
${Z}
}
div.react-timekeeper {
${Q}
--main-bg: transparent;
--main-box-shadow: none;
--main-font-family: inherit;
--top-bg: transparent;
--top-colon-color: var(--rgb-color);
--top-text-color: var(--rgb-color);
--top-meridiem-color: var(--rgb-color);
--top-selected-color: var(--rgb-accent);
--clock-wrapper-bg: transparent;
--clock-bg: var(--color-base-grey-90);
--hand-line-color: var(--rgb-accent);
--hand-circle-center: var(--rgb-accent);
--hand-circle-outer: var(--rgb-accent);
--hand-minute-circle: var(--color-icon-dark);
--numbers-text-color: var(--rgb-color);
--numbers-text-color-disabled: var(--color-text-disabled);
--numbers-font-size-reg: var(--typography-body-2-font-size);
--numbers-font-size-inner: var(--typography-body-2-font-size);
--numbers-font-size-outer: var(--typography-body-2-font-size);
--meridiem-bg-color: transparent;
--meridiem-text-color: var(--rgb-color);
--meridiem-selected-bg-color: var(--rgb-accent);
--meridiem-selected-text-color: var(--color-text-light);
}
div.react-timekeeper__top-bar {
align-items: end;
display: flex;
font-family: var(--typography-display-1-font-family);
font-size: var(--typography-display-1-font-size-md);
font-weight: var(--typography-display-1-font-weight);
justify-content: center;
letter-spacing: 0;
line-height: var(--typography-display-1-line-height-md);
padding: 0;
}
div.react-timekeeper__top-bar > div {
width: fit-content;
}
span.react-timekeeper__tb-hour,
span.react-timekeeper__tb-colon,
span.react-timekeeper__tb-minute {
font-size: inherit;
line-height: inherit;
}
div.react-timekeeper__clock-wrapper {
padding: 0;
}
`,[Z,X,Q]),xt=`--/--/----`,St=`--:--${o?` --`:``}`,Ct=L&&z?`${xt} ${St}`:L?xt:z&&St||void 0,$=f(te,{id:Ye,ref:Xe,className:t(`${e}-${a}__input`,W?`[&_input]:cursor-pointer`:``),defaultValue:h(v)?L&&z?v.toLocaleString(void 0,K):L?v.toLocaleDateString(void 0,pt):z&&v.toLocaleTimeString(void 0,mt)||void 0:v===null?``:void 0,disabled:y,error:U,fullWidth:x,max:w===`now`?new Date().toISOString():h(w)?w.toISOString():void 0,min:T===`now`?new Date().toISOString():h(T)?T.toISOString():void 0,name:ke,placeholder:Ve||Ct,readOnly:j,required:Ue,success:tt,value:h(F)?L&&z?F.toLocaleString(void 0,K):L?F.toLocaleDateString(void 0,pt):z&&F.toLocaleTimeString(void 0,mt)||void 0:F===null?``:void 0,withSpinButton:!1}),wt={asChild:!0,className:t(`${e}-${a}__label`,V===`light`?`text-dark`:`text-light`,y?`${e}-${a}__label--disabled cursor-default`:`cursor-pointer`,Ue?`${e}-${a}__label--required after:text-feedback-danger-50 after:content-required`:``),htmlFor:Ye},Tt=p(d,{children:[Ce&&!$e&&!et&&f(r,{className:t(`fractal-datetime-picker__description`,`cursor-default text-dark`),element:`div`,variant:`caption-median`,children:Ce}),($e||et)&&f(r,{className:t(`fractal-datetime-picker__message fractal-datetime-picker__message--${U?`error`:`success`}`,M&&(U?`text-error`:tt&&`text-success`)||`text-dark`,`cursor-default`),element:`div`,variant:`caption-median`,children:U?ge(b)?b.message:b:N})]}),Et=p(`div`,{className:t(`${e}-${a}__static-display`,(c(k)||k===`responsive`)&&!D?``:`${e}-${a}__static-display--${D?`vertical`:k}`,`flex flex-col gap-1`,(c(k)||k===`responsive`)&&!D?`justify-start md:justify-between md:pb-2 md:pt-1`:k===`horizontal`&&!D?`justify-between pb-2 pt-1`:`justify-start`,A===`side-by-side`&&((c(k)||k===`responsive`)&&!D?`border-b-1 border-normal pb-2 md:border-b-0 md:border-r-1 md:pb-0 md:pr-2`:k===`horizontal`&&!D?`border-r-1 border-normal pr-2`:`border-b-1 border-normal pb-2`)),children:[p(`div`,{className:`flex flex-col gap-1`,children:[!D&&f(he,{...wt,children:f(r,{element:Te||(me(C)?`label`:`div`),children:C})}),Tt]}),p(`div`,{className:t(`flex`,(c(k)||k===`responsive`)&&!D?`flex-row items-end justify-between gap-2 md:flex-col md:items-start md:justify-start md:gap-0`:k===`horizontal`&&!D?`flex-col`:`flex-row items-end justify-between gap-2`),children:[L&&p(`div`,{className:t(`flex flex-col`,(c(k)||k===`responsive`)&&!D?`gap-1 md:gap-0`:k===`horizontal`&&!D?`flex-col`:`gap-1`),children:[f(r,{element:`div`,variant:`heading-3`,children:h(q)?q.getFullYear():`----`}),f(r,{element:`div`,variant:`heading-1`,children:h(q)?q.toLocaleDateString(void 0,{day:`2-digit`,month:`short`}):`--- --`})]}),z&&p(`div`,{className:`flex flex-row items-start gap-half`,children:[f(r,{element:`div`,variant:`heading-1`,children:h(q)?q.toLocaleTimeString(void 0,{hour:o?`numeric`:`2-digit`,hourCycle:o?`h12`:`h23`,minute:`2-digit`}).replace(/AM|PM/,``):`--:--`}),o&&f(r,{className:`pt-1`,element:`div`,variant:`body-1-bold`,children:h(q)?(q.getHours()??0)>=12?`PM`:`AM`:`--`})]})]})]}),Dt=p(r,{className:t(`${e}-${a}__picker__date-wrapper pb-2`,z&&A===`side-by-side`&&(c(k)||k===`responsive`)&&!D?`border-b-1 border-normal pb-2 md:border-b-0 md:border-r-1 md:pb-0 md:pl-2 md:pr-3`:``,z&&A===`side-by-side`&&k===`horizontal`&&!D?`border-r-1 border-normal pl-2 pr-3`:``,z&&A===`side-by-side`&&(k===`vertical`||D)?`border-b-1 border-normal pb-2`:``,x||!M?`w-full`:``),element:`div`,children:[f(`style`,{children:yt}),f(xe,{className:t(`${e}-${a}__picker__date`,`${e}-${a}__picker__date--${V}`,`${e}-${a}__picker__calendar`,`${e}-${a}__picker__calendar--${V}`),defaultValue:v,inputRef:Ze,maxDate:_t??void 0,minDate:gt??void 0,next2AriaLabel:S?.calendar?.fastNext,nextAriaLabel:S?.calendar?.next,nextLabel:f(ve,{}),prev2AriaLabel:S?.calendar?.fastPrevious,prevAriaLabel:S?.calendar?.previous,prevLabel:f(_e,{}),tileDisabled:({view:e})=>e===`month`&&(y||j),value:F,onChange:lt,onClickDay:e=>Pe?.(`day`,e),onClickMonth:e=>Pe?.(`month`,e),onClickYear:e=>Pe?.(`year`,e)})]}),Ot=f(r,{className:t(`${e}-${a}__picker__time-wrapper`,`${e}-${a}__picker__time`,`${e}-${a}__picker__time--${V}`,`${e}-${a}__picker__${P}`,`${e}-${a}__picker__${P}--${V}`,`pb-2`),element:`div`,children:P===`clock`&&p(d,{children:[f(`style`,{children:bt}),f(Se,{disabledTimeRange:vt,hour24Mode:!o,switchToMinuteOnHourSelect:!0,time:ht,onChange:ut})]})}),kt=(L||z)&&p(`div`,{className:t(`fractal-datetime-picker__picker`,`fractal-datetime-picker__picker--${V}`,(c(k)||k===`responsive`)&&!D?`fractal-datetime-picker__picker--responsive`:`fractal-datetime-picker__picker--${D?`vertical`:k}`,`flex`,(c(k)||k===`responsive`)&&!D?`flex-col md:flex-row md:gap-2`:k===`horizontal`&&!D?`flex-row gap-2`:`flex-col`,x||!M?`w-full`:``),children:[L&&z&&A===`tabs`&&p(ce,{className:t(`[&>div]:bg-transparent`,x||!M?`w-full`:``),defaultTab:`date`,label:S?.tabs?.bar,tab:ot,tabs:p(d,{children:[f(oe,{icon:f(ye,{}),iconOnly:!0,label:S?.tabs?.date,name:`date`}),f(oe,{icon:f(be,{}),iconOnly:!0,label:S?.tabs?.time,name:`time`})]}),onTabChange:ct,children:[f(se,{name:`date`,children:Dt}),f(se,{name:`time`,children:Ot})]}),L&&(!z||A===`side-by-side`)&&Dt,z&&(!L||A===`side-by-side`)&&Ot]}),At=L&&B||z&&R||m||!M&&I?p(`div`,{className:t(`${e}-${a}__actions`,`flex justify-between gap-3 border-t-1 border-normal pt-2`),children:[(L&&B||z&&R)&&p(`div`,{className:`flex gap-1`,children:[L&&B&&f(i,{className:t(`fractal-datetime-picker__actions__today`),disabled:y||j,label:S?.buttons?.today,theme:V,variant:`text`,onClick:dt}),z&&R&&f(i,{className:t(`fractal-datetime-picker__actions__now`),disabled:y||j,label:S?.buttons?.now,theme:V,variant:`text`,onClick:ft})]}),(m||!M&&I)&&p(`div`,{className:`flex flex-1 justify-end gap-1`,children:[m&&f(i,{className:t(`fractal-datetime-picker__actions__clear`),disabled:y||j||!h(q),label:S?.buttons?.clear,theme:V,variant:`secondary`,onClick:at}),!M&&I&&f(i,{className:t(`fractal-datetime-picker__actions__close`),label:S?.buttons?.close,theme:V,onClick:it})]})]}):!1;return p(`div`,{className:n(`${e}-${a}`,`${e}-${a}--${V}`,`w-fit max-w-full`,`${e}-${a}--${W?``:`not-`}writable`,y?`${e}-${a}--disabled`:``,U?`${e}-${a}--with-error`:``,j?`${e}-${a}--readonly`:``,Ue?`${e}-${a}--required`:``,tt?`${e}-${a}--with-success`:``,j&&!y?`cursor-default`:``,x?`${e}-${a}--full-width w-full`:`sm:w-fit`,Ke.className),...u([`className`],Ke),children:[!C||M?!1:f(he,{...wt,children:f(r,{element:Te||(me(C)?`label`:`div`),children:C})}),M?p(d,{children:[p(`div`,{className:t(`${e}-${a}__static-wrapper`,(c(k)||k===`responsive`)&&!D?``:`${e}-${a}__static-wrapper--${D?`vertical`:k}`,`flex gap-2`,(c(k)||k===`responsive`)&&!D?`flex-col md:flex-row`:k===`horizontal`&&!D?`flex-row`:`flex-col`),children:[Et,kt]}),At]}):Ge?D?p(ne,{ref:H,closeButtonLabel:S?.buttons?.close,disabled:y||j,modal:!0,open:nt,root:{className:`min-w-6`},title:C,trigger:$,onDismiss:Ne,onToggle:G,...u([`className`,`defaultopen`,`disabled`,`open`,`trigger`,`onDismiss`,`onToggle`],He),children:[Et,kt,At]}):p(ae,{ref:H,align:`start`,className:n(`${e}-${a}__popover`,He?.className),disabled:y||j,fullWidth:x,open:nt,trigger:$,width:x?`full`:`auto`,withArrow:!1,withScroll:!1,onOpenChange:G,...u([`className`,`disabled`,`open`,`toggleOnTriggerClick`,`trigger`,`triggerAsButton`,`withArrow`,`onOpenChange`],He),children:[kt,At]}):$,!M&&Tt]})});_.displayName=`DateTimePicker`;export{_ as DateTimePicker,_ as default};
//# sourceMappingURL=DateTimePicker.js.map