@itcase/ui-web 1.10.23 → 1.10.24
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.
- package/dist/{DatePicker_cjs_Bk4MiKf1.js → DatePicker_cjs_Nh9EgPcT.js} +1 -1
- package/dist/{DatePicker_es_CEDY1nRx.js → DatePicker_es_DbD0yr_Y.js} +1 -1
- package/dist/cjs/components/DatePeriod.js +1 -1
- package/dist/cjs/components/DatePicker.js +1 -1
- package/dist/components/DatePeriod.js +1 -1
- package/dist/components/DatePicker.js +1 -1
- package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +8 -1
- package/dist/types/components/DatePeriod/DatePeriod.js +5 -3
- package/dist/types/components/DatePeriod/__test__/DatePeriodTest.stories.js +1 -1
- package/dist/types/components/DatePicker/DatePicker.js +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("clsx"),r=require("date-fns/locale"),i=require("react-datepicker"),n=require("@itcase/ui-core/hooks"),o=require("./Button_cjs_C57gpGui.js"),c=require("./primitives_cjs_aZVOWoZJ.js"),s=require("./Input_cjs_D9PxC_lJ.js"),l=require("./default_cjs_BMdcKzhJ.js");const p={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},u=e=>{const t=e.getDay()||7,a=new Date(e);a.setDate(e.getDate()-(t-1));const r=new Date(a);return r.setDate(a.getDate()+6),{mondayDate:a,sundayDate:r}},d={appearance:p,setAppearance:e=>{d.appearance=e}};const m=t.forwardRef((r,i)=>{const{inputIcon:n,inputProps:o,value:c,isClearable:l}=r,p=t.useMemo(()=>{if(c){const e=c.split(" - ");return e[0]===e[1]?e[0]:c}return""},[c]);return e.jsxs(t.Fragment,{children:[e.jsx(s.Input,{...r,...o,className:a(o?.className,"datepicker__input"),ref:i,autocomplete:"off",value:p}),n&&e.jsx(x,{...o}),l&&e.jsx(h,{datepickerRef:r.datepickerRef,...o})]})});function h(r){const{clearButton:i,clearButtonAppearance:n,clearIcon:s,clearIconAppearance:l,clearIconSrc:p,datepickerRef:u}=r,d=t.useCallback(e=>{u?.current?.onClearClick(e),u?.current?.handleFocus(e)},[]);return e.jsx(t.Fragment,{children:i?e.jsx(o.Button,{appearance:n,className:a("react-datepicker__clear-button","cursor_type_pointer"),label:i,onClick:d}):(s||p)&&e.jsx(c.Icon,{appearance:l,className:a("react-datepicker__clear-icon","cursor_type_pointer"),imageSrc:p,SvgImage:s,onClick:d})})}function x(t){const{inputIcon:r,inputIconFill:i,inputIconFillHover:n,inputIconFillSize:o,inputIconItemFill:s,inputIconShape:l,inputIconSize:p,inputIconSrc:u,onClick:d}=t;return e.jsx(c.Icon,{className:a("react-datepicker__input-icon","cursor_type_pointer"),size:p,fill:i,fillHover:n,fillSize:o,iconFill:s,imageSrc:u,shape:l,SvgImage:r,onClick:()=>d&&d()})}exports.DatePickerInput=function(s){const{className:l,dataTestId:p,dataTour:h,datePickerProps:x={},endValue:f,inputProps:y={},value:k,onChange:C}=s,{appearance:S,customTimeInput:g,disablePastDays:_,monthsShown:z,selectsRange:I,showWeekNumbers:v,showWeekPicker:T}=x,j=n.useAppearanceConfig(S,d),D=n.useDevicePropsGenerator(x,j),{daySize:P,dayTextColor:b,dayTextShape:F,dayTextSize:w,iconFill:N,iconFillHover:R,iconFillSize:A,iconItemFill:q,iconLeft:L,iconRight:W,iconShape:H,monthTextColor:B,monthTextSize:M,monthTextWeight:$,popper:O,popperPlacement:U,sizeClass:G,widthClass:V,yearTextColor:E,yearTextSize:J,yearTextWeight:K,isClearable:Q}=D,X=t.useRef(null),[Y,Z]=t.useMemo(()=>{let e,t;return k&&(e="string"==typeof k?new Date(k):k),f&&(t="string"==typeof f?new Date(f):f),[e,t]},[k,f]),ee=t.useCallback(e=>{const t=Array.isArray(e)?e:[e],[a,r]=t;if(a&&T){const{mondayDate:e,sundayDate:t}=u(a);C?.(e,t)}else C?.(a,r)},[T,C]),te=t.useCallback(e=>{const{mondayDate:t,sundayDate:a}=u(e);C?.(t,a)},[C]),ae=t.useCallback((t,a)=>e.jsx(o.Button,{className:"react-datepicker__day-button",size:P,label:a.getDate().toString(),labelTextColor:b,labelTextSize:w,shape:F}),[P,b,F,w]),re=t.useCallback(({decreaseMonth:t,increaseMonth:a,monthDate:r})=>e.jsxs("div",{className:"react-datepicker__header--div",children:[L&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:N,fillHover:R,fillSize:A,iconFill:q,shape:H,SvgImage:L,onClick:t}),e.jsxs("div",{className:"react-datepicker__data",children:[e.jsx(c.Text,{className:"react-datepicker__month",size:M,textColor:B,textWeight:$,children:r.toLocaleString("ru-RU",{month:"long"})}),e.jsx(c.Text,{className:"react-datepicker__year",size:J,textColor:E,textWeight:K,children:r.toLocaleString("ru-RU",{year:"numeric"})})]}),W&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:N,fillHover:R,fillSize:A,iconFill:q,shape:H,SvgImage:W,onClick:a})]}),[N,R,A,q,L,W,H,B,M,$,E,J,K]),{styles:ie}=n.useStyles(s);return e.jsx("div",{className:a(l,"datepicker",z&&"datepicker_multiple-months",g&&"datepicker_button",G&&`datepicker_size_${G}`,V&&`datepicker_width_${V}`),"data-testid":p,"data-tour":h,style:ie,children:e.jsx(i,{ref:X,...x,minDate:_?new Date:void 0,customInput:e.jsx(m,{datepickerRef:X,inputProps:y,isClearable:Q}),endDate:I?Z:void 0,locale:r.ru,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:O&&`react-datepicker-popper-${O}`,popperPlacement:U,preventOpenOnFocus:!0,renderCustomHeader:re,renderDayContents:ae,selected:Y,startDate:Y,isClearable:!1,onChange:ee,onWeekSelect:v?te:void 0})})},exports.datePickerAppearance=p,exports.datePickerConfig=d;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("clsx"),r=require("date-fns/locale"),i=require("react-datepicker"),n=require("@itcase/ui-core/hooks"),o=require("./Button_cjs_C57gpGui.js"),c=require("./primitives_cjs_aZVOWoZJ.js"),s=require("./Input_cjs_D9PxC_lJ.js"),l=require("./default_cjs_BMdcKzhJ.js");const p={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:l.icons14.Arrow.ChevronLeft,iconRight:l.icons14.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},u=e=>{const t=e.getDay()||7,a=new Date(e);a.setDate(e.getDate()-(t-1));const r=new Date(a);return r.setDate(a.getDate()+6),{mondayDate:a,sundayDate:r}},d={appearance:p,setAppearance:e=>{d.appearance=e}};const m=t.forwardRef((r,i)=>{const{inputIcon:n,inputProps:o,value:c,isClearable:l}=r,p=t.useMemo(()=>{if(c){const e=c.split(" - ");return e[0]===e[1]?e[0]:c}return""},[c]);return e.jsxs(t.Fragment,{children:[e.jsx(s.Input,{...r,...o,className:a(o?.className,"datepicker__input"),ref:i,autocomplete:"off",value:p}),n&&e.jsx(x,{...o}),l&&e.jsx(h,{datepickerRef:r.datepickerRef,...o})]})});function h(r){const{clearButton:i,clearButtonAppearance:n,clearIcon:s,clearIconAppearance:l,clearIconSrc:p,datepickerRef:u}=r,d=t.useCallback(e=>{u?.current?.onClearClick(e),u?.current?.handleFocus(e)},[]);return e.jsx(t.Fragment,{children:i?e.jsx(o.Button,{appearance:n,className:a("react-datepicker__clear-button","cursor_type_pointer"),label:i,onClick:d}):(s||p)&&e.jsx(c.Icon,{appearance:l,className:a("react-datepicker__clear-icon","cursor_type_pointer"),imageSrc:p,SvgImage:s,onClick:d})})}function x(t){const{inputIcon:r,inputIconFill:i,inputIconFillHover:n,inputIconFillSize:o,inputIconItemFill:s,inputIconShape:l,inputIconSize:p,inputIconSrc:u,onClick:d}=t;return e.jsx(c.Icon,{className:a("react-datepicker__input-icon","cursor_type_pointer"),size:p,fill:i,fillHover:n,fillSize:o,iconFill:s,imageSrc:u,shape:l,SvgImage:r,onClick:()=>d&&d()})}exports.DatePickerInput=function(s){const{className:l,dataTestId:p,dataTour:h,datePickerProps:x={},endValue:f,inputProps:y={},value:k,onChange:C}=s,{appearance:S,customTimeInput:g,disablePastDays:_,monthsShown:z,selectsRange:I,showWeekNumbers:v,showWeekPicker:T}=x,j=n.useAppearanceConfig(S,d),D=n.useDevicePropsGenerator(x,j),{daySize:P,dayTextColor:b,dayTextShape:F,dayTextSize:w,iconFill:N,iconFillHover:R,iconFillSize:A,iconItemFill:q,iconLeft:L,iconRight:W,iconShape:H,monthTextColor:B,monthTextSize:M,monthTextWeight:$,popper:O,popperPlacement:U,sizeClass:G,widthClass:V,yearTextColor:E,yearTextSize:J,yearTextWeight:K,isClearable:Q}=D,X=t.useRef(null),[Y,Z]=t.useMemo(()=>{let e,t;return k&&(e="string"==typeof k?new Date(k):k),f&&(t="string"==typeof f?new Date(f):f),[e,t]},[k,f]),ee=t.useCallback(e=>{const t=Array.isArray(e)?e:[e],[a,r]=t;if(a&&T){const{mondayDate:e,sundayDate:t}=u(a);C?.(e,t)}else C?.(a,r)},[T,C]),te=t.useCallback(e=>{const{mondayDate:t,sundayDate:a}=u(e);C?.(t,a)},[C]),ae=t.useCallback((t,a)=>e.jsx(o.Button,{className:"react-datepicker__day-button",size:P,label:a.getDate().toString(),labelTextColor:b,labelTextSize:w,shape:F}),[P,b,F,w]),re=t.useCallback(({decreaseMonth:t,increaseMonth:a,monthDate:r})=>e.jsxs("div",{className:"react-datepicker__header--div",children:[L&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:N,fillHover:R,fillSize:A,iconFill:q,shape:H,SvgImage:L,onClick:t}),e.jsxs("div",{className:"react-datepicker__data",children:[e.jsx(c.Text,{className:"react-datepicker__month",size:M,textColor:B,textWeight:$,children:r.toLocaleString("ru-RU",{month:"long"})}),e.jsx(c.Text,{className:"react-datepicker__year",size:J,textColor:E,textWeight:K,children:r.toLocaleString("ru-RU",{year:"numeric"})})]}),W&&e.jsx(c.Icon,{className:"react-datepicker__icon",fill:N,fillHover:R,fillSize:A,iconFill:q,shape:H,SvgImage:W,onClick:a})]}),[N,R,A,q,L,W,H,B,M,$,E,J,K]),{styles:ie}=n.useStyles(s);return e.jsx("div",{className:a(l,"datepicker",null!=z&&z>1&&"datepicker_multiple-months",g&&"datepicker_button",G&&`datepicker_size_${G}`,V&&`datepicker_width_${V}`),"data-testid":p,"data-tour":h,style:ie,children:e.jsx(i,{ref:X,...x,monthsShown:z,minDate:_?new Date:void 0,customInput:e.jsx(m,{datepickerRef:X,inputProps:y,isClearable:Q}),endDate:I?Z:void 0,locale:r.ru,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:O&&`react-datepicker-popper-${O}`,popperPlacement:U,preventOpenOnFocus:!0,renderCustomHeader:re,renderDayContents:ae,selected:Y,startDate:Y,isClearable:!1,onChange:ee,onWeekSelect:v?te:void 0})})},exports.datePickerAppearance=p,exports.datePickerConfig=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as t}from"react/jsx-runtime";import a,{useMemo as r,useCallback as i,useRef as o}from"react";import n from"clsx";import{ru as c}from"date-fns/locale";import l from"react-datepicker";import{useAppearanceConfig as s,useDevicePropsGenerator as p,useStyles as d}from"@itcase/ui-core/hooks";import{B as m}from"./Button_es_W5dTrjgN.js";import{I as u,T as h}from"./primitives_es_BN7QUOlL.js";import{I as f}from"./Input_es_DabuPYuA.js";import{b as y}from"./default_es_CsYL84NN.js";const S={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},_=e=>{const t=e.getDay()||7,a=new Date(e);a.setDate(e.getDate()-(t-1));const r=new Date(a);return r.setDate(a.getDate()+6),{mondayDate:a,sundayDate:r}},g={appearance:S,setAppearance:e=>{g.appearance=e}};function C(a){const{className:f,dataTestId:y,dataTour:S,datePickerProps:C={},endValue:x,inputProps:z={},value:T,onChange:v}=a,{appearance:I,customTimeInput:D,disablePastDays:F,monthsShown:w,selectsRange:P,showWeekNumbers:b,showWeekPicker:N}=C,R=s(I,g),A=p(C,R),{daySize:L,dayTextColor:W,dayTextShape:H,dayTextSize:j,iconFill:B,iconFillHover:M,iconFillSize:$,iconItemFill:O,iconLeft:U,iconRight:V,iconShape:q,monthTextColor:E,monthTextSize:G,monthTextWeight:J,popper:K,popperPlacement:Q,sizeClass:X,widthClass:Y,yearTextColor:Z,yearTextSize:ee,yearTextWeight:te,isClearable:ae}=A,re=o(null),[ie,oe]=r(()=>{let e,t;return T&&(e="string"==typeof T?new Date(T):T),x&&(t="string"==typeof x?new Date(x):x),[e,t]},[T,x]),ne=i(e=>{const t=Array.isArray(e)?e:[e],[a,r]=t;if(a&&N){const{mondayDate:e,sundayDate:t}=_(a);v?.(e,t)}else v?.(a,r)},[N,v]),ce=i(e=>{const{mondayDate:t,sundayDate:a}=_(e);v?.(t,a)},[v]),le=i((e,a)=>t(m,{className:"react-datepicker__day-button",size:L,label:a.getDate().toString(),labelTextColor:W,labelTextSize:j,shape:H}),[L,W,H,j]),se=i(({decreaseMonth:a,increaseMonth:r,monthDate:i})=>e("div",{className:"react-datepicker__header--div",children:[U&&t(u,{className:"react-datepicker__icon",fill:B,fillHover:M,fillSize:$,iconFill:O,shape:q,SvgImage:U,onClick:a}),e("div",{className:"react-datepicker__data",children:[t(h,{className:"react-datepicker__month",size:G,textColor:E,textWeight:J,children:i.toLocaleString("ru-RU",{month:"long"})}),t(h,{className:"react-datepicker__year",size:ee,textColor:Z,textWeight:te,children:i.toLocaleString("ru-RU",{year:"numeric"})})]}),V&&t(u,{className:"react-datepicker__icon",fill:B,fillHover:M,fillSize:$,iconFill:O,shape:q,SvgImage:V,onClick:r})]}),[B,M,$,O,U,V,q,E,G,J,Z,ee,te]),{styles:pe}=d(a);return t("div",{className:n(f,"datepicker",w&&"datepicker_multiple-months",D&&"datepicker_button",X&&`datepicker_size_${X}`,Y&&`datepicker_width_${Y}`),"data-testid":y,"data-tour":S,style:pe,children:t(l,{ref:re,...C,minDate:F?new Date:void 0,customInput:t(k,{datepickerRef:re,inputProps:z,isClearable:ae}),endDate:P?oe:void 0,locale:c,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:K&&`react-datepicker-popper-${K}`,popperPlacement:Q,preventOpenOnFocus:!0,renderCustomHeader:se,renderDayContents:le,selected:ie,startDate:ie,isClearable:!1,onChange:ne,onWeekSelect:b?ce:void 0})})}const k=a.forwardRef((i,o)=>{const{inputIcon:c,inputProps:l,value:s,isClearable:p}=i,d=r(()=>{if(s){const e=s.split(" - ");return e[0]===e[1]?e[0]:s}return""},[s]);return e(a.Fragment,{children:[t(f,{...i,...l,className:n(l?.className,"datepicker__input"),ref:o,autocomplete:"off",value:d}),c&&t(z,{...l}),p&&t(x,{datepickerRef:i.datepickerRef,...l})]})});function x(e){const{clearButton:r,clearButtonAppearance:o,clearIcon:c,clearIconAppearance:l,clearIconSrc:s,datepickerRef:p}=e,d=i(e=>{p?.current?.onClearClick(e),p?.current?.handleFocus(e)},[]);return t(a.Fragment,{children:r?t(m,{appearance:o,className:n("react-datepicker__clear-button","cursor_type_pointer"),label:r,onClick:d}):(c||s)&&t(u,{appearance:l,className:n("react-datepicker__clear-icon","cursor_type_pointer"),imageSrc:s,SvgImage:c,onClick:d})})}function z(e){const{inputIcon:a,inputIconFill:r,inputIconFillHover:i,inputIconFillSize:o,inputIconItemFill:c,inputIconShape:l,inputIconSize:s,inputIconSrc:p,onClick:d}=e;return t(u,{className:n("react-datepicker__input-icon","cursor_type_pointer"),size:s,fill:r,fillHover:i,fillSize:o,iconFill:c,imageSrc:p,shape:l,SvgImage:a,onClick:()=>d&&d()})}export{C as D,g as a,S as d};
|
|
1
|
+
import{jsxs as e,jsx as t}from"react/jsx-runtime";import a,{useMemo as r,useCallback as i,useRef as o}from"react";import n from"clsx";import{ru as c}from"date-fns/locale";import l from"react-datepicker";import{useAppearanceConfig as s,useDevicePropsGenerator as p,useStyles as d}from"@itcase/ui-core/hooks";import{B as m}from"./Button_es_W5dTrjgN.js";import{I as u,T as h}from"./primitives_es_BN7QUOlL.js";import{I as f}from"./Input_es_DabuPYuA.js";import{b as y}from"./default_es_CsYL84NN.js";const S={surfacePrimary:{dayTextColor:"surfaceTextPrimary",dayTextShape:"rounded",iconFillHover:"surfaceSecondary",iconItemFill:"surfaceItemPrimary",iconShape:"circular",monthTextColor:"surfaceTextPrimary",monthTextWeight:"400",yearTextColor:"surfaceTextPrimary",yearTextWeight:"400"},...{sizeL:{size:"l",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight},sizeM:{size:"m",daySize:"xxl",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight,iconSize:"14",monthTextSize:"m",yearTextSize:"m"},sizeS:{size:"s",daySize:"xs",dayTextSize:"m",iconFillSize:"24",iconLeft:y.Arrow.ChevronLeft,iconRight:y.Arrow.ChevronRight}},solid:{inputProps:{borderColor:"none"}},outlined:{inputProps:{fill:"none"}},full:{},ghost:{inputProps:{fill:"none",borderColor:"none"}}},_=e=>{const t=e.getDay()||7,a=new Date(e);a.setDate(e.getDate()-(t-1));const r=new Date(a);return r.setDate(a.getDate()+6),{mondayDate:a,sundayDate:r}},g={appearance:S,setAppearance:e=>{g.appearance=e}};function C(a){const{className:f,dataTestId:y,dataTour:S,datePickerProps:C={},endValue:x,inputProps:z={},value:T,onChange:v}=a,{appearance:I,customTimeInput:D,disablePastDays:F,monthsShown:w,selectsRange:P,showWeekNumbers:b,showWeekPicker:N}=C,R=s(I,g),A=p(C,R),{daySize:L,dayTextColor:W,dayTextShape:H,dayTextSize:j,iconFill:B,iconFillHover:M,iconFillSize:$,iconItemFill:O,iconLeft:U,iconRight:V,iconShape:q,monthTextColor:E,monthTextSize:G,monthTextWeight:J,popper:K,popperPlacement:Q,sizeClass:X,widthClass:Y,yearTextColor:Z,yearTextSize:ee,yearTextWeight:te,isClearable:ae}=A,re=o(null),[ie,oe]=r(()=>{let e,t;return T&&(e="string"==typeof T?new Date(T):T),x&&(t="string"==typeof x?new Date(x):x),[e,t]},[T,x]),ne=i(e=>{const t=Array.isArray(e)?e:[e],[a,r]=t;if(a&&N){const{mondayDate:e,sundayDate:t}=_(a);v?.(e,t)}else v?.(a,r)},[N,v]),ce=i(e=>{const{mondayDate:t,sundayDate:a}=_(e);v?.(t,a)},[v]),le=i((e,a)=>t(m,{className:"react-datepicker__day-button",size:L,label:a.getDate().toString(),labelTextColor:W,labelTextSize:j,shape:H}),[L,W,H,j]),se=i(({decreaseMonth:a,increaseMonth:r,monthDate:i})=>e("div",{className:"react-datepicker__header--div",children:[U&&t(u,{className:"react-datepicker__icon",fill:B,fillHover:M,fillSize:$,iconFill:O,shape:q,SvgImage:U,onClick:a}),e("div",{className:"react-datepicker__data",children:[t(h,{className:"react-datepicker__month",size:G,textColor:E,textWeight:J,children:i.toLocaleString("ru-RU",{month:"long"})}),t(h,{className:"react-datepicker__year",size:ee,textColor:Z,textWeight:te,children:i.toLocaleString("ru-RU",{year:"numeric"})})]}),V&&t(u,{className:"react-datepicker__icon",fill:B,fillHover:M,fillSize:$,iconFill:O,shape:q,SvgImage:V,onClick:r})]}),[B,M,$,O,U,V,q,E,G,J,Z,ee,te]),{styles:pe}=d(a);return t("div",{className:n(f,"datepicker",null!=w&&w>1&&"datepicker_multiple-months",D&&"datepicker_button",X&&`datepicker_size_${X}`,Y&&`datepicker_width_${Y}`),"data-testid":y,"data-tour":S,style:pe,children:t(l,{ref:re,...C,monthsShown:w,minDate:F?new Date:void 0,customInput:t(k,{datepickerRef:re,inputProps:z,isClearable:ae}),endDate:P?oe:void 0,locale:c,outsideClickIgnoreClass:"react-datepicker-popper",popperClassName:K&&`react-datepicker-popper-${K}`,popperPlacement:Q,preventOpenOnFocus:!0,renderCustomHeader:se,renderDayContents:le,selected:ie,startDate:ie,isClearable:!1,onChange:ne,onWeekSelect:b?ce:void 0})})}const k=a.forwardRef((i,o)=>{const{inputIcon:c,inputProps:l,value:s,isClearable:p}=i,d=r(()=>{if(s){const e=s.split(" - ");return e[0]===e[1]?e[0]:s}return""},[s]);return e(a.Fragment,{children:[t(f,{...i,...l,className:n(l?.className,"datepicker__input"),ref:o,autocomplete:"off",value:d}),c&&t(z,{...l}),p&&t(x,{datepickerRef:i.datepickerRef,...l})]})});function x(e){const{clearButton:r,clearButtonAppearance:o,clearIcon:c,clearIconAppearance:l,clearIconSrc:s,datepickerRef:p}=e,d=i(e=>{p?.current?.onClearClick(e),p?.current?.handleFocus(e)},[]);return t(a.Fragment,{children:r?t(m,{appearance:o,className:n("react-datepicker__clear-button","cursor_type_pointer"),label:r,onClick:d}):(c||s)&&t(u,{appearance:l,className:n("react-datepicker__clear-icon","cursor_type_pointer"),imageSrc:s,SvgImage:c,onClick:d})})}function z(e){const{inputIcon:a,inputIconFill:r,inputIconFillHover:i,inputIconFillSize:o,inputIconItemFill:c,inputIconShape:l,inputIconSize:s,inputIconSrc:p,onClick:d}=e;return t(u,{className:n("react-datepicker__input-icon","cursor_type_pointer"),size:s,fill:r,fillHover:i,fillSize:o,iconFill:c,imageSrc:p,shape:l,SvgImage:a,onClick:()=>d&&d()})}export{C as D,g as a,S as d};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("clsx"),i=require("luxon"),s=require("@itcase/common"),t=require("@itcase/ui-core/hooks"),c=require("@itcase/ui-core/utils"),p=require("../../ChipsGroup_cjs_CzWdTtsJ.js"),d=require("../../
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("clsx"),i=require("luxon"),s=require("@itcase/common"),t=require("@itcase/ui-core/hooks"),c=require("@itcase/ui-core/utils"),p=require("../../ChipsGroup_cjs_CzWdTtsJ.js"),d=require("../../DatePicker_cjs_Nh9EgPcT.js");require("react-select"),require("../../primitives_cjs_aZVOWoZJ.js");var n=require("../../SelectContainer_cjs_5jmFWpE4.js");require("../../Group_cjs_CiLUYKP7.js"),require("date-fns/locale"),require("react-datepicker"),require("../../Button_cjs_C57gpGui.js"),require("../../Loader_cjs_niS6cx7A.js"),require("axios"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../default_cjs_BMdcKzhJ.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("react-select/creatable");const o={surfacePrimary:{fill:"surfacePrimary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},surfaceSecondary:{fill:"surfaceSecondary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},sizeL:{size:"l",chipsAppearanceSize:"sizeXL",datePickerAppearanceSize:"sizeL",datePickerInputAppearanceSize:"sizeL",selectAppearanceSize:"sizeL"},sizeM:{size:"m",chipsAppearanceSize:"sizeL",datePickerAppearanceSize:"sizeM",datePickerInputAppearanceSize:"sizeM",selectAppearanceSize:"sizeM"},sizeS:{size:"s",chipsAppearanceSize:"sizeM",datePickerAppearanceSize:"sizeS",datePickerInputAppearanceSize:"sizeS",selectAppearanceSize:"sizeS"},circular:{shape:"circular"},rounded:{chipsShape:"rounded",selectShape:"rounded",shape:"rounded"},roundedXL:{chipsShape:"roundedXL",selectShape:"roundedXL",shape:"roundedXL"},roundedL:{chipsShape:"roundedL",selectShape:"roundedL",shape:"roundedL"},roundedM:{chipsShape:"roundedM",selectShape:"roundedM",shape:"roundedM"},roundedS:{chipsShape:"roundedS",selectShape:"roundedS",shape:"roundedS"}},l={appearance:o,setAppearance:e=>{l.appearance=e}};exports.DatePeriod=function(o){const{appearance:u,className:h,dataTestId:S,dataTour:P,datePeriodIntervalsList:z=Object.values(s.DATE_PERIOD_INTERVALS),datePeriodSelectFirstOptions:m,datePeriodSelectFirstPlaceholder:_="Выбрать период",datePeriodSelectFirstValue:A,datePeriodSelectSecondOptions:k,datePeriodSelectSecondPlaceholder:j="Выбрать период",datePeriodSelectSecondValue:I,datePeriodValueEnd:f,datePeriodValueStart:q,monthsShown:y=2,popperPlacement:D,selectFirstIsSearchable:C=!0,selectFirstWidth:L="180px",selectSecondIsSearchable:v=!0,selectSecondWidth:g="180px",selectsRange:M=!0,showWeekNumbers:x=!1,isDisabled:b,isSkeleton:w,onChangeDatePeriod:F,onChangeDatePeriodFirstSelect:N,onChangeDatePeriodSecondSelect:W,onKeyDown:K}=o,T=t.useAppearanceConfig(u,l,b),O=t.useDevicePropsGenerator(o,T),{fillClass:V,chipsAppearance:X,chipsAppearanceSize:E,chipsShape:G,datePickerAppearance:R,datePickerAppearanceSize:$,datePickerInputAppearance:H,datePickerInputAppearanceSize:J,datePickerInputFillHover:B,datePickerInputTextSize:Q,selectAppearance:U,selectAppearanceSize:Y,selectShape:Z,shapeClass:ee,sizeClass:ae}=O,re=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];F?.(new Date(a),new Date(r))},[F]),ie=a.useCallback(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let s=null,t=null;return q&&(s=i.DateTime.fromJSDate(new Date(q)).toISODate()),f&&(t=i.DateTime.fromJSDate(new Date(f)).toISODate()),a===s&&r===t},[f,q]);return e.jsxs("div",{className:r(h,"date-period",ae&&`date-period_size_${ae}`,w&&"skeleton"),"data-testid":S,"data-tour":P,children:[e.jsxs("div",{className:r("date-period__wrapper",ee&&`shape_${ee}`,V&&`fill_${V}`,"cursor_type_pointer"),children:[e.jsx(p.ChipsGroup,{className:"date-period__choice",direction:"horizontal",children:z.map(a=>e.jsx(p.Chips,{appearance:c.mergeAppearanceKeys(X,E),label:a.label,shape:G,isActive:ie(a),onClick:()=>re(a)},a.value))}),e.jsx(d.DatePickerInput,{className:"date-period__datepicker",datePickerProps:{appearance:c.mergeAppearanceKeys(R,$),dateFormat:"dd/MM/yyyy",monthsShown:O.monthsShown??y,popperPlacement:D,selectsRange:M,showWeekNumbers:x,isClearable:!1,onKeyDown:K},endValue:f,inputProps:{appearance:c.mergeAppearanceKeys(H,J,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ae} `,fillHover:B,textSize:Q,placeholder:"Выбрать период"},value:q,onChange:F})]}),m&&e.jsx(n.SelectContainer,{appearance:c.mergeAppearanceKeys(U,Y),className:"date-period__select",width:O.selectFirstWidth??L,minWidth:O.selectFirstWidth??L,options:m,placeholder:_,shape:Z,value:A??null,isSearchable:O.selectFirstIsSearchable??C,onChange:N}),k&&e.jsx(n.SelectContainer,{appearance:c.mergeAppearanceKeys(U,Y),className:"date-period__select",width:O.selectSecondWidth??g,minWidth:O.selectSecondWidth??g,options:k,placeholder:j,shape:Z,value:I??null,isSearchable:O.selectSecondIsSearchable??v,onChange:W})]})},exports.datePeriodAppearance=o,exports.datePeriodConfig=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("../../
|
|
1
|
+
"use strict";var e=require("../../DatePicker_cjs_Nh9EgPcT.js");require("react/jsx-runtime"),require("react"),require("clsx"),require("date-fns/locale"),require("react-datepicker"),require("@itcase/ui-core/hooks"),require("../../Button_cjs_C57gpGui.js"),require("@itcase/ui-core/utils"),require("../../primitives_cjs_aZVOWoZJ.js"),require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("../../Loader_cjs_niS6cx7A.js"),require("axios"),require("@itcase/common"),require("../../Input_cjs_D9PxC_lJ.js"),require("../../default_cjs_BMdcKzhJ.js"),exports.DatePickerInput=e.DatePickerInput,exports.datePickerAppearance=e.datePickerAppearance,exports.datePickerConfig=e.datePickerConfig;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useCallback as r}from"react";import
|
|
1
|
+
import{jsxs as e,jsx as a}from"react/jsx-runtime";import{useCallback as r}from"react";import t from"clsx";import{DateTime as i}from"luxon";import{DATE_PERIOD_INTERVALS as s}from"@itcase/common";import{useAppearanceConfig as c,useDevicePropsGenerator as p}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as o}from"@itcase/ui-core/utils";import{a as d,C as n}from"../ChipsGroup_es_BGiou5c-.js";import{D as l}from"../DatePicker_es_DbD0yr_Y.js";import"react-select";import"../primitives_es_BN7QUOlL.js";import{S as u}from"../SelectContainer_es_C4vpMDC9.js";import"../Group_es_DIuSNHx3.js";import"date-fns/locale";import"react-datepicker";import"../Button_es_W5dTrjgN.js";import"../Loader_es_BnHFYlVt.js";import"axios";import"../Input_es_DabuPYuA.js";import"../default_es_CsYL84NN.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"react-select/creatable";const h={surfacePrimary:{fill:"surfacePrimary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},surfaceSecondary:{fill:"surfaceSecondary",chipsAppearance:"surfacePrimary sizeM ghost rounded",datePickerAppearance:"surfacePrimary sizeM solid rounded",datePickerInputAppearance:"defaultPrimary sizeM solid rounded",selectAppearance:"defaultPrimary sizeM solid rounded"},sizeL:{size:"l",chipsAppearanceSize:"sizeXL",datePickerAppearanceSize:"sizeL",datePickerInputAppearanceSize:"sizeL",selectAppearanceSize:"sizeL"},sizeM:{size:"m",chipsAppearanceSize:"sizeL",datePickerAppearanceSize:"sizeM",datePickerInputAppearanceSize:"sizeM",selectAppearanceSize:"sizeM"},sizeS:{size:"s",chipsAppearanceSize:"sizeM",datePickerAppearanceSize:"sizeS",datePickerInputAppearanceSize:"sizeS",selectAppearanceSize:"sizeS"},circular:{shape:"circular"},rounded:{chipsShape:"rounded",selectShape:"rounded",shape:"rounded"},roundedXL:{chipsShape:"roundedXL",selectShape:"roundedXL",shape:"roundedXL"},roundedL:{chipsShape:"roundedL",selectShape:"roundedL",shape:"roundedL"},roundedM:{chipsShape:"roundedM",selectShape:"roundedM",shape:"roundedM"},roundedS:{chipsShape:"roundedS",selectShape:"roundedS",shape:"roundedS"}},S={appearance:h,setAppearance:e=>{S.appearance=e}};function m(h){const{appearance:m,className:z,dataTestId:P,dataTour:_,datePeriodIntervalsList:f=Object.values(s),datePeriodSelectFirstOptions:A,datePeriodSelectFirstPlaceholder:k="Выбрать период",datePeriodSelectFirstValue:I,datePeriodSelectSecondOptions:L,datePeriodSelectSecondPlaceholder:y="Выбрать период",datePeriodSelectSecondValue:M,datePeriodValueEnd:v,datePeriodValueStart:D,monthsShown:b=2,popperPlacement:w,selectFirstIsSearchable:C=!0,selectFirstWidth:g="180px",selectSecondIsSearchable:j=!0,selectSecondWidth:F="180px",selectsRange:N=!0,showWeekNumbers:W=!1,isDisabled:x,isSkeleton:O,onChangeDatePeriod:V,onChangeDatePeriodFirstSelect:X,onChangeDatePeriodSecondSelect:$,onKeyDown:T}=h,G=c(m,S,x),H=p(h,G),{fillClass:J,chipsAppearance:K,chipsAppearanceSize:R,chipsShape:B,datePickerAppearance:E,datePickerAppearanceSize:q,datePickerInputAppearance:Q,datePickerInputAppearanceSize:U,datePickerInputFillHover:Y,datePickerInputTextSize:Z,selectAppearance:ee,selectAppearanceSize:ae,selectShape:re,shapeClass:te,sizeClass:ie}=H,se=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];V?.(new Date(a),new Date(r))},[V]),ce=r(e=>{const a=e.dateIntervalsList[0],r=e.dateIntervalsList[1];let t=null,s=null;return D&&(t=i.fromJSDate(new Date(D)).toISODate()),v&&(s=i.fromJSDate(new Date(v)).toISODate()),a===t&&r===s},[v,D]);return e("div",{className:t(z,"date-period",ie&&`date-period_size_${ie}`,O&&"skeleton"),"data-testid":P,"data-tour":_,children:[e("div",{className:t("date-period__wrapper",te&&`shape_${te}`,J&&`fill_${J}`,"cursor_type_pointer"),children:[a(d,{className:"date-period__choice",direction:"horizontal",children:f.map(e=>a(n,{appearance:o(K,R),label:e.label,shape:B,isActive:ce(e),onClick:()=>se(e)},e.value))}),a(l,{className:"date-period__datepicker",datePickerProps:{appearance:o(E,q),dateFormat:"dd/MM/yyyy",monthsShown:H.monthsShown??b,popperPlacement:w,selectsRange:N,showWeekNumbers:W,isClearable:!1,onKeyDown:T},endValue:v,inputProps:{appearance:o(Q,U,"ghost"),className:`date-period__datepicker-input date-period__datepicker-input_size_${ie} `,fillHover:Y,textSize:Z,placeholder:"Выбрать период"},value:D,onChange:V})]}),A&&a(u,{appearance:o(ee,ae),className:"date-period__select",width:H.selectFirstWidth??g,minWidth:H.selectFirstWidth??g,options:A,placeholder:k,shape:re,value:I??null,isSearchable:H.selectFirstIsSearchable??C,onChange:X}),L&&a(u,{appearance:o(ee,ae),className:"date-period__select",width:H.selectSecondWidth??F,minWidth:H.selectSecondWidth??F,options:L,placeholder:y,shape:re,value:M??null,isSearchable:H.selectSecondIsSearchable??j,onChange:$})]})}export{m as DatePeriod,h as datePeriodAppearance,S as datePeriodConfig};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export{D as DatePickerInput,d as datePickerAppearance,a as datePickerConfig}from"../
|
|
1
|
+
export{D as DatePickerInput,d as datePickerAppearance,a as datePickerConfig}from"../DatePicker_es_DbD0yr_Y.js";import"react/jsx-runtime";import"react";import"clsx";import"date-fns/locale";import"react-datepicker";import"@itcase/ui-core/hooks";import"../Button_es_W5dTrjgN.js";import"@itcase/ui-core/utils";import"../primitives_es_BN7QUOlL.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"../Loader_es_BnHFYlVt.js";import"axios";import"@itcase/common";import"../Input_es_DabuPYuA.js";import"../default_es_CsYL84NN.js";
|
|
@@ -12,6 +12,8 @@ type DatePeriodAppearanceProps<Option> = {
|
|
|
12
12
|
chipsShape?: ChipsProps['shape'];
|
|
13
13
|
datePickerAppearance?: DatePickerInputProps['appearance'];
|
|
14
14
|
datePickerAppearanceSize?: AppearanceSizeKey;
|
|
15
|
+
monthsShown?: number;
|
|
16
|
+
monthsShownMobile?: number;
|
|
15
17
|
datePickerInputAppearance?: InputProps['appearance'];
|
|
16
18
|
datePickerInputAppearanceSize?: AppearanceSizeKey;
|
|
17
19
|
datePickerInputFillHover?: SelectProps<Option>['fillHover'];
|
|
@@ -20,6 +22,12 @@ type DatePeriodAppearanceProps<Option> = {
|
|
|
20
22
|
fillHover?: FillHoverProps;
|
|
21
23
|
selectAppearance?: SelectAppearanceProps<Option>['appearance'];
|
|
22
24
|
selectAppearanceSize?: AppearanceSizeKey;
|
|
25
|
+
selectFirstIsSearchable?: SelectProps<Option>['isSearchable'];
|
|
26
|
+
selectFirstWidth?: SelectProps<Option>['width'];
|
|
27
|
+
selectFirstWidthMobile?: SelectProps<Option>['width'];
|
|
28
|
+
selectSecondIsSearchable?: SelectProps<Option>['isSearchable'];
|
|
29
|
+
selectSecondWidth?: SelectProps<Option>['width'];
|
|
30
|
+
selectSecondWidthMobile?: SelectProps<Option>['width'];
|
|
23
31
|
selectShape?: SelectProps<Option>['shape'];
|
|
24
32
|
shape?: ShapeProps;
|
|
25
33
|
size?: SizeProps;
|
|
@@ -43,7 +51,6 @@ type DatePeriodProps<Option = SelectOption> = DatePeriodAppearanceProps<Option>
|
|
|
43
51
|
datePickerAppearanceSize?: AppearanceSizeKey;
|
|
44
52
|
isDisabled?: boolean;
|
|
45
53
|
isSkeleton?: boolean;
|
|
46
|
-
monthsShown?: number;
|
|
47
54
|
onChangeDatePeriod?: DatePickerInputProps['onChange'];
|
|
48
55
|
onChangeDatePeriodFirstSelect?: SelectProps<Option>['onChange'];
|
|
49
56
|
onChangeDatePeriodSecondSelect?: SelectProps<Option>['onChange'];
|
|
@@ -16,7 +16,7 @@ const datePeriodConfig = {
|
|
|
16
16
|
},
|
|
17
17
|
};
|
|
18
18
|
function DatePeriod(props) {
|
|
19
|
-
const { appearance, className, dataTestId, dataTour, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodSelectFirstOptions, datePeriodSelectFirstPlaceholder, datePeriodSelectFirstValue, datePeriodSelectSecondOptions, datePeriodSelectSecondPlaceholder, datePeriodSelectSecondValue, datePeriodValueEnd, datePeriodValueStart, monthsShown, popperPlacement, selectsRange = true, showWeekNumbers =
|
|
19
|
+
const { appearance, className, dataTestId, dataTour, datePeriodIntervalsList = Object.values(DATE_PERIOD_INTERVALS), datePeriodSelectFirstOptions, datePeriodSelectFirstPlaceholder = 'Выбрать период', datePeriodSelectFirstValue, datePeriodSelectSecondOptions, datePeriodSelectSecondPlaceholder = 'Выбрать период', datePeriodSelectSecondValue, datePeriodValueEnd, datePeriodValueStart, monthsShown = 2, popperPlacement, selectFirstIsSearchable = true, selectFirstWidth = '180px', selectSecondIsSearchable = true, selectSecondWidth = '180px', selectsRange = true, showWeekNumbers = false, isDisabled, isSkeleton, onChangeDatePeriod, onChangeDatePeriodFirstSelect, onChangeDatePeriodSecondSelect, onKeyDown, } = props;
|
|
20
20
|
const appearanceConfig = useAppearanceConfig(appearance, datePeriodConfig, isDisabled);
|
|
21
21
|
const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
|
|
22
22
|
const { fillClass, chipsAppearance, chipsAppearanceSize, chipsShape, datePickerAppearance, datePickerAppearanceSize, datePickerInputAppearance, datePickerInputAppearanceSize, datePickerInputFillHover, datePickerInputTextSize, selectAppearance, selectAppearanceSize, selectShape, shapeClass, sizeClass, } = propsGenerator;
|
|
@@ -42,7 +42,7 @@ function DatePeriod(props) {
|
|
|
42
42
|
return (_jsxs("div", { className: clsx(className, 'date-period', sizeClass && `date-period_size_${sizeClass}`, isSkeleton && `skeleton`), "data-testid": dataTestId, "data-tour": dataTour, children: [_jsxs("div", { className: clsx('date-period__wrapper', shapeClass && `shape_${shapeClass}`, fillClass && `fill_${fillClass}`, 'cursor_type_pointer'), children: [_jsx(ChipsGroup, { className: "date-period__choice", direction: "horizontal", children: datePeriodIntervalsList.map((datePeriodItem) => (_jsx(Chips, { appearance: mergeAppearanceKeys(chipsAppearance, chipsAppearanceSize), label: datePeriodItem.label, shape: chipsShape, isActive: checkIsChipsActive(datePeriodItem), onClick: () => onClickPeriodChips(datePeriodItem) }, datePeriodItem.value))) }), _jsx(DatePickerInput, { className: "date-period__datepicker", datePickerProps: {
|
|
43
43
|
appearance: mergeAppearanceKeys(datePickerAppearance, datePickerAppearanceSize),
|
|
44
44
|
dateFormat: 'dd/MM/yyyy',
|
|
45
|
-
monthsShown: monthsShown,
|
|
45
|
+
monthsShown: propsGenerator.monthsShown ?? monthsShown,
|
|
46
46
|
popperPlacement: popperPlacement,
|
|
47
47
|
selectsRange: selectsRange,
|
|
48
48
|
showWeekNumbers: showWeekNumbers,
|
|
@@ -54,6 +54,8 @@ function DatePeriod(props) {
|
|
|
54
54
|
fillHover: datePickerInputFillHover,
|
|
55
55
|
textSize: datePickerInputTextSize,
|
|
56
56
|
placeholder: 'Выбрать период',
|
|
57
|
-
}, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), datePeriodSelectFirstOptions && (_jsx(Select, { appearance: mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width:
|
|
57
|
+
}, value: datePeriodValueStart, onChange: onChangeDatePeriod })] }), datePeriodSelectFirstOptions && (_jsx(Select, { appearance: mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width: (propsGenerator.selectFirstWidth ??
|
|
58
|
+
selectFirstWidth), minWidth: propsGenerator.selectFirstWidth ?? selectFirstWidth, options: datePeriodSelectFirstOptions, placeholder: datePeriodSelectFirstPlaceholder, shape: selectShape, value: datePeriodSelectFirstValue ?? null, isSearchable: propsGenerator.selectFirstIsSearchable ?? selectFirstIsSearchable, onChange: onChangeDatePeriodFirstSelect })), datePeriodSelectSecondOptions && (_jsx(Select, { appearance: mergeAppearanceKeys(selectAppearance, selectAppearanceSize), className: "date-period__select", width: (propsGenerator.selectSecondWidth ??
|
|
59
|
+
selectSecondWidth), minWidth: propsGenerator.selectSecondWidth ?? selectSecondWidth, options: datePeriodSelectSecondOptions, placeholder: datePeriodSelectSecondPlaceholder, shape: selectShape, value: datePeriodSelectSecondValue ?? null, isSearchable: propsGenerator.selectSecondIsSearchable ?? selectSecondIsSearchable, onChange: onChangeDatePeriodSecondSelect }))] }));
|
|
58
60
|
}
|
|
59
61
|
export { DatePeriod, datePeriodConfig };
|
|
@@ -22,7 +22,7 @@ const Component = (args) => {
|
|
|
22
22
|
setStartDatePickerPeriod(start ? new Date(start).toISOString() : start);
|
|
23
23
|
setEndDatePickerPeriod(end ? new Date(end).toISOString() : end);
|
|
24
24
|
}, []);
|
|
25
|
-
return (_jsx(DatePeriod, { ...args, appearance: "surfaceSecondary sizeL solid rounded", datePeriodValueEnd: endDatePickerPeriod, datePeriodValueStart: startDatePickerPeriod,
|
|
25
|
+
return (_jsx(DatePeriod, { ...args, appearance: "surfaceSecondary sizeL solid rounded", datePeriodValueEnd: endDatePickerPeriod, datePeriodValueStart: startDatePickerPeriod, onChangeDatePeriod: onChangeDatePeriod }));
|
|
26
26
|
};
|
|
27
27
|
export const ChangeChips = {
|
|
28
28
|
play: async ({ args, canvas, step }) => {
|
|
@@ -78,7 +78,7 @@ function DatePickerInput(props) {
|
|
|
78
78
|
yearTextWeight,
|
|
79
79
|
]);
|
|
80
80
|
const { styles: datePickerStyles } = useStyles(props);
|
|
81
|
-
return (_jsx("div", { className: clsx(className, 'datepicker', monthsShown && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: _jsx(DatePicker, { ref: datepickerRef, ...datePickerProps, minDate: disablePastDays ? new Date() : undefined, customInput: _jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, isClearable: false, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined }) }));
|
|
81
|
+
return (_jsx("div", { className: clsx(className, 'datepicker', monthsShown != null && monthsShown > 1 && 'datepicker_multiple-months', customTimeInput && 'datepicker_button', sizeClass && `datepicker_size_${sizeClass}`, widthClass && `datepicker_width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: datePickerStyles, children: _jsx(DatePicker, { ref: datepickerRef, ...datePickerProps, monthsShown: monthsShown, minDate: disablePastDays ? new Date() : undefined, customInput: _jsx(DatePickerCustomInput, { datepickerRef: datepickerRef, inputProps: inputProps, isClearable: isClearable }), endDate: selectsRange ? dateEnd : undefined, locale: ru, outsideClickIgnoreClass: "react-datepicker-popper", popperClassName: popper && `react-datepicker-popper-${popper}`, popperPlacement: popperPlacement, preventOpenOnFocus: true, renderCustomHeader: renderCustomHeader, renderDayContents: renderDayContents, selected: dateStart, startDate: dateStart, isClearable: false, onChange: handleChange, onWeekSelect: showWeekNumbers ? handleWeekSelect : undefined }) }));
|
|
82
82
|
}
|
|
83
83
|
const DatePickerCustomInput = React.forwardRef((props, ref) => {
|
|
84
84
|
const { inputIcon, inputProps, value, isClearable } = props;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.24",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@itcase/tokens-am": "^1.1.57",
|
|
54
54
|
"@itcase/tokens-baikal": "^1.1.54",
|
|
55
55
|
"@itcase/tokens-palette": "^1.1.50",
|
|
56
|
-
"@itcase/ui-core": "^1.10.
|
|
56
|
+
"@itcase/ui-core": "^1.10.24",
|
|
57
57
|
"@rc-component/tooltip": "^1.4.0",
|
|
58
58
|
"axios": "^1.17.0",
|
|
59
59
|
"clsx": "^2.1.1",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"storybook": "^10.4.2",
|
|
117
117
|
"typescript": "^6.0.3"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "228a9c71351b273ccd1cb06e78c4adcb96d2ad68"
|
|
120
120
|
}
|