@vkontakte/vkui 7.0.0-dev-efd91c.4 → 7.0.0
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/components/ActionSheet/ActionSheet.d.ts.map +1 -1
- package/dist/components/ActionSheet/ActionSheet.js +1 -3
- package/dist/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/components/AppRoot/AppRoot.d.ts +1 -1
- package/dist/components/AppRoot/AppRoot.d.ts.map +1 -1
- package/dist/components/AppRoot/AppRoot.js +16 -10
- package/dist/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/components/AppRoot/AppRootPortal.js +1 -1
- package/dist/components/AppRoot/AppRootPortal.js.map +1 -1
- package/dist/components/AppRoot/{AppRootStyleContainer.d.ts → AppRootStyleContainer/AppRootStyleContainer.d.ts} +3 -3
- package/dist/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.d.ts.map +1 -0
- package/dist/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.js +45 -0
- package/dist/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.js.map +1 -0
- package/dist/components/AppRoot/helpers.d.ts +7 -0
- package/dist/components/AppRoot/helpers.d.ts.map +1 -1
- package/dist/components/AppRoot/helpers.js +20 -4
- package/dist/components/AppRoot/helpers.js.map +1 -1
- package/dist/components/Clickable/Clickable.d.ts.map +1 -1
- package/dist/components/Clickable/Clickable.js +2 -83
- package/dist/components/Clickable/Clickable.js.map +1 -1
- package/dist/components/Clickable/RealClickable.d.ts +6 -0
- package/dist/components/Clickable/RealClickable.d.ts.map +1 -0
- package/dist/components/Clickable/RealClickable.js +90 -0
- package/dist/components/Clickable/RealClickable.js.map +1 -0
- package/dist/components/HorizontalCell/HorizontalCell.d.ts +4 -0
- package/dist/components/HorizontalCell/HorizontalCell.d.ts.map +1 -1
- package/dist/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/components/ModalCard/ModalCardInternal.js +1 -1
- package/dist/components/ModalCard/ModalCardInternal.js.map +1 -1
- package/dist/components/ModalPage/ModalPage.d.ts +1 -1
- package/dist/components/ModalPage/ModalPage.d.ts.map +1 -1
- package/dist/components/ModalPage/ModalPage.js +53 -5
- package/dist/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/components/ModalPage/ModalPageInternal.d.ts +5 -2
- package/dist/components/ModalPage/ModalPageInternal.d.ts.map +1 -1
- package/dist/components/ModalPage/ModalPageInternal.js +5 -4
- package/dist/components/ModalPage/ModalPageInternal.js.map +1 -1
- package/dist/components/ModalRoot/ModalRoot.d.ts.map +1 -1
- package/dist/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/components/ModalRoot/types.d.ts.map +1 -1
- package/dist/components/ModalRoot/types.js.map +1 -1
- package/dist/components/ModalRoot/useModalManager.d.ts +2 -0
- package/dist/components/ModalRoot/useModalManager.d.ts.map +1 -1
- package/dist/components/ModalRoot/useModalManager.js +4 -1
- package/dist/components/ModalRoot/useModalManager.js.map +1 -1
- package/dist/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/components/PopoutWrapper/PopoutWrapper.d.ts.map +1 -1
- package/dist/components/PopoutWrapper/PopoutWrapper.js +2 -2
- package/dist/components/PopoutWrapper/PopoutWrapper.js.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts.map +1 -1
- package/dist/components/Spinner/Spinner.js +11 -43
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/Spinner/SpinnerAnimation.d.ts +7 -0
- package/dist/components/Spinner/SpinnerAnimation.d.ts.map +1 -0
- package/dist/components/Spinner/SpinnerAnimation.js +36 -0
- package/dist/components/Spinner/SpinnerAnimation.js.map +1 -0
- package/dist/components/SplitLayout/SplitLayout.d.ts +4 -4
- package/dist/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/ActionSheet/ActionSheet.js +1 -3
- package/dist/cssm/components/ActionSheet/ActionSheet.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.js +14 -9
- package/dist/cssm/components/AppRoot/AppRoot.js.map +1 -1
- package/dist/cssm/components/AppRoot/AppRoot.module.css +17 -0
- package/dist/cssm/components/AppRoot/AppRootPortal.js +1 -1
- package/dist/cssm/components/AppRoot/AppRootPortal.js.map +1 -1
- package/dist/cssm/components/AppRoot/{AppRootStyleContainer.js → AppRootStyleContainer/AppRootStyleContainer.js} +12 -23
- package/dist/cssm/components/AppRoot/AppRootStyleContainer/AppRootStyleContainer.js.map +1 -0
- package/dist/cssm/components/AppRoot/{AppRootStyleContainer.module.css → AppRootStyleContainer/AppRootStyleContainer.module.css} +7 -31
- package/dist/cssm/components/AppRoot/helpers.js +17 -1
- package/dist/cssm/components/AppRoot/helpers.js.map +1 -1
- package/dist/cssm/components/Button/Button.module.css +6 -6
- package/dist/cssm/components/Card/Card.module.css +12 -6
- package/dist/cssm/components/Clickable/Clickable.js +2 -55
- package/dist/cssm/components/Clickable/Clickable.js.map +1 -1
- package/dist/cssm/components/Clickable/RealClickable.js +61 -0
- package/dist/cssm/components/Clickable/RealClickable.js.map +1 -0
- package/dist/cssm/components/FormField/FormField.module.css +2 -0
- package/dist/cssm/components/FormItem/FormItem.module.css +6 -6
- package/dist/cssm/components/Group/Group.module.css +1 -0
- package/dist/cssm/components/Header/Header.module.css +10 -4
- package/dist/cssm/components/HorizontalCell/HorizontalCell.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.module.css +1 -0
- package/dist/cssm/components/IconButton/IconButton.module.css +12 -3
- package/dist/cssm/components/MiniInfoCell/MiniInfoCell.module.css +1 -0
- package/dist/cssm/components/ModalCard/ModalCardInternal.js +1 -1
- package/dist/cssm/components/ModalCard/ModalCardInternal.js.map +1 -1
- package/dist/cssm/components/ModalPage/ModalPage.js +50 -4
- package/dist/cssm/components/ModalPage/ModalPage.js.map +1 -1
- package/dist/cssm/components/ModalPage/ModalPageInternal.js +3 -2
- package/dist/cssm/components/ModalPage/ModalPageInternal.js.map +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.module.css +1 -0
- package/dist/cssm/components/ModalRoot/ModalRoot.js.map +1 -1
- package/dist/cssm/components/ModalRoot/types.js.map +1 -1
- package/dist/cssm/components/ModalRoot/useModalManager.js +4 -1
- package/dist/cssm/components/ModalRoot/useModalManager.js.map +1 -1
- package/dist/cssm/components/PanelHeader/PanelHeader.module.css +10 -4
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.js.map +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css +4 -0
- package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js +2 -3
- package/dist/cssm/components/PopoutWrapper/PopoutWrapper.js.map +1 -1
- package/dist/cssm/components/Removable/Removable.module.css +7 -2
- package/dist/cssm/components/Spinner/Spinner.js +11 -43
- package/dist/cssm/components/Spinner/Spinner.js.map +1 -1
- package/dist/cssm/components/Spinner/SpinnerAnimation.js +36 -0
- package/dist/cssm/components/Spinner/SpinnerAnimation.js.map +1 -0
- package/dist/cssm/components/SplitLayout/SplitLayout.js.map +1 -1
- package/dist/cssm/components/View/View.module.css +2 -2
- package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js +15 -4
- package/dist/cssm/hooks/useSyncHTMLWithBaseVKUIClasses.js.map +1 -1
- package/dist/cssm/index.js.map +1 -1
- package/dist/cssm/lib/adaptivity/functions.js +1 -7
- package/dist/cssm/lib/adaptivity/functions.js.map +1 -1
- package/dist/cssm/lib/animation/useReducedMotion.js +4 -7
- package/dist/cssm/lib/animation/useReducedMotion.js.map +1 -1
- package/dist/cssm/lib/sheet/controllers/BottomSheetController.js +22 -37
- package/dist/cssm/lib/sheet/controllers/BottomSheetController.js.map +1 -1
- package/dist/cssm/lib/sheet/controllers/CSSTransitionController.js +1 -9
- package/dist/cssm/lib/sheet/controllers/CSSTransitionController.js.map +1 -1
- package/dist/cssm/lib/sheet/index.js +1 -1
- package/dist/cssm/lib/sheet/index.js.map +1 -1
- package/dist/cssm/lib/sheet/useBottomSheet.js +12 -15
- package/dist/cssm/lib/sheet/useBottomSheet.js.map +1 -1
- package/dist/cssm/styles/common.css +10 -4
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.d.ts +3 -2
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.d.ts.map +1 -1
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.js +15 -4
- package/dist/hooks/useSyncHTMLWithBaseVKUIClasses.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/lib/adaptivity/functions.d.ts +0 -1
- package/dist/lib/adaptivity/functions.d.ts.map +1 -1
- package/dist/lib/adaptivity/functions.js +1 -7
- package/dist/lib/adaptivity/functions.js.map +1 -1
- package/dist/lib/animation/useReducedMotion.d.ts +1 -1
- package/dist/lib/animation/useReducedMotion.d.ts.map +1 -1
- package/dist/lib/animation/useReducedMotion.js +4 -7
- package/dist/lib/animation/useReducedMotion.js.map +1 -1
- package/dist/lib/sheet/controllers/BottomSheetController.d.ts +8 -8
- package/dist/lib/sheet/controllers/BottomSheetController.d.ts.map +1 -1
- package/dist/lib/sheet/controllers/BottomSheetController.js +22 -37
- package/dist/lib/sheet/controllers/BottomSheetController.js.map +1 -1
- package/dist/lib/sheet/controllers/CSSTransitionController.d.ts +1 -1
- package/dist/lib/sheet/controllers/CSSTransitionController.d.ts.map +1 -1
- package/dist/lib/sheet/controllers/CSSTransitionController.js +1 -9
- package/dist/lib/sheet/controllers/CSSTransitionController.js.map +1 -1
- package/dist/lib/sheet/index.d.ts +2 -1
- package/dist/lib/sheet/index.d.ts.map +1 -1
- package/dist/lib/sheet/index.js +1 -1
- package/dist/lib/sheet/index.js.map +1 -1
- package/dist/lib/sheet/useBottomSheet.d.ts +6 -5
- package/dist/lib/sheet/useBottomSheet.d.ts.map +1 -1
- package/dist/lib/sheet/useBottomSheet.js +12 -15
- package/dist/lib/sheet/useBottomSheet.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +2 -2
- package/src/components/ActionSheet/ActionSheet.tsx +1 -4
- package/src/components/AppRoot/AppRoot.module.css +17 -0
- package/src/components/AppRoot/AppRoot.tsx +24 -11
- package/src/components/AppRoot/AppRootPortal.tsx +1 -1
- package/src/components/AppRoot/{AppRootStyleContainer.module.css → AppRootStyleContainer/AppRootStyleContainer.module.css} +7 -24
- package/src/components/AppRoot/{AppRootStyleContainer.tsx → AppRootStyleContainer/AppRootStyleContainer.tsx} +11 -29
- package/src/components/AppRoot/helpers.ts +17 -1
- package/src/components/Button/Button.module.css +6 -6
- package/src/components/Card/Card.module.css +8 -6
- package/src/components/Clickable/Clickable.tsx +4 -103
- package/src/components/Clickable/RealClickable.tsx +99 -0
- package/src/components/FormField/FormField.module.css +2 -0
- package/src/components/FormItem/FormItem.module.css +6 -6
- package/src/components/Group/Group.module.css +1 -0
- package/src/components/Header/Header.module.css +8 -4
- package/src/components/HorizontalCell/HorizontalCell.tsx +4 -1
- package/src/components/HorizontalScroll/HorizontalScroll.module.css +1 -0
- package/src/components/IconButton/IconButton.module.css +10 -3
- package/src/components/MiniInfoCell/MiniInfoCell.module.css +1 -0
- package/src/components/ModalCard/ModalCardInternal.tsx +1 -1
- package/src/components/ModalPage/ModalPage.tsx +57 -3
- package/src/components/ModalPage/ModalPageInternal.tsx +14 -5
- package/src/components/ModalPageHeader/ModalPageHeader.module.css +1 -0
- package/src/components/ModalRoot/ModalRoot.tsx +0 -1
- package/src/components/ModalRoot/types.ts +0 -1
- package/src/components/ModalRoot/useModalManager.tsx +5 -3
- package/src/components/PanelHeader/PanelHeader.module.css +8 -4
- package/src/components/PanelHeaderButton/PanelHeaderButton.module.css +4 -0
- package/src/components/PanelHeaderButton/PanelHeaderButton.tsx +1 -1
- package/src/components/PopoutWrapper/PopoutWrapper.tsx +1 -4
- package/src/components/Removable/Removable.module.css +6 -2
- package/src/components/Spinner/Spinner.tsx +10 -48
- package/src/components/Spinner/SpinnerAnimation.tsx +42 -0
- package/src/components/SplitLayout/SplitLayout.tsx +4 -4
- package/src/components/View/View.module.css +2 -2
- package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts +13 -4
- package/src/index.ts +2 -2
- package/src/lib/adaptivity/functions.ts +1 -8
- package/src/lib/animation/useReducedMotion.ts +6 -13
- package/src/lib/sheet/controllers/BottomSheetController.ts +32 -50
- package/src/lib/sheet/controllers/CSSTransitionController.ts +1 -8
- package/src/lib/sheet/index.ts +3 -0
- package/src/lib/sheet/useBottomSheet.ts +21 -17
- package/src/styles/common.css +12 -4
- package/dist/components/AppRoot/AppRootStyleContainer.d.ts.map +0 -1
- package/dist/components/AppRoot/AppRootStyleContainer.js +0 -57
- package/dist/components/AppRoot/AppRootStyleContainer.js.map +0 -1
- package/dist/cssm/components/AppRoot/AppRootStyleContainer.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/lib/adaptivity/functions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"functions.d.ts","sourceRoot":"","sources":["../../../src/lib/adaptivity/functions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,EACL,KAAK,cAAc,EAGnB,KAAK,cAAc,EAEnB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEtE;;GAEG;AACH,wBAAgB,2BAA2B,CAAC,aAAa,EAAE,MAAM,GAAG,aAAa,CAchF;AAED,wBAAgB,0BAA0B,CAAC,YAAY,EAAE,YAAY,GAAG,aAAa,CAgBpF;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,cAAc,EAAE,MAAM,GAAG,cAAc,CAQpF;AAED,wBAAgB,2BAA2B,CAAC,YAAY,EAAE,YAAY,GAAG,cAAc,CAUtF;AAED,wBAAgB,QAAQ,CAAC,SAAS,EAAE,aAAa,GAAG,cAAc,CAEjE;AAED,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,aAAa,GAAG,SAAS,EACpC,UAAU,CAAC,EAAE,OAAO,GACnB,OAAO,GAAG,SAAS,CAErB;AAED,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,cAAc,GAAG,SAAS,GAAG,OAAO,CAErF;AAED,wBAAgB,QAAQ,CACtB,SAAS,EAAE,aAAa,EACxB,UAAU,EAAE,cAAc,EAC1B,UAAU,EAAE,OAAO,GAClB,cAAc,CAKhB;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,GAAG,OAAO,EAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;AAC7J,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,OAAO,CAAC;AAC5I,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,SAAS,GAAG,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;AACvJ,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;AACxJ,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,GAAG,OAAO,EAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;AACjJ,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,SAAS,GAAG,aAAa,EAAE,UAAU,EAAE,SAAS,GAAG,cAAc,EAAE,UAAU,EAAE,SAAS,GAAG,OAAO,EAAE,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,GAAG,OAAO,CAAC;AAyB5L;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,OAAO,CAAC,wBAAwB,CAAC,EAC9E,oBAAoB,EAAE,KAAK,CAAC,wBAAwB,EAAE,CAAC,CAAC,EACxD,SAAS,GAAE,aAAa,GAAG,MAAe,GACzC,MAAM,GAAG,IAAI,CAuCf"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { BREAKPOINTS, MEDIA_QUERIES } from "./breakpoints.js";
|
|
1
|
+
import { BREAKPOINTS } from "./breakpoints.js";
|
|
3
2
|
import { VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP, ViewHeight, ViewWidth } from "./constants.js";
|
|
4
3
|
/**
|
|
5
4
|
* @public
|
|
@@ -78,11 +77,6 @@ export function tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform)
|
|
|
78
77
|
const otherParametersIsLikeDesktop = hasPointer || (viewHeight !== undefined ? viewHeight >= ViewHeight.MEDIUM : false);
|
|
79
78
|
return widthIsLikeDesktop && otherParametersIsLikeDesktop || IS_VKCOM_CRUTCH;
|
|
80
79
|
}
|
|
81
|
-
export function isSmallTablePlus(el) {
|
|
82
|
-
const win = getWindow(el);
|
|
83
|
-
// eslint-disable-next-line no-restricted-properties
|
|
84
|
-
return win ? win.matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS).matches : false;
|
|
85
|
-
}
|
|
86
80
|
/**
|
|
87
81
|
* Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).
|
|
88
82
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/adaptivity/functions.ts"],"sourcesContent":["import type { Exact } from '../../types';\nimport { getWindow } from '../dom';\nimport { type PlatformType } from '../platform';\nimport { BREAKPOINTS, MEDIA_QUERIES } from './breakpoints';\nimport {\n type SizeTypeValues,\n VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,\n ViewHeight,\n type ViewHeightType,\n ViewWidth,\n type ViewWidthType,\n} from './constants';\nimport type { CSSBreakpointsClassNames, MediaQueries } from './types';\n\n/**\n * @public\n */\nexport function getViewWidthByViewportWidth(viewportWidth: number): ViewWidthType {\n if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n return ViewWidth.DESKTOP;\n }\n if (viewportWidth >= BREAKPOINTS.TABLET) {\n return ViewWidth.TABLET;\n }\n if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n return ViewWidth.SMALL_TABLET;\n }\n if (viewportWidth >= BREAKPOINTS.MOBILE) {\n return ViewWidth.MOBILE;\n }\n return ViewWidth.SMALL_MOBILE;\n}\n\nexport function getViewWidthByMediaQueries(mediaQueries: MediaQueries): ViewWidthType {\n /* eslint-disable no-restricted-properties */\n if (mediaQueries.desktopPlus.matches) {\n return ViewWidth.DESKTOP;\n }\n if (mediaQueries.tablet.matches) {\n return ViewWidth.TABLET;\n }\n if (mediaQueries.smallTablet.matches) {\n return ViewWidth.SMALL_TABLET;\n }\n if (mediaQueries.mobile.matches) {\n return ViewWidth.MOBILE;\n }\n /* eslint-enable no-restricted-properties */\n return ViewWidth.SMALL_MOBILE;\n}\n\n/**\n * @public\n */\nexport function getViewHeightByViewportHeight(viewportHeight: number): ViewHeightType {\n if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n return ViewHeight.MEDIUM;\n }\n if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n return ViewHeight.SMALL;\n }\n return ViewHeight.EXTRA_SMALL;\n}\n\nexport function getViewHeightByMediaQueries(mediaQueries: MediaQueries): ViewHeightType {\n /* eslint-disable no-restricted-properties */\n if (mediaQueries.mediumHeight.matches) {\n return ViewHeight.MEDIUM;\n }\n if (mediaQueries.mobileLandscapeHeight.matches) {\n return ViewHeight.SMALL;\n }\n /* eslint-enable no-restricted-properties */\n return ViewHeight.EXTRA_SMALL;\n}\n\nexport function getSizeX(viewWidth: ViewWidthType): SizeTypeValues {\n return viewWidth <= ViewWidth.MOBILE ? 'compact' : 'regular';\n}\n\nexport function isCompactByViewWidth(\n viewWidth: ViewWidthType | undefined,\n hasPointer?: boolean,\n): boolean | undefined {\n return viewWidth !== undefined && viewWidth >= ViewWidth.SMALL_TABLET && hasPointer;\n}\n\nexport function isCompactByViewHeight(viewHeight: ViewHeightType | undefined): boolean {\n return viewHeight !== undefined && viewHeight <= ViewHeight.EXTRA_SMALL;\n}\n\nexport function getSizeY(\n viewWidth: ViewWidthType,\n viewHeight: ViewHeightType,\n hasPointer: boolean,\n): SizeTypeValues {\n if (isCompactByViewWidth(viewWidth, hasPointer) || isCompactByViewHeight(viewHeight)) {\n return 'compact';\n }\n return 'regular';\n}\n\n/**\n * Проверка на Desktop.\n *\n * Функция гарантировано вернёт `boolean` или `null` в зависимости от условий.\n *\n * Возвращаем `null` в случае, если у нас недостаточно данных, чтобы определить платформу.\n *\n * ⚠️ При передаче 'vkcom' всегда будет возвращать `true`.\n */\nexport function tryToCheckIsDesktop(viewWidth: ViewWidthType, viewHeight: ViewHeightType, hasPointer: undefined | boolean, platform?: PlatformType): boolean; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: ViewWidthType, viewHeight: undefined, hasPointer: boolean, platform?: PlatformType): boolean; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined | ViewWidthType, viewHeight: undefined, hasPointer: undefined, platform?: PlatformType): null; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined, viewHeight: undefined | ViewHeightType, hasPointer: undefined, platform?: PlatformType): null; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined, viewHeight: undefined, hasPointer: undefined | boolean, platform?: PlatformType): null; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined | ViewWidthType, viewHeight: undefined | ViewHeightType, hasPointer: undefined | boolean, platform?: PlatformType): null | boolean; // prettier-ignore\nexport function tryToCheckIsDesktop(\n viewWidth: undefined | ViewWidthType,\n viewHeight: undefined | ViewHeightType,\n hasPointer: undefined | boolean,\n platform?: PlatformType,\n): null | boolean {\n // см. https://github.com/VKCOM/VKUI/pull/2473\n const IS_VKCOM_CRUTCH = platform === 'vkcom';\n\n if (\n ((viewWidth === undefined || hasPointer === undefined) &&\n (viewWidth === undefined || viewHeight === undefined)) ||\n (hasPointer === undefined && viewHeight === undefined)\n ) {\n return IS_VKCOM_CRUTCH ? true : null;\n }\n\n const widthIsLikeDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const otherParametersIsLikeDesktop =\n hasPointer || (viewHeight !== undefined ? viewHeight >= ViewHeight.MEDIUM : false);\n\n return (widthIsLikeDesktop && otherParametersIsLikeDesktop) || IS_VKCOM_CRUTCH;\n}\n\nexport function isSmallTablePlus(el: HTMLElement) {\n const win = getWindow(el);\n // eslint-disable-next-line no-restricted-properties\n return win ? win.matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS).matches : false;\n}\n\n/**\n * Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).\n *\n * > Note: используется восклицательный знак (!), чтобы принудить TS поверить, что св-во точно не может быть\n * > `undefined`. Это всё из-за применения `Partial<...>` для объекта.\n */\nexport function viewWidthToClassName<T extends Partial<CSSBreakpointsClassNames>>(\n breakpointClassNames: Exact<CSSBreakpointsClassNames, T>,\n viewWidth: ViewWidthType | 'none' = 'none',\n): string | null {\n if (viewWidth === 'none') {\n return breakpointClassNames.hasOwnProperty('none') ? breakpointClassNames['none']! : null;\n }\n\n const breakpoints: string[] = [];\n const breakpointName = VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP[viewWidth];\n\n if (breakpointClassNames.hasOwnProperty(breakpointName)) {\n breakpoints.push(breakpointClassNames[breakpointName]!);\n }\n\n if (viewWidth >= ViewWidth.MOBILE) {\n if (breakpointClassNames.hasOwnProperty('mobilePlus')) {\n breakpoints.push(breakpointClassNames['mobilePlus']!);\n }\n }\n\n if (viewWidth >= ViewWidth.SMALL_TABLET) {\n if (breakpointClassNames.hasOwnProperty('smallTabletPlus')) {\n breakpoints.push(breakpointClassNames['smallTabletPlus']!);\n }\n } else {\n if (breakpointClassNames.hasOwnProperty('smallTabletMinus')) {\n breakpoints.push(breakpointClassNames['smallTabletMinus']!);\n }\n }\n\n if (viewWidth >= ViewWidth.TABLET) {\n if (breakpointClassNames.hasOwnProperty('tabletPlus')) {\n breakpoints.push(breakpointClassNames['tabletPlus']!);\n }\n } else {\n if (breakpointClassNames.hasOwnProperty('tabletMinus')) {\n breakpoints.push(breakpointClassNames['tabletMinus']!);\n }\n }\n\n return breakpoints.length > 0 ? breakpoints.join(' ') : null;\n}\n"],"names":["getWindow","BREAKPOINTS","MEDIA_QUERIES","VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP","ViewHeight","ViewWidth","getViewWidthByViewportWidth","viewportWidth","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","getViewWidthByMediaQueries","mediaQueries","desktopPlus","matches","tablet","smallTablet","mobile","getViewHeightByViewportHeight","viewportHeight","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","getViewHeightByMediaQueries","mediumHeight","mobileLandscapeHeight","getSizeX","viewWidth","isCompactByViewWidth","hasPointer","undefined","isCompactByViewHeight","viewHeight","getSizeY","tryToCheckIsDesktop","platform","IS_VKCOM_CRUTCH","widthIsLikeDesktop","otherParametersIsLikeDesktop","isSmallTablePlus","el","win","matchMedia","SMALL_TABLET_PLUS","viewWidthToClassName","breakpointClassNames","hasOwnProperty","breakpoints","breakpointName","push","length","join"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/adaptivity/functions.ts"],"sourcesContent":["import type { Exact } from '../../types';\nimport { type PlatformType } from '../platform';\nimport { BREAKPOINTS } from './breakpoints';\nimport {\n type SizeTypeValues,\n VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,\n ViewHeight,\n type ViewHeightType,\n ViewWidth,\n type ViewWidthType,\n} from './constants';\nimport type { CSSBreakpointsClassNames, MediaQueries } from './types';\n\n/**\n * @public\n */\nexport function getViewWidthByViewportWidth(viewportWidth: number): ViewWidthType {\n if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n return ViewWidth.DESKTOP;\n }\n if (viewportWidth >= BREAKPOINTS.TABLET) {\n return ViewWidth.TABLET;\n }\n if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n return ViewWidth.SMALL_TABLET;\n }\n if (viewportWidth >= BREAKPOINTS.MOBILE) {\n return ViewWidth.MOBILE;\n }\n return ViewWidth.SMALL_MOBILE;\n}\n\nexport function getViewWidthByMediaQueries(mediaQueries: MediaQueries): ViewWidthType {\n /* eslint-disable no-restricted-properties */\n if (mediaQueries.desktopPlus.matches) {\n return ViewWidth.DESKTOP;\n }\n if (mediaQueries.tablet.matches) {\n return ViewWidth.TABLET;\n }\n if (mediaQueries.smallTablet.matches) {\n return ViewWidth.SMALL_TABLET;\n }\n if (mediaQueries.mobile.matches) {\n return ViewWidth.MOBILE;\n }\n /* eslint-enable no-restricted-properties */\n return ViewWidth.SMALL_MOBILE;\n}\n\n/**\n * @public\n */\nexport function getViewHeightByViewportHeight(viewportHeight: number): ViewHeightType {\n if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n return ViewHeight.MEDIUM;\n }\n if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n return ViewHeight.SMALL;\n }\n return ViewHeight.EXTRA_SMALL;\n}\n\nexport function getViewHeightByMediaQueries(mediaQueries: MediaQueries): ViewHeightType {\n /* eslint-disable no-restricted-properties */\n if (mediaQueries.mediumHeight.matches) {\n return ViewHeight.MEDIUM;\n }\n if (mediaQueries.mobileLandscapeHeight.matches) {\n return ViewHeight.SMALL;\n }\n /* eslint-enable no-restricted-properties */\n return ViewHeight.EXTRA_SMALL;\n}\n\nexport function getSizeX(viewWidth: ViewWidthType): SizeTypeValues {\n return viewWidth <= ViewWidth.MOBILE ? 'compact' : 'regular';\n}\n\nexport function isCompactByViewWidth(\n viewWidth: ViewWidthType | undefined,\n hasPointer?: boolean,\n): boolean | undefined {\n return viewWidth !== undefined && viewWidth >= ViewWidth.SMALL_TABLET && hasPointer;\n}\n\nexport function isCompactByViewHeight(viewHeight: ViewHeightType | undefined): boolean {\n return viewHeight !== undefined && viewHeight <= ViewHeight.EXTRA_SMALL;\n}\n\nexport function getSizeY(\n viewWidth: ViewWidthType,\n viewHeight: ViewHeightType,\n hasPointer: boolean,\n): SizeTypeValues {\n if (isCompactByViewWidth(viewWidth, hasPointer) || isCompactByViewHeight(viewHeight)) {\n return 'compact';\n }\n return 'regular';\n}\n\n/**\n * Проверка на Desktop.\n *\n * Функция гарантировано вернёт `boolean` или `null` в зависимости от условий.\n *\n * Возвращаем `null` в случае, если у нас недостаточно данных, чтобы определить платформу.\n *\n * ⚠️ При передаче 'vkcom' всегда будет возвращать `true`.\n */\nexport function tryToCheckIsDesktop(viewWidth: ViewWidthType, viewHeight: ViewHeightType, hasPointer: undefined | boolean, platform?: PlatformType): boolean; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: ViewWidthType, viewHeight: undefined, hasPointer: boolean, platform?: PlatformType): boolean; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined | ViewWidthType, viewHeight: undefined, hasPointer: undefined, platform?: PlatformType): null; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined, viewHeight: undefined | ViewHeightType, hasPointer: undefined, platform?: PlatformType): null; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined, viewHeight: undefined, hasPointer: undefined | boolean, platform?: PlatformType): null; // prettier-ignore\nexport function tryToCheckIsDesktop(viewWidth: undefined | ViewWidthType, viewHeight: undefined | ViewHeightType, hasPointer: undefined | boolean, platform?: PlatformType): null | boolean; // prettier-ignore\nexport function tryToCheckIsDesktop(\n viewWidth: undefined | ViewWidthType,\n viewHeight: undefined | ViewHeightType,\n hasPointer: undefined | boolean,\n platform?: PlatformType,\n): null | boolean {\n // см. https://github.com/VKCOM/VKUI/pull/2473\n const IS_VKCOM_CRUTCH = platform === 'vkcom';\n\n if (\n ((viewWidth === undefined || hasPointer === undefined) &&\n (viewWidth === undefined || viewHeight === undefined)) ||\n (hasPointer === undefined && viewHeight === undefined)\n ) {\n return IS_VKCOM_CRUTCH ? true : null;\n }\n\n const widthIsLikeDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const otherParametersIsLikeDesktop =\n hasPointer || (viewHeight !== undefined ? viewHeight >= ViewHeight.MEDIUM : false);\n\n return (widthIsLikeDesktop && otherParametersIsLikeDesktop) || IS_VKCOM_CRUTCH;\n}\n\n/**\n * Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).\n *\n * > Note: используется восклицательный знак (!), чтобы принудить TS поверить, что св-во точно не может быть\n * > `undefined`. Это всё из-за применения `Partial<...>` для объекта.\n */\nexport function viewWidthToClassName<T extends Partial<CSSBreakpointsClassNames>>(\n breakpointClassNames: Exact<CSSBreakpointsClassNames, T>,\n viewWidth: ViewWidthType | 'none' = 'none',\n): string | null {\n if (viewWidth === 'none') {\n return breakpointClassNames.hasOwnProperty('none') ? breakpointClassNames['none']! : null;\n }\n\n const breakpoints: string[] = [];\n const breakpointName = VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP[viewWidth];\n\n if (breakpointClassNames.hasOwnProperty(breakpointName)) {\n breakpoints.push(breakpointClassNames[breakpointName]!);\n }\n\n if (viewWidth >= ViewWidth.MOBILE) {\n if (breakpointClassNames.hasOwnProperty('mobilePlus')) {\n breakpoints.push(breakpointClassNames['mobilePlus']!);\n }\n }\n\n if (viewWidth >= ViewWidth.SMALL_TABLET) {\n if (breakpointClassNames.hasOwnProperty('smallTabletPlus')) {\n breakpoints.push(breakpointClassNames['smallTabletPlus']!);\n }\n } else {\n if (breakpointClassNames.hasOwnProperty('smallTabletMinus')) {\n breakpoints.push(breakpointClassNames['smallTabletMinus']!);\n }\n }\n\n if (viewWidth >= ViewWidth.TABLET) {\n if (breakpointClassNames.hasOwnProperty('tabletPlus')) {\n breakpoints.push(breakpointClassNames['tabletPlus']!);\n }\n } else {\n if (breakpointClassNames.hasOwnProperty('tabletMinus')) {\n breakpoints.push(breakpointClassNames['tabletMinus']!);\n }\n }\n\n return breakpoints.length > 0 ? breakpoints.join(' ') : null;\n}\n"],"names":["BREAKPOINTS","VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP","ViewHeight","ViewWidth","getViewWidthByViewportWidth","viewportWidth","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","getViewWidthByMediaQueries","mediaQueries","desktopPlus","matches","tablet","smallTablet","mobile","getViewHeightByViewportHeight","viewportHeight","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","getViewHeightByMediaQueries","mediumHeight","mobileLandscapeHeight","getSizeX","viewWidth","isCompactByViewWidth","hasPointer","undefined","isCompactByViewHeight","viewHeight","getSizeY","tryToCheckIsDesktop","platform","IS_VKCOM_CRUTCH","widthIsLikeDesktop","otherParametersIsLikeDesktop","viewWidthToClassName","breakpointClassNames","hasOwnProperty","breakpoints","breakpointName","push","length","join"],"mappings":"AAEA,SAASA,WAAW,QAAQ,mBAAgB;AAC5C,SAEEC,gCAAgC,EAChCC,UAAU,EAEVC,SAAS,QAEJ,iBAAc;AAGrB;;CAEC,GACD,OAAO,SAASC,4BAA4BC,aAAqB;IAC/D,IAAIA,iBAAiBL,YAAYM,OAAO,EAAE;QACxC,OAAOH,UAAUG,OAAO;IAC1B;IACA,IAAID,iBAAiBL,YAAYO,MAAM,EAAE;QACvC,OAAOJ,UAAUI,MAAM;IACzB;IACA,IAAIF,iBAAiBL,YAAYQ,YAAY,EAAE;QAC7C,OAAOL,UAAUK,YAAY;IAC/B;IACA,IAAIH,iBAAiBL,YAAYS,MAAM,EAAE;QACvC,OAAON,UAAUM,MAAM;IACzB;IACA,OAAON,UAAUO,YAAY;AAC/B;AAEA,OAAO,SAASC,2BAA2BC,YAA0B;IACnE,2CAA2C,GAC3C,IAAIA,aAAaC,WAAW,CAACC,OAAO,EAAE;QACpC,OAAOX,UAAUG,OAAO;IAC1B;IACA,IAAIM,aAAaG,MAAM,CAACD,OAAO,EAAE;QAC/B,OAAOX,UAAUI,MAAM;IACzB;IACA,IAAIK,aAAaI,WAAW,CAACF,OAAO,EAAE;QACpC,OAAOX,UAAUK,YAAY;IAC/B;IACA,IAAII,aAAaK,MAAM,CAACH,OAAO,EAAE;QAC/B,OAAOX,UAAUM,MAAM;IACzB;IACA,0CAA0C,GAC1C,OAAON,UAAUO,YAAY;AAC/B;AAEA;;CAEC,GACD,OAAO,SAASQ,8BAA8BC,cAAsB;IAClE,IAAIA,kBAAkBnB,YAAYoB,aAAa,EAAE;QAC/C,OAAOlB,WAAWmB,MAAM;IAC1B;IACA,IAAIF,kBAAkBnB,YAAYsB,uBAAuB,EAAE;QACzD,OAAOpB,WAAWqB,KAAK;IACzB;IACA,OAAOrB,WAAWsB,WAAW;AAC/B;AAEA,OAAO,SAASC,4BAA4Bb,YAA0B;IACpE,2CAA2C,GAC3C,IAAIA,aAAac,YAAY,CAACZ,OAAO,EAAE;QACrC,OAAOZ,WAAWmB,MAAM;IAC1B;IACA,IAAIT,aAAae,qBAAqB,CAACb,OAAO,EAAE;QAC9C,OAAOZ,WAAWqB,KAAK;IACzB;IACA,0CAA0C,GAC1C,OAAOrB,WAAWsB,WAAW;AAC/B;AAEA,OAAO,SAASI,SAASC,SAAwB;IAC/C,OAAOA,aAAa1B,UAAUM,MAAM,GAAG,YAAY;AACrD;AAEA,OAAO,SAASqB,qBACdD,SAAoC,EACpCE,UAAoB;IAEpB,OAAOF,cAAcG,aAAaH,aAAa1B,UAAUK,YAAY,IAAIuB;AAC3E;AAEA,OAAO,SAASE,sBAAsBC,UAAsC;IAC1E,OAAOA,eAAeF,aAAaE,cAAchC,WAAWsB,WAAW;AACzE;AAEA,OAAO,SAASW,SACdN,SAAwB,EACxBK,UAA0B,EAC1BH,UAAmB;IAEnB,IAAID,qBAAqBD,WAAWE,eAAeE,sBAAsBC,aAAa;QACpF,OAAO;IACT;IACA,OAAO;AACT;AAiBA,OAAO,SAASE,oBACdP,SAAoC,EACpCK,UAAsC,EACtCH,UAA+B,EAC/BM,QAAuB;IAEvB,8CAA8C;IAC9C,MAAMC,kBAAkBD,aAAa;IAErC,IACE,AAAER,CAAAA,cAAcG,aAAaD,eAAeC,SAAQ,KACjDH,CAAAA,cAAcG,aAAaE,eAAeF,SAAQ,KACpDD,eAAeC,aAAaE,eAAeF,WAC5C;QACA,OAAOM,kBAAkB,OAAO;IAClC;IAEA,MAAMC,qBAAqBV,aAAa1B,UAAUK,YAAY;IAC9D,MAAMgC,+BACJT,cAAeG,CAAAA,eAAeF,YAAYE,cAAchC,WAAWmB,MAAM,GAAG,KAAI;IAElF,OAAO,AAACkB,sBAAsBC,gCAAiCF;AACjE;AAEA;;;;;CAKC,GACD,OAAO,SAASG,qBACdC,oBAAwD,EACxDb,YAAoC,MAAM;IAE1C,IAAIA,cAAc,QAAQ;QACxB,OAAOa,qBAAqBC,cAAc,CAAC,UAAUD,oBAAoB,CAAC,OAAO,GAAI;IACvF;IAEA,MAAME,cAAwB,EAAE;IAChC,MAAMC,iBAAiB5C,gCAAgC,CAAC4B,UAAU;IAElE,IAAIa,qBAAqBC,cAAc,CAACE,iBAAiB;QACvDD,YAAYE,IAAI,CAACJ,oBAAoB,CAACG,eAAe;IACvD;IAEA,IAAIhB,aAAa1B,UAAUM,MAAM,EAAE;QACjC,IAAIiC,qBAAqBC,cAAc,CAAC,eAAe;YACrDC,YAAYE,IAAI,CAACJ,oBAAoB,CAAC,aAAa;QACrD;IACF;IAEA,IAAIb,aAAa1B,UAAUK,YAAY,EAAE;QACvC,IAAIkC,qBAAqBC,cAAc,CAAC,oBAAoB;YAC1DC,YAAYE,IAAI,CAACJ,oBAAoB,CAAC,kBAAkB;QAC1D;IACF,OAAO;QACL,IAAIA,qBAAqBC,cAAc,CAAC,qBAAqB;YAC3DC,YAAYE,IAAI,CAACJ,oBAAoB,CAAC,mBAAmB;QAC3D;IACF;IAEA,IAAIb,aAAa1B,UAAUI,MAAM,EAAE;QACjC,IAAImC,qBAAqBC,cAAc,CAAC,eAAe;YACrDC,YAAYE,IAAI,CAACJ,oBAAoB,CAAC,aAAa;QACrD;IACF,OAAO;QACL,IAAIA,qBAAqBC,cAAc,CAAC,gBAAgB;YACtDC,YAAYE,IAAI,CAACJ,oBAAoB,CAAC,cAAc;QACtD;IACF;IAEA,OAAOE,YAAYG,MAAM,GAAG,IAAIH,YAAYI,IAAI,CAAC,OAAO;AAC1D"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../../src/lib/animation/useReducedMotion.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,yBAAyB,gDAAgD,CAAC;AAEvF,eAAO,MAAM,gBAAgB,QAAO,
|
|
1
|
+
{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../../src/lib/animation/useReducedMotion.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,yBAAyB,gDAAgD,CAAC;AAEvF,eAAO,MAAM,gBAAgB,QAAO,OAAO,GAAG,SAsB7C,CAAC"}
|
|
@@ -5,25 +5,22 @@ import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect.js";
|
|
|
5
5
|
export const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
|
|
6
6
|
export const useReducedMotion = ()=>{
|
|
7
7
|
const { window } = useDOM();
|
|
8
|
-
const
|
|
9
|
-
window
|
|
10
|
-
]);
|
|
11
|
-
const reducedMotion = React.useRef(initial);
|
|
8
|
+
const [reducedMotion, setReducedMotion] = React.useState(()=>undefined);
|
|
12
9
|
useIsomorphicLayoutEffect(()=>{
|
|
13
10
|
/* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */ if (!window) {
|
|
14
11
|
return;
|
|
15
12
|
}
|
|
16
13
|
const match = window.matchMedia(REDUCE_MOTION_MEDIA_QUERY);
|
|
17
|
-
|
|
14
|
+
setReducedMotion(match.matches);
|
|
18
15
|
/* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно */ const handleMediaQueryChange = (event)=>{
|
|
19
|
-
/* istanbul ignore next */
|
|
16
|
+
/* istanbul ignore next */ setReducedMotion(event.matches);
|
|
20
17
|
};
|
|
21
18
|
matchMediaListAddListener(match, handleMediaQueryChange);
|
|
22
19
|
return ()=>matchMediaListRemoveListener(match, handleMediaQueryChange);
|
|
23
20
|
}, [
|
|
24
21
|
window
|
|
25
22
|
]);
|
|
26
|
-
return reducedMotion
|
|
23
|
+
return reducedMotion;
|
|
27
24
|
};
|
|
28
25
|
|
|
29
26
|
//# sourceMappingURL=useReducedMotion.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/animation/useReducedMotion.ts"],"sourcesContent":["/* eslint-disable no-restricted-properties */\nimport * as React from 'react';\nimport { useDOM } from '../dom';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../matchMedia';\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\n\nexport const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\nexport const useReducedMotion = (): boolean => {\n const { window } = useDOM();\n const
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/animation/useReducedMotion.ts"],"sourcesContent":["/* eslint-disable no-restricted-properties */\nimport * as React from 'react';\nimport { useDOM } from '../dom';\nimport { matchMediaListAddListener, matchMediaListRemoveListener } from '../matchMedia';\nimport { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';\n\nexport const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\nexport const useReducedMotion = (): boolean | undefined => {\n const { window } = useDOM();\n\n const [reducedMotion, setReducedMotion] = React.useState<boolean | undefined>(() => undefined);\n\n useIsomorphicLayoutEffect(() => {\n /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */\n if (!window) {\n return;\n }\n const match = window.matchMedia(REDUCE_MOTION_MEDIA_QUERY);\n setReducedMotion(match.matches);\n /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно */\n const handleMediaQueryChange = (event: MediaQueryListEvent) => {\n /* istanbul ignore next */\n setReducedMotion(event.matches);\n };\n matchMediaListAddListener(match, handleMediaQueryChange);\n return () => matchMediaListRemoveListener(match, handleMediaQueryChange);\n }, [window]);\n\n return reducedMotion;\n};\n"],"names":["React","useDOM","matchMediaListAddListener","matchMediaListRemoveListener","useIsomorphicLayoutEffect","REDUCE_MOTION_MEDIA_QUERY","useReducedMotion","window","reducedMotion","setReducedMotion","useState","undefined","match","matchMedia","matches","handleMediaQueryChange","event"],"mappings":"AAAA,2CAA2C,GAC3C,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAS;AAChC,SAASC,yBAAyB,EAAEC,4BAA4B,QAAQ,mBAAgB;AACxF,SAASC,yBAAyB,QAAQ,kCAA+B;AAEzE,OAAO,MAAMC,4BAA4B,8CAA8C;AAEvF,OAAO,MAAMC,mBAAmB;IAC9B,MAAM,EAAEC,MAAM,EAAE,GAAGN;IAEnB,MAAM,CAACO,eAAeC,iBAAiB,GAAGT,MAAMU,QAAQ,CAAsB,IAAMC;IAEpFP,0BAA0B;QACxB,6EAA6E,GAC7E,IAAI,CAACG,QAAQ;YACX;QACF;QACA,MAAMK,QAAQL,OAAOM,UAAU,CAACR;QAChCI,iBAAiBG,MAAME,OAAO;QAC9B,gFAAgF,GAChF,MAAMC,yBAAyB,CAACC;YAC9B,wBAAwB,GACxBP,iBAAiBO,MAAMF,OAAO;QAChC;QACAZ,0BAA0BU,OAAOG;QACjC,OAAO,IAAMZ,6BAA6BS,OAAOG;IACnD,GAAG;QAACR;KAAO;IAEX,OAAOC;AACT,EAAE"}
|
|
@@ -1,22 +1,21 @@
|
|
|
1
1
|
import type { CSSTransitionController } from './CSSTransitionController';
|
|
2
|
-
export type InitialSnapPoint = 'auto' | number;
|
|
3
2
|
export type SnapPointDetents = [number, number] | [number, number, number];
|
|
4
|
-
export type
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
snapPointDetents: SnapPointDetents;
|
|
3
|
+
export type SnapPoint = 'auto' | {
|
|
4
|
+
initial: number;
|
|
5
|
+
detents: SnapPointDetents;
|
|
8
6
|
};
|
|
7
|
+
export type SnapPointChange = (snapPoint: number) => void;
|
|
9
8
|
export type BottomSheetControllerOptions = {
|
|
10
9
|
sheetScrollEl: HTMLElement | null;
|
|
11
10
|
sheetTransitionController: CSSTransitionController<string>;
|
|
12
11
|
backdropTransitionController: CSSTransitionController | null;
|
|
12
|
+
onSnapPointChange: SnapPointChange;
|
|
13
13
|
onDismiss: VoidFunction;
|
|
14
14
|
};
|
|
15
15
|
export declare class BottomSheetController {
|
|
16
16
|
private readonly sheetEl;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
init(initialSnapPoint?: InitialSnapPoint): void;
|
|
17
|
+
constructor(sheetEl: HTMLElement, { sheetScrollEl, sheetTransitionController, backdropTransitionController, onSnapPointChange, onDismiss, }: BottomSheetControllerOptions);
|
|
18
|
+
init(snapPoint: SnapPoint): void;
|
|
20
19
|
destroy(): void;
|
|
21
20
|
panStart(event: UIEvent): void;
|
|
22
21
|
panMove(event: UIEvent): void;
|
|
@@ -36,6 +35,7 @@ export declare class BottomSheetController {
|
|
|
36
35
|
private readonly sheetTransitionController;
|
|
37
36
|
private readonly backdropTransitionController;
|
|
38
37
|
private readonly panGestureRecognizer;
|
|
38
|
+
private readonly onSnapPointChange;
|
|
39
39
|
private readonly onDismiss;
|
|
40
40
|
private calculateSnapPoint;
|
|
41
41
|
private getSnapPointTo;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheetController.d.ts","sourceRoot":"","sources":["../../../../src/lib/sheet/controllers/BottomSheetController.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BottomSheetController.d.ts","sourceRoot":"","sources":["../../../../src/lib/sheet/controllers/BottomSheetController.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEzE,MAAM,MAAM,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;AAE3E,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,gBAAgB,CAAA;CAAE,CAAC;AAEhF,MAAM,MAAM,eAAe,GAAG,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,MAAM,MAAM,4BAA4B,GAAG;IACzC,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,yBAAyB,EAAE,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAC3D,4BAA4B,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC7D,iBAAiB,EAAE,eAAe,CAAC;IACnC,SAAS,EAAE,YAAY,CAAC;CACzB,CAAC;AAEF,qBAAa,qBAAqB;IAE9B,OAAO,CAAC,QAAQ,CAAC,OAAO;gBAAP,OAAO,EAAE,WAAW,EACrC,EACE,aAAa,EACb,yBAAyB,EACzB,4BAA4B,EAC5B,iBAAiB,EACjB,SAAS,GACV,EAAE,4BAA4B;IAUjC,IAAI,CAAC,SAAS,EAAE,SAAS;IAczB,OAAO;IAUP,QAAQ,CAAC,KAAK,EAAE,OAAO;IAcvB,OAAO,CAAC,KAAK,EAAE,OAAO;IAwDtB,MAAM;IAwBN,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,QAAQ,CAA4B;IAC5C,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,KAAK,kBAAkB,GAE7B;IACD,OAAO,CAAC,oCAAoC,CAAQ;IACpD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IACnD,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAkC;IAC5E,OAAO,CAAC,QAAQ,CAAC,4BAA4B,CAAiC;IAC9E,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAyB;IAC9D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkB;IACpD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAe;IAEzC,OAAO,CAAC,kBAAkB;IAqC1B,OAAO,CAAC,cAAc;IA4BtB,OAAO,CAAC,qCAAqC;IAO7C,OAAO,CAAC,sCAAsC;IAU9C,OAAO,CAAC,2DAA2D;IAmBnE,OAAO,CAAC,yDAAyD;IAyBjE,OAAO,CAAC,MAAM,CAAC,qCAAqC;IAkBpD,OAAO,CAAC,MAAM,CAAC,sBAAsB;IAOrC,OAAO,CAAC,MAAM,CAAC,8BAA8B;IAc7C,OAAO,CAAC,MAAM,CAAC,mBAAmB;CAcnC"}
|
|
@@ -1,43 +1,25 @@
|
|
|
1
1
|
import { _ as _define_property } from "@swc/helpers/_/_define_property";
|
|
2
2
|
import { noop } from "@vkontakte/vkjs";
|
|
3
3
|
import { clamp } from "../../../helpers/math.js";
|
|
4
|
-
import { inRange } from "../../../helpers/range.js";
|
|
5
4
|
import { rubberbandIfOutOfBounds } from "../../animation/index.js";
|
|
6
5
|
import { getNearestOverflowAncestor, hasSelectionWithRangeType } from "../../dom.js";
|
|
7
6
|
import { UIPanGestureRecognizer } from "../../touch/UIPanGestureRecognizer.js";
|
|
8
|
-
import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY, DRAG_THRESHOLDS, DYNAMIC_SNAP_POINT_DATA, SNAP_POINT_DETENTS
|
|
7
|
+
import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY, DRAG_THRESHOLDS, DYNAMIC_SNAP_POINT_DATA, SNAP_POINT_DETENTS } from "../constants.js";
|
|
9
8
|
export class BottomSheetController {
|
|
10
|
-
|
|
11
|
-
if (initialSnapPoint === 'auto') {
|
|
12
|
-
return {
|
|
13
|
-
unit: 'px',
|
|
14
|
-
currentSnapPoint: DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE,
|
|
15
|
-
snapPointDetents: [
|
|
16
|
-
SNAP_POINT_DETENTS.MIN,
|
|
17
|
-
DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE
|
|
18
|
-
]
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
const currentSnapPoint = Math.min(Math.max(initialSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER), SNAP_POINT_DETENTS.LARGE);
|
|
22
|
-
return {
|
|
23
|
-
unit: '%',
|
|
24
|
-
currentSnapPoint,
|
|
25
|
-
snapPointDetents: inRange(currentSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER, SNAP_POINT_SAFE_RANGE.HIGHEST) ? [
|
|
26
|
-
SNAP_POINT_DETENTS.MIN,
|
|
27
|
-
currentSnapPoint,
|
|
28
|
-
SNAP_POINT_DETENTS.LARGE
|
|
29
|
-
] : [
|
|
30
|
-
SNAP_POINT_DETENTS.MIN,
|
|
31
|
-
currentSnapPoint
|
|
32
|
-
]
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
init(initialSnapPoint) {
|
|
9
|
+
init(snapPoint) {
|
|
36
10
|
this.isInitialized = true;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
11
|
+
if (snapPoint === 'auto') {
|
|
12
|
+
this.unit = 'px';
|
|
13
|
+
this.currentSnapPoint = DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE;
|
|
14
|
+
this.snapPointDetents = [
|
|
15
|
+
SNAP_POINT_DETENTS.MIN,
|
|
16
|
+
DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE
|
|
17
|
+
];
|
|
18
|
+
} else {
|
|
19
|
+
this.unit = '%';
|
|
20
|
+
this.currentSnapPoint = snapPoint.initial;
|
|
21
|
+
this.snapPointDetents = snapPoint.detents;
|
|
22
|
+
}
|
|
41
23
|
}
|
|
42
24
|
destroy() {
|
|
43
25
|
var _this_backdropTransitionController;
|
|
@@ -85,9 +67,6 @@ export class BottomSheetController {
|
|
|
85
67
|
}
|
|
86
68
|
break;
|
|
87
69
|
case 'moving':
|
|
88
|
-
if (event.cancelable) {
|
|
89
|
-
event.preventDefault();
|
|
90
|
-
}
|
|
91
70
|
this.panGestureRecognizer.setEndCoords(event);
|
|
92
71
|
const { y1, y2 } = this.panGestureRecognizer;
|
|
93
72
|
this.nextSnapPoint = rubberbandIfOutOfBounds(this.currentSnapPoint - (y2 - y1) / this.sheetHeight * this.currentSnapPoint, SNAP_POINT_DETENTS.MIN, this.isDynamicSnapPoint ? this.sheetHeight : SNAP_POINT_DETENTS.LARGE);
|
|
@@ -98,7 +77,11 @@ export class BottomSheetController {
|
|
|
98
77
|
panEnd() {
|
|
99
78
|
switch(this.panState){
|
|
100
79
|
case 'moving':
|
|
80
|
+
const prevCurrentSnapPoint = this.currentSnapPoint;
|
|
101
81
|
this.currentSnapPoint = this.getSnapPointTo(this.nextSnapPoint);
|
|
82
|
+
if (prevCurrentSnapPoint !== this.currentSnapPoint && this.currentSnapPoint > SNAP_POINT_DETENTS.MIN) {
|
|
83
|
+
this.onSnapPointChange(this.currentSnapPoint);
|
|
84
|
+
}
|
|
102
85
|
this.calculateSnapPoint(this.currentSnapPoint);
|
|
103
86
|
break;
|
|
104
87
|
}
|
|
@@ -173,7 +156,7 @@ export class BottomSheetController {
|
|
|
173
156
|
return true;
|
|
174
157
|
}
|
|
175
158
|
preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled() {
|
|
176
|
-
if (this.pannedEl === null || this.
|
|
159
|
+
if (/* istanbul ignore next: покрываем TypeScript */ this.pannedEl === null || this.pannedEl === this.sheetEl || this.pannedEl === this.sheetScrollEl) {
|
|
177
160
|
return false;
|
|
178
161
|
}
|
|
179
162
|
const overflowAncestor = getNearestOverflowAncestor(this.pannedEl, this.sheetEl);
|
|
@@ -217,7 +200,7 @@ export class BottomSheetController {
|
|
|
217
200
|
}
|
|
218
201
|
return closest;
|
|
219
202
|
}
|
|
220
|
-
constructor(sheetEl, { sheetScrollEl, sheetTransitionController, backdropTransitionController, onDismiss }){
|
|
203
|
+
constructor(sheetEl, { sheetScrollEl, sheetTransitionController, backdropTransitionController, onSnapPointChange, onDismiss }){
|
|
221
204
|
_define_property(this, "sheetEl", void 0);
|
|
222
205
|
_define_property(this, "isInitialized", void 0);
|
|
223
206
|
_define_property(this, "panState", void 0);
|
|
@@ -233,6 +216,7 @@ export class BottomSheetController {
|
|
|
233
216
|
_define_property(this, "sheetTransitionController", void 0);
|
|
234
217
|
_define_property(this, "backdropTransitionController", void 0);
|
|
235
218
|
_define_property(this, "panGestureRecognizer", void 0);
|
|
219
|
+
_define_property(this, "onSnapPointChange", void 0);
|
|
236
220
|
_define_property(this, "onDismiss", void 0);
|
|
237
221
|
this.sheetEl = sheetEl;
|
|
238
222
|
this.isInitialized = false;
|
|
@@ -248,6 +232,7 @@ export class BottomSheetController {
|
|
|
248
232
|
];
|
|
249
233
|
this.unit = '%';
|
|
250
234
|
this.disableVerticalScrollBouncingDispose = noop;
|
|
235
|
+
this.onSnapPointChange = onSnapPointChange;
|
|
251
236
|
this.onDismiss = onDismiss;
|
|
252
237
|
this.panGestureRecognizer = new UIPanGestureRecognizer();
|
|
253
238
|
this.sheetScrollEl = sheetScrollEl;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/lib/sheet/controllers/BottomSheetController.ts"],"sourcesContent":["import { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../../helpers/math';\nimport { inRange } from '../../../helpers/range';\nimport { rubberbandIfOutOfBounds } from '../../animation';\nimport { getNearestOverflowAncestor, hasSelectionWithRangeType } from '../../dom';\nimport { UIPanGestureRecognizer } from '../../touch/UIPanGestureRecognizer';\nimport {\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,\n DRAG_THRESHOLDS,\n DYNAMIC_SNAP_POINT_DATA,\n SNAP_POINT_DETENTS,\n SNAP_POINT_SAFE_RANGE,\n} from '../constants';\nimport type { CSSTransitionController } from './CSSTransitionController';\n\nexport type InitialSnapPoint = 'auto' | number;\n\nexport type SnapPointDetents = [number, number] | [number, number, number];\n\nexport type BottomSheetControllerSnapPointData = {\n unit: '%' | 'px';\n currentSnapPoint: number;\n snapPointDetents: SnapPointDetents;\n};\n\nexport type BottomSheetControllerOptions = {\n sheetScrollEl: HTMLElement | null;\n sheetTransitionController: CSSTransitionController<string>;\n backdropTransitionController: CSSTransitionController | null;\n onDismiss: VoidFunction;\n};\n\nexport class BottomSheetController {\n static parseInitialSnapPoint(\n initialSnapPoint: InitialSnapPoint = SNAP_POINT_DETENTS.MEDIUM,\n ): BottomSheetControllerSnapPointData {\n if (initialSnapPoint === 'auto') {\n return {\n unit: 'px',\n currentSnapPoint: DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE,\n snapPointDetents: [SNAP_POINT_DETENTS.MIN, DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE],\n };\n }\n\n const currentSnapPoint = Math.min(\n Math.max(initialSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER),\n SNAP_POINT_DETENTS.LARGE,\n );\n\n return {\n unit: '%',\n currentSnapPoint,\n snapPointDetents: inRange(\n currentSnapPoint,\n SNAP_POINT_SAFE_RANGE.LOWER,\n SNAP_POINT_SAFE_RANGE.HIGHEST,\n )\n ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]\n : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],\n };\n }\n\n constructor(\n private readonly sheetEl: HTMLElement,\n {\n sheetScrollEl,\n sheetTransitionController,\n backdropTransitionController,\n onDismiss,\n }: BottomSheetControllerOptions,\n ) {\n this.onDismiss = onDismiss;\n this.panGestureRecognizer = new UIPanGestureRecognizer();\n this.sheetScrollEl = sheetScrollEl;\n this.sheetTransitionController = sheetTransitionController;\n this.backdropTransitionController = backdropTransitionController;\n }\n\n init(initialSnapPoint?: InitialSnapPoint) {\n this.isInitialized = true;\n\n const { unit, currentSnapPoint, snapPointDetents } =\n BottomSheetController.parseInitialSnapPoint(initialSnapPoint);\n\n this.unit = unit;\n this.currentSnapPoint = currentSnapPoint;\n this.snapPointDetents = snapPointDetents;\n }\n\n destroy() {\n this.isInitialized = false;\n this.pannedEl = null;\n this.sheetTransitionController.cleanup();\n this.backdropTransitionController?.cleanup();\n\n this.disableVerticalScrollBouncingDispose();\n this.disableVerticalScrollBouncingDispose = noop;\n }\n\n panStart(event: UIEvent) {\n if (\n !this.isInitialized ||\n this.panState !== 'idle' ||\n hasSelectionWithRangeType(event.target)\n ) {\n return;\n }\n\n this.panState = 'start';\n this.pannedEl = event.target as HTMLElement;\n this.panGestureRecognizer.setStartCoords(event);\n }\n\n panMove(event: UIEvent) {\n switch (this.panState) {\n case 'start':\n this.panGestureRecognizer.setInitialTimeOnce();\n this.panGestureRecognizer.setEndCoords(event);\n\n if (this.preventUntilPanGestureBecomesExpected()) {\n return;\n }\n\n if (this.preventImmediatelyIfPannedElIsNotValid()) {\n this.panState = 'idle';\n return;\n }\n\n if (this.preventUntilVerticalScrollingOnSheetScrollElBecomesExpected()) {\n return;\n }\n\n if (this.preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled()) {\n this.panState = 'idle';\n return;\n }\n\n this.panState = 'moving';\n this.panGestureRecognizer.setStartCoords(event);\n\n this.sheetHeight = this.sheetEl.offsetHeight;\n\n this.disableVerticalScrollBouncingDispose =\n BottomSheetController.disableVerticalScrollBouncingIfNeeded(\n this.sheetScrollEl,\n this.pannedEl,\n );\n\n if (this.isDynamicSnapPoint) {\n this.currentSnapPoint = this.sheetHeight;\n this.snapPointDetents[DYNAMIC_SNAP_POINT_DATA.COMPUTED_INDEX] = this.sheetHeight;\n }\n break;\n case 'moving':\n if (event.cancelable) {\n event.preventDefault();\n }\n\n this.panGestureRecognizer.setEndCoords(event);\n\n const { y1, y2 } = this.panGestureRecognizer;\n\n this.nextSnapPoint = rubberbandIfOutOfBounds(\n this.currentSnapPoint - ((y2 - y1) / this.sheetHeight) * this.currentSnapPoint,\n SNAP_POINT_DETENTS.MIN,\n this.isDynamicSnapPoint ? this.sheetHeight : SNAP_POINT_DETENTS.LARGE,\n );\n\n this.calculateSnapPoint(this.nextSnapPoint, true);\n break;\n }\n }\n\n panEnd() {\n switch (this.panState) {\n case 'moving':\n this.currentSnapPoint = this.getSnapPointTo(this.nextSnapPoint);\n this.calculateSnapPoint(this.currentSnapPoint);\n break;\n }\n\n this.panState = 'idle';\n this.panGestureRecognizer.reset();\n\n this.disableVerticalScrollBouncingDispose();\n this.disableVerticalScrollBouncingDispose = noop;\n }\n\n private isInitialized = false;\n private panState: 'idle' | 'start' | 'moving' = 'idle';\n private pannedEl: HTMLElement | null = null;\n private sheetHeight = 0;\n private rafId: number | null = null;\n private currentSnapPoint = 0;\n private nextSnapPoint = 0;\n private snapPointDetents: SnapPointDetents = [0, 0];\n private unit: 'px' | '%' = '%';\n private get isDynamicSnapPoint() {\n return this.unit === 'px';\n }\n private disableVerticalScrollBouncingDispose = noop;\n private readonly sheetScrollEl: HTMLElement | null;\n private readonly sheetTransitionController: CSSTransitionController<string>;\n private readonly backdropTransitionController: CSSTransitionController | null;\n private readonly panGestureRecognizer: UIPanGestureRecognizer;\n private readonly onDismiss: VoidFunction;\n\n private calculateSnapPoint(nextSnapPoint: number, immediately = false) {\n if (this.rafId !== null) {\n cancelAnimationFrame(this.rafId);\n }\n\n if (nextSnapPoint <= SNAP_POINT_DETENTS.MIN) {\n this.sheetTransitionController.enableTransition();\n this.backdropTransitionController?.enableTransition();\n this.panState = 'idle';\n this.onDismiss();\n return;\n }\n\n const backdropOpacity = clamp(\n this.isDynamicSnapPoint\n ? nextSnapPoint / this.sheetHeight\n : (nextSnapPoint * 2) / SNAP_POINT_DETENTS.LARGE,\n 0,\n 1,\n );\n\n this.rafId = requestAnimationFrame(() => {\n if (immediately) {\n this.backdropTransitionController?.disableTransition().set(backdropOpacity);\n this.sheetTransitionController.disableTransition().set(`${nextSnapPoint}${this.unit}`);\n return;\n }\n\n if (this.isDynamicSnapPoint) {\n this.sheetTransitionController.cleanupOnTransitionEnd();\n }\n\n this.backdropTransitionController?.unset();\n this.sheetTransitionController.enableTransition().set(`${this.currentSnapPoint}${this.unit}`);\n });\n }\n\n private getSnapPointTo(nextSnapPoint: number) {\n const closestSnapPoint = BottomSheetController.getClosestSnapPoint(\n this.snapPointDetents,\n nextSnapPoint,\n );\n if (closestSnapPoint !== this.currentSnapPoint) {\n return closestSnapPoint;\n }\n\n const panDirection = this.panGestureRecognizer.direction();\n if (panDirection.axis !== 'y' || panDirection.direction === null) {\n return this.currentSnapPoint;\n }\n\n const velocity = this.panGestureRecognizer.velocity();\n if (Math.abs(velocity.y) < DRAG_THRESHOLDS.VELOCITY) {\n return this.currentSnapPoint;\n }\n\n const closestSnapPointByDirection = BottomSheetController.getClosestSnapPointByDirection(\n this.snapPointDetents,\n closestSnapPoint,\n panDirection.direction,\n );\n\n return closestSnapPointByDirection;\n }\n\n private preventUntilPanGestureBecomesExpected() {\n return (\n this.panGestureRecognizer.direction().axis === 'x' ||\n this.panGestureRecognizer.distance() < DRAG_THRESHOLDS.DISTANCE_FOR_MOVING_START\n );\n }\n\n private preventImmediatelyIfPannedElIsNotValid() {\n return (\n this.pannedEl === null ||\n // Элемент со специальным атрибутом\n this.pannedEl.closest(`[${BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY}=true]`) !== null || // eslint-disable-line no-restricted-properties\n // Элемент за пределами панели.\n !this.sheetEl.contains(this.pannedEl)\n );\n }\n\n private preventUntilVerticalScrollingOnSheetScrollElBecomesExpected() {\n if (\n this.sheetScrollEl === null ||\n !this.sheetScrollEl.contains(this.pannedEl) ||\n this.sheetScrollEl.scrollHeight <= this.sheetScrollEl.clientHeight\n ) {\n return false;\n }\n\n if (this.sheetScrollEl.scrollTop === 0) {\n return (\n this.panGestureRecognizer.direction().direction === -1 &&\n BottomSheetController.isLastSnapPointDetents(this.snapPointDetents, this.currentSnapPoint)\n );\n }\n\n return true;\n }\n\n private preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled() {\n if (this.pannedEl === null || this.sheetScrollEl === this.pannedEl) {\n return false;\n }\n\n const overflowAncestor = getNearestOverflowAncestor(this.pannedEl, this.sheetEl);\n\n if (\n overflowAncestor === null ||\n this.sheetScrollEl === overflowAncestor ||\n overflowAncestor.scrollHeight <= overflowAncestor.clientHeight\n ) {\n return false;\n }\n\n return (\n overflowAncestor.scrollTop !== 0 || this.panGestureRecognizer.direction().direction === -1\n );\n }\n\n private static disableVerticalScrollBouncingIfNeeded(\n sheetScrollEl: HTMLElement | null,\n targetEl: HTMLElement | null,\n ) {\n if (\n sheetScrollEl !== null &&\n sheetScrollEl.scrollTop <= 0 &&\n sheetScrollEl.contains(targetEl) &&\n sheetScrollEl.scrollHeight > sheetScrollEl.clientHeight\n ) {\n sheetScrollEl.style.setProperty('overflow-y', 'hidden');\n return function dispose() {\n sheetScrollEl.style.removeProperty('overflow-y');\n };\n }\n return noop;\n }\n\n private static isLastSnapPointDetents(\n snapPointDetents: SnapPointDetents,\n currentY: number,\n ): boolean {\n return currentY === snapPointDetents[snapPointDetents.length - 1];\n }\n\n private static getClosestSnapPointByDirection(\n snapPointDetents: SnapPointDetents,\n currentY: number,\n direction: -1 | 1,\n ): number {\n const foundIndex = snapPointDetents.findIndex((i) => i === currentY);\n switch (direction) {\n case -1:\n return snapPointDetents[foundIndex + 1] ?? snapPointDetents[snapPointDetents.length - 1];\n case 1:\n return snapPointDetents[foundIndex - 1] ?? snapPointDetents[0];\n }\n }\n\n private static getClosestSnapPoint(snapPointDetents: SnapPointDetents, currentY: number) {\n let closest = snapPointDetents[0];\n let minDifference = Math.abs(snapPointDetents[0] - currentY);\n\n for (let i = 1; i < snapPointDetents.length; i += 1) {\n const difference = Math.abs(snapPointDetents[i] - currentY);\n if (difference < minDifference) {\n closest = snapPointDetents[i];\n minDifference = difference;\n }\n }\n\n return closest;\n }\n}\n"],"names":["noop","clamp","inRange","rubberbandIfOutOfBounds","getNearestOverflowAncestor","hasSelectionWithRangeType","UIPanGestureRecognizer","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY","DRAG_THRESHOLDS","DYNAMIC_SNAP_POINT_DATA","SNAP_POINT_DETENTS","SNAP_POINT_SAFE_RANGE","BottomSheetController","parseInitialSnapPoint","initialSnapPoint","MEDIUM","unit","currentSnapPoint","IDLE_POINT_VALUE","snapPointDetents","MIN","Math","min","max","LOWER","LARGE","HIGHEST","init","isInitialized","destroy","pannedEl","sheetTransitionController","cleanup","backdropTransitionController","disableVerticalScrollBouncingDispose","panStart","event","panState","target","panGestureRecognizer","setStartCoords","panMove","setInitialTimeOnce","setEndCoords","preventUntilPanGestureBecomesExpected","preventImmediatelyIfPannedElIsNotValid","preventUntilVerticalScrollingOnSheetScrollElBecomesExpected","preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled","sheetHeight","sheetEl","offsetHeight","disableVerticalScrollBouncingIfNeeded","sheetScrollEl","isDynamicSnapPoint","COMPUTED_INDEX","cancelable","preventDefault","y1","y2","nextSnapPoint","calculateSnapPoint","panEnd","getSnapPointTo","reset","immediately","rafId","cancelAnimationFrame","enableTransition","onDismiss","backdropOpacity","requestAnimationFrame","disableTransition","set","cleanupOnTransitionEnd","unset","closestSnapPoint","getClosestSnapPoint","panDirection","direction","axis","velocity","abs","y","VELOCITY","closestSnapPointByDirection","getClosestSnapPointByDirection","distance","DISTANCE_FOR_MOVING_START","closest","contains","scrollHeight","clientHeight","scrollTop","isLastSnapPointDetents","overflowAncestor","targetEl","style","setProperty","dispose","removeProperty","currentY","length","foundIndex","findIndex","i","minDifference","difference","constructor"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/lib/sheet/controllers/BottomSheetController.ts"],"sourcesContent":["import { noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../../helpers/math';\nimport { rubberbandIfOutOfBounds } from '../../animation';\nimport { getNearestOverflowAncestor, hasSelectionWithRangeType } from '../../dom';\nimport { UIPanGestureRecognizer } from '../../touch/UIPanGestureRecognizer';\nimport {\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,\n DRAG_THRESHOLDS,\n DYNAMIC_SNAP_POINT_DATA,\n SNAP_POINT_DETENTS,\n} from '../constants';\nimport type { CSSTransitionController } from './CSSTransitionController';\n\nexport type SnapPointDetents = [number, number] | [number, number, number];\n\nexport type SnapPoint = 'auto' | { initial: number; detents: SnapPointDetents };\n\nexport type SnapPointChange = (snapPoint: number) => void;\n\nexport type BottomSheetControllerOptions = {\n sheetScrollEl: HTMLElement | null;\n sheetTransitionController: CSSTransitionController<string>;\n backdropTransitionController: CSSTransitionController | null;\n onSnapPointChange: SnapPointChange;\n onDismiss: VoidFunction;\n};\n\nexport class BottomSheetController {\n constructor(\n private readonly sheetEl: HTMLElement,\n {\n sheetScrollEl,\n sheetTransitionController,\n backdropTransitionController,\n onSnapPointChange,\n onDismiss,\n }: BottomSheetControllerOptions,\n ) {\n this.onSnapPointChange = onSnapPointChange;\n this.onDismiss = onDismiss;\n this.panGestureRecognizer = new UIPanGestureRecognizer();\n this.sheetScrollEl = sheetScrollEl;\n this.sheetTransitionController = sheetTransitionController;\n this.backdropTransitionController = backdropTransitionController;\n }\n\n init(snapPoint: SnapPoint) {\n this.isInitialized = true;\n\n if (snapPoint === 'auto') {\n this.unit = 'px';\n this.currentSnapPoint = DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE;\n this.snapPointDetents = [SNAP_POINT_DETENTS.MIN, DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE];\n } else {\n this.unit = '%';\n this.currentSnapPoint = snapPoint.initial;\n this.snapPointDetents = snapPoint.detents;\n }\n }\n\n destroy() {\n this.isInitialized = false;\n this.pannedEl = null;\n this.sheetTransitionController.cleanup();\n this.backdropTransitionController?.cleanup();\n\n this.disableVerticalScrollBouncingDispose();\n this.disableVerticalScrollBouncingDispose = noop;\n }\n\n panStart(event: UIEvent) {\n if (\n !this.isInitialized ||\n this.panState !== 'idle' ||\n hasSelectionWithRangeType(event.target)\n ) {\n return;\n }\n\n this.panState = 'start';\n this.pannedEl = event.target as HTMLElement;\n this.panGestureRecognizer.setStartCoords(event);\n }\n\n panMove(event: UIEvent) {\n switch (this.panState) {\n case 'start':\n this.panGestureRecognizer.setInitialTimeOnce();\n this.panGestureRecognizer.setEndCoords(event);\n\n if (this.preventUntilPanGestureBecomesExpected()) {\n return;\n }\n\n if (this.preventImmediatelyIfPannedElIsNotValid()) {\n this.panState = 'idle';\n return;\n }\n\n if (this.preventUntilVerticalScrollingOnSheetScrollElBecomesExpected()) {\n return;\n }\n\n if (this.preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled()) {\n this.panState = 'idle';\n return;\n }\n\n this.panState = 'moving';\n this.panGestureRecognizer.setStartCoords(event);\n\n this.sheetHeight = this.sheetEl.offsetHeight;\n\n this.disableVerticalScrollBouncingDispose =\n BottomSheetController.disableVerticalScrollBouncingIfNeeded(\n this.sheetScrollEl,\n this.pannedEl,\n );\n\n if (this.isDynamicSnapPoint) {\n this.currentSnapPoint = this.sheetHeight;\n this.snapPointDetents[DYNAMIC_SNAP_POINT_DATA.COMPUTED_INDEX] = this.sheetHeight;\n }\n break;\n case 'moving':\n this.panGestureRecognizer.setEndCoords(event);\n\n const { y1, y2 } = this.panGestureRecognizer;\n\n this.nextSnapPoint = rubberbandIfOutOfBounds(\n this.currentSnapPoint - ((y2 - y1) / this.sheetHeight) * this.currentSnapPoint,\n SNAP_POINT_DETENTS.MIN,\n this.isDynamicSnapPoint ? this.sheetHeight : SNAP_POINT_DETENTS.LARGE,\n );\n\n this.calculateSnapPoint(this.nextSnapPoint, true);\n break;\n }\n }\n\n panEnd() {\n switch (this.panState) {\n case 'moving':\n const prevCurrentSnapPoint = this.currentSnapPoint;\n this.currentSnapPoint = this.getSnapPointTo(this.nextSnapPoint);\n\n if (\n prevCurrentSnapPoint !== this.currentSnapPoint &&\n this.currentSnapPoint > SNAP_POINT_DETENTS.MIN\n ) {\n this.onSnapPointChange(this.currentSnapPoint);\n }\n\n this.calculateSnapPoint(this.currentSnapPoint);\n break;\n }\n\n this.panState = 'idle';\n this.panGestureRecognizer.reset();\n\n this.disableVerticalScrollBouncingDispose();\n this.disableVerticalScrollBouncingDispose = noop;\n }\n\n private isInitialized = false;\n private panState: 'idle' | 'start' | 'moving' = 'idle';\n private pannedEl: HTMLElement | null = null;\n private sheetHeight = 0;\n private rafId: number | null = null;\n private currentSnapPoint = 0;\n private nextSnapPoint = 0;\n private snapPointDetents: SnapPointDetents = [0, 0];\n private unit: 'px' | '%' = '%';\n private get isDynamicSnapPoint() {\n return this.unit === 'px';\n }\n private disableVerticalScrollBouncingDispose = noop;\n private readonly sheetScrollEl: HTMLElement | null;\n private readonly sheetTransitionController: CSSTransitionController<string>;\n private readonly backdropTransitionController: CSSTransitionController | null;\n private readonly panGestureRecognizer: UIPanGestureRecognizer;\n private readonly onSnapPointChange: SnapPointChange;\n private readonly onDismiss: VoidFunction;\n\n private calculateSnapPoint(nextSnapPoint: number, immediately = false) {\n if (this.rafId !== null) {\n cancelAnimationFrame(this.rafId);\n }\n\n if (nextSnapPoint <= SNAP_POINT_DETENTS.MIN) {\n this.sheetTransitionController.enableTransition();\n this.backdropTransitionController?.enableTransition();\n this.panState = 'idle';\n this.onDismiss();\n return;\n }\n\n const backdropOpacity = clamp(\n this.isDynamicSnapPoint\n ? nextSnapPoint / this.sheetHeight\n : (nextSnapPoint * 2) / SNAP_POINT_DETENTS.LARGE,\n 0,\n 1,\n );\n\n this.rafId = requestAnimationFrame(() => {\n if (immediately) {\n this.backdropTransitionController?.disableTransition().set(backdropOpacity);\n this.sheetTransitionController.disableTransition().set(`${nextSnapPoint}${this.unit}`);\n return;\n }\n\n if (this.isDynamicSnapPoint) {\n this.sheetTransitionController.cleanupOnTransitionEnd();\n }\n\n this.backdropTransitionController?.unset();\n this.sheetTransitionController.enableTransition().set(`${this.currentSnapPoint}${this.unit}`);\n });\n }\n\n private getSnapPointTo(nextSnapPoint: number) {\n const closestSnapPoint = BottomSheetController.getClosestSnapPoint(\n this.snapPointDetents,\n nextSnapPoint,\n );\n if (closestSnapPoint !== this.currentSnapPoint) {\n return closestSnapPoint;\n }\n\n const panDirection = this.panGestureRecognizer.direction();\n if (panDirection.axis !== 'y' || panDirection.direction === null) {\n return this.currentSnapPoint;\n }\n\n const velocity = this.panGestureRecognizer.velocity();\n if (Math.abs(velocity.y) < DRAG_THRESHOLDS.VELOCITY) {\n return this.currentSnapPoint;\n }\n\n const closestSnapPointByDirection = BottomSheetController.getClosestSnapPointByDirection(\n this.snapPointDetents,\n closestSnapPoint,\n panDirection.direction,\n );\n\n return closestSnapPointByDirection;\n }\n\n private preventUntilPanGestureBecomesExpected() {\n return (\n this.panGestureRecognizer.direction().axis === 'x' ||\n this.panGestureRecognizer.distance() < DRAG_THRESHOLDS.DISTANCE_FOR_MOVING_START\n );\n }\n\n private preventImmediatelyIfPannedElIsNotValid() {\n return (\n this.pannedEl === null ||\n // Элемент со специальным атрибутом\n this.pannedEl.closest(`[${BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY}=true]`) !== null || // eslint-disable-line no-restricted-properties\n // Элемент за пределами панели.\n !this.sheetEl.contains(this.pannedEl)\n );\n }\n\n private preventUntilVerticalScrollingOnSheetScrollElBecomesExpected() {\n if (\n this.sheetScrollEl === null ||\n !this.sheetScrollEl.contains(this.pannedEl) ||\n this.sheetScrollEl.scrollHeight <= this.sheetScrollEl.clientHeight\n ) {\n return false;\n }\n\n if (this.sheetScrollEl.scrollTop === 0) {\n return (\n this.panGestureRecognizer.direction().direction === -1 &&\n BottomSheetController.isLastSnapPointDetents(this.snapPointDetents, this.currentSnapPoint)\n );\n }\n\n return true;\n }\n\n private preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled() {\n if (\n /* istanbul ignore next: покрываем TypeScript */\n this.pannedEl === null ||\n this.pannedEl === this.sheetEl ||\n this.pannedEl === this.sheetScrollEl\n ) {\n return false;\n }\n\n const overflowAncestor = getNearestOverflowAncestor(this.pannedEl, this.sheetEl);\n\n if (\n overflowAncestor === null ||\n this.sheetScrollEl === overflowAncestor ||\n overflowAncestor.scrollHeight <= overflowAncestor.clientHeight\n ) {\n return false;\n }\n\n return (\n overflowAncestor.scrollTop !== 0 || this.panGestureRecognizer.direction().direction === -1\n );\n }\n\n private static disableVerticalScrollBouncingIfNeeded(\n sheetScrollEl: HTMLElement | null,\n targetEl: HTMLElement | null,\n ) {\n if (\n sheetScrollEl !== null &&\n sheetScrollEl.scrollTop <= 0 &&\n sheetScrollEl.contains(targetEl) &&\n sheetScrollEl.scrollHeight > sheetScrollEl.clientHeight\n ) {\n sheetScrollEl.style.setProperty('overflow-y', 'hidden');\n return function dispose() {\n sheetScrollEl.style.removeProperty('overflow-y');\n };\n }\n return noop;\n }\n\n private static isLastSnapPointDetents(\n snapPointDetents: SnapPointDetents,\n currentY: number,\n ): boolean {\n return currentY === snapPointDetents[snapPointDetents.length - 1];\n }\n\n private static getClosestSnapPointByDirection(\n snapPointDetents: SnapPointDetents,\n currentY: number,\n direction: -1 | 1,\n ): number {\n const foundIndex = snapPointDetents.findIndex((i) => i === currentY);\n switch (direction) {\n case -1:\n return snapPointDetents[foundIndex + 1] ?? snapPointDetents[snapPointDetents.length - 1];\n case 1:\n return snapPointDetents[foundIndex - 1] ?? snapPointDetents[0];\n }\n }\n\n private static getClosestSnapPoint(snapPointDetents: SnapPointDetents, currentY: number) {\n let closest = snapPointDetents[0];\n let minDifference = Math.abs(snapPointDetents[0] - currentY);\n\n for (let i = 1; i < snapPointDetents.length; i += 1) {\n const difference = Math.abs(snapPointDetents[i] - currentY);\n if (difference < minDifference) {\n closest = snapPointDetents[i];\n minDifference = difference;\n }\n }\n\n return closest;\n }\n}\n"],"names":["noop","clamp","rubberbandIfOutOfBounds","getNearestOverflowAncestor","hasSelectionWithRangeType","UIPanGestureRecognizer","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY","DRAG_THRESHOLDS","DYNAMIC_SNAP_POINT_DATA","SNAP_POINT_DETENTS","BottomSheetController","init","snapPoint","isInitialized","unit","currentSnapPoint","IDLE_POINT_VALUE","snapPointDetents","MIN","initial","detents","destroy","pannedEl","sheetTransitionController","cleanup","backdropTransitionController","disableVerticalScrollBouncingDispose","panStart","event","panState","target","panGestureRecognizer","setStartCoords","panMove","setInitialTimeOnce","setEndCoords","preventUntilPanGestureBecomesExpected","preventImmediatelyIfPannedElIsNotValid","preventUntilVerticalScrollingOnSheetScrollElBecomesExpected","preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled","sheetHeight","sheetEl","offsetHeight","disableVerticalScrollBouncingIfNeeded","sheetScrollEl","isDynamicSnapPoint","COMPUTED_INDEX","y1","y2","nextSnapPoint","LARGE","calculateSnapPoint","panEnd","prevCurrentSnapPoint","getSnapPointTo","onSnapPointChange","reset","immediately","rafId","cancelAnimationFrame","enableTransition","onDismiss","backdropOpacity","requestAnimationFrame","disableTransition","set","cleanupOnTransitionEnd","unset","closestSnapPoint","getClosestSnapPoint","panDirection","direction","axis","velocity","Math","abs","y","VELOCITY","closestSnapPointByDirection","getClosestSnapPointByDirection","distance","DISTANCE_FOR_MOVING_START","closest","contains","scrollHeight","clientHeight","scrollTop","isLastSnapPointDetents","overflowAncestor","targetEl","style","setProperty","dispose","removeProperty","currentY","length","foundIndex","findIndex","i","minDifference","difference","constructor"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ export declare class CSSTransitionController<V extends number | string = number>
|
|
|
4
4
|
readonly property: string;
|
|
5
5
|
constructor(el: HTMLElement, property: string);
|
|
6
6
|
set(to: V): this;
|
|
7
|
-
unset(
|
|
7
|
+
unset(): this;
|
|
8
8
|
enableTransition(): this;
|
|
9
9
|
disableTransition(): this;
|
|
10
10
|
cleanup(): this;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSTransitionController.d.ts","sourceRoot":"","sources":["../../../../src/lib/sheet/controllers/CSSTransitionController.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;AAE1D,qBAAa,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM;aAEnD,EAAE,EAAE,WAAW;aACf,QAAQ,EAAE,MAAM;gBADhB,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,MAAM;IAGlC,GAAG,CAAC,EAAE,EAAE,CAAC;IAKT,KAAK
|
|
1
|
+
{"version":3,"file":"CSSTransitionController.d.ts","sourceRoot":"","sources":["../../../../src/lib/sheet/controllers/CSSTransitionController.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG,IAAI,GAAG,GAAG,GAAG,EAAE,CAAC;AAE1D,qBAAa,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM;aAEnD,EAAE,EAAE,WAAW;aACf,QAAQ,EAAE,MAAM;gBADhB,EAAE,EAAE,WAAW,EACf,QAAQ,EAAE,MAAM;IAGlC,GAAG,CAAC,EAAE,EAAE,CAAC;IAKT,KAAK;IAIL,gBAAgB;IAKhB,iBAAiB;IAKjB,OAAO;IAOP,sBAAsB;IAKtB,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAGlC;CACH"}
|
|
@@ -4,15 +4,7 @@ export class CSSTransitionController {
|
|
|
4
4
|
this.el.style.setProperty(this.property, `${to}`);
|
|
5
5
|
return this;
|
|
6
6
|
}
|
|
7
|
-
unset(
|
|
8
|
-
if (from !== undefined) {
|
|
9
|
-
this.el.addEventListener('transitionend', this.handleTransitionEnd, {
|
|
10
|
-
once: true
|
|
11
|
-
});
|
|
12
|
-
this.enableTransition();
|
|
13
|
-
this.el.style.setProperty(this.property, `${from}`);
|
|
14
|
-
return this;
|
|
15
|
-
}
|
|
7
|
+
unset() {
|
|
16
8
|
return this.cleanup();
|
|
17
9
|
}
|
|
18
10
|
enableTransition() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/lib/sheet/controllers/CSSTransitionController.ts"],"sourcesContent":["export type CSSTransitionControllerUnit = 'px' | '%' | '';\n\nexport class CSSTransitionController<V extends number | string = number> {\n constructor(\n public readonly el: HTMLElement,\n public readonly property: string,\n ) {}\n\n set(to: V) {\n this.el.style.setProperty(this.property, `${to}`);\n return this;\n }\n\n unset(
|
|
1
|
+
{"version":3,"sources":["../../../../src/lib/sheet/controllers/CSSTransitionController.ts"],"sourcesContent":["export type CSSTransitionControllerUnit = 'px' | '%' | '';\n\nexport class CSSTransitionController<V extends number | string = number> {\n constructor(\n public readonly el: HTMLElement,\n public readonly property: string,\n ) {}\n\n set(to: V) {\n this.el.style.setProperty(this.property, `${to}`);\n return this;\n }\n\n unset() {\n return this.cleanup();\n }\n\n enableTransition() {\n this.el.style.removeProperty('transition');\n return this;\n }\n\n disableTransition() {\n this.el.style.setProperty('transition', 'none');\n return this;\n }\n\n cleanup() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.el.style.removeProperty('transition');\n this.el.style.removeProperty(this.property);\n return this;\n }\n\n cleanupOnTransitionEnd() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd, { once: true });\n return this;\n }\n\n private readonly handleTransitionEnd = () => {\n this.cleanup();\n return this;\n };\n}\n"],"names":["CSSTransitionController","set","to","el","style","setProperty","property","unset","cleanup","enableTransition","removeProperty","disableTransition","removeEventListener","handleTransitionEnd","cleanupOnTransitionEnd","addEventListener","once","constructor"],"mappings":";AAEA,OAAO,MAAMA;IAMXC,IAAIC,EAAK,EAAE;QACT,IAAI,CAACC,EAAE,CAACC,KAAK,CAACC,WAAW,CAAC,IAAI,CAACC,QAAQ,EAAE,GAAGJ,IAAI;QAChD,OAAO,IAAI;IACb;IAEAK,QAAQ;QACN,OAAO,IAAI,CAACC,OAAO;IACrB;IAEAC,mBAAmB;QACjB,IAAI,CAACN,EAAE,CAACC,KAAK,CAACM,cAAc,CAAC;QAC7B,OAAO,IAAI;IACb;IAEAC,oBAAoB;QAClB,IAAI,CAACR,EAAE,CAACC,KAAK,CAACC,WAAW,CAAC,cAAc;QACxC,OAAO,IAAI;IACb;IAEAG,UAAU;QACR,IAAI,CAACL,EAAE,CAACS,mBAAmB,CAAC,iBAAiB,IAAI,CAACC,mBAAmB;QACrE,IAAI,CAACV,EAAE,CAACC,KAAK,CAACM,cAAc,CAAC;QAC7B,IAAI,CAACP,EAAE,CAACC,KAAK,CAACM,cAAc,CAAC,IAAI,CAACJ,QAAQ;QAC1C,OAAO,IAAI;IACb;IAEAQ,yBAAyB;QACvB,IAAI,CAACX,EAAE,CAACY,gBAAgB,CAAC,iBAAiB,IAAI,CAACF,mBAAmB,EAAE;YAAEG,MAAM;QAAK;QACjF,OAAO,IAAI;IACb;IAlCAC,YACE,AAAgBd,EAAe,EAC/B,AAAgBG,QAAgB,CAChC;;;QAiCF,uBAAiBO,uBAAjB,KAAA;aAnCkBV,KAAAA;aACAG,WAAAA;aAkCDO,sBAAsB;YACrC,IAAI,CAACL,OAAO;YACZ,OAAO,IAAI;QACb;IApCG;AAqCL"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY, BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, } from './constants';
|
|
1
|
+
export { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY, BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE, } from './constants';
|
|
2
2
|
export { type UseBottomSheetOptions, type UseBottomSheetHandlers, type UseBottomSheetResult, useBottomSheet, } from './useBottomSheet';
|
|
3
|
+
export type { SnapPoint, SnapPointChange } from './controllers/BottomSheetController';
|
|
3
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uCAAuC,EACvC,mCAAmC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uCAAuC,EACvC,mCAAmC,EACnC,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,EAC3B,KAAK,oBAAoB,EACzB,cAAc,GACf,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC"}
|
package/dist/lib/sheet/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY, BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from "./constants.js";
|
|
1
|
+
export { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY, BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE } from "./constants.js";
|
|
2
2
|
export { useBottomSheet } from "./useBottomSheet.js";
|
|
3
3
|
|
|
4
4
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/lib/sheet/index.ts"],"sourcesContent":["export {\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,\n} from './constants';\nexport {\n type UseBottomSheetOptions,\n type UseBottomSheetHandlers,\n type UseBottomSheetResult,\n useBottomSheet,\n} from './useBottomSheet';\n"],"names":["BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","useBottomSheet"],"mappings":"AAAA,SACEA,uCAAuC,EACvCC,mCAAmC,
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/sheet/index.ts"],"sourcesContent":["export {\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,\n BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,\n SNAP_POINT_DETENTS,\n SNAP_POINT_SAFE_RANGE,\n} from './constants';\nexport {\n type UseBottomSheetOptions,\n type UseBottomSheetHandlers,\n type UseBottomSheetResult,\n useBottomSheet,\n} from './useBottomSheet';\nexport type { SnapPoint, SnapPointChange } from './controllers/BottomSheetController';\n"],"names":["BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","SNAP_POINT_DETENTS","SNAP_POINT_SAFE_RANGE","useBottomSheet"],"mappings":"AAAA,SACEA,uCAAuC,EACvCC,mCAAmC,EACnCC,kBAAkB,EAClBC,qBAAqB,QAChB,iBAAc;AACrB,SAIEC,cAAc,QACT,sBAAmB"}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { type CSSProperties, type Dispatch, type SetStateAction, type UIEventHandler } from 'react';
|
|
2
|
-
import { type
|
|
2
|
+
import { type SnapPoint, type SnapPointChange } from './controllers/BottomSheetController';
|
|
3
3
|
export type UseBottomSheetOptions = {
|
|
4
4
|
sheetCSSProperty: string;
|
|
5
5
|
backdropCSSProperty: string;
|
|
6
|
-
|
|
6
|
+
snapPoint: SnapPoint;
|
|
7
7
|
blocked?: boolean;
|
|
8
|
+
onSnapPointChange?: SnapPointChange;
|
|
8
9
|
onDismiss?: VoidFunction;
|
|
9
10
|
};
|
|
10
11
|
export type UseBottomSheetHandlers = {
|
|
@@ -31,7 +32,7 @@ export type UseBottomSheetResult = [
|
|
|
31
32
|
*
|
|
32
33
|
* ## Возможности
|
|
33
34
|
*
|
|
34
|
-
* - [x] есть возможность открывать до определенного размера (см. `
|
|
35
|
+
* - [x] есть возможность открывать до определенного размера (см. `snapPoint`)
|
|
35
36
|
* - [x] есть возможность закрыть при сильном смахивании вниз
|
|
36
37
|
* - [x] есть возможность отключить взаимодействие на определённых элементах используя data-атрибут
|
|
37
38
|
* - [x] есть возможность отключить взаимодействие на определённых элементах используя stopPropagation()
|
|
@@ -39,7 +40,7 @@ export type UseBottomSheetResult = [
|
|
|
39
40
|
* ## Анимации
|
|
40
41
|
*
|
|
41
42
|
* - [x] оверлей становится светлее в зависимости от процента сворачивания
|
|
42
|
-
* - [x] при `
|
|
43
|
+
* - [x] при `snapPoint !== 'auto'` процент высчитывается относительно переданного `snapPoint.initial`
|
|
43
44
|
* - [x] при перетаскивании за пределы есть анимация натяжения
|
|
44
45
|
* > note: в `ModalPage` этого эффекта нет при высоте 100% из-за `max-block-size: 100%`
|
|
45
46
|
*
|
|
@@ -52,5 +53,5 @@ export type UseBottomSheetResult = [
|
|
|
52
53
|
*
|
|
53
54
|
* @private
|
|
54
55
|
*/
|
|
55
|
-
export declare const useBottomSheet: (enabled: boolean, { blocked,
|
|
56
|
+
export declare const useBottomSheet: (enabled: boolean, { blocked, snapPoint, sheetCSSProperty, backdropCSSProperty, onSnapPointChange: onSnapPointChangeProp, onDismiss: onDismissProp, }: UseBottomSheetOptions) => UseBottomSheetResult;
|
|
56
57
|
//# sourceMappingURL=useBottomSheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/lib/sheet/useBottomSheet.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,cAAc,EAEnB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AAIf,OAAO,
|
|
1
|
+
{"version":3,"file":"useBottomSheet.d.ts","sourceRoot":"","sources":["../../../src/lib/sheet/useBottomSheet.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,QAAQ,EACb,KAAK,cAAc,EAEnB,KAAK,cAAc,EAGpB,MAAM,OAAO,CAAC;AAIf,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,eAAe,EACrB,MAAM,qCAAqC,CAAC;AAG7C,MAAM,MAAM,qBAAqB,GAAG;IAClC,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,YAAY,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC1C,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,UAAU,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,aAAa,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,WAAW,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACvC,YAAY,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC;QACE,YAAY,CAAC,EAAE,aAAa,CAAC;QAC7B,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;QACzD,gBAAgB,EAAE,QAAQ,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;QAC/D,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC,CAAC;KAC7D;IACD,sBAAsB,GAAG,SAAS;CACnC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,cAAc,YAChB,OAAO,sIAQb,qBAAqB,KACvB,oBA2FF,CAAC"}
|