@vkontakte/vkui 6.7.3 → 6.7.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.
- package/dist/cjs/components/BaseGallery/BaseGallery.d.ts.map +1 -1
- package/dist/cjs/components/BaseGallery/BaseGallery.js +5 -2
- package/dist/cjs/components/BaseGallery/BaseGallery.js.map +1 -1
- package/dist/cjs/components/Calendar/Calendar.d.ts +6 -6
- package/dist/cjs/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/cjs/components/Calendar/Calendar.js +25 -5
- package/dist/cjs/components/Calendar/Calendar.js.map +1 -1
- package/dist/cjs/components/CalendarDay/CalendarDay.d.ts +4 -1
- package/dist/cjs/components/CalendarDay/CalendarDay.d.ts.map +1 -1
- package/dist/cjs/components/CalendarDay/CalendarDay.js +5 -3
- package/dist/cjs/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/cjs/components/CalendarDays/CalendarDays.d.ts +6 -3
- package/dist/cjs/components/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/dist/cjs/components/CalendarDays/CalendarDays.js +5 -3
- package/dist/cjs/components/CalendarDays/CalendarDays.js.map +1 -1
- package/dist/cjs/components/CalendarHeader/CalendarHeader.d.ts +8 -2
- package/dist/cjs/components/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/dist/cjs/components/CalendarHeader/CalendarHeader.js +14 -6
- package/dist/cjs/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts +8 -4
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.js +13 -8
- package/dist/cjs/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cjs/components/CalendarTime/CalendarTime.d.ts +9 -2
- package/dist/cjs/components/CalendarTime/CalendarTime.d.ts.map +1 -1
- package/dist/cjs/components/CalendarTime/CalendarTime.js +10 -5
- package/dist/cjs/components/CalendarTime/CalendarTime.js.map +1 -1
- package/dist/cjs/components/Clickable/useState.d.ts +1 -1
- package/dist/cjs/components/Clickable/useState.d.ts.map +1 -1
- package/dist/cjs/components/Clickable/useState.js +12 -19
- package/dist/cjs/components/Clickable/useState.js.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.d.ts +12 -3
- package/dist/cjs/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.js +26 -11
- package/dist/cjs/components/DateInput/DateInput.js.map +1 -1
- package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts +15 -3
- package/dist/cjs/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js +22 -11
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.js +50 -41
- package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cjs/components/Gallery/Gallery.d.ts +1 -1
- package/dist/cjs/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/cjs/components/Gallery/Gallery.js +12 -3
- package/dist/cjs/components/Gallery/Gallery.js.map +1 -1
- package/dist/cjs/components/Gallery/hooks.d.ts +9 -1
- package/dist/cjs/components/Gallery/hooks.d.ts.map +1 -1
- package/dist/cjs/components/Gallery/hooks.js +43 -25
- package/dist/cjs/components/Gallery/hooks.js.map +1 -1
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +19 -26
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cjs/components/Popover/Popover.js +1 -1
- package/dist/cjs/components/Popover/Popover.js.map +1 -1
- package/dist/cjs/hooks/useDateInput.d.ts +2 -1
- package/dist/cjs/hooks/useDateInput.d.ts.map +1 -1
- package/dist/cjs/hooks/useDateInput.js +29 -9
- package/dist/cjs/hooks/useDateInput.js.map +1 -1
- package/dist/cjs/lib/floating/customResizeObserver.d.ts.map +1 -1
- package/dist/cjs/lib/floating/customResizeObserver.js +0 -1
- package/dist/cjs/lib/floating/customResizeObserver.js.map +1 -1
- package/dist/cjs/lib/floating/types/component.d.ts +2 -2
- package/dist/cjs/lib/floating/types/component.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/index.d.ts +1 -0
- package/dist/cjs/lib/floating/useFloatingWithInteractions/index.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/index.js.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/types.d.ts +2 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +14 -1
- package/dist/cjs/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/components/BaseGallery/BaseGallery.d.ts.map +1 -1
- package/dist/components/BaseGallery/BaseGallery.js +5 -2
- package/dist/components/BaseGallery/BaseGallery.js.map +1 -1
- package/dist/components/Calendar/Calendar.d.ts +6 -6
- package/dist/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/components/Calendar/Calendar.js +25 -5
- package/dist/components/Calendar/Calendar.js.map +1 -1
- package/dist/components/CalendarDay/CalendarDay.d.ts +4 -1
- package/dist/components/CalendarDay/CalendarDay.d.ts.map +1 -1
- package/dist/components/CalendarDay/CalendarDay.js +5 -3
- package/dist/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/components/CalendarDays/CalendarDays.d.ts +6 -3
- package/dist/components/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/dist/components/CalendarDays/CalendarDays.js +5 -3
- package/dist/components/CalendarDays/CalendarDays.js.map +1 -1
- package/dist/components/CalendarHeader/CalendarHeader.d.ts +8 -2
- package/dist/components/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/dist/components/CalendarHeader/CalendarHeader.js +14 -6
- package/dist/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts +8 -4
- package/dist/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.js +13 -8
- package/dist/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/components/CalendarTime/CalendarTime.d.ts +9 -2
- package/dist/components/CalendarTime/CalendarTime.d.ts.map +1 -1
- package/dist/components/CalendarTime/CalendarTime.js +10 -5
- package/dist/components/CalendarTime/CalendarTime.js.map +1 -1
- package/dist/components/Clickable/useState.d.ts +1 -1
- package/dist/components/Clickable/useState.d.ts.map +1 -1
- package/dist/components/Clickable/useState.js +12 -19
- package/dist/components/Clickable/useState.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +12 -3
- package/dist/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/components/DateInput/DateInput.js +26 -11
- package/dist/components/DateInput/DateInput.js.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.d.ts +15 -3
- package/dist/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.js +22 -11
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/dist/components/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/components/FocusTrap/FocusTrap.js +51 -42
- package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/components/Gallery/Gallery.d.ts +1 -1
- package/dist/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/components/Gallery/Gallery.js +12 -3
- package/dist/components/Gallery/Gallery.js.map +1 -1
- package/dist/components/Gallery/hooks.d.ts +9 -1
- package/dist/components/Gallery/hooks.d.ts.map +1 -1
- package/dist/components/Gallery/hooks.js +43 -25
- package/dist/components/Gallery/hooks.js.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +20 -27
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/Popover/Popover.js +1 -1
- package/dist/components/Popover/Popover.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +374 -212
- package/dist/cssm/components/BaseGallery/BaseGallery.d.ts.map +1 -1
- package/dist/cssm/components/BaseGallery/BaseGallery.js +3 -1
- package/dist/cssm/components/BaseGallery/BaseGallery.js.map +1 -1
- package/dist/cssm/components/Calendar/Calendar.d.ts +6 -6
- package/dist/cssm/components/Calendar/Calendar.d.ts.map +1 -1
- package/dist/cssm/components/Calendar/Calendar.js +14 -4
- package/dist/cssm/components/Calendar/Calendar.js.map +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.d.ts +4 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.d.ts.map +1 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.js +2 -1
- package/dist/cssm/components/CalendarDay/CalendarDay.js.map +1 -1
- package/dist/cssm/components/CalendarDays/CalendarDays.d.ts +6 -3
- package/dist/cssm/components/CalendarDays/CalendarDays.d.ts.map +1 -1
- package/dist/cssm/components/CalendarDays/CalendarDays.js +2 -1
- package/dist/cssm/components/CalendarDays/CalendarDays.js.map +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.d.ts +8 -2
- package/dist/cssm/components/CalendarHeader/CalendarHeader.d.ts.map +1 -1
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js +7 -3
- package/dist/cssm/components/CalendarHeader/CalendarHeader.js.map +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts +8 -4
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.js +9 -5
- package/dist/cssm/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cssm/components/CalendarTime/CalendarTime.d.ts +9 -2
- package/dist/cssm/components/CalendarTime/CalendarTime.d.ts.map +1 -1
- package/dist/cssm/components/CalendarTime/CalendarTime.js +10 -5
- package/dist/cssm/components/CalendarTime/CalendarTime.js.map +1 -1
- package/dist/cssm/components/CalendarTime/CalendarTime.module.css +4 -0
- package/dist/cssm/components/Clickable/useState.d.ts +1 -1
- package/dist/cssm/components/Clickable/useState.d.ts.map +1 -1
- package/dist/cssm/components/Clickable/useState.js +10 -11
- package/dist/cssm/components/Clickable/useState.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.d.ts +12 -3
- package/dist/cssm/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.js +18 -9
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts +15 -3
- package/dist/cssm/components/DateRangeInput/DateRangeInput.d.ts.map +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js +17 -9
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.d.ts +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.js +51 -42
- package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cssm/components/Gallery/Gallery.d.ts +1 -1
- package/dist/cssm/components/Gallery/Gallery.d.ts.map +1 -1
- package/dist/cssm/components/Gallery/Gallery.js +9 -2
- package/dist/cssm/components/Gallery/Gallery.js.map +1 -1
- package/dist/cssm/components/Gallery/hooks.d.ts +9 -1
- package/dist/cssm/components/Gallery/hooks.d.ts.map +1 -1
- package/dist/cssm/components/Gallery/hooks.js +43 -25
- package/dist/cssm/components/Gallery/hooks.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +20 -27
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/Popover/Popover.js +1 -1
- package/dist/cssm/components/Popover/Popover.js.map +1 -1
- package/dist/cssm/hooks/useDateInput.d.ts +2 -1
- package/dist/cssm/hooks/useDateInput.d.ts.map +1 -1
- package/dist/cssm/hooks/useDateInput.js +30 -9
- package/dist/cssm/hooks/useDateInput.js.map +1 -1
- package/dist/cssm/lib/floating/customResizeObserver.d.ts.map +1 -1
- package/dist/cssm/lib/floating/customResizeObserver.js +0 -1
- package/dist/cssm/lib/floating/customResizeObserver.js.map +1 -1
- package/dist/cssm/lib/floating/types/component.d.ts +2 -2
- package/dist/cssm/lib/floating/types/component.d.ts.map +1 -1
- package/dist/cssm/lib/floating/types/component.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/index.d.ts +1 -0
- package/dist/cssm/lib/floating/useFloatingWithInteractions/index.d.ts.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/index.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.d.ts +2 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/types.js.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +14 -1
- package/dist/cssm/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/hooks/useDateInput.d.ts +2 -1
- package/dist/hooks/useDateInput.d.ts.map +1 -1
- package/dist/hooks/useDateInput.js +30 -9
- package/dist/hooks/useDateInput.js.map +1 -1
- package/dist/lib/floating/customResizeObserver.d.ts.map +1 -1
- package/dist/lib/floating/customResizeObserver.js +0 -1
- package/dist/lib/floating/customResizeObserver.js.map +1 -1
- package/dist/lib/floating/types/component.d.ts +2 -2
- package/dist/lib/floating/types/component.d.ts.map +1 -1
- package/dist/lib/floating/types/component.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/index.d.ts +1 -0
- package/dist/lib/floating/useFloatingWithInteractions/index.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/index.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.d.ts +2 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/types.js.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.d.ts.map +1 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js +14 -1
- package/dist/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +374 -212
- package/package.json +1 -1
- package/src/components/BaseGallery/BaseGallery.tsx +8 -1
- package/src/components/Calendar/Calendar.tsx +49 -6
- package/src/components/CalendarDay/CalendarDay.tsx +7 -1
- package/src/components/CalendarDays/CalendarDays.tsx +9 -1
- package/src/components/CalendarHeader/CalendarHeader.tsx +21 -1
- package/src/components/CalendarRange/CalendarRange.tsx +24 -3
- package/src/components/CalendarTime/CalendarTime.module.css +4 -0
- package/src/components/CalendarTime/CalendarTime.tsx +39 -10
- package/src/components/Clickable/useState.tsx +30 -27
- package/src/components/DateInput/DateInput.tsx +32 -3
- package/src/components/DateRangeInput/DateRangeInput.tsx +28 -1
- package/src/components/FocusTrap/FocusTrap.tsx +75 -45
- package/src/components/Gallery/Gallery.tsx +10 -1
- package/src/components/Gallery/hooks.ts +49 -33
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +23 -28
- package/src/components/Popover/Popover.tsx +1 -1
- package/src/hooks/useDateInput.ts +23 -6
- package/src/lib/floating/customResizeObserver.ts +0 -1
- package/src/lib/floating/types/component.ts +2 -1
- package/src/lib/floating/useFloatingWithInteractions/index.ts +2 -0
- package/src/lib/floating/useFloatingWithInteractions/types.ts +3 -1
- package/src/lib/floating/useFloatingWithInteractions/useFloatingWithInteractions.ts +15 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2BhG,eAAO,MAAM,WAAW,4LAiBrB,gBAAgB,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2BhG,eAAO,MAAM,WAAW,4LAiBrB,gBAAgB,KAAG,KAAK,CAAC,SA4U3B,CAAC"}
|
|
@@ -118,7 +118,7 @@ const BaseGallery = (_param)=>{
|
|
|
118
118
|
return indent;
|
|
119
119
|
};
|
|
120
120
|
const initializeSlides = (options = {})=>{
|
|
121
|
-
var _rootRef_current, _viewportRef_current, _layoutState_current_slides_slideIndex, _localSlides_slideIndex;
|
|
121
|
+
var _rootRef_current, _viewportRef_current, _layoutState_current_slides_slideIndex, _localSlides_slideIndex, _localSlides_slideIndex1;
|
|
122
122
|
var _React_Children_map;
|
|
123
123
|
const localSlides = (_React_Children_map = _react.Children.map(children, (_item, i)=>{
|
|
124
124
|
const elem = slidesStore.current[`slide-${i}`];
|
|
@@ -134,6 +134,9 @@ const BaseGallery = (_param)=>{
|
|
|
134
134
|
const localViewportOffsetWidth = (_viewportRef_current_offsetWidth = (_viewportRef_current = viewportRef.current) === null || _viewportRef_current === void 0 ? void 0 : _viewportRef_current.offsetWidth) !== null && _viewportRef_current_offsetWidth !== void 0 ? _viewportRef_current_offsetWidth : 0;
|
|
135
135
|
const localLayerWidth = localSlides.reduce((val, slide)=>slide.width + val, 0);
|
|
136
136
|
const adjustShiftX = localSlides.length <= layoutState.current.slides.length || ((_layoutState_current_slides_slideIndex = layoutState.current.slides[slideIndex]) === null || _layoutState_current_slides_slideIndex === void 0 ? void 0 : _layoutState_current_slides_slideIndex.coordX) !== ((_localSlides_slideIndex = localSlides[slideIndex]) === null || _localSlides_slideIndex === void 0 ? void 0 : _localSlides_slideIndex.coordX);
|
|
137
|
+
var _localSlides_slideIndex_width;
|
|
138
|
+
const currentSlideOffsetOnCenterAlignment = (localContainerWidth - ((_localSlides_slideIndex_width = (_localSlides_slideIndex1 = localSlides[slideIndex]) === null || _localSlides_slideIndex1 === void 0 ? void 0 : _localSlides_slideIndex1.width) !== null && _localSlides_slideIndex_width !== void 0 ? _localSlides_slideIndex_width : 0)) / 2;
|
|
139
|
+
const isFullyVisible = align === 'center' ? localLayerWidth + currentSlideOffsetOnCenterAlignment <= localContainerWidth : localLayerWidth <= localContainerWidth;
|
|
137
140
|
layoutState.current = {
|
|
138
141
|
containerWidth: localContainerWidth,
|
|
139
142
|
viewportOffsetWidth: localViewportOffsetWidth,
|
|
@@ -152,7 +155,7 @@ const BaseGallery = (_param)=>{
|
|
|
152
155
|
align
|
|
153
156
|
}),
|
|
154
157
|
slides: localSlides,
|
|
155
|
-
isFullyVisible
|
|
158
|
+
isFullyVisible
|
|
156
159
|
};
|
|
157
160
|
setShiftState((prevState)=>{
|
|
158
161
|
var _options_animation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { type CustomTouchEvent, Touch } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport type { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n containerWidth: 0,\n viewportOffsetWidth: 0,\n layerWidth: 0,\n min: 0,\n max: 0,\n slides: [],\n isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n animation: undefined,\n shiftX: 0,\n dragging: false,\n deltaX: 0,\n indent: 0,\n};\n\nconst stylesBullets = {\n dark: styles['BaseGallery__bullets--dark'],\n light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize = 'l',\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n\n const { window } = useDOM();\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n const validateIndent = (value: number) => {\n const localMax = layoutState.current.max ?? 0;\n const localMin = layoutState.current.min ?? 0;\n\n if (value < localMin) {\n return localMin;\n } else if (value > localMax) {\n return localMax;\n }\n\n return value;\n };\n\n /*\n * Считает отступ слоя галереи\n */\n const calculateIndent = (targetIndex: number) => {\n if (layoutState.current.isFullyVisible) {\n return 0;\n }\n\n const targetSlide = layoutState.current.slides?.length\n ? layoutState.current.slides[targetIndex]\n : null;\n\n if (targetSlide) {\n const { coordX, width } = targetSlide;\n\n if (isCenterWithCustomWidth) {\n const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n return viewportWidth / 2 - coordX - width / 2;\n }\n\n return validateIndent(-1 * coordX);\n }\n return 0;\n };\n\n /*\n * Считает отступ слоя галереи во время драга\n */\n const calculateDragIndent = () => {\n const localMax = layoutState.current.max ?? 0;\n const localMin = layoutState.current.min ?? 0;\n const indent = shiftState.shiftX + shiftState.deltaX;\n\n if (indent > localMax) {\n return localMax + Number((indent - localMax) / 3);\n } else if (indent < localMin) {\n return localMin + Number((indent - localMin) / 3);\n }\n\n return indent;\n };\n\n const initializeSlides = (options: { animation?: boolean } = {}) => {\n const localSlides =\n React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n const elem = slidesStore.current[`slide-${i}`];\n return {\n coordX: elem?.offsetLeft ?? 0,\n width: elem?.offsetWidth ?? 0,\n };\n }) ?? [];\n\n const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n const localLayerWidth = localSlides.reduce(\n (val: number, slide: GallerySlidesState) => slide.width + val,\n 0,\n );\n const adjustShiftX =\n localSlides.length <= layoutState.current.slides.length ||\n layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n layoutState.current = {\n containerWidth: localContainerWidth,\n viewportOffsetWidth: localViewportOffsetWidth,\n layerWidth: localLayerWidth,\n max: calcMax({\n slides: localSlides,\n viewportOffsetWidth: localViewportOffsetWidth,\n isCenterWithCustomWidth,\n }),\n min: calcMin({\n containerWidth: localContainerWidth,\n layerWidth: localLayerWidth,\n slides: localSlides,\n viewportOffsetWidth: localViewportOffsetWidth,\n isCenterWithCustomWidth,\n align,\n }),\n slides: localSlides,\n isFullyVisible: localLayerWidth <= localContainerWidth,\n };\n\n setShiftState((prevState) => ({\n ...prevState,\n shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n }));\n };\n\n const onResize = () => {\n if (shiftState.animation !== undefined) {\n initializeSlides({ animation: false });\n }\n };\n\n useGlobalEventListener(window, 'resize', onResize);\n\n useIsomorphicLayoutEffect(() => {\n initializeSlides({ animation: false });\n }, [children, align, slideWidth]);\n\n useIsomorphicLayoutEffect(() => {\n if (shiftState.animation !== undefined) {\n setShiftState((prevState) => ({\n ...prevState,\n animation: true,\n deltaX: 0,\n shiftX: calculateIndent(slideIndex ?? 0),\n }));\n }\n }, [slideIndex]);\n\n const slideLeft = (event: React.MouseEvent) => {\n onChange?.(slideIndex - 1);\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n onChange?.(slideIndex + 1);\n onNextClick?.(event);\n };\n\n /*\n * Получает индекс слайда, к которому будет осуществлен переход\n */\n const getTarget = (e: CustomTouchEvent) => {\n const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n const shift =\n shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n // Находим ближайшую границу слайда к текущему отступу\n let targetIndex = layoutState.current.slides.reduce(\n (val: number, item: GallerySlidesState, index: number) => {\n const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n const currentValue = Math.abs(item.coordX + shift);\n\n return previousValue < currentValue ? val : index;\n },\n slideIndex,\n );\n\n if (targetIndex === slideIndex) {\n let targetSlide = slideIndex + direction;\n\n if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n targetIndex = targetSlide;\n }\n }\n }\n\n return targetIndex;\n };\n\n const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (isDraggable) {\n onDragStart?.(e);\n setShiftState((prevState) => ({ ...prevState, animation: false }));\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n if (shiftState.deltaX !== e.shiftX) {\n setShiftState((prevState) => ({\n ...prevState,\n deltaX: e.shiftX,\n dragging: e.isSlideX,\n }));\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (isDraggable) {\n const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n onDragEnd?.(e, targetIndex);\n\n const nextShiftState: Partial<ShiftingState> = {\n animation: true,\n dragging: false,\n deltaX: 0,\n };\n\n const shiftXStick = calculateDragIndent();\n if (targetIndex !== slideIndex) {\n // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n nextShiftState.shiftX = shiftXStick;\n }\n\n setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n if (targetIndex !== slideIndex) {\n onChange?.(targetIndex);\n }\n }\n };\n\n const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n const layerStyle = {\n transform: `translateX(${indent}px)`,\n transition: shiftState.animation\n ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n : 'none',\n };\n\n const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n slidesStore.current[`slide-${slideIndex}`] = slideRef;\n };\n\n // shiftX is negative number <= 0, we can swipe back only if it is < 0\n const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n const canSlideRight =\n !layoutState.current.isFullyVisible &&\n // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n ((align === 'left' &&\n layoutState.current.containerWidth - shiftState.shiftX <\n (layoutState.current.layerWidth ?? 0)) ||\n // otherwise we need to check current slide index (align = right or align = center)\n (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['BaseGallery'],\n align === 'center' && styles['BaseGallery--align-center'],\n slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n isDraggable && styles['BaseGallery--draggable'],\n )}\n getRootRef={rootRef}\n >\n <Touch\n className={styles['BaseGallery__viewport']}\n onStartX={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n getRootRef={viewportRef}\n noSlideClick\n >\n <div className={styles['BaseGallery__layer']} style={layerStyle}>\n {React.Children.map(children, (item: React.ReactNode, i: number) => (\n <div\n className={styles['BaseGallery__slide']}\n key={`slide-${i}`}\n ref={(el) => setSlideRef(el, i)}\n >\n {item}\n </div>\n ))}\n </div>\n </Touch>\n\n {bullets && (\n <div\n aria-hidden\n className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n >\n {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n <div\n className={classNames(\n styles['BaseGallery__bullet'],\n index === slideIndex && styles['BaseGallery__bullet--active'],\n )}\n key={index}\n />\n ))}\n </div>\n )}\n\n {showArrows && hasPointer && canSlideLeft && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"left\"\n onClick={slideLeft}\n size={arrowSize}\n />\n )}\n {showArrows && hasPointer && canSlideRight && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"right\"\n onClick={slideRight}\n size={arrowSize}\n />\n )}\n </RootComponent>\n );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","shiftState","setShiftState","useState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","isDraggable","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","transform","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","ref","el","aria-hidden","ScrollArrow","onClick","size"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { type CustomTouchEvent, Touch } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport type { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n containerWidth: 0,\n viewportOffsetWidth: 0,\n layerWidth: 0,\n min: 0,\n max: 0,\n slides: [],\n isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n animation: undefined,\n shiftX: 0,\n dragging: false,\n deltaX: 0,\n indent: 0,\n};\n\nconst stylesBullets = {\n dark: styles['BaseGallery__bullets--dark'],\n light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize = 'l',\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n\n const { window } = useDOM();\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n const validateIndent = (value: number) => {\n const localMax = layoutState.current.max ?? 0;\n const localMin = layoutState.current.min ?? 0;\n\n if (value < localMin) {\n return localMin;\n } else if (value > localMax) {\n return localMax;\n }\n\n return value;\n };\n\n /*\n * Считает отступ слоя галереи\n */\n const calculateIndent = (targetIndex: number) => {\n if (layoutState.current.isFullyVisible) {\n return 0;\n }\n\n const targetSlide = layoutState.current.slides?.length\n ? layoutState.current.slides[targetIndex]\n : null;\n\n if (targetSlide) {\n const { coordX, width } = targetSlide;\n\n if (isCenterWithCustomWidth) {\n const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n return viewportWidth / 2 - coordX - width / 2;\n }\n\n return validateIndent(-1 * coordX);\n }\n return 0;\n };\n\n /*\n * Считает отступ слоя галереи во время драга\n */\n const calculateDragIndent = () => {\n const localMax = layoutState.current.max ?? 0;\n const localMin = layoutState.current.min ?? 0;\n const indent = shiftState.shiftX + shiftState.deltaX;\n\n if (indent > localMax) {\n return localMax + Number((indent - localMax) / 3);\n } else if (indent < localMin) {\n return localMin + Number((indent - localMin) / 3);\n }\n\n return indent;\n };\n\n const initializeSlides = (options: { animation?: boolean } = {}) => {\n const localSlides =\n React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n const elem = slidesStore.current[`slide-${i}`];\n return {\n coordX: elem?.offsetLeft ?? 0,\n width: elem?.offsetWidth ?? 0,\n };\n }) ?? [];\n\n const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n const localLayerWidth = localSlides.reduce(\n (val: number, slide: GallerySlidesState) => slide.width + val,\n 0,\n );\n const adjustShiftX =\n localSlides.length <= layoutState.current.slides.length ||\n layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n const currentSlideOffsetOnCenterAlignment =\n (localContainerWidth - (localSlides[slideIndex]?.width ?? 0)) / 2;\n const isFullyVisible =\n align === 'center'\n ? localLayerWidth + currentSlideOffsetOnCenterAlignment <= localContainerWidth\n : localLayerWidth <= localContainerWidth;\n\n layoutState.current = {\n containerWidth: localContainerWidth,\n viewportOffsetWidth: localViewportOffsetWidth,\n layerWidth: localLayerWidth,\n max: calcMax({\n slides: localSlides,\n viewportOffsetWidth: localViewportOffsetWidth,\n isCenterWithCustomWidth,\n }),\n min: calcMin({\n containerWidth: localContainerWidth,\n layerWidth: localLayerWidth,\n slides: localSlides,\n viewportOffsetWidth: localViewportOffsetWidth,\n isCenterWithCustomWidth,\n align,\n }),\n slides: localSlides,\n isFullyVisible,\n };\n\n setShiftState((prevState) => ({\n ...prevState,\n shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n }));\n };\n\n const onResize = () => {\n if (shiftState.animation !== undefined) {\n initializeSlides({ animation: false });\n }\n };\n\n useGlobalEventListener(window, 'resize', onResize);\n\n useIsomorphicLayoutEffect(() => {\n initializeSlides({ animation: false });\n }, [children, align, slideWidth]);\n\n useIsomorphicLayoutEffect(() => {\n if (shiftState.animation !== undefined) {\n setShiftState((prevState) => ({\n ...prevState,\n animation: true,\n deltaX: 0,\n shiftX: calculateIndent(slideIndex ?? 0),\n }));\n }\n }, [slideIndex]);\n\n const slideLeft = (event: React.MouseEvent) => {\n onChange?.(slideIndex - 1);\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n onChange?.(slideIndex + 1);\n onNextClick?.(event);\n };\n\n /*\n * Получает индекс слайда, к которому будет осуществлен переход\n */\n const getTarget = (e: CustomTouchEvent) => {\n const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n const shift =\n shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n // Находим ближайшую границу слайда к текущему отступу\n let targetIndex = layoutState.current.slides.reduce(\n (val: number, item: GallerySlidesState, index: number) => {\n const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n const currentValue = Math.abs(item.coordX + shift);\n\n return previousValue < currentValue ? val : index;\n },\n slideIndex,\n );\n\n if (targetIndex === slideIndex) {\n let targetSlide = slideIndex + direction;\n\n if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n targetIndex = targetSlide;\n }\n }\n }\n\n return targetIndex;\n };\n\n const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (isDraggable) {\n onDragStart?.(e);\n setShiftState((prevState) => ({ ...prevState, animation: false }));\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n if (shiftState.deltaX !== e.shiftX) {\n setShiftState((prevState) => ({\n ...prevState,\n deltaX: e.shiftX,\n dragging: e.isSlideX,\n }));\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (isDraggable) {\n const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n onDragEnd?.(e, targetIndex);\n\n const nextShiftState: Partial<ShiftingState> = {\n animation: true,\n dragging: false,\n deltaX: 0,\n };\n\n const shiftXStick = calculateDragIndent();\n if (targetIndex !== slideIndex) {\n // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n nextShiftState.shiftX = shiftXStick;\n }\n\n setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n if (targetIndex !== slideIndex) {\n onChange?.(targetIndex);\n }\n }\n };\n\n const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n const layerStyle = {\n transform: `translateX(${indent}px)`,\n transition: shiftState.animation\n ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n : 'none',\n };\n\n const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n slidesStore.current[`slide-${slideIndex}`] = slideRef;\n };\n\n // shiftX is negative number <= 0, we can swipe back only if it is < 0\n const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n const canSlideRight =\n !layoutState.current.isFullyVisible &&\n // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n ((align === 'left' &&\n layoutState.current.containerWidth - shiftState.shiftX <\n (layoutState.current.layerWidth ?? 0)) ||\n // otherwise we need to check current slide index (align = right or align = center)\n (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['BaseGallery'],\n align === 'center' && styles['BaseGallery--align-center'],\n slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n isDraggable && styles['BaseGallery--draggable'],\n )}\n getRootRef={rootRef}\n >\n <Touch\n className={styles['BaseGallery__viewport']}\n onStartX={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n getRootRef={viewportRef}\n noSlideClick\n >\n <div className={styles['BaseGallery__layer']} style={layerStyle}>\n {React.Children.map(children, (item: React.ReactNode, i: number) => (\n <div\n className={styles['BaseGallery__slide']}\n key={`slide-${i}`}\n ref={(el) => setSlideRef(el, i)}\n >\n {item}\n </div>\n ))}\n </div>\n </Touch>\n\n {bullets && (\n <div\n aria-hidden\n className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n >\n {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n <div\n className={classNames(\n styles['BaseGallery__bullet'],\n index === slideIndex && styles['BaseGallery__bullet--active'],\n )}\n key={index}\n />\n ))}\n </div>\n )}\n\n {showArrows && hasPointer && canSlideLeft && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"left\"\n onClick={slideLeft}\n size={arrowSize}\n />\n )}\n {showArrows && hasPointer && canSlideRight && (\n <ScrollArrow\n className={styles['BaseGallery__arrow']}\n direction=\"right\"\n onClick={slideRight}\n size={arrowSize}\n />\n )}\n </RootComponent>\n );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","shiftState","setShiftState","useState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","currentSlideOffsetOnCenterAlignment","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","isDraggable","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","transform","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","ref","el","aria-hidden","ScrollArrow","onClick","size"],"mappings":"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"}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { HTMLAttributesWithRootRef } from '../../types';
|
|
3
|
-
import { type CalendarDaysProps } from '../CalendarDays/CalendarDays';
|
|
4
|
-
import { type CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
|
|
5
|
-
import { type CalendarTimeProps } from '../CalendarTime/CalendarTime';
|
|
6
|
-
export
|
|
3
|
+
import { type CalendarDaysProps, type CalendarDaysTestsProps } from '../CalendarDays/CalendarDays';
|
|
4
|
+
import { type CalendarHeaderProps, type CalendarHeaderTestsProps } from '../CalendarHeader/CalendarHeader';
|
|
5
|
+
import { type CalendarTimeProps, type CalendarTimeTestsProps } from '../CalendarTime/CalendarTime';
|
|
6
|
+
export type CalendarTestsProps = CalendarDaysTestsProps & CalendarHeaderTestsProps & CalendarTimeTestsProps;
|
|
7
|
+
export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel' | 'doneButtonText' | 'doneButtonDisabled' | 'doneButtonShow'>, Pick<CalendarHeaderProps, 'prevMonthLabel' | 'nextMonthLabel' | 'changeMonthLabel' | 'changeYearLabel' | 'onNextMonth' | 'onPrevMonth' | 'prevMonthIcon' | 'nextMonthIcon' | 'prevMonthProps' | 'nextMonthProps'>, Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>, CalendarTestsProps {
|
|
7
8
|
value?: Date;
|
|
8
9
|
/**
|
|
9
10
|
* Запрещает выбор даты в прошлом.
|
|
@@ -17,7 +18,6 @@ export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
|
|
|
17
18
|
disableFuture?: boolean;
|
|
18
19
|
enableTime?: boolean;
|
|
19
20
|
disablePickers?: boolean;
|
|
20
|
-
doneButtonText?: string;
|
|
21
21
|
changeDayLabel?: string;
|
|
22
22
|
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
23
23
|
showNeighboringMonth?: boolean;
|
|
@@ -51,5 +51,5 @@ export interface CalendarProps extends Omit<HTMLAttributesWithRootRef<HTMLDivEle
|
|
|
51
51
|
/**
|
|
52
52
|
* @see https://vkcom.github.io/VKUI/#/Calendar
|
|
53
53
|
*/
|
|
54
|
-
export declare const Calendar: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime, doneButtonText, weekStartsOn, disablePickers, changeHoursLabel, changeMinutesLabel, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, showNeighboringMonth, changeDayLabel, size, viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, ...props }: CalendarProps) => React.ReactNode;
|
|
54
|
+
export declare const Calendar: ({ value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime, doneButtonText, doneButtonDisabled, doneButtonShow, weekStartsOn, disablePickers, changeHoursLabel, changeMinutesLabel, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, showNeighboringMonth, changeDayLabel, size, viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId, ...props }: CalendarProps) => React.ReactNode;
|
|
55
55
|
//# sourceMappingURL=Calendar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC9B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,8BAA8B,CAAC;AAItC,MAAM,MAAM,kBAAkB,GAAG,sBAAsB,GACrD,wBAAwB,GACxB,sBAAsB,CAAC;AAEzB,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CACF,iBAAiB,EACf,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,oBAAoB,GACpB,gBAAgB,CACnB,EACD,IAAI,CACF,mBAAmB,EACjB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,gBAAgB,GAChB,gBAAgB,CACnB,EACD,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,2BAA2B,GAAG,kBAAkB,CAAC,EACtF,kBAAkB;IACpB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IAC7C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;CACpB;AAID;;GAEG;AACH,eAAO,MAAM,QAAQ,krBA4ClB,aAAa,KAAG,KAAK,CAAC,SA2IxB,CAAC"}
|
|
@@ -26,7 +26,7 @@ const _CalendarTime = require("../CalendarTime/CalendarTime");
|
|
|
26
26
|
const _RootComponent = require("../RootComponent/RootComponent");
|
|
27
27
|
const warn = (0, _warnOnce.warnOnce)('Calendar');
|
|
28
28
|
const Calendar = (_param)=>{
|
|
29
|
-
var { value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime = false, doneButtonText, weekStartsOn = 1, disablePickers, changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, changeDayLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime } = _param, props = _object_without_properties._(_param, [
|
|
29
|
+
var { value, onChange, disablePast, disableFuture, shouldDisableDate, onClose, enableTime = false, doneButtonText, doneButtonDisabled, doneButtonShow, weekStartsOn = 1, disablePickers, changeHoursLabel = 'Изменить час', changeMinutesLabel = 'Изменить минуту', prevMonthLabel = 'Предыдущий месяц', nextMonthLabel = 'Следующий месяц', changeMonthLabel = 'Изменить месяц', changeYearLabel = 'Изменить год', showNeighboringMonth, changeDayLabel = 'Изменить день', size = 'm', viewDate: externalViewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, prevMonthProps, nextMonthProps, dayProps, listenDayChangesForUpdate, renderDayContent, minDateTime, maxDateTime, minutesTestId, hoursTestId, doneButtonTestId, prevMonthButtonTestId, nextMonthButtonTestId, monthDropdownTestId, yearDropdownTestId, dayTestId } = _param, props = _object_without_properties._(_param, [
|
|
30
30
|
"value",
|
|
31
31
|
"onChange",
|
|
32
32
|
"disablePast",
|
|
@@ -35,6 +35,8 @@ const Calendar = (_param)=>{
|
|
|
35
35
|
"onClose",
|
|
36
36
|
"enableTime",
|
|
37
37
|
"doneButtonText",
|
|
38
|
+
"doneButtonDisabled",
|
|
39
|
+
"doneButtonShow",
|
|
38
40
|
"weekStartsOn",
|
|
39
41
|
"disablePickers",
|
|
40
42
|
"changeHoursLabel",
|
|
@@ -58,7 +60,15 @@ const Calendar = (_param)=>{
|
|
|
58
60
|
"listenDayChangesForUpdate",
|
|
59
61
|
"renderDayContent",
|
|
60
62
|
"minDateTime",
|
|
61
|
-
"maxDateTime"
|
|
63
|
+
"maxDateTime",
|
|
64
|
+
"minutesTestId",
|
|
65
|
+
"hoursTestId",
|
|
66
|
+
"doneButtonTestId",
|
|
67
|
+
"prevMonthButtonTestId",
|
|
68
|
+
"nextMonthButtonTestId",
|
|
69
|
+
"monthDropdownTestId",
|
|
70
|
+
"yearDropdownTestId",
|
|
71
|
+
"dayTestId"
|
|
62
72
|
]);
|
|
63
73
|
const { viewDate, setViewDate, setPrevMonth, setNextMonth, focusedDay, setFocusedDay, isDayFocused, isDayDisabled, resetSelectedDay, isMonthDisabled, isYearDisabled } = (0, _useCalendar.useCalendar)({
|
|
64
74
|
value,
|
|
@@ -142,7 +152,11 @@ const Calendar = (_param)=>{
|
|
|
142
152
|
prevMonthProps: prevMonthProps,
|
|
143
153
|
nextMonthProps: nextMonthProps,
|
|
144
154
|
isMonthDisabled: isMonthDisabled,
|
|
145
|
-
isYearDisabled: isYearDisabled
|
|
155
|
+
isYearDisabled: isYearDisabled,
|
|
156
|
+
nextMonthButtonTestId: nextMonthButtonTestId,
|
|
157
|
+
prevMonthButtonTestId: prevMonthButtonTestId,
|
|
158
|
+
monthDropdownTestId: monthDropdownTestId,
|
|
159
|
+
yearDropdownTestId: yearDropdownTestId
|
|
146
160
|
}),
|
|
147
161
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_CalendarDays.CalendarDays, {
|
|
148
162
|
viewDate: externalViewDate || viewDate,
|
|
@@ -162,7 +176,8 @@ const Calendar = (_param)=>{
|
|
|
162
176
|
size: size,
|
|
163
177
|
dayProps: dayProps,
|
|
164
178
|
listenDayChangesForUpdate: listenDayChangesForUpdate,
|
|
165
|
-
renderDayContent: renderDayContent
|
|
179
|
+
renderDayContent: renderDayContent,
|
|
180
|
+
dayTestId: dayTestId
|
|
166
181
|
}),
|
|
167
182
|
enableTime && value && size !== 's' && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
168
183
|
className: "vkuiCalendar__time",
|
|
@@ -171,9 +186,14 @@ const Calendar = (_param)=>{
|
|
|
171
186
|
onChange: onChange,
|
|
172
187
|
onClose: onClose,
|
|
173
188
|
doneButtonText: doneButtonText,
|
|
189
|
+
doneButtonDisabled: doneButtonDisabled,
|
|
190
|
+
doneButtonShow: doneButtonShow,
|
|
174
191
|
changeHoursLabel: changeHoursLabel,
|
|
175
192
|
changeMinutesLabel: changeMinutesLabel,
|
|
176
|
-
isDayDisabled: minDateTime || maxDateTime ? isDayDisabled : undefined
|
|
193
|
+
isDayDisabled: minDateTime || maxDateTime ? isDayDisabled : undefined,
|
|
194
|
+
minutesTestId: minutesTestId,
|
|
195
|
+
hoursTestId: hoursTestId,
|
|
196
|
+
doneButtonTestId: doneButtonTestId
|
|
177
197
|
})
|
|
178
198
|
})
|
|
179
199
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { CalendarDays, type CalendarDaysProps } from '../CalendarDays/CalendarDays';\nimport { CalendarHeader, type CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';\nimport { CalendarTime, type CalendarTimeProps } from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport interface CalendarProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,\n Pick<\n CalendarHeaderProps,\n | 'prevMonthLabel'\n | 'nextMonthLabel'\n | 'changeMonthLabel'\n | 'changeYearLabel'\n | 'onNextMonth'\n | 'onPrevMonth'\n | 'prevMonthIcon'\n | 'nextMonthIcon'\n | 'prevMonthProps'\n | 'nextMonthProps'\n >,\n Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'> {\n value?: Date;\n /**\n * Запрещает выбор даты в прошлом.\n * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n */\n disablePast?: boolean;\n /**\n * Запрещает выбор даты в будущем.\n * Применяется, если не задано `shouldDisableDate`.\n */\n disableFuture?: boolean;\n enableTime?: boolean;\n disablePickers?: boolean;\n doneButtonText?: string;\n changeDayLabel?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n showNeighboringMonth?: boolean;\n size?: 's' | 'm';\n onChange?: (value?: Date) => void;\n /**\n * Позволяет запретить выбор даты.\n */\n shouldDisableDate?: (value: Date) => boolean;\n onClose?: () => void;\n /**\n * Дата отображаемого месяца.\n * При использовании обновление даты должно происходить вне компонента.\n */\n viewDate?: Date;\n /**\n * Изменение даты в шапке календаря.\n */\n onHeaderChange?: (value: Date) => void;\n /**\n * Минимальные дата и время, которые можно выбрать\n * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n */\n minDateTime?: Date;\n /**\n * Максимальные дата и время, которые можно выбрать.\n * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n */\n maxDateTime?: Date;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n enableTime = false,\n doneButtonText,\n weekStartsOn = 1,\n disablePickers,\n changeHoursLabel = 'Изменить час',\n changeMinutesLabel = 'Изменить минуту',\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n showNeighboringMonth,\n changeDayLabel = 'Изменить день',\n size = 'm',\n viewDate: externalViewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n prevMonthProps,\n nextMonthProps,\n dayProps,\n listenDayChangesForUpdate,\n renderDayContent,\n minDateTime,\n maxDateTime,\n ...props\n}: CalendarProps): React.ReactNode => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n isMonthDisabled,\n isYearDisabled,\n } = useCalendar({\n value,\n disableFuture,\n disablePast,\n shouldDisableDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n minDateTime,\n maxDateTime,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (value) {\n setViewDate(value);\n }\n }, [value]);\n\n if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n }\n\n if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n }\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n let actualDate = setTimeEqual(date, value);\n if (minDateTime || maxDateTime) {\n actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n }\n onChange?.(actualDate);\n },\n [value, onChange, maxDateTime, minDateTime],\n );\n\n const isDayActive = React.useCallback(\n (day: Date) => Boolean(value && isSameDay(day, value)),\n [value],\n );\n\n return (\n <RootComponent\n {...props}\n baseClassName={classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'])}\n >\n <CalendarHeader\n viewDate={externalViewDate || viewDate}\n onChange={setViewDate}\n onNextMonth={setNextMonth}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers || size === 's'}\n className={styles['Calendar__header']}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n prevMonthProps={prevMonthProps}\n nextMonthProps={nextMonthProps}\n isMonthDisabled={isMonthDisabled}\n isYearDisabled={isYearDisabled}\n />\n <CalendarDays\n viewDate={externalViewDate || viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n isDayFocused={isDayFocused}\n tabIndex={0}\n aria-label={changeDayLabel}\n onKeyDown={handleKeyDown}\n onDayChange={onDayChange}\n isDayActive={isDayActive}\n isDaySelectionStart={isFirstDay}\n isDaySelectionEnd={isLastDay}\n isDayDisabled={isDayDisabled}\n onBlur={resetSelectedDay}\n showNeighboringMonth={showNeighboringMonth}\n size={size}\n dayProps={dayProps}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n renderDayContent={renderDayContent}\n />\n {enableTime && value && size !== 's' && (\n <div className={styles['Calendar__time']}>\n <CalendarTime\n value={value}\n onChange={onChange}\n onClose={onClose}\n doneButtonText={doneButtonText}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n />\n </div>\n )}\n </RootComponent>\n );\n};\n"],"names":["Calendar","warn","warnOnce","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","useCalendar","useIsomorphicLayoutEffect","process","env","NODE_ENV","handleKeyDown","React","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","onDayChange","date","actualDate","setTimeEqual","clamp","min","max","isDayActive","day","Boolean","isSameDay","RootComponent","baseClassName","classNames","CalendarHeader","className","CalendarDays","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isFirstDay","isDaySelectionEnd","isLastDay","onBlur","div","CalendarTime","undefined"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useCalendar } from '../../hooks/useCalendar';\nimport { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n CalendarDays,\n type CalendarDaysProps,\n type CalendarDaysTestsProps,\n} from '../CalendarDays/CalendarDays';\nimport {\n CalendarHeader,\n type CalendarHeaderProps,\n type CalendarHeaderTestsProps,\n} from '../CalendarHeader/CalendarHeader';\nimport {\n CalendarTime,\n type CalendarTimeProps,\n type CalendarTimeTestsProps,\n} from '../CalendarTime/CalendarTime';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Calendar.module.css';\n\nexport type CalendarTestsProps = CalendarDaysTestsProps &\n CalendarHeaderTestsProps &\n CalendarTimeTestsProps;\n\nexport interface CalendarProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<\n CalendarTimeProps,\n | 'changeHoursLabel'\n | 'changeMinutesLabel'\n | 'doneButtonText'\n | 'doneButtonDisabled'\n | 'doneButtonShow'\n >,\n Pick<\n CalendarHeaderProps,\n | 'prevMonthLabel'\n | 'nextMonthLabel'\n | 'changeMonthLabel'\n | 'changeYearLabel'\n | 'onNextMonth'\n | 'onPrevMonth'\n | 'prevMonthIcon'\n | 'nextMonthIcon'\n | 'prevMonthProps'\n | 'nextMonthProps'\n >,\n Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,\n CalendarTestsProps {\n value?: Date;\n /**\n * Запрещает выбор даты в прошлом.\n * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.\n */\n disablePast?: boolean;\n /**\n * Запрещает выбор даты в будущем.\n * Применяется, если не задано `shouldDisableDate`.\n */\n disableFuture?: boolean;\n enableTime?: boolean;\n disablePickers?: boolean;\n changeDayLabel?: string;\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n showNeighboringMonth?: boolean;\n size?: 's' | 'm';\n onChange?: (value?: Date) => void;\n /**\n * Позволяет запретить выбор даты.\n */\n shouldDisableDate?: (value: Date) => boolean;\n onClose?: () => void;\n /**\n * Дата отображаемого месяца.\n * При использовании обновление даты должно происходить вне компонента.\n */\n viewDate?: Date;\n /**\n * Изменение даты в шапке календаря.\n */\n onHeaderChange?: (value: Date) => void;\n /**\n * Минимальные дата и время, которые можно выбрать\n * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n */\n minDateTime?: Date;\n /**\n * Максимальные дата и время, которые можно выбрать.\n * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.\n */\n maxDateTime?: Date;\n}\n\nconst warn = warnOnce('Calendar');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Calendar\n */\nexport const Calendar = ({\n value,\n onChange,\n disablePast,\n disableFuture,\n shouldDisableDate,\n onClose,\n enableTime = false,\n doneButtonText,\n doneButtonDisabled,\n doneButtonShow,\n weekStartsOn = 1,\n disablePickers,\n changeHoursLabel = 'Изменить час',\n changeMinutesLabel = 'Изменить минуту',\n prevMonthLabel = 'Предыдущий месяц',\n nextMonthLabel = 'Следующий месяц',\n changeMonthLabel = 'Изменить месяц',\n changeYearLabel = 'Изменить год',\n showNeighboringMonth,\n changeDayLabel = 'Изменить день',\n size = 'm',\n viewDate: externalViewDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n prevMonthIcon,\n nextMonthIcon,\n prevMonthProps,\n nextMonthProps,\n dayProps,\n listenDayChangesForUpdate,\n renderDayContent,\n minDateTime,\n maxDateTime,\n minutesTestId,\n hoursTestId,\n doneButtonTestId,\n prevMonthButtonTestId,\n nextMonthButtonTestId,\n monthDropdownTestId,\n yearDropdownTestId,\n dayTestId,\n ...props\n}: CalendarProps): React.ReactNode => {\n const {\n viewDate,\n setViewDate,\n setPrevMonth,\n setNextMonth,\n focusedDay,\n setFocusedDay,\n isDayFocused,\n isDayDisabled,\n resetSelectedDay,\n isMonthDisabled,\n isYearDisabled,\n } = useCalendar({\n value,\n disableFuture,\n disablePast,\n shouldDisableDate,\n onHeaderChange,\n onNextMonth,\n onPrevMonth,\n minDateTime,\n maxDateTime,\n });\n\n useIsomorphicLayoutEffect(() => {\n if (value) {\n setViewDate(value);\n }\n }, [value]);\n\n if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {\n warn(\"Нельзя включить селекты выбора месяца/года, если размер календаря 's'\", 'error');\n }\n\n if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {\n warn(\"Нельзя включить выбор времени, если размер календаря 's'\", 'error');\n }\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {\n event.preventDefault();\n }\n\n const newFocusedDay = navigateDate(focusedDay ?? value, event.key);\n\n if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {\n setViewDate(newFocusedDay);\n }\n setFocusedDay(newFocusedDay);\n },\n [focusedDay, setFocusedDay, setViewDate, value, viewDate],\n );\n\n const onDayChange = React.useCallback(\n (date: Date) => {\n let actualDate = setTimeEqual(date, value);\n if (minDateTime || maxDateTime) {\n actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });\n }\n onChange?.(actualDate);\n },\n [value, onChange, maxDateTime, minDateTime],\n );\n\n const isDayActive = React.useCallback(\n (day: Date) => Boolean(value && isSameDay(day, value)),\n [value],\n );\n\n return (\n <RootComponent\n {...props}\n baseClassName={classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'])}\n >\n <CalendarHeader\n viewDate={externalViewDate || viewDate}\n onChange={setViewDate}\n onNextMonth={setNextMonth}\n onPrevMonth={setPrevMonth}\n disablePickers={disablePickers || size === 's'}\n className={styles['Calendar__header']}\n prevMonthLabel={prevMonthLabel}\n nextMonthLabel={nextMonthLabel}\n changeMonthLabel={changeMonthLabel}\n changeYearLabel={changeYearLabel}\n prevMonthIcon={prevMonthIcon}\n nextMonthIcon={nextMonthIcon}\n prevMonthProps={prevMonthProps}\n nextMonthProps={nextMonthProps}\n isMonthDisabled={isMonthDisabled}\n isYearDisabled={isYearDisabled}\n nextMonthButtonTestId={nextMonthButtonTestId}\n prevMonthButtonTestId={prevMonthButtonTestId}\n monthDropdownTestId={monthDropdownTestId}\n yearDropdownTestId={yearDropdownTestId}\n />\n <CalendarDays\n viewDate={externalViewDate || viewDate}\n value={value}\n weekStartsOn={weekStartsOn}\n isDayFocused={isDayFocused}\n tabIndex={0}\n aria-label={changeDayLabel}\n onKeyDown={handleKeyDown}\n onDayChange={onDayChange}\n isDayActive={isDayActive}\n isDaySelectionStart={isFirstDay}\n isDaySelectionEnd={isLastDay}\n isDayDisabled={isDayDisabled}\n onBlur={resetSelectedDay}\n showNeighboringMonth={showNeighboringMonth}\n size={size}\n dayProps={dayProps}\n listenDayChangesForUpdate={listenDayChangesForUpdate}\n renderDayContent={renderDayContent}\n dayTestId={dayTestId}\n />\n {enableTime && value && size !== 's' && (\n <div className={styles['Calendar__time']}>\n <CalendarTime\n value={value}\n onChange={onChange}\n onClose={onClose}\n doneButtonText={doneButtonText}\n doneButtonDisabled={doneButtonDisabled}\n doneButtonShow={doneButtonShow}\n changeHoursLabel={changeHoursLabel}\n changeMinutesLabel={changeMinutesLabel}\n isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}\n minutesTestId={minutesTestId}\n hoursTestId={hoursTestId}\n doneButtonTestId={doneButtonTestId}\n />\n </div>\n )}\n </RootComponent>\n );\n};\n"],"names":["Calendar","warn","warnOnce","value","onChange","disablePast","disableFuture","shouldDisableDate","onClose","enableTime","doneButtonText","doneButtonDisabled","doneButtonShow","weekStartsOn","disablePickers","changeHoursLabel","changeMinutesLabel","prevMonthLabel","nextMonthLabel","changeMonthLabel","changeYearLabel","showNeighboringMonth","changeDayLabel","size","viewDate","externalViewDate","onHeaderChange","onNextMonth","onPrevMonth","prevMonthIcon","nextMonthIcon","prevMonthProps","nextMonthProps","dayProps","listenDayChangesForUpdate","renderDayContent","minDateTime","maxDateTime","minutesTestId","hoursTestId","doneButtonTestId","prevMonthButtonTestId","nextMonthButtonTestId","monthDropdownTestId","yearDropdownTestId","dayTestId","props","setViewDate","setPrevMonth","setNextMonth","focusedDay","setFocusedDay","isDayFocused","isDayDisabled","resetSelectedDay","isMonthDisabled","isYearDisabled","useCalendar","useIsomorphicLayoutEffect","process","env","NODE_ENV","handleKeyDown","React","useCallback","event","includes","key","preventDefault","newFocusedDay","navigateDate","isSameMonth","onDayChange","date","actualDate","setTimeEqual","clamp","min","max","isDayActive","day","Boolean","isSameDay","RootComponent","baseClassName","classNames","CalendarHeader","className","CalendarDays","tabIndex","aria-label","onKeyDown","isDaySelectionStart","isFirstDay","isDaySelectionEnd","isLastDay","onBlur","div","CalendarTime","undefined"],"mappings":"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"}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
export type CalendarDayElementProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onChange' | 'size' | 'disabled' | 'selected'>;
|
|
3
|
-
export
|
|
3
|
+
export type CalendarDayTestsProps = {
|
|
4
|
+
testId?: string | ((day: Date) => string);
|
|
5
|
+
};
|
|
6
|
+
export interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {
|
|
4
7
|
day: Date;
|
|
5
8
|
today?: boolean;
|
|
6
9
|
selected?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAC9C,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB;
|
|
1
|
+
{"version":3,"file":"CalendarDay.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EACpC,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,CAC9C,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,uBAAuB,EAAE,qBAAqB;IACtF,GAAG,EAAE,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAEhC,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACnD;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0GlD,CAAC"}
|
|
@@ -20,7 +20,7 @@ const _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext"
|
|
|
20
20
|
const _Tappable = require("../Tappable/Tappable");
|
|
21
21
|
const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
|
|
22
22
|
const CalendarDay = /*#__PURE__*/ _react.memo((_param)=>{
|
|
23
|
-
var { day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, className, children, renderDayContent } = _param, restProps = _object_without_properties._(_param, [
|
|
23
|
+
var { day, today, selected, onChange, hidden, disabled, active, selectionStart, selectionEnd, focused, onEnter, onLeave, hinted, hintedSelectionStart, hintedSelectionEnd, sameMonth, size, className, children, renderDayContent, testId } = _param, restProps = _object_without_properties._(_param, [
|
|
24
24
|
"day",
|
|
25
25
|
"today",
|
|
26
26
|
"selected",
|
|
@@ -40,7 +40,8 @@ const CalendarDay = /*#__PURE__*/ _react.memo((_param)=>{
|
|
|
40
40
|
"size",
|
|
41
41
|
"className",
|
|
42
42
|
"children",
|
|
43
|
-
"renderDayContent"
|
|
43
|
+
"renderDayContent",
|
|
44
|
+
"testId"
|
|
44
45
|
]);
|
|
45
46
|
const { locale } = (0, _ConfigProviderContext.useConfigProvider)();
|
|
46
47
|
const ref = _react.useRef(null);
|
|
@@ -109,7 +110,8 @@ const CalendarDay = /*#__PURE__*/ _react.memo((_param)=>{
|
|
|
109
110
|
getRootRef: ref,
|
|
110
111
|
focusVisibleMode: active ? 'outside' : 'inside',
|
|
111
112
|
onPointerEnter: handleEnter,
|
|
112
|
-
onPointerLeave: handleLeave
|
|
113
|
+
onPointerLeave: handleLeave,
|
|
114
|
+
"data-testid": typeof testId === 'string' ? testId : testId === null || testId === void 0 ? void 0 : testId(day)
|
|
113
115
|
}, restProps), {
|
|
114
116
|
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
|
|
115
117
|
className: (0, _vkjs.classNames)("vkuiCalendarDay__hinted", hinted && "vkuiCalendarDay__hinted--active", hintedSelectionStart && "vkuiCalendarDay__hinted--selection-start", hintedSelectionEnd && "vkuiCalendarDay__hinted--selection-end"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n React.AllHTMLAttributes<HTMLElement>,\n 'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport interface CalendarDayProps extends CalendarDayElementProps {\n day: Date;\n today?: boolean;\n selected?: boolean;\n selectionStart?: boolean;\n selectionEnd?: boolean;\n hintedSelectionStart?: boolean;\n hintedSelectionEnd?: boolean;\n active?: boolean;\n hidden?: boolean;\n disabled?: boolean;\n focused?: boolean;\n hinted?: boolean;\n sameMonth?: boolean;\n size?: 's' | 'm';\n onChange: (value: Date) => void;\n onEnter?: (value: Date) => void;\n onLeave?: (value: Date) => void;\n // Функция отрисовки контента в ячейке дня\n renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n ({\n day,\n today,\n selected,\n onChange,\n hidden,\n disabled,\n active,\n selectionStart,\n selectionEnd,\n focused,\n onEnter,\n onLeave,\n hinted,\n hintedSelectionStart,\n hintedSelectionEnd,\n sameMonth,\n size,\n className,\n children,\n renderDayContent,\n ...restProps\n }: CalendarDayProps) => {\n const { locale } = useConfigProvider();\n const ref = React.useRef<HTMLElement>(null);\n const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n const label = new Intl.DateTimeFormat(locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }).format(day);\n\n React.useEffect(() => {\n if (focused && ref.current) {\n ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n ref.current.focus();\n }\n }, [focused]);\n\n const content = React.useMemo(() => {\n if (renderDayContent) {\n return renderDayContent(day);\n }\n return (\n <div className={styles['CalendarDay__day-number']}>\n <VisuallyHidden>{children ?? label}</VisuallyHidden>\n <span aria-hidden>{day.getDate()}</span>\n </div>\n );\n }, [renderDayContent, day, children, label]);\n\n if (hidden) {\n return <div className={styles['CalendarDay__hidden']} />;\n }\n\n return (\n <Tappable\n className={classNames(\n styles['CalendarDay'],\n size === 's' && styles['CalendarDay--size-s'],\n today && styles['CalendarDay--today'],\n selected && !disabled && styles['CalendarDay--selected'],\n selectionStart && styles['CalendarDay--selection-start'],\n selectionEnd && styles['CalendarDay--selection-end'],\n disabled && styles['CalendarDay--disabled'],\n !sameMonth && styles['CalendarDay--not-same-month'],\n className,\n )}\n hoverMode={active ? '' : styles['CalendarDay--hover']}\n hasActive={false}\n onClick={onClick}\n disabled={disabled}\n tabIndex={-1}\n getRootRef={ref}\n focusVisibleMode={active ? 'outside' : 'inside'}\n onPointerEnter={handleEnter}\n onPointerLeave={handleLeave}\n {...restProps}\n >\n <div\n className={classNames(\n styles['CalendarDay__hinted'],\n hinted && styles['CalendarDay__hinted--active'],\n hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n )}\n >\n <div\n className={classNames(\n styles['CalendarDay__inner'],\n active && !disabled && styles['CalendarDay__inner--active'],\n )}\n >\n {content}\n </div>\n </div>\n </Tappable>\n );\n },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","children","renderDayContent","restProps","locale","useConfigProvider","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","content","useMemo","div","VisuallyHidden","span","aria-hidden","getDate","Tappable","classNames","hoverMode","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","displayName"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CalendarDay/CalendarDay.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CalendarDay.module.css';\n\nexport type CalendarDayElementProps = Omit<\n React.AllHTMLAttributes<HTMLElement>,\n 'onChange' | 'size' | 'disabled' | 'selected'\n>;\n\nexport type CalendarDayTestsProps = {\n testId?: string | ((day: Date) => string);\n};\n\nexport interface CalendarDayProps extends CalendarDayElementProps, CalendarDayTestsProps {\n day: Date;\n today?: boolean;\n selected?: boolean;\n selectionStart?: boolean;\n selectionEnd?: boolean;\n hintedSelectionStart?: boolean;\n hintedSelectionEnd?: boolean;\n active?: boolean;\n hidden?: boolean;\n disabled?: boolean;\n focused?: boolean;\n hinted?: boolean;\n sameMonth?: boolean;\n size?: 's' | 'm';\n onChange: (value: Date) => void;\n onEnter?: (value: Date) => void;\n onLeave?: (value: Date) => void;\n // Функция отрисовки контента в ячейке дня\n renderDayContent?: (day: Date) => React.ReactNode;\n}\n\nexport const CalendarDay: React.FC<CalendarDayProps> = React.memo(\n ({\n day,\n today,\n selected,\n onChange,\n hidden,\n disabled,\n active,\n selectionStart,\n selectionEnd,\n focused,\n onEnter,\n onLeave,\n hinted,\n hintedSelectionStart,\n hintedSelectionEnd,\n sameMonth,\n size,\n className,\n children,\n renderDayContent,\n testId,\n ...restProps\n }: CalendarDayProps) => {\n const { locale } = useConfigProvider();\n const ref = React.useRef<HTMLElement>(null);\n const onClick = React.useCallback(() => onChange(day), [day, onChange]);\n const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);\n const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);\n\n const label = new Intl.DateTimeFormat(locale, {\n weekday: 'long',\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }).format(day);\n\n React.useEffect(() => {\n if (focused && ref.current) {\n ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));\n ref.current.focus();\n }\n }, [focused]);\n\n const content = React.useMemo(() => {\n if (renderDayContent) {\n return renderDayContent(day);\n }\n return (\n <div className={styles['CalendarDay__day-number']}>\n <VisuallyHidden>{children ?? label}</VisuallyHidden>\n <span aria-hidden>{day.getDate()}</span>\n </div>\n );\n }, [renderDayContent, day, children, label]);\n\n if (hidden) {\n return <div className={styles['CalendarDay__hidden']} />;\n }\n\n return (\n <Tappable\n className={classNames(\n styles['CalendarDay'],\n size === 's' && styles['CalendarDay--size-s'],\n today && styles['CalendarDay--today'],\n selected && !disabled && styles['CalendarDay--selected'],\n selectionStart && styles['CalendarDay--selection-start'],\n selectionEnd && styles['CalendarDay--selection-end'],\n disabled && styles['CalendarDay--disabled'],\n !sameMonth && styles['CalendarDay--not-same-month'],\n className,\n )}\n hoverMode={active ? '' : styles['CalendarDay--hover']}\n hasActive={false}\n onClick={onClick}\n disabled={disabled}\n tabIndex={-1}\n getRootRef={ref}\n focusVisibleMode={active ? 'outside' : 'inside'}\n onPointerEnter={handleEnter}\n onPointerLeave={handleLeave}\n data-testid={typeof testId === 'string' ? testId : testId?.(day)}\n {...restProps}\n >\n <div\n className={classNames(\n styles['CalendarDay__hinted'],\n hinted && styles['CalendarDay__hinted--active'],\n hintedSelectionStart && styles['CalendarDay__hinted--selection-start'],\n hintedSelectionEnd && styles['CalendarDay__hinted--selection-end'],\n )}\n >\n <div\n className={classNames(\n styles['CalendarDay__inner'],\n active && !disabled && styles['CalendarDay__inner--active'],\n )}\n >\n {content}\n </div>\n </div>\n </Tappable>\n );\n },\n);\n\nCalendarDay.displayName = 'CalendarDay';\n"],"names":["CalendarDay","React","memo","day","today","selected","onChange","hidden","disabled","active","selectionStart","selectionEnd","focused","onEnter","onLeave","hinted","hintedSelectionStart","hintedSelectionEnd","sameMonth","size","className","children","renderDayContent","testId","restProps","locale","useConfigProvider","ref","useRef","onClick","useCallback","handleEnter","handleLeave","label","Intl","DateTimeFormat","weekday","year","month","format","useEffect","current","dispatchEvent","Event","ENABLE_KEYBOARD_INPUT_EVENT_NAME","bubbles","focus","content","useMemo","div","VisuallyHidden","span","aria-hidden","getDate","Tappable","classNames","hoverMode","hasActive","tabIndex","getRootRef","focusVisibleMode","onPointerEnter","onPointerLeave","data-testid","displayName"],"mappings":";;;;+BAuCaA;;;eAAAA;;;;;;;;iEAvCU;sBACI;yCACsB;uCACf;0BACT;gCACM;AAkCxB,MAAMA,4BAA0CC,OAAMC,IAAI,CAC/D;QAAC,EACCC,GAAG,EACHC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,YAAY,EACZC,OAAO,EACPC,OAAO,EACPC,OAAO,EACPC,MAAM,EACNC,oBAAoB,EACpBC,kBAAkB,EAClBC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,gBAAgB,EAChBC,MAAM,EAEW,WADdC;QArBHrB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,MAAM,EAAE,GAAGC,IAAAA,wCAAiB;IACpC,MAAMC,MAAM1B,OAAM2B,MAAM,CAAc;IACtC,MAAMC,UAAU5B,OAAM6B,WAAW,CAAC,IAAMxB,SAASH,MAAM;QAACA;QAAKG;KAAS;IACtE,MAAMyB,cAAc9B,OAAM6B,WAAW,CAAC,IAAMjB,oBAAAA,8BAAAA,QAAUV,MAAM;QAACA;QAAKU;KAAQ;IAC1E,MAAMmB,cAAc/B,OAAM6B,WAAW,CAAC,IAAMhB,oBAAAA,8BAAAA,QAAUX,MAAM;QAACA;QAAKW;KAAQ;IAE1E,MAAMmB,QAAQ,IAAIC,KAAKC,cAAc,CAACV,QAAQ;QAC5CW,SAAS;QACTC,MAAM;QACNC,OAAO;QACPnC,KAAK;IACP,GAAGoC,MAAM,CAACpC;IAEVF,OAAMuC,SAAS,CAAC;QACd,IAAI5B,WAAWe,IAAIc,OAAO,EAAE;YAC1Bd,IAAIc,OAAO,CAACC,aAAa,CAAC,IAAIC,MAAMC,yDAAgC,EAAE;gBAAEC,SAAS;YAAK;YACtFlB,IAAIc,OAAO,CAACK,KAAK;QACnB;IACF,GAAG;QAAClC;KAAQ;IAEZ,MAAMmC,UAAU9C,OAAM+C,OAAO,CAAC;QAC5B,IAAI1B,kBAAkB;YACpB,OAAOA,iBAAiBnB;QAC1B;QACA,qBACE,sBAAC8C;YAAI7B,SAAS;;8BACZ,qBAAC8B,8BAAc;8BAAE7B,qBAAAA,sBAAAA,WAAYY;;8BAC7B,qBAACkB;oBAAKC,aAAW;8BAAEjD,IAAIkD,OAAO;;;;IAGpC,GAAG;QAAC/B;QAAkBnB;QAAKkB;QAAUY;KAAM;IAE3C,IAAI1B,QAAQ;QACV,qBAAO,qBAAC0C;YAAI7B,SAAS;;IACvB;IAEA,qBACE,qBAACkC,kBAAQ;QACPlC,WAAWmC,IAAAA,gBAAU,qBAEnBpC,SAAS,kCACTf,mCACAC,YAAY,CAACG,yCACbE,sDACAC,kDACAH,yCACA,CAACU,gDACDE;QAEFoC,WAAW/C,SAAS;QACpBgD,WAAW;QACX5B,SAASA;QACTrB,UAAUA;QACVkD,UAAU,CAAC;QACXC,YAAYhC;QACZiC,kBAAkBnD,SAAS,YAAY;QACvCoD,gBAAgB9B;QAChB+B,gBAAgB9B;QAChB+B,eAAa,OAAOxC,WAAW,WAAWA,SAASA,mBAAAA,6BAAAA,OAASpB;OACxDqB;kBAEJ,cAAA,qBAACyB;YACC7B,WAAWmC,IAAAA,gBAAU,6BAEnBxC,6CACAC,oEACAC;sBAGF,cAAA,qBAACgC;gBACC7B,WAAWmC,IAAAA,gBAAU,4BAEnB9C,UAAU,CAACD;0BAGZuC;;;;AAKX;AAGF/C,YAAYgE,WAAW,GAAG"}
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { HTMLAttributesWithRootRef } from '../../types';
|
|
3
|
-
import { type CalendarDayElementProps, type CalendarDayProps } from '../CalendarDay/CalendarDay';
|
|
4
|
-
export
|
|
3
|
+
import { type CalendarDayElementProps, type CalendarDayProps, type CalendarDayTestsProps } from '../CalendarDay/CalendarDay';
|
|
4
|
+
export type CalendarDaysTestsProps = {
|
|
5
|
+
dayTestId?: CalendarDayTestsProps['testId'];
|
|
6
|
+
};
|
|
7
|
+
export interface CalendarDaysProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, Pick<CalendarDayProps, 'renderDayContent'>, CalendarDaysTestsProps {
|
|
5
8
|
value?: Date | Array<Date | null>;
|
|
6
9
|
viewDate: Date;
|
|
7
10
|
weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
|
@@ -22,5 +25,5 @@ export interface CalendarDaysProps extends Omit<HTMLAttributesWithRootRef<HTMLDi
|
|
|
22
25
|
onDayEnter?: (value: Date) => void;
|
|
23
26
|
onDayLeave?: (value: Date) => void;
|
|
24
27
|
}
|
|
25
|
-
export declare const CalendarDays: ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth, dayProps, listenDayChangesForUpdate, getRootRef, renderDayContent, ...props }: CalendarDaysProps) => React.ReactNode;
|
|
28
|
+
export declare const CalendarDays: ({ viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth, dayProps, listenDayChangesForUpdate, getRootRef, renderDayContent, dayTestId, ...props }: CalendarDaysProps) => React.ReactNode;
|
|
26
29
|
//# sourceMappingURL=CalendarDays.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDays.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,
|
|
1
|
+
{"version":3,"file":"CalendarDays.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAEL,KAAK,uBAAuB,EAC5B,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC3B,MAAM,4BAA4B,CAAC;AAMpC,MAAM,MAAM,sBAAsB,GAAG;IACnC,SAAS,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CAC7C,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,EAC1C,sBAAsB;IACxB,KAAK,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC;IAClC,QAAQ,EAAE,IAAI,CAAC;IACf,YAAY,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,WAAW,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,aAAa,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,mBAAmB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IACjE,iBAAiB,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/D,yBAAyB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IACxE,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,OAAO,CAAC;IACtE,WAAW,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IACtC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,YAAY,iWAwBtB,iBAAiB,KAAG,KAAK,CAAC,SA4E5B,CAAC"}
|
|
@@ -24,7 +24,7 @@ const _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext"
|
|
|
24
24
|
const _RootComponent = require("../RootComponent/RootComponent");
|
|
25
25
|
const _Footnote = require("../Typography/Footnote/Footnote");
|
|
26
26
|
const CalendarDays = (_param)=>{
|
|
27
|
-
var { viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, listenDayChangesForUpdate = false, getRootRef, renderDayContent } = _param, props = _object_without_properties._(_param, [
|
|
27
|
+
var { viewDate, value, weekStartsOn, onDayChange, isDaySelected, isDayActive, isDaySelectionEnd, isDaySelectionStart, onDayEnter, onDayLeave, isDayHinted, isHintedDaySelectionStart, isHintedDaySelectionEnd, isDayFocused, isDayDisabled, size, showNeighboringMonth = false, dayProps, listenDayChangesForUpdate = false, getRootRef, renderDayContent, dayTestId } = _param, props = _object_without_properties._(_param, [
|
|
28
28
|
"viewDate",
|
|
29
29
|
"value",
|
|
30
30
|
"weekStartsOn",
|
|
@@ -45,7 +45,8 @@ const CalendarDays = (_param)=>{
|
|
|
45
45
|
"dayProps",
|
|
46
46
|
"listenDayChangesForUpdate",
|
|
47
47
|
"getRootRef",
|
|
48
|
-
"renderDayContent"
|
|
48
|
+
"renderDayContent",
|
|
49
|
+
"dayTestId"
|
|
49
50
|
]);
|
|
50
51
|
const { locale } = (0, _ConfigProviderContext.useConfigProvider)();
|
|
51
52
|
const ref = (0, _useExternRef.useExternRef)(getRootRef);
|
|
@@ -100,7 +101,8 @@ const CalendarDays = (_param)=>{
|
|
|
100
101
|
hinted: isDayHinted === null || isDayHinted === void 0 ? void 0 : isDayHinted(day),
|
|
101
102
|
sameMonth: sameMonth,
|
|
102
103
|
size: size,
|
|
103
|
-
renderDayContent: renderDayContent
|
|
104
|
+
renderDayContent: renderDayContent,
|
|
105
|
+
testId: dayTestId
|
|
104
106
|
}, dayProps), day.toISOString());
|
|
105
107
|
})
|
|
106
108
|
}, i))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n CalendarDay,\n type CalendarDayElementProps,\n type CalendarDayProps,\n} from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport interface CalendarDaysProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<CalendarDayProps, 'renderDayContent'
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CalendarDays/CalendarDays.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { isSameDay, isSameMonth } from 'date-fns';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useTodayDate } from '../../hooks/useTodayDate';\nimport { getDaysNames, getWeeks } from '../../lib/calendar';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport {\n CalendarDay,\n type CalendarDayElementProps,\n type CalendarDayProps,\n type CalendarDayTestsProps,\n} from '../CalendarDay/CalendarDay';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './CalendarDays.module.css';\n\nexport type CalendarDaysTestsProps = {\n dayTestId?: CalendarDayTestsProps['testId'];\n};\n\nexport interface CalendarDaysProps\n extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,\n Pick<CalendarDayProps, 'renderDayContent'>,\n CalendarDaysTestsProps {\n value?: Date | Array<Date | null>;\n viewDate: Date;\n weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n showNeighboringMonth?: boolean;\n size?: 's' | 'm';\n dayProps?: CalendarDayElementProps;\n listenDayChangesForUpdate?: boolean;\n onDayChange: (value: Date) => void;\n isDayDisabled: (value: Date) => boolean;\n isDaySelectionStart: (value: Date, dayOfWeek: number) => boolean;\n isDaySelectionEnd: (value: Date, dayOfWeek: number) => boolean;\n isHintedDaySelectionStart?: (value: Date, dayOfWeek: number) => boolean;\n isHintedDaySelectionEnd?: (value: Date, dayOfWeek: number) => boolean;\n isDayActive: (value: Date) => boolean;\n isDayHinted?: (value: Date) => boolean;\n isDaySelected?: (value: Date) => boolean;\n isDayFocused: (value: Date) => boolean;\n onDayEnter?: (value: Date) => void;\n onDayLeave?: (value: Date) => void;\n}\n\nexport const CalendarDays = ({\n viewDate,\n value,\n weekStartsOn,\n onDayChange,\n isDaySelected,\n isDayActive,\n isDaySelectionEnd,\n isDaySelectionStart,\n onDayEnter,\n onDayLeave,\n isDayHinted,\n isHintedDaySelectionStart,\n isHintedDaySelectionEnd,\n isDayFocused,\n isDayDisabled,\n size,\n showNeighboringMonth = false,\n dayProps,\n listenDayChangesForUpdate = false,\n getRootRef,\n renderDayContent,\n dayTestId,\n ...props\n}: CalendarDaysProps): React.ReactNode => {\n const { locale } = useConfigProvider();\n const ref = useExternRef(getRootRef);\n const now = useTodayDate(listenDayChangesForUpdate);\n\n const weeks = React.useMemo(() => getWeeks(viewDate, weekStartsOn), [weekStartsOn, viewDate]);\n\n const daysNames = React.useMemo(\n () => getDaysNames(now, weekStartsOn, locale),\n [locale, now, weekStartsOn],\n );\n\n const handleDayChange = React.useCallback(\n (date: Date) => {\n onDayChange(date);\n\n ref.current?.focus();\n },\n [onDayChange, ref],\n );\n\n return (\n <RootComponent {...props} baseClassName={styles['CalendarDays']} getRootRef={ref}>\n <div\n className={classNames(\n styles['CalendarDays__row'],\n size === 's' && styles['CalendarDays__row--size-s'],\n )}\n >\n {daysNames.map((dayName) => (\n <Footnote key={dayName} className={styles['CalendarDays__weekday']}>\n {dayName}\n </Footnote>\n ))}\n </div>\n\n {weeks.map((week, i) => (\n <div\n className={classNames(\n styles['CalendarDays__row'],\n size === 's' && styles['CalendarDays__row--size-s'],\n )}\n key={i}\n >\n {week.map((day, i) => {\n const sameMonth = isSameMonth(day, viewDate);\n return (\n <CalendarDay\n key={day.toISOString()}\n day={day}\n today={isSameDay(day, now)}\n active={isDayActive(day)}\n onChange={handleDayChange}\n hidden={!showNeighboringMonth && !sameMonth}\n disabled={isDayDisabled(day)}\n selectionStart={isDaySelectionStart(day, i)}\n selectionEnd={isDaySelectionEnd(day, i)}\n hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}\n hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}\n selected={isDaySelected?.(day)}\n focused={isDayFocused(day)}\n onEnter={onDayEnter}\n onLeave={onDayLeave}\n hinted={isDayHinted?.(day)}\n sameMonth={sameMonth}\n size={size}\n renderDayContent={renderDayContent}\n testId={dayTestId}\n {...dayProps}\n />\n );\n })}\n </div>\n ))}\n </RootComponent>\n );\n};\n"],"names":["CalendarDays","viewDate","value","weekStartsOn","onDayChange","isDaySelected","isDayActive","isDaySelectionEnd","isDaySelectionStart","onDayEnter","onDayLeave","isDayHinted","isHintedDaySelectionStart","isHintedDaySelectionEnd","isDayFocused","isDayDisabled","size","showNeighboringMonth","dayProps","listenDayChangesForUpdate","getRootRef","renderDayContent","dayTestId","props","locale","useConfigProvider","ref","useExternRef","now","useTodayDate","weeks","React","useMemo","getWeeks","daysNames","getDaysNames","handleDayChange","useCallback","date","current","focus","RootComponent","baseClassName","div","className","classNames","map","dayName","Footnote","week","i","day","sameMonth","isSameMonth","CalendarDay","today","isSameDay","active","onChange","hidden","disabled","selectionStart","selectionEnd","hintedSelectionStart","hintedSelectionEnd","selected","focused","onEnter","onLeave","hinted","testId","toISOString"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;iEA/CU;sBACI;yBACY;8BACV;8BACA;0BACU;6BAOhC;uCAC2B;+BACJ;0BACL;AAgClB,MAAMA,eAAe;QAAC,EAC3BC,QAAQ,EACRC,KAAK,EACLC,YAAY,EACZC,WAAW,EACXC,aAAa,EACbC,WAAW,EACXC,iBAAiB,EACjBC,mBAAmB,EACnBC,UAAU,EACVC,UAAU,EACVC,WAAW,EACXC,yBAAyB,EACzBC,uBAAuB,EACvBC,YAAY,EACZC,aAAa,EACbC,IAAI,EACJC,uBAAuB,KAAK,EAC5BC,QAAQ,EACRC,4BAA4B,KAAK,EACjCC,UAAU,EACVC,gBAAgB,EAChBC,SAAS,EAES,WADfC;QAtBHtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,MAAM,EAAE,GAAGC,IAAAA,wCAAiB;IACpC,MAAMC,MAAMC,IAAAA,0BAAY,EAACP;IACzB,MAAMQ,MAAMC,IAAAA,0BAAY,EAACV;IAEzB,MAAMW,QAAQC,OAAMC,OAAO,CAAC,IAAMC,IAAAA,kBAAQ,EAAChC,UAAUE,eAAe;QAACA;QAAcF;KAAS;IAE5F,MAAMiC,YAAYH,OAAMC,OAAO,CAC7B,IAAMG,IAAAA,sBAAY,EAACP,KAAKzB,cAAcqB,SACtC;QAACA;QAAQI;QAAKzB;KAAa;IAG7B,MAAMiC,kBAAkBL,OAAMM,WAAW,CACvC,CAACC;YAGCZ;QAFAtB,YAAYkC;SAEZZ,eAAAA,IAAIa,OAAO,cAAXb,mCAAAA,aAAac,KAAK;IACpB,GACA;QAACpC;QAAasB;KAAI;IAGpB,qBACE,sBAACe,4BAAa,8CAAKlB;QAAOmB,aAAa;QAA0BtB,YAAYM;;0BAC3E,qBAACiB;gBACCC,WAAWC,IAAAA,gBAAU,2BAEnB7B,SAAS;0BAGVkB,UAAUY,GAAG,CAAC,CAACC,wBACd,qBAACC,kBAAQ;wBAAeJ,SAAS;kCAC9BG;uBADYA;;YAMlBjB,MAAMgB,GAAG,CAAC,CAACG,MAAMC,kBAChB,qBAACP;oBACCC,WAAWC,IAAAA,gBAAU,2BAEnB7B,SAAS;8BAIViC,KAAKH,GAAG,CAAC,CAACK,KAAKD;wBACd,MAAME,YAAYC,IAAAA,oBAAW,EAACF,KAAKlD;wBACnC,qBACE,qBAACqD,wBAAW;4BAEVH,KAAKA;4BACLI,OAAOC,IAAAA,kBAAS,EAACL,KAAKvB;4BACtB6B,QAAQnD,YAAY6C;4BACpBO,UAAUtB;4BACVuB,QAAQ,CAAC1C,wBAAwB,CAACmC;4BAClCQ,UAAU7C,cAAcoC;4BACxBU,gBAAgBrD,oBAAoB2C,KAAKD;4BACzCY,cAAcvD,kBAAkB4C,KAAKD;4BACrCa,oBAAoB,EAAEnD,sCAAAA,gDAAAA,0BAA4BuC,KAAKD;4BACvDc,kBAAkB,EAAEnD,oCAAAA,8CAAAA,wBAA0BsC,KAAKD;4BACnDe,QAAQ,EAAE5D,0BAAAA,oCAAAA,cAAgB8C;4BAC1Be,SAASpD,aAAaqC;4BACtBgB,SAAS1D;4BACT2D,SAAS1D;4BACT2D,MAAM,EAAE1D,wBAAAA,kCAAAA,YAAcwC;4BACtBC,WAAWA;4BACXpC,MAAMA;4BACNK,kBAAkBA;4BAClBiD,QAAQhD;2BACJJ,WApBCiC,IAAIoB,WAAW;oBAuB1B;mBA7BKrB;;;AAkCf"}
|
|
@@ -1,7 +1,13 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import type { HTMLAttributesWithRootRef } from '../../types';
|
|
3
3
|
type ArrowMonthProps = Omit<React.AllHTMLAttributes<HTMLElement>, 'onClick' | 'aria-label'>;
|
|
4
|
-
export
|
|
4
|
+
export type CalendarHeaderTestsProps = {
|
|
5
|
+
monthDropdownTestId?: string | ((monthIndex: number) => string);
|
|
6
|
+
yearDropdownTestId?: string | ((year: number) => string);
|
|
7
|
+
nextMonthButtonTestId?: string;
|
|
8
|
+
prevMonthButtonTestId?: string;
|
|
9
|
+
};
|
|
10
|
+
export interface CalendarHeaderProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>, CalendarHeaderTestsProps {
|
|
5
11
|
viewDate: Date;
|
|
6
12
|
/**
|
|
7
13
|
* Скрывает иконку для переключения на предыдущий месяц
|
|
@@ -32,6 +38,6 @@ export interface CalendarHeaderProps extends Omit<HTMLAttributesWithRootRef<HTML
|
|
|
32
38
|
*/
|
|
33
39
|
onPrevMonth?: () => void;
|
|
34
40
|
}
|
|
35
|
-
export declare const CalendarHeader: ({ viewDate, onChange, prevMonthHidden: prevMonthHiddenProp, nextMonthHidden: nextMonthHiddenProp, disablePickers, onNextMonth, onPrevMonth, prevMonthProps, nextMonthProps, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, prevMonthIcon, nextMonthIcon, isMonthDisabled, isYearDisabled, ...restProps }: CalendarHeaderProps) => React.ReactNode;
|
|
41
|
+
export declare const CalendarHeader: ({ viewDate, onChange, prevMonthHidden: prevMonthHiddenProp, nextMonthHidden: nextMonthHiddenProp, disablePickers, onNextMonth, onPrevMonth, prevMonthProps, nextMonthProps, prevMonthLabel, nextMonthLabel, changeMonthLabel, changeYearLabel, prevMonthIcon, nextMonthIcon, isMonthDisabled, isYearDisabled, monthDropdownTestId, yearDropdownTestId, prevMonthButtonTestId, nextMonthButtonTestId, ...restProps }: CalendarHeaderProps) => React.ReactNode;
|
|
36
42
|
export {};
|
|
37
43
|
//# sourceMappingURL=CalendarHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAE5F,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CalendarHeader/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAU7D,KAAK,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC,CAAC;AAE5F,MAAM,MAAM,wBAAwB,GAAG;IACrC,mBAAmB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAChE,kBAAkB,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IACzD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC;AAEF,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACjE,wBAAwB;IAC1B,QAAQ,EAAE,IAAI,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,cAAc,CAAC,EAAE,eAAe,CAAC;IACjC,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC;IACjD,QAAQ,EAAE,CAAC,QAAQ,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,eAAO,MAAM,cAAc,wZAmCxB,mBAAmB,KAAG,KAAK,CAAC,SAwK9B,CAAC"}
|