@vkontakte/vkui 6.0.1 → 6.0.2
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/Banner/Banner.js +3 -3
- package/dist/cjs/components/Banner/Banner.js.map +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/cjs/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cjs/components/CustomSelectOption/CustomSelectOption.d.ts.map +1 -1
- package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js +2 -1
- package/dist/cjs/components/CustomSelectOption/CustomSelectOption.js.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.d.ts +2 -2
- package/dist/cjs/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/cjs/components/DateInput/DateInput.js +6 -2
- package/dist/cjs/components/DateInput/DateInput.js.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/cjs/components/DatePicker/DatePicker.js +2 -1
- package/dist/cjs/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cjs/components/File/File.js +3 -1
- package/dist/cjs/components/File/File.js.map +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/cjs/components/FocusTrap/FocusTrap.js +1 -0
- package/dist/cjs/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cjs/components/FormStatus/FormStatus.d.ts +1 -1
- package/dist/cjs/components/FormStatus/FormStatus.d.ts.map +1 -1
- package/dist/cjs/components/FormStatus/FormStatus.js +4 -2
- package/dist/cjs/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js +2 -0
- package/dist/cjs/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js +2 -2
- package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.d.ts.map +1 -1
- package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.js +0 -2
- package/dist/cjs/components/Pagination/PaginationPage/PaginationPageButton.js.map +1 -1
- package/dist/cjs/components/PullToRefresh/PullToRefresh.d.ts.map +1 -1
- package/dist/cjs/components/PullToRefresh/PullToRefresh.js +5 -1
- package/dist/cjs/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/cjs/components/Select/Select.d.ts.map +1 -1
- package/dist/cjs/components/Select/Select.js +9 -4
- package/dist/cjs/components/Select/Select.js.map +1 -1
- package/dist/cjs/components/Snackbar/Snackbar.js +2 -2
- package/dist/cjs/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.d.ts +2 -1
- package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.d.ts.map +1 -1
- package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.js +2 -2
- package/dist/cjs/components/Snackbar/subcomponents/Basic/Basic.js.map +1 -1
- package/dist/cjs/hooks/useDateInput.d.ts +1 -1
- package/dist/cjs/hooks/useDateInput.d.ts.map +1 -1
- package/dist/cjs/hooks/useDateInput.js.map +1 -1
- package/dist/cjs/types.d.ts +36 -0
- package/dist/cjs/types.d.ts.map +1 -1
- package/dist/cjs/types.js.map +1 -1
- package/dist/components/Banner/Banner.js +3 -3
- package/dist/components/Banner/Banner.js.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts +1 -1
- package/dist/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/components/CustomSelectOption/CustomSelectOption.d.ts.map +1 -1
- package/dist/components/CustomSelectOption/CustomSelectOption.js +2 -1
- package/dist/components/CustomSelectOption/CustomSelectOption.js.map +1 -1
- package/dist/components/DateInput/DateInput.d.ts +2 -2
- package/dist/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/components/DateInput/DateInput.js +6 -2
- package/dist/components/DateInput/DateInput.js.map +1 -1
- package/dist/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/components/DatePicker/DatePicker.js +2 -1
- package/dist/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/components/File/File.js +3 -1
- package/dist/components/File/File.js.map +1 -1
- package/dist/components/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/components/FocusTrap/FocusTrap.js +1 -0
- package/dist/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/components/FormStatus/FormStatus.d.ts +1 -1
- package/dist/components/FormStatus/FormStatus.d.ts.map +1 -1
- package/dist/components/FormStatus/FormStatus.js +4 -2
- package/dist/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +2 -0
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/ModalPageHeader/ModalPageHeader.js +2 -2
- package/dist/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/components/Pagination/PaginationPage/PaginationPageButton.d.ts.map +1 -1
- package/dist/components/Pagination/PaginationPage/PaginationPageButton.js +0 -2
- package/dist/components/Pagination/PaginationPage/PaginationPageButton.js.map +1 -1
- package/dist/components/PullToRefresh/PullToRefresh.d.ts.map +1 -1
- package/dist/components/PullToRefresh/PullToRefresh.js +5 -1
- package/dist/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/components/Select/Select.d.ts.map +1 -1
- package/dist/components/Select/Select.js +9 -4
- package/dist/components/Select/Select.js.map +1 -1
- package/dist/components/Snackbar/Snackbar.js +2 -2
- package/dist/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/components/Snackbar/subcomponents/Basic/Basic.d.ts +2 -1
- package/dist/components/Snackbar/subcomponents/Basic/Basic.d.ts.map +1 -1
- package/dist/components/Snackbar/subcomponents/Basic/Basic.js +2 -2
- package/dist/components/Snackbar/subcomponents/Basic/Basic.js.map +1 -1
- package/dist/components.css +5 -5
- package/dist/components.css.map +1 -1
- package/dist/components.js.tmp +46 -25
- package/dist/cssm/components/AppRoot/AppRoot.module.css +1 -0
- package/dist/cssm/components/Banner/Banner.js +3 -3
- package/dist/cssm/components/Banner/Banner.js.map +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.d.ts.map +1 -1
- package/dist/cssm/components/CalendarRange/CalendarRange.js.map +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.d.ts.map +1 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js +2 -1
- package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.d.ts +2 -2
- package/dist/cssm/components/DateInput/DateInput.d.ts.map +1 -1
- package/dist/cssm/components/DateInput/DateInput.js +4 -2
- package/dist/cssm/components/DateInput/DateInput.js.map +1 -1
- package/dist/cssm/components/DatePicker/DatePicker.d.ts.map +1 -1
- package/dist/cssm/components/DatePicker/DatePicker.js +2 -1
- package/dist/cssm/components/DatePicker/DatePicker.js.map +1 -1
- package/dist/cssm/components/DateRangeInput/DateRangeInput.js.map +1 -1
- package/dist/cssm/components/File/File.js +1 -0
- package/dist/cssm/components/File/File.js.map +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.d.ts.map +1 -1
- package/dist/cssm/components/FocusTrap/FocusTrap.js +1 -0
- package/dist/cssm/components/FocusTrap/FocusTrap.js.map +1 -1
- package/dist/cssm/components/FormItem/FormItem.module.css +2 -2
- package/dist/cssm/components/FormStatus/FormStatus.d.ts +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.d.ts.map +1 -1
- package/dist/cssm/components/FormStatus/FormStatus.js +2 -1
- package/dist/cssm/components/FormStatus/FormStatus.js.map +1 -1
- package/dist/cssm/components/HorizontalCell/HorizontalCell.module.css +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +2 -0
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js +2 -2
- package/dist/cssm/components/ModalPageHeader/ModalPageHeader.js.map +1 -1
- package/dist/cssm/components/Pagination/PaginationPage/PaginationPageButton.d.ts.map +1 -1
- package/dist/cssm/components/Pagination/PaginationPage/PaginationPageButton.js +0 -2
- package/dist/cssm/components/Pagination/PaginationPage/PaginationPageButton.js.map +1 -1
- package/dist/cssm/components/Panel/Panel.module.css +8 -21
- package/dist/cssm/components/PullToRefresh/PullToRefresh.d.ts.map +1 -1
- package/dist/cssm/components/PullToRefresh/PullToRefresh.js +5 -1
- package/dist/cssm/components/PullToRefresh/PullToRefresh.js.map +1 -1
- package/dist/cssm/components/Search/Search.module.css +1 -1
- package/dist/cssm/components/Select/Select.d.ts.map +1 -1
- package/dist/cssm/components/Select/Select.js +2 -2
- package/dist/cssm/components/Select/Select.js.map +1 -1
- package/dist/cssm/components/Snackbar/Snackbar.js +2 -2
- package/dist/cssm/components/Snackbar/Snackbar.js.map +1 -1
- package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.d.ts +2 -1
- package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.d.ts.map +1 -1
- package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.js +2 -2
- package/dist/cssm/components/Snackbar/subcomponents/Basic/Basic.js.map +1 -1
- package/dist/cssm/hooks/useDateInput.d.ts +1 -1
- package/dist/cssm/hooks/useDateInput.d.ts.map +1 -1
- package/dist/cssm/hooks/useDateInput.js.map +1 -1
- package/dist/cssm/types.d.ts +36 -0
- package/dist/cssm/types.d.ts.map +1 -1
- package/dist/cssm/types.js.map +1 -1
- package/dist/hooks/useDateInput.d.ts +1 -1
- package/dist/hooks/useDateInput.d.ts.map +1 -1
- package/dist/hooks/useDateInput.js.map +1 -1
- package/dist/types.d.ts +36 -0
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/vkui.css +5 -5
- package/dist/vkui.css.map +1 -1
- package/dist/vkui.js.tmp +46 -25
- package/package.json +1 -1
- package/src/components/AppRoot/AppRoot.module.css +1 -0
- package/src/components/Avatar/Avatar.stories.tsx +6 -1
- package/src/components/Avatar/Readme.md +1 -1
- package/src/components/Banner/Banner.tsx +3 -3
- package/src/components/ButtonGroup/ButtonGroup.stories.tsx +58 -9
- package/src/components/ButtonGroup/Readme.md +64 -10
- package/src/components/CalendarRange/CalendarRange.tsx +1 -1
- package/src/components/CustomSelectOption/CustomSelectOption.stories.tsx +10 -1
- package/src/components/CustomSelectOption/CustomSelectOption.tsx +5 -1
- package/src/components/DateInput/DateInput.tsx +6 -0
- package/src/components/DatePicker/DatePicker.tsx +4 -3
- package/src/components/DateRangeInput/DateRangeInput.tsx +1 -1
- package/src/components/File/File.tsx +1 -1
- package/src/components/FocusTrap/FocusTrap.tsx +1 -0
- package/src/components/FormItem/FormItem.module.css +1 -1
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-dark-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-android-chromium-light-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-dark-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-ios-webkit-light-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-dark-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-chromium-light-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-dark-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-firefox-light-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-dark-1-snap.png +2 -2
- package/src/components/FormLayoutGroup/__image_snapshots__/formlayoutgroup-vkcom-webkit-light-1-snap.png +2 -2
- package/src/components/FormStatus/FormStatus.tsx +8 -1
- package/src/components/HorizontalCell/HorizontalCell.e2e-playground.tsx +59 -0
- package/src/components/HorizontalCell/HorizontalCell.e2e.tsx +12 -0
- package/src/components/HorizontalCell/HorizontalCell.module.css +1 -1
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-android-chromium-dark-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-android-chromium-light-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-ios-webkit-dark-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-ios-webkit-light-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-vkcom-chromium-dark-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-vkcom-chromium-light-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-vkcom-firefox-dark-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-vkcom-firefox-light-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-vkcom-webkit-dark-1-snap.png +3 -0
- package/src/components/HorizontalCell/__image_snapshots__/horizontalcell-vkcom-webkit-light-1-snap.png +3 -0
- package/src/components/HorizontalScroll/HorizontalScroll.test.tsx +51 -20
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +2 -0
- package/src/components/Image/Image.stories.tsx +1 -0
- package/src/components/Image/Readme.md +6 -2
- package/src/components/ImageBase/ImageBaseOverlay/ImageBaseOverlay.stories.tsx +9 -5
- package/src/components/ModalPageHeader/ModalPageHeader.tsx +2 -2
- package/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-dark-1-snap.png +2 -2
- package/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-android-chromium-light-1-snap.png +2 -2
- package/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-dark-1-snap.png +2 -2
- package/src/components/ModalPageHeader/__image_snapshots__/modalpageheader-viewwidth-mobile-ios-only-ios-webkit-light-1-snap.png +2 -2
- package/src/components/Pagination/PaginationPage/PaginationPageButton.tsx +0 -2
- package/src/components/Panel/Panel.module.css +8 -21
- package/src/components/Popover/Readme.md +1 -1
- package/src/components/PullToRefresh/PullToRefresh.tsx +6 -1
- package/src/components/Search/Search.module.css +1 -1
- package/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png +2 -2
- package/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png +2 -2
- package/src/components/Select/Select.tsx +11 -4
- package/src/components/Snackbar/Snackbar.test.tsx +26 -0
- package/src/components/Snackbar/Snackbar.tsx +2 -2
- package/src/components/Snackbar/subcomponents/Basic/Basic.tsx +4 -3
- package/src/components/Tappable/Tappable.stories.tsx +1 -1
- package/src/hooks/useDateInput.ts +1 -1
- package/src/storybook/VKUIDecorators.tsx +14 -2
- package/src/types.ts +37 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"FocusTrap.d.ts","sourceRoot":"","sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAIvD,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,CACjE,SAAQ,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAChC,UAAU,CAAC,CAAC,CAAC,EACb,YAAY;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,SAAS,6KAmJrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n contains,\n getActiveElementByAnotherElement,\n getWindow,\n isHTMLElement,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n extends React.AllHTMLAttributes<T>,\n HasRootRef<T>,\n HasComponent {\n autoFocus?: boolean;\n restoreFocus?: boolean | (() => boolean);\n timeout?: number;\n onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n Component = 'div',\n onClose,\n autoFocus = true,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps<T>) => {\n const ref = useExternRef<T>(getRootRef);\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusableNodesRef = React.useRef<HTMLElement[]>([]);\n\n useIsomorphicLayoutEffect(\n function collectFocusableNodesRef() {\n if (!ref.current) {\n return;\n }\n\n const nodes: HTMLElement[] = [];\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {\n const { display, visibility } = getComputedStyle(focusableEl);\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl);\n }\n });\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(ref.current);\n }\n\n focusableNodesRef.current = nodes;\n },\n [children],\n );\n\n useIsomorphicLayoutEffect(\n function tryToAutoFocusToFirstNode() {\n if (!ref.current || !autoFocus || !keyboardInput) {\n return;\n }\n const autoFocusToFirstNode = () => {\n if (!ref.current || !focusableNodesRef.current.length) {\n return;\n }\n const activeElement = getActiveElementByAnotherElement(ref.current);\n if (!contains(ref.current, activeElement)) {\n focusableNodesRef.current[0].focus();\n }\n };\n const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n },\n [autoFocus, timeout, keyboardInput],\n );\n\n useIsomorphicLayoutEffect(\n function tryToRestoreFocusOnUnmount() {\n if (!ref.current || !restoreFocus) {\n return;\n }\n\n const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n return () => {\n const shouldRestoreFocus =\n typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n return;\n }\n\n setTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n };\n },\n [restoreFocus, timeout],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const onDocumentKeydown = (event: KeyboardEvent) => {\n const pressedKeyResult = pressedKey(event);\n\n switch (pressedKeyResult) {\n case Keys.TAB: {\n if (!focusableNodesRef.current.length) {\n return false;\n }\n\n const lastIdx = focusableNodesRef.current.length - 1;\n const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n event.preventDefault();\n\n const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== getActiveElementByAnotherElement(node)) {\n node.focus();\n }\n\n return false;\n }\n\n break;\n }\n case Keys.ESCAPE: {\n if (onClose) {\n onClose();\n }\n }\n }\n\n return true;\n };\n\n const doc = getWindow(ref.current).document;\n doc.addEventListener('keydown', onDocumentKeydown, {\n capture: true,\n });\n return () => {\n doc.removeEventListener('keydown', onDocumentKeydown, true);\n };\n }, [onClose, ref]);\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","keyboardInput","React","useContext","AppRootContext","focusableNodesRef","useRef","useIsomorphicLayoutEffect","collectFocusableNodesRef","current","nodes","querySelectorAll","forEach","focusableEl","display","visibility","getComputedStyle","push","length","tryToAutoFocusToFirstNode","autoFocusToFirstNode","activeElement","getActiveElementByAnotherElement","contains","focus","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","document","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport {\n contains,\n getActiveElementByAnotherElement,\n getWindow,\n isHTMLElement,\n} from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n extends React.AllHTMLAttributes<T>,\n HasRootRef<T>,\n HasComponent {\n autoFocus?: boolean;\n restoreFocus?: boolean | (() => boolean);\n timeout?: number;\n onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n Component = 'div',\n onClose,\n autoFocus = true,\n restoreFocus = true,\n timeout = 0,\n getRootRef,\n children,\n ...restProps\n}: FocusTrapProps<T>) => {\n const ref = useExternRef<T>(getRootRef);\n\n const { keyboardInput } = React.useContext(AppRootContext);\n const focusableNodesRef = React.useRef<HTMLElement[]>([]);\n\n useIsomorphicLayoutEffect(\n function collectFocusableNodesRef() {\n if (!ref.current) {\n return;\n }\n\n const nodes: HTMLElement[] = [];\n // eslint-disable-next-line no-restricted-properties\n ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {\n const { display, visibility } = getComputedStyle(focusableEl);\n if (display !== 'none' && visibility !== 'hidden') {\n nodes.push(focusableEl);\n }\n });\n\n if (nodes.length === 0) {\n // Чтобы фокус был хотя бы на родителе\n nodes.push(ref.current);\n }\n\n focusableNodesRef.current = nodes;\n },\n [children],\n );\n\n useIsomorphicLayoutEffect(\n function tryToAutoFocusToFirstNode() {\n if (!ref.current || !autoFocus || !keyboardInput) {\n return;\n }\n const autoFocusToFirstNode = () => {\n if (!ref.current || !focusableNodesRef.current.length) {\n return;\n }\n const activeElement = getActiveElementByAnotherElement(ref.current);\n if (!contains(ref.current, activeElement)) {\n focusableNodesRef.current[0].focus();\n }\n };\n const timeoutId = setTimeout(autoFocusToFirstNode, timeout);\n return () => {\n clearTimeout(timeoutId);\n };\n },\n [autoFocus, timeout, keyboardInput],\n );\n\n useIsomorphicLayoutEffect(\n function tryToRestoreFocusOnUnmount() {\n if (!ref.current || !restoreFocus) {\n return;\n }\n\n const restoreFocusTo = getActiveElementByAnotherElement(ref.current);\n\n return () => {\n const shouldRestoreFocus =\n typeof restoreFocus === 'function' ? restoreFocus() : restoreFocus;\n\n if (!shouldRestoreFocus || !isHTMLElement(restoreFocusTo)) {\n return;\n }\n\n setTimeout(() => {\n if (restoreFocusTo) {\n restoreFocusTo.focus();\n }\n }, timeout);\n };\n },\n [restoreFocus, timeout],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!ref.current) {\n return;\n }\n\n const onDocumentKeydown = (event: KeyboardEvent) => {\n const pressedKeyResult = pressedKey(event);\n\n switch (pressedKeyResult) {\n case Keys.TAB: {\n if (!focusableNodesRef.current.length) {\n return false;\n }\n\n const lastIdx = focusableNodesRef.current.length - 1;\n const targetIdx = focusableNodesRef.current.findIndex((node) => node === event.target);\n\n const shouldFocusFirstNode =\n targetIdx === -1 || (targetIdx === lastIdx && !event.shiftKey);\n\n if (shouldFocusFirstNode || (targetIdx === 0 && event.shiftKey)) {\n event.preventDefault();\n\n const node = focusableNodesRef.current[shouldFocusFirstNode ? 0 : lastIdx];\n\n if (node !== getActiveElementByAnotherElement(node)) {\n node.focus();\n }\n\n return false;\n }\n\n break;\n }\n case Keys.ESCAPE: {\n if (onClose) {\n event.preventDefault();\n onClose();\n }\n }\n }\n\n return true;\n };\n\n const doc = getWindow(ref.current).document;\n doc.addEventListener('keydown', onDocumentKeydown, {\n capture: true,\n });\n return () => {\n doc.removeEventListener('keydown', onDocumentKeydown, true);\n };\n }, [onClose, ref]);\n\n return (\n <Component tabIndex={-1} ref={ref} {...restProps}>\n {children}\n </Component>\n );\n};\n"],"names":["FocusTrap","FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","Component","onClose","autoFocus","restoreFocus","timeout","getRootRef","children","restProps","ref","useExternRef","keyboardInput","React","useContext","AppRootContext","focusableNodesRef","useRef","useIsomorphicLayoutEffect","collectFocusableNodesRef","current","nodes","querySelectorAll","forEach","focusableEl","display","visibility","getComputedStyle","push","length","tryToAutoFocusToFirstNode","autoFocusToFirstNode","activeElement","getActiveElementByAnotherElement","contains","focus","timeoutId","setTimeout","clearTimeout","tryToRestoreFocusOnUnmount","restoreFocusTo","shouldRestoreFocus","isHTMLElement","onDocumentKeydown","event","pressedKeyResult","pressedKey","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","doc","getWindow","document","addEventListener","capture","removeEventListener","tabIndex"],"mappings":"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"}
|
|
@@ -7,5 +7,5 @@ export interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElemen
|
|
|
7
7
|
/**
|
|
8
8
|
* @see https://vkcom.github.io/VKUI/#/FormStatus
|
|
9
9
|
*/
|
|
10
|
-
export declare const FormStatus: ({ mode, children, className, ...restProps }: FormStatusProps) => React.JSX.Element;
|
|
10
|
+
export declare const FormStatus: ({ mode, children, className, role, ...restProps }: FormStatusProps) => React.JSX.Element;
|
|
11
11
|
//# sourceMappingURL=FormStatus.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"FormStatus.d.ts","sourceRoot":"","sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAIxD,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,sDAMpB,eAAe,sBAcjB,CAAC"}
|
|
@@ -16,12 +16,14 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
16
16
|
const _vkjs = require("@vkontakte/vkjs");
|
|
17
17
|
const _Banner = require("../Banner/Banner");
|
|
18
18
|
const FormStatus = (_param)=>{
|
|
19
|
-
var { mode, children, className } = _param, restProps = _object_without_properties._(_param, [
|
|
19
|
+
var { mode, children, className, role = mode === 'error' ? 'alert' : 'status' } = _param, restProps = _object_without_properties._(_param, [
|
|
20
20
|
"mode",
|
|
21
21
|
"children",
|
|
22
|
-
"className"
|
|
22
|
+
"className",
|
|
23
|
+
"role"
|
|
23
24
|
]);
|
|
24
25
|
return /*#__PURE__*/ _react.createElement(_Banner.Banner, _object_spread_props._(_object_spread._({}, restProps), {
|
|
26
|
+
role: role,
|
|
25
27
|
subheader: children,
|
|
26
28
|
className: (0, _vkjs.classNames)('vkuiInternalFormStatus', mode === 'error' && (0, _vkjs.classNames)("vkuiFormStatus--mode-error", 'vkuiInternalFormStatus--mode-error'), className)
|
|
27
29
|
}));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n mode?: 'default' | 'error';\n header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({ mode
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/FormStatus/FormStatus.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Banner } from '../Banner/Banner';\nimport styles from './FormStatus.module.css';\n\nexport interface FormStatusProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n mode?: 'default' | 'error';\n header?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormStatus\n */\nexport const FormStatus = ({\n mode,\n children,\n className,\n role = mode === 'error' ? 'alert' : 'status',\n ...restProps\n}: FormStatusProps) => {\n return (\n <Banner\n {...restProps}\n role={role}\n subheader={children}\n className={classNames(\n 'vkuiInternalFormStatus',\n mode === 'error' &&\n classNames(styles['FormStatus--mode-error'], 'vkuiInternalFormStatus--mode-error'),\n className,\n )}\n />\n );\n};\n"],"names":["FormStatus","mode","children","className","role","restProps","Banner","subheader","classNames"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;;;iEAdU;sBACI;wBAEJ;AAWhB,MAAMA,aAAa;QAAC,EACzBC,IAAI,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAOH,SAAS,UAAU,UAAU,QAAQ,EAE5B,WADbI;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,qBAACE,cAAM,8CACDD;QACJD,MAAMA;QACNG,WAAWL;QACXC,WAAWK,IAAAA,gBAAU,EACnB,0BACAP,SAAS,WACPO,IAAAA,gBAAU,gCAAmC,uCAC/CL;;AAIR"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqBhE,MAAM,MAAM,qBAAqB,GAAG,CAAC,eAAe,EAAE,MAAM,KAAK,MAAM,CAAC;AAExE,MAAM,WAAW,qBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IACxC;;OAEG;IACH,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAChC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA2GD;;GAEG;AACH,eAAO,MAAM,gBAAgB,0JAW1B,qBAAqB,sBAqJvB,CAAC"}
|
|
@@ -213,6 +213,7 @@ const HorizontalScroll = (_param)=>{
|
|
|
213
213
|
offsetY: arrowOffsetY,
|
|
214
214
|
direction: "left",
|
|
215
215
|
"aria-hidden": true,
|
|
216
|
+
tabIndex: -1,
|
|
216
217
|
className: (0, _vkjs.classNames)("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowLeft"),
|
|
217
218
|
onClick: scrollToLeft
|
|
218
219
|
}), showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && /*#__PURE__*/ _react.createElement(_ScrollArrow.ScrollArrow, {
|
|
@@ -221,6 +222,7 @@ const HorizontalScroll = (_param)=>{
|
|
|
221
222
|
offsetY: arrowOffsetY,
|
|
222
223
|
direction: "right",
|
|
223
224
|
"aria-hidden": true,
|
|
225
|
+
tabIndex: -1,
|
|
224
226
|
className: (0, _vkjs.classNames)("vkuiHorizontalScroll__arrow", "vkuiHorizontalScroll__arrowRight"),
|
|
225
227
|
onClick: scrollToRight
|
|
226
228
|
}), /*#__PURE__*/ _react.createElement("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n */\n initialScrollWidth: number;\n textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при клике на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при клике на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: 'm' | 'l';\n /**\n * Смещает иконки кнопок навигации по вертикали.\n */\n arrowOffsetY?: number | string;\n showArrows?: boolean | 'always';\n scrollAnimationDuration?: number;\n /**\n * Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n */\n scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * крайнее значение сдвига\n */\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n let endScrollLeft = getScrollPosition(startScrollLeft);\n\n onScrollStart();\n\n /**\n * Если окончание прокрутки вышло за ноль\n */\n if (startScrollLeft * endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'l',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef, directionRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n textDirection,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollStart(scrollElement.scrollLeft !== 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n React.useEffect(\n function addScrollerRefToScrollEvent() {\n if (!scrollerRef.current) {\n return noop;\n }\n\n scrollEvent.add(scrollerRef.current);\n return scrollEvent.remove;\n },\n [scrollEvent, scrollerRef],\n );\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n /**\n * Прокрутка с помощью любого колеса мыши\n */\n const onwheel = React.useCallback(\n (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n },\n [scrollerRef],\n );\n\n const wheelEvent = useEventListener('wheel', onwheel);\n React.useEffect(\n function addScrollerRefToWheelEvent() {\n if (!scrollerRef.current || !scrollOnAnyWheel) {\n return noop;\n }\n\n wheelEvent.add(scrollerRef.current);\n\n return wheelEvent.remove;\n },\n [wheelEvent, scrollerRef, scrollOnAnyWheel],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['HorizontalScroll'],\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowLeft'],\n )}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowRight'],\n )}\n onClick={scrollToRight}\n />\n )}\n <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["HorizontalScroll","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","easeInOutSine","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","React","useState","canScrollRight","setCanScrollRight","directionRef","useDirection","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEventListener","useEffect","addScrollerRefToScrollEvent","noop","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","RootComponent","baseClassName","classNames","onMouseEnter","undefined","ScrollArrow","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","className","onClick","div","ref"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport styles from './HorizontalScroll.module.css';\n\ninterface ScrollContext {\n scrollElement: HTMLElement | null;\n scrollAnimationDuration: number;\n animationQueue: VoidFunction[];\n getScrollPosition: (currentPosition: number) => number;\n onScrollToEndBorder: VoidFunction;\n onScrollEnd: VoidFunction;\n onScrollStart: VoidFunction;\n /**\n * Начальная ширина прокрутки.\n * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate\n */\n initialScrollWidth: number;\n textDirection: 'ltr' | 'rtl';\n}\n\nexport type ScrollPositionHandler = (currentPosition: number) => number;\n\nexport interface HorizontalScrollProps\n extends HTMLAttributesWithRootRef<HTMLDivElement>,\n HasRef<HTMLDivElement> {\n /**\n * Функция для расчета величины прокрутки при клике на левую стрелку.\n */\n getScrollToLeft?: ScrollPositionHandler;\n /**\n * Функция для расчета величины прокрутки при клике на правую стрелку.\n */\n getScrollToRight?: ScrollPositionHandler;\n arrowSize?: 'm' | 'l';\n /**\n * Смещает иконки кнопок навигации по вертикали.\n */\n arrowOffsetY?: number | string;\n showArrows?: boolean | 'always';\n scrollAnimationDuration?: number;\n /**\n * Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n */\n scrollOnAnyWheel?: boolean;\n}\n\n/**\n * timing method\n */\nfunction now() {\n return performance && performance.now ? performance.now() : Date.now();\n}\n\n/**\n * Округление к большему по модулю\n *\n * ## Пример\n *\n * ```ts\n * import { strict as assert } from 'node:assert';\n *\n * assert.equal(roundingAwayFromZero(5.1), 6)\n * assert.equal(roundingAwayFromZero(-5.1), -6)\n * ```\n */\nfunction roundingAwayFromZero(value: number): number {\n return value > 0 ? Math.ceil(value) : Math.floor(value);\n}\n\n/**\n * Округляем el.scrollLeft\n * https://github.com/VKCOM/VKUI/pull/2445\n */\nconst roundUpElementScrollLeft = (el: HTMLElement) => roundingAwayFromZero(el.scrollLeft);\n\n/**\n * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll\n * Константа взята из полифила (468), на дизайн-ревью уточнили до 250\n * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла\n */\nconst SCROLL_ONE_FRAME_TIME = 250;\n\nfunction doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue,\n onScrollToEndBorder,\n onScrollEnd,\n onScrollStart,\n initialScrollWidth,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n textDirection,\n}: ScrollContext) {\n if (!scrollElement || !getScrollPosition) {\n return;\n }\n\n /**\n * крайнее значение сдвига\n */\n const extremeScrollLeft =\n (textDirection === 'ltr' ? 1 : -1) * (initialScrollWidth - scrollElement.offsetWidth);\n\n let startScrollLeft = roundUpElementScrollLeft(scrollElement);\n let endScrollLeft = getScrollPosition(startScrollLeft);\n\n onScrollStart();\n\n /**\n * Если окончание прокрутки вышло за ноль\n */\n if (startScrollLeft * endScrollLeft < 0) {\n endScrollLeft = 0;\n }\n\n if (Math.abs(endScrollLeft) >= Math.abs(extremeScrollLeft)) {\n onScrollToEndBorder();\n endScrollLeft = extremeScrollLeft;\n }\n\n const startTime = now();\n\n (function scroll() {\n if (!scrollElement) {\n onScrollEnd();\n return;\n }\n\n const time = now();\n const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);\n\n const value = easeInOutSine(elapsed);\n\n const currentScrollLeft = startScrollLeft + (endScrollLeft - startScrollLeft) * value;\n scrollElement.scrollLeft = roundingAwayFromZero(currentScrollLeft);\n\n const scrollEnd =\n textDirection === 'ltr' ? Math.max(0, endScrollLeft) : Math.min(0, endScrollLeft);\n if (roundUpElementScrollLeft(scrollElement) !== scrollEnd && elapsed !== 1) {\n requestAnimationFrame(scroll);\n return;\n }\n\n onScrollEnd();\n animationQueue.shift();\n if (animationQueue.length > 0) {\n animationQueue[0]();\n }\n })();\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/HorizontalScroll\n */\nexport const HorizontalScroll = ({\n children,\n getScrollToLeft,\n getScrollToRight,\n showArrows = true,\n arrowSize = 'l',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n ...restProps\n}: HorizontalScrollProps) => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();\n\n const setCanScrollStart = textDirection === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n const setCanScrollEnd = textDirection === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef, directionRef);\n\n const animationQueue = React.useRef<VoidFunction[]>([]);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const scrollTo = React.useCallback(\n (getScrollPosition: ScrollPositionHandler) => {\n const scrollElement = scrollerRef.current;\n\n animationQueue.current.push(() =>\n doScroll({\n scrollElement,\n getScrollPosition,\n animationQueue: animationQueue.current,\n onScrollToEndBorder: () => setCanScrollEnd(false),\n onScrollEnd: () => (isCustomScrollingRef.current = false),\n onScrollStart: () => (isCustomScrollingRef.current = true),\n initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,\n scrollAnimationDuration,\n textDirection,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, textDirection, setCanScrollEnd],\n );\n\n const scrollToLeft = React.useCallback(() => {\n const getScrollPosition =\n getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToLeft, scrollTo, scrollerRef]);\n\n const scrollToRight = React.useCallback(() => {\n const getScrollPosition =\n getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);\n scrollTo(getScrollPosition);\n }, [getScrollToRight, scrollTo, scrollerRef]);\n\n const calculateArrowsVisibility = React.useCallback(() => {\n if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {\n const scrollElement = scrollerRef.current;\n\n setCanScrollStart(scrollElement.scrollLeft !== 0);\n setCanScrollEnd(\n Math.abs(roundUpElementScrollLeft(scrollElement)) + scrollElement.offsetWidth <\n scrollElement.scrollWidth,\n );\n }\n }, [showArrows, hasPointer, scrollerRef, setCanScrollStart, setCanScrollEnd]);\n\n const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);\n React.useEffect(\n function addScrollerRefToScrollEvent() {\n if (!scrollerRef.current) {\n return noop;\n }\n\n scrollEvent.add(scrollerRef.current);\n return scrollEvent.remove;\n },\n [scrollEvent, scrollerRef],\n );\n\n React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n /**\n * Прокрутка с помощью любого колеса мыши\n */\n const onwheel = React.useCallback(\n (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n },\n [scrollerRef],\n );\n\n const wheelEvent = useEventListener('wheel', onwheel);\n React.useEffect(\n function addScrollerRefToWheelEvent() {\n if (!scrollerRef.current || !scrollOnAnyWheel) {\n return noop;\n }\n\n wheelEvent.add(scrollerRef.current);\n\n return wheelEvent.remove;\n },\n [wheelEvent, scrollerRef, scrollOnAnyWheel],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['HorizontalScroll'],\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowLeft'],\n )}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(\n styles['HorizontalScroll__arrow'],\n styles['HorizontalScroll__arrowRight'],\n )}\n onClick={scrollToRight}\n />\n )}\n <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>\n <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["HorizontalScroll","now","performance","Date","roundingAwayFromZero","value","Math","ceil","floor","roundUpElementScrollLeft","el","scrollLeft","SCROLL_ONE_FRAME_TIME","doScroll","scrollElement","getScrollPosition","animationQueue","onScrollToEndBorder","onScrollEnd","onScrollStart","initialScrollWidth","scrollAnimationDuration","textDirection","extremeScrollLeft","offsetWidth","startScrollLeft","endScrollLeft","abs","startTime","scroll","time","elapsed","min","easeInOutSine","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","restProps","canScrollLeft","setCanScrollLeft","React","useState","canScrollRight","setCanScrollRight","directionRef","useDirection","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","useExternRef","hasPointer","useAdaptivityHasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","scrollEvent","useEventListener","useEffect","addScrollerRefToScrollEvent","noop","add","remove","onwheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","wheelEvent","addScrollerRefToWheelEvent","RootComponent","baseClassName","classNames","onMouseEnter","undefined","ScrollArrow","data-testid","process","env","NODE_ENV","size","offsetY","direction","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
|
|
@@ -28,7 +28,7 @@ const ModalPageHeader = (_param)=>{
|
|
|
28
28
|
"typographyProps"
|
|
29
29
|
]);
|
|
30
30
|
const platform = (0, _usePlatform.usePlatform)();
|
|
31
|
-
const { isDesktop } = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)();
|
|
31
|
+
const { isDesktop, sizeX } = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)();
|
|
32
32
|
const { labelId } = _react.useContext(_ModalPageContext.ModalPageContext);
|
|
33
33
|
return /*#__PURE__*/ _react.createElement("div", {
|
|
34
34
|
className: (0, _vkjs.classNames)("vkuiModalPageHeader", platform !== 'vkcom' && "vkuiModalPageHeader--withGaps", isDesktop && "vkuiModalPageHeader--desktop"),
|
|
@@ -44,7 +44,7 @@ const ModalPageHeader = (_param)=>{
|
|
|
44
44
|
delimiter: "none",
|
|
45
45
|
transparent: true
|
|
46
46
|
}), children), !noSeparator && /*#__PURE__*/ _react.createElement(_Separator.Separator, {
|
|
47
|
-
wide:
|
|
47
|
+
wide: sizeX === 'regular'
|
|
48
48
|
}));
|
|
49
49
|
};
|
|
50
50
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ModalPageContext } from '../ModalPage/ModalPageContext';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Omit<PanelHeaderProps, 'fixed' | 'shadow' | 'delimiter'>,\n HasRef<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n noSeparator?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n children,\n noSeparator = false,\n getRootRef,\n className,\n typographyProps,\n ...restProps\n}: ModalPageHeaderProps) => {\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n const { labelId } = React.useContext(ModalPageContext);\n\n return (\n <div\n className={classNames(\n styles['ModalPageHeader'],\n platform !== 'vkcom' && styles['ModalPageHeader--withGaps'],\n isDesktop && styles['ModalPageHeader--desktop'],\n )}\n ref={getRootRef}\n >\n <PanelHeader\n className={classNames('vkuiInternalModalPageHeader__in', className)}\n typographyProps={{\n Component: 'h2',\n id: labelId,\n ...typographyProps,\n }}\n {...restProps}\n fixed={false}\n delimiter=\"none\"\n transparent\n >\n {children}\n </PanelHeader>\n {!noSeparator && <Separator wide />}\n </div>\n );\n};\n"],"names":["ModalPageHeader","children","noSeparator","getRootRef","className","typographyProps","restProps","platform","usePlatform","isDesktop","useAdaptivityWithJSMediaQueries","labelId","React","useContext","ModalPageContext","div","classNames","ref","PanelHeader","Component","id","fixed","delimiter","transparent","Separator","wide"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;iEArBU;sBACI;iDACqB;6BACpB;kCAEK;6BACa;2BACpB;AAcnB,MAAMA,kBAAkB;QAAC,EAC9BC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,eAAe,EAEM,WADlBC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ModalPageContext } from '../ModalPage/ModalPageContext';\nimport { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n extends React.HTMLAttributes<HTMLDivElement>,\n Omit<PanelHeaderProps, 'fixed' | 'shadow' | 'delimiter'>,\n HasRef<HTMLDivElement>,\n HasRootRef<HTMLDivElement> {\n noSeparator?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n children,\n noSeparator = false,\n getRootRef,\n className,\n typographyProps,\n ...restProps\n}: ModalPageHeaderProps) => {\n const platform = usePlatform();\n const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();\n const { labelId } = React.useContext(ModalPageContext);\n\n return (\n <div\n className={classNames(\n styles['ModalPageHeader'],\n platform !== 'vkcom' && styles['ModalPageHeader--withGaps'],\n isDesktop && styles['ModalPageHeader--desktop'],\n )}\n ref={getRootRef}\n >\n <PanelHeader\n className={classNames('vkuiInternalModalPageHeader__in', className)}\n typographyProps={{\n Component: 'h2',\n id: labelId,\n ...typographyProps,\n }}\n {...restProps}\n fixed={false}\n delimiter=\"none\"\n transparent\n >\n {children}\n </PanelHeader>\n {!noSeparator && <Separator wide={sizeX === 'regular'} />}\n </div>\n );\n};\n"],"names":["ModalPageHeader","children","noSeparator","getRootRef","className","typographyProps","restProps","platform","usePlatform","isDesktop","sizeX","useAdaptivityWithJSMediaQueries","labelId","React","useContext","ModalPageContext","div","classNames","ref","PanelHeader","Component","id","fixed","delimiter","transparent","Separator","wide"],"mappings":";;;;+BAqBaA;;;eAAAA;;;;;;;iEArBU;sBACI;iDACqB;6BACpB;kCAEK;6BACa;2BACpB;AAcnB,MAAMA,kBAAkB;QAAC,EAC9BC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,eAAe,EAEM,WADlBC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,EAAEC,SAAS,EAAEC,KAAK,EAAE,GAAGC,IAAAA,gEAA+B;IAC5D,MAAM,EAAEC,OAAO,EAAE,GAAGC,OAAMC,UAAU,CAACC,kCAAgB;IAErD,qBACE,qBAACC;QACCZ,WAAWa,IAAAA,gBAAU,yBAEnBV,aAAa,4CACbE;QAEFS,KAAKf;qBAEL,qBAACgB,wBAAW;QACVf,WAAWa,IAAAA,gBAAU,EAAC,mCAAmCb;QACzDC,iBAAiB;YACfe,WAAW;YACXC,IAAIT;WACDP;OAEDC;QACJgB,OAAO;QACPC,WAAU;QACVC,aAAAA;QAECvB,WAEF,CAACC,6BAAe,qBAACuB,oBAAS;QAACC,MAAMhB,UAAU;;AAGlD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PaginationPageButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,6EAO9B,yBAAyB,
|
|
1
|
+
{"version":3,"file":"PaginationPageButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAIjD,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAKhD,MAAM,WAAW,yBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,UAAU,CAAC,iBAAiB,CAAC,EAC7B,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,6EAO9B,yBAAyB,sBAoB3B,CAAC"}
|
|
@@ -34,8 +34,6 @@ const PaginationPageButton = (_param)=>{
|
|
|
34
34
|
className: (0, _vkjs.classNames)(paginationClassNames, className),
|
|
35
35
|
activeMode: "vkuiPaginationPage--state-active",
|
|
36
36
|
hoverMode: "vkuiPaginationPage--state-hover",
|
|
37
|
-
hasActive: !isCurrent,
|
|
38
|
-
hasHover: !isCurrent,
|
|
39
37
|
focusVisibleMode: "outside",
|
|
40
38
|
"data-page": children,
|
|
41
39
|
"aria-current": isCurrent ? true : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { PaginationProps } from '../Pagination';\nimport { getPageLabelDefault } from '../utils';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement>,\n Pick<PaginationProps, 'getPageLabel'> {\n isCurrent?: boolean;\n children: number;\n}\n\nexport const PaginationPageButton = ({\n isCurrent = false,\n getPageLabel = getPageLabelDefault,\n children,\n className,\n disabled,\n ...restProps\n}: PaginationPageButtonProps) => {\n const paginationClassNames = usePaginationPageClassNames({ isCurrent, disabled });\n\n return (\n <Tappable\n className={classNames(paginationClassNames, className)}\n activeMode={styles['PaginationPage--state-active']}\n hoverMode={styles['PaginationPage--state-hover']}\n
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Pagination/PaginationPage/PaginationPageButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasRootRef } from '../../../types';\nimport { Tappable } from '../../Tappable/Tappable';\nimport { Text } from '../../Typography/Text/Text';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport { PaginationProps } from '../Pagination';\nimport { getPageLabelDefault } from '../utils';\nimport { usePaginationPageClassNames } from './usePaginationPageClasses';\nimport styles from './PaginationPage.module.css';\n\nexport interface PaginationPageButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n HasRootRef<HTMLButtonElement>,\n Pick<PaginationProps, 'getPageLabel'> {\n isCurrent?: boolean;\n children: number;\n}\n\nexport const PaginationPageButton = ({\n isCurrent = false,\n getPageLabel = getPageLabelDefault,\n children,\n className,\n disabled,\n ...restProps\n}: PaginationPageButtonProps) => {\n const paginationClassNames = usePaginationPageClassNames({ isCurrent, disabled });\n\n return (\n <Tappable\n className={classNames(paginationClassNames, className)}\n activeMode={styles['PaginationPage--state-active']}\n hoverMode={styles['PaginationPage--state-hover']}\n focusVisibleMode=\"outside\"\n data-page={children}\n aria-current={isCurrent ? true : undefined}\n disabled={disabled}\n {...restProps}\n >\n <Text normalize={false}>\n <VisuallyHidden>{getPageLabel(isCurrent)} </VisuallyHidden>\n {children}\n </Text>\n </Tappable>\n );\n};\n"],"names":["PaginationPageButton","isCurrent","getPageLabel","getPageLabelDefault","children","className","disabled","restProps","paginationClassNames","usePaginationPageClassNames","Tappable","classNames","activeMode","hoverMode","focusVisibleMode","data-page","aria-current","undefined","Text","normalize","VisuallyHidden"],"mappings":";;;;+BAmBaA;;;eAAAA;;;;;;iEAnBU;sBACI;0BAEF;sBACJ;gCACU;uBAEK;0CACQ;AAWrC,MAAMA,uBAAuB;QAAC,EACnCC,YAAY,KAAK,EACjBC,eAAeC,0BAAmB,EAClCC,QAAQ,EACRC,SAAS,EACTC,QAAQ,EAEkB,WADvBC;QALHN;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,uBAAuBC,IAAAA,qDAA2B,EAAC;QAAER;QAAWK;IAAS;IAE/E,qBACE,qBAACI,kBAAQ;QACPL,WAAWM,IAAAA,gBAAU,EAACH,sBAAsBH;QAC5CO,UAAU;QACVC,SAAS;QACTC,kBAAiB;QACjBC,aAAWX;QACXY,gBAAcf,YAAY,OAAOgB;QACjCX,UAAUA;OACNC,0BAEJ,qBAACW,UAAI;QAACC,WAAW;qBACf,qBAACC,8BAAc,QAAElB,aAAaD,YAAW,MACxCG;AAIT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAa,MAAM,0BAA0B,CAAC;AAE7E,OAAO,EAA2C,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqBrF,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,EAAE,UAAU,EAAE,WAAW;IAC3E;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iEAMvB,kBAAkB,
|
|
1
|
+
{"version":3,"file":"PullToRefresh.d.ts","sourceRoot":"","sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,QAAQ,EAAU,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAa,MAAM,0BAA0B,CAAC;AAE7E,OAAO,EAA2C,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAqBrF,MAAM,WAAW,kBAAmB,SAAQ,QAAQ,EAAE,UAAU,EAAE,WAAW;IAC3E;;OAEG;IACH,SAAS,EAAE,WAAW,CAAC;IACvB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,MAAM,CAAC,EAAE,sBAAsB,CAAC;CACjC;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iEAMvB,kBAAkB,sBAiPpB,CAAC"}
|
|
@@ -186,6 +186,7 @@ const PullToRefresh = (_param)=>{
|
|
|
186
186
|
setTouchDown(true);
|
|
187
187
|
startYRef.current = event.startY;
|
|
188
188
|
};
|
|
189
|
+
const iosRefreshStartedRef = _react.useRef(false);
|
|
189
190
|
const onTouchMove = (event)=>{
|
|
190
191
|
const { isY, shiftY } = event;
|
|
191
192
|
const { start, max } = initParams;
|
|
@@ -200,7 +201,9 @@ const PullToRefresh = (_param)=>{
|
|
|
200
201
|
setSpinnerProgress((0, _math.clamp)(progress, 0, 80));
|
|
201
202
|
setCanRefresh(progress > 80);
|
|
202
203
|
setContentShift((currentY + 10) * 2.3);
|
|
203
|
-
|
|
204
|
+
const iosCanStartRefreshDuringGesture = platform === 'ios' && progress > 85 && !refreshing && !iosRefreshStartedRef.current;
|
|
205
|
+
if (iosCanStartRefreshDuringGesture) {
|
|
206
|
+
iosRefreshStartedRef.current = true;
|
|
204
207
|
runRefreshing();
|
|
205
208
|
}
|
|
206
209
|
} else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {
|
|
@@ -214,6 +217,7 @@ const PullToRefresh = (_param)=>{
|
|
|
214
217
|
const onTouchEnd = ()=>{
|
|
215
218
|
setWatching(false);
|
|
216
219
|
setTouchDown(false);
|
|
220
|
+
iosRefreshStartedRef.current = false;
|
|
217
221
|
};
|
|
218
222
|
const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;
|
|
219
223
|
let contentTransform = '';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent as TouchEventInternal, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nconst WAIT_FETCHING_TIMEOUT_MS = 1000;\n\nfunction cancelEvent(event: TouchEventInternal) {\n /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */\n if (!event) {\n return false;\n }\n if ('preventDefault' in event.originalEvent && event.originalEvent.cancelable) {\n event.originalEvent.preventDefault();\n }\n if ('stopPropagation' in event.originalEvent) {\n event.originalEvent.stopPropagation();\n }\n return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n /**\n * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n */\n onRefresh: AnyFunction;\n /**\n * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n */\n isFetching?: boolean;\n /** @ignore */\n scroll?: ScrollContextInterface;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n children,\n isFetching,\n onRefresh,\n className,\n ...restProps\n}: PullToRefreshProps) => {\n const platform = usePlatform();\n const scroll = useScroll();\n const { window, document } = useDOM();\n const prevIsFetching = usePrevious(isFetching);\n\n const initParams = React.useMemo(\n () => ({\n start: platform === 'ios' ? -10 : -45,\n max: platform === 'ios' ? 50 : 80,\n maxY: platform === 'ios' ? 400 : 80,\n refreshing: platform === 'ios' ? 36 : 50,\n positionMultiplier: platform === 'ios' ? 0.21 : 1,\n }),\n [platform],\n );\n\n const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n const [watching, setWatching] = React.useState(false);\n const [refreshing, setRefreshing] = React.useState(false);\n const [canRefresh, setCanRefresh] = React.useState(false);\n const [touchDown, setTouchDown] = React.useState(false);\n const prevTouchDown = usePrevious(touchDown);\n\n const touchY = React.useRef(0);\n const [contentShift, setContentShift] = React.useState(0);\n const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n const resetRefreshingState = React.useCallback(() => {\n setWatching(false);\n setCanRefresh(false);\n setRefreshing(false);\n setSpinnerY(initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }, [initParams]);\n\n const onRefreshingFinish = React.useCallback(() => {\n if (!touchDown) {\n resetRefreshingState();\n }\n }, [touchDown, resetRefreshingState]);\n\n const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n onRefreshingFinish();\n }\n }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n clearTimeout(waitFetchingTimeoutId.current);\n }\n }, [isFetching, prevIsFetching]);\n\n const runRefreshing = React.useCallback(() => {\n if (!refreshing && onRefresh) {\n // cleanup if the consumer does not start fetching in 1s\n clearTimeout(waitFetchingTimeoutId.current);\n waitFetchingTimeoutId.current = setTimeout(onRefreshingFinish, WAIT_FETCHING_TIMEOUT_MS);\n\n setRefreshing(true);\n setSpinnerY((prevSpinnerY) => (platform === 'ios' ? prevSpinnerY : initParams.refreshing));\n\n onRefresh();\n }\n }, [refreshing, onRefresh, onRefreshingFinish, platform, initParams.refreshing]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n if (!refreshing && canRefresh) {\n runRefreshing();\n } else if (refreshing && !isFetching) {\n // only iOS can start refresh before gesture end\n resetRefreshingState();\n /* istanbul ignore if: TODO написать тест */\n } else {\n // refreshing && isFetching: refresh in progress\n // OR !refreshing && !canRefresh: pull was not strong enough\n setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }\n }\n }, [\n initParams,\n prevIsFetching,\n isFetching,\n onRefreshingFinish,\n prevTouchDown,\n touchDown,\n refreshing,\n canRefresh,\n runRefreshing,\n ]);\n\n useIsomorphicLayoutEffect(\n function toggleBodyOverscrollBehavior() {\n /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n if (!window || !document) {\n return;\n }\n\n /**\n * ⚠️ В частности, необходимо для iOS 15. Начиная с этой версии в Safari добавили\n * pull-to-refresh. CSS св-во `overflow-behavior` появился только с iOS 16.\n *\n * Во вторую очередь, полезна блокированием скролла, чтобы пользователь дождался обновления\n * данных.\n */\n /* istanbul ignore next: в jest не протестировать */\n const handleWindowTouchMoveForPreventIOSViewportBounce = (event: TouchEvent) => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n if (watching || refreshing) {\n // eslint-disable-next-line no-restricted-properties\n document.documentElement.classList.add('vkui--disable-overscroll-behavior');\n /* istanbul ignore next: в jest не протестировать */\n window.addEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce, {\n passive: false,\n });\n }\n\n return () => {\n // eslint-disable-next-line no-restricted-properties\n document.documentElement.classList.remove('vkui--disable-overscroll-behavior');\n /* istanbul ignore next: в jest не протестировать */\n window.removeEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce);\n };\n },\n [window, document, watching, refreshing],\n );\n\n const startYRef = React.useRef(0);\n\n const onTouchStart = (event: TouchEventInternal) => {\n if (refreshing) {\n cancelEvent(event);\n return;\n }\n setTouchDown(true);\n startYRef.current = event.startY;\n };\n\n const onTouchMove = (event: TouchEventInternal) => {\n const { isY, shiftY } = event;\n const { start, max } = initParams;\n const pageYOffset = scroll?.getScroll().y;\n\n if (watching && touchDown) {\n cancelEvent(event);\n\n const { positionMultiplier, maxY } = initParams;\n\n const shift = Math.max(0, shiftY - touchY.current);\n\n const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n setSpinnerY(currentY);\n setSpinnerProgress(clamp(progress, 0, 80));\n setCanRefresh(progress > 80);\n setContentShift((currentY + 10) * 2.3);\n\n if (progress > 85 && !refreshing && platform === 'ios') {\n runRefreshing();\n }\n } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n cancelEvent(event);\n\n touchY.current = shiftY;\n setWatching(true);\n setSpinnerY(start);\n setSpinnerProgress(0);\n }\n };\n\n const onTouchEnd = () => {\n setWatching(false);\n setTouchDown(false);\n };\n\n const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n let contentTransform = '';\n\n if (platform === 'ios' && refreshing && !touchDown) {\n contentTransform = 'translate3d(0, 100px, 0)';\n } else if (platform === 'ios' && (contentShift || refreshing)) {\n contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n }\n\n return (\n <TouchRootContext.Provider value={true}>\n <Touch\n aria-live=\"polite\"\n aria-busy={!!isFetching}\n {...restProps}\n onStart={onTouchStart}\n onMove={onTouchMove}\n onEnd={onTouchEnd}\n className={classNames(\n styles['PullToRefresh'],\n platform === 'ios' && styles['PullToRefresh--ios'],\n watching && styles['PullToRefresh--watching'],\n refreshing && styles['PullToRefresh--refreshing'],\n className,\n )}\n >\n <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n <PullToRefreshSpinner\n style={{\n transform: spinnerTransform,\n WebkitTransform: spinnerTransform,\n opacity: watching || refreshing || canRefresh ? 1 : 0,\n }}\n on={refreshing}\n progress={refreshing ? undefined : spinnerProgress}\n />\n </FixedLayout>\n\n <div\n className={styles['PullToRefresh__content']}\n style={{\n transform: contentTransform,\n WebkitTransform: contentTransform,\n }}\n >\n {children}\n </div>\n </Touch>\n </TouchRootContext.Provider>\n );\n};\n"],"names":["PullToRefresh","WAIT_FETCHING_TIMEOUT_MS","cancelEvent","event","originalEvent","cancelable","preventDefault","stopPropagation","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","window","document","useDOM","prevIsFetching","usePrevious","initParams","React","useMemo","start","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","resetRefreshingState","useCallback","onRefreshingFinish","waitFetchingTimeoutId","useIsomorphicLayoutEffect","undefined","clearTimeout","current","runRefreshing","setTimeout","prevSpinnerY","toggleBodyOverscrollBehavior","handleWindowTouchMoveForPreventIOSViewportBounce","documentElement","classList","add","addEventListener","passive","remove","removeEventListener","startYRef","onTouchStart","startY","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","currentY","clamp","progress","abs","onTouchEnd","spinnerTransform","contentTransform","TouchRootContext","Provider","value","Touch","aria-live","aria-busy","onStart","onMove","onEnd","classNames","FixedLayout","useParentWidth","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/PullToRefresh/PullToRefresh.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { DOMProps, useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AnyFunction, HasChildren } from '../../types';\nimport { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { Touch, TouchEvent as TouchEventInternal, TouchProps } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { PullToRefreshSpinner } from './PullToRefreshSpinner';\nimport styles from './PullToRefresh.module.css';\n\nconst WAIT_FETCHING_TIMEOUT_MS = 1000;\n\nfunction cancelEvent(event: TouchEventInternal) {\n /* istanbul ignore if: неясно в какой ситуации `event` из `Touch` может быть не определён */\n if (!event) {\n return false;\n }\n if ('preventDefault' in event.originalEvent && event.originalEvent.cancelable) {\n event.originalEvent.preventDefault();\n }\n if ('stopPropagation' in event.originalEvent) {\n event.originalEvent.stopPropagation();\n }\n return false;\n}\n\nexport interface PullToRefreshProps extends DOMProps, TouchProps, HasChildren {\n /**\n * Будет вызвана для обновления контента (прим.: функция должна быть мемоизированным коллбэком)\n */\n onRefresh: AnyFunction;\n /**\n * Определяет, выполняется ли обновление. Для скрытия спиннера после получения контента необходимо передать `false`\n */\n isFetching?: boolean;\n /** @ignore */\n scroll?: ScrollContextInterface;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PullToRefresh\n */\nexport const PullToRefresh = ({\n children,\n isFetching,\n onRefresh,\n className,\n ...restProps\n}: PullToRefreshProps) => {\n const platform = usePlatform();\n const scroll = useScroll();\n const { window, document } = useDOM();\n const prevIsFetching = usePrevious(isFetching);\n\n const initParams = React.useMemo(\n () => ({\n start: platform === 'ios' ? -10 : -45,\n max: platform === 'ios' ? 50 : 80,\n maxY: platform === 'ios' ? 400 : 80,\n refreshing: platform === 'ios' ? 36 : 50,\n positionMultiplier: platform === 'ios' ? 0.21 : 1,\n }),\n [platform],\n );\n\n const [spinnerY, setSpinnerY] = React.useState(initParams.start);\n const [watching, setWatching] = React.useState(false);\n const [refreshing, setRefreshing] = React.useState(false);\n const [canRefresh, setCanRefresh] = React.useState(false);\n const [touchDown, setTouchDown] = React.useState(false);\n const prevTouchDown = usePrevious(touchDown);\n\n const touchY = React.useRef(0);\n const [contentShift, setContentShift] = React.useState(0);\n const [spinnerProgress, setSpinnerProgress] = React.useState(0);\n\n const resetRefreshingState = React.useCallback(() => {\n setWatching(false);\n setCanRefresh(false);\n setRefreshing(false);\n setSpinnerY(initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }, [initParams]);\n\n const onRefreshingFinish = React.useCallback(() => {\n if (!touchDown) {\n resetRefreshingState();\n }\n }, [touchDown, resetRefreshingState]);\n\n const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {\n onRefreshingFinish();\n }\n }, [prevIsFetching, isFetching, onRefreshingFinish]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {\n clearTimeout(waitFetchingTimeoutId.current);\n }\n }, [isFetching, prevIsFetching]);\n\n const runRefreshing = React.useCallback(() => {\n if (!refreshing && onRefresh) {\n // cleanup if the consumer does not start fetching in 1s\n clearTimeout(waitFetchingTimeoutId.current);\n waitFetchingTimeoutId.current = setTimeout(onRefreshingFinish, WAIT_FETCHING_TIMEOUT_MS);\n\n setRefreshing(true);\n setSpinnerY((prevSpinnerY) => (platform === 'ios' ? prevSpinnerY : initParams.refreshing));\n\n onRefresh();\n }\n }, [refreshing, onRefresh, onRefreshingFinish, platform, initParams.refreshing]);\n\n useIsomorphicLayoutEffect(() => {\n if (prevTouchDown !== undefined && prevTouchDown && !touchDown) {\n if (!refreshing && canRefresh) {\n runRefreshing();\n } else if (refreshing && !isFetching) {\n // only iOS can start refresh before gesture end\n resetRefreshingState();\n /* istanbul ignore if: TODO написать тест */\n } else {\n // refreshing && isFetching: refresh in progress\n // OR !refreshing && !canRefresh: pull was not strong enough\n setSpinnerY(refreshing ? initParams.refreshing : initParams.start);\n setSpinnerProgress(0);\n setContentShift(0);\n }\n }\n }, [\n initParams,\n prevIsFetching,\n isFetching,\n onRefreshingFinish,\n prevTouchDown,\n touchDown,\n refreshing,\n canRefresh,\n runRefreshing,\n ]);\n\n useIsomorphicLayoutEffect(\n function toggleBodyOverscrollBehavior() {\n /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */\n if (!window || !document) {\n return;\n }\n\n /**\n * ⚠️ В частности, необходимо для iOS 15. Начиная с этой версии в Safari добавили\n * pull-to-refresh. CSS св-во `overflow-behavior` появился только с iOS 16.\n *\n * Во вторую очередь, полезна блокированием скролла, чтобы пользователь дождался обновления\n * данных.\n */\n /* istanbul ignore next: в jest не протестировать */\n const handleWindowTouchMoveForPreventIOSViewportBounce = (event: TouchEvent) => {\n event.preventDefault();\n event.stopPropagation();\n };\n\n if (watching || refreshing) {\n // eslint-disable-next-line no-restricted-properties\n document.documentElement.classList.add('vkui--disable-overscroll-behavior');\n /* istanbul ignore next: в jest не протестировать */\n window.addEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce, {\n passive: false,\n });\n }\n\n return () => {\n // eslint-disable-next-line no-restricted-properties\n document.documentElement.classList.remove('vkui--disable-overscroll-behavior');\n /* istanbul ignore next: в jest не протестировать */\n window.removeEventListener('touchmove', handleWindowTouchMoveForPreventIOSViewportBounce);\n };\n },\n [window, document, watching, refreshing],\n );\n\n const startYRef = React.useRef(0);\n\n const onTouchStart = (event: TouchEventInternal) => {\n if (refreshing) {\n cancelEvent(event);\n return;\n }\n setTouchDown(true);\n startYRef.current = event.startY;\n };\n\n const iosRefreshStartedRef = React.useRef(false);\n const onTouchMove = (event: TouchEventInternal) => {\n const { isY, shiftY } = event;\n const { start, max } = initParams;\n const pageYOffset = scroll?.getScroll().y;\n\n if (watching && touchDown) {\n cancelEvent(event);\n\n const { positionMultiplier, maxY } = initParams;\n\n const shift = Math.max(0, shiftY - touchY.current);\n\n const currentY = clamp(start + shift * positionMultiplier, start, maxY);\n const progress = currentY > -10 ? Math.abs((currentY + 10) / max) * 80 : 0;\n\n setSpinnerY(currentY);\n setSpinnerProgress(clamp(progress, 0, 80));\n setCanRefresh(progress > 80);\n setContentShift((currentY + 10) * 2.3);\n\n const iosCanStartRefreshDuringGesture =\n platform === 'ios' && progress > 85 && !refreshing && !iosRefreshStartedRef.current;\n if (iosCanStartRefreshDuringGesture) {\n iosRefreshStartedRef.current = true;\n runRefreshing();\n }\n } else if (isY && pageYOffset === 0 && shiftY > 0 && !refreshing && touchDown) {\n cancelEvent(event);\n\n touchY.current = shiftY;\n setWatching(true);\n setSpinnerY(start);\n setSpinnerProgress(0);\n }\n };\n\n const onTouchEnd = () => {\n setWatching(false);\n setTouchDown(false);\n iosRefreshStartedRef.current = false;\n };\n\n const spinnerTransform = `translate3d(0, ${spinnerY}px, 0)`;\n let contentTransform = '';\n\n if (platform === 'ios' && refreshing && !touchDown) {\n contentTransform = 'translate3d(0, 100px, 0)';\n } else if (platform === 'ios' && (contentShift || refreshing)) {\n contentTransform = `translate3d(0, ${contentShift}px, 0)`;\n }\n\n return (\n <TouchRootContext.Provider value={true}>\n <Touch\n aria-live=\"polite\"\n aria-busy={!!isFetching}\n {...restProps}\n onStart={onTouchStart}\n onMove={onTouchMove}\n onEnd={onTouchEnd}\n className={classNames(\n styles['PullToRefresh'],\n platform === 'ios' && styles['PullToRefresh--ios'],\n watching && styles['PullToRefresh--watching'],\n refreshing && styles['PullToRefresh--refreshing'],\n className,\n )}\n >\n <FixedLayout className={styles['PullToRefresh__controls']} useParentWidth>\n <PullToRefreshSpinner\n style={{\n transform: spinnerTransform,\n WebkitTransform: spinnerTransform,\n opacity: watching || refreshing || canRefresh ? 1 : 0,\n }}\n on={refreshing}\n progress={refreshing ? undefined : spinnerProgress}\n />\n </FixedLayout>\n\n <div\n className={styles['PullToRefresh__content']}\n style={{\n transform: contentTransform,\n WebkitTransform: contentTransform,\n }}\n >\n {children}\n </div>\n </Touch>\n </TouchRootContext.Provider>\n );\n};\n"],"names":["PullToRefresh","WAIT_FETCHING_TIMEOUT_MS","cancelEvent","event","originalEvent","cancelable","preventDefault","stopPropagation","children","isFetching","onRefresh","className","restProps","platform","usePlatform","scroll","useScroll","window","document","useDOM","prevIsFetching","usePrevious","initParams","React","useMemo","start","max","maxY","refreshing","positionMultiplier","spinnerY","setSpinnerY","useState","watching","setWatching","setRefreshing","canRefresh","setCanRefresh","touchDown","setTouchDown","prevTouchDown","touchY","useRef","contentShift","setContentShift","spinnerProgress","setSpinnerProgress","resetRefreshingState","useCallback","onRefreshingFinish","waitFetchingTimeoutId","useIsomorphicLayoutEffect","undefined","clearTimeout","current","runRefreshing","setTimeout","prevSpinnerY","toggleBodyOverscrollBehavior","handleWindowTouchMoveForPreventIOSViewportBounce","documentElement","classList","add","addEventListener","passive","remove","removeEventListener","startYRef","onTouchStart","startY","iosRefreshStartedRef","onTouchMove","isY","shiftY","pageYOffset","getScroll","y","shift","Math","currentY","clamp","progress","abs","iosCanStartRefreshDuringGesture","onTouchEnd","spinnerTransform","contentTransform","TouchRootContext","Provider","value","Touch","aria-live","aria-busy","onStart","onMove","onEnd","classNames","FixedLayout","useParentWidth","PullToRefreshSpinner","style","transform","WebkitTransform","opacity","on","div"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,KAAK,2BAA2B,EAChC,KAAK,WAAW,EACjB,MAAM,8BAA8B,CAAC;AAEtC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,MAAM,kHAmDlB,CAAC"}
|
|
@@ -18,8 +18,7 @@ const Select = (_param)=>{
|
|
|
18
18
|
var { children } = _param, props = _object_without_properties._(_param, [
|
|
19
19
|
"children"
|
|
20
20
|
]);
|
|
21
|
-
const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal,
|
|
22
|
-
= _object_without_properties._(props, [
|
|
21
|
+
const { options = [], searchable, emptyText, onInputChange, filterFn, popupDirection, renderOption, renderDropdown, fetching, onClose, onOpen, icon, ClearButton, allowClearButton, clearButtonTestId, dropdownOffsetDistance, dropdownAutoWidth, forceDropdownPortal, noMaxHeight, autoHideScrollbar, autoHideScrollbarDelay, labelTextTestId, nativeSelectTestId, after, mode } = props, restProps = _object_without_properties._(props, [
|
|
23
22
|
"options",
|
|
24
23
|
"searchable",
|
|
25
24
|
"emptyText",
|
|
@@ -34,14 +33,20 @@ const Select = (_param)=>{
|
|
|
34
33
|
"icon",
|
|
35
34
|
"ClearButton",
|
|
36
35
|
"allowClearButton",
|
|
36
|
+
"clearButtonTestId",
|
|
37
37
|
"dropdownOffsetDistance",
|
|
38
38
|
"dropdownAutoWidth",
|
|
39
39
|
"forceDropdownPortal",
|
|
40
|
-
"
|
|
40
|
+
"noMaxHeight",
|
|
41
41
|
"autoHideScrollbar",
|
|
42
|
-
"autoHideScrollbarDelay"
|
|
42
|
+
"autoHideScrollbarDelay",
|
|
43
|
+
"labelTextTestId",
|
|
44
|
+
"nativeSelectTestId",
|
|
45
|
+
"after",
|
|
46
|
+
"mode"
|
|
43
47
|
]);
|
|
44
48
|
const hasPointer = (0, _useAdaptivityHasPointer.useAdaptivityHasPointer)();
|
|
49
|
+
const nativeProps = restProps;
|
|
45
50
|
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, (hasPointer === undefined || hasPointer) && /*#__PURE__*/ _react.createElement(_CustomSelect.CustomSelect, props), (hasPointer === undefined || !hasPointer) && /*#__PURE__*/ _react.createElement(_NativeSelect.NativeSelect, nativeProps, options.map(({ label, value })=>/*#__PURE__*/ _react.createElement("option", {
|
|
46
51
|
value: value,
|
|
47
52
|
key: `${value}`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport {\n CustomSelect,\n type CustomSelectOptionInterface,\n type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect } from '../NativeSelect/NativeSelect';\
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HasOnlyExpectedProps } from '../../types';\nimport {\n CustomSelect,\n type CustomSelectOptionInterface,\n type SelectProps,\n} from '../CustomSelect/CustomSelect';\nimport { NativeSelect, type NativeSelectProps } from '../NativeSelect/NativeSelect';\nexport type SelectType = 'default' | 'plain' | 'accent';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Select\n */\nexport const Select = <OptionT extends CustomSelectOptionInterface>({\n children,\n ...props\n}: SelectProps<OptionT>) => {\n const {\n options = [],\n searchable,\n emptyText,\n onInputChange,\n filterFn,\n popupDirection,\n renderOption,\n renderDropdown,\n fetching,\n onClose,\n onOpen,\n icon,\n ClearButton,\n allowClearButton,\n clearButtonTestId,\n dropdownOffsetDistance,\n dropdownAutoWidth,\n forceDropdownPortal,\n noMaxHeight,\n autoHideScrollbar,\n autoHideScrollbarDelay,\n labelTextTestId,\n nativeSelectTestId,\n after,\n mode,\n ...restProps\n } = props;\n\n const hasPointer = useAdaptivityHasPointer();\n\n const nativeProps: HasOnlyExpectedProps<typeof restProps, NativeSelectProps> = restProps;\n\n return (\n <React.Fragment>\n {(hasPointer === undefined || hasPointer) && <CustomSelect {...props} />}\n {(hasPointer === undefined || !hasPointer) && (\n <NativeSelect {...nativeProps}>\n {options.map(({ label, value }) => (\n <option value={value} key={`${value}`}>\n {label}\n </option>\n ))}\n </NativeSelect>\n )}\n </React.Fragment>\n );\n};\n"],"names":["Select","children","props","options","searchable","emptyText","onInputChange","filterFn","popupDirection","renderOption","renderDropdown","fetching","onClose","onOpen","icon","ClearButton","allowClearButton","clearButtonTestId","dropdownOffsetDistance","dropdownAutoWidth","forceDropdownPortal","noMaxHeight","autoHideScrollbar","autoHideScrollbarDelay","labelTextTestId","nativeSelectTestId","after","mode","restProps","hasPointer","useAdaptivityHasPointer","nativeProps","React","Fragment","undefined","CustomSelect","NativeSelect","map","label","value","option","key"],"mappings":";;;;+BAcaA;;;eAAAA;;;;;iEAdU;yCACiB;8BAMjC;8BAC8C;AAM9C,MAAMA,SAAS;QAA8C,EAClEC,QAAQ,EAEa,WADlBC;QADHD;;IAGA,MAAM,EACJE,UAAU,EAAE,EACZC,UAAU,EACVC,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,cAAc,EACdC,YAAY,EACZC,cAAc,EACdC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,iBAAiB,EACjBC,mBAAmB,EACnBC,WAAW,EACXC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,KAAK,EACLC,IAAI,EAEL,GAAGzB,OADC0B,yCACD1B;QA1BFC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAIF,MAAME,aAAaC,IAAAA,gDAAuB;IAE1C,MAAMC,cAAyEH;IAE/E,qBACE,qBAACI,OAAMC,QAAQ,QACZ,AAACJ,CAAAA,eAAeK,aAAaL,UAAS,mBAAM,qBAACM,0BAAY,EAAKjC,QAC9D,AAAC2B,CAAAA,eAAeK,aAAa,CAACL,UAAS,mBACtC,qBAACO,0BAAY,EAAKL,aACf5B,QAAQkC,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAE,iBAC5B,qBAACC;YAAOD,OAAOA;YAAOE,KAAK,CAAC,EAAEF,MAAM,CAAC;WAClCD;AAOf"}
|
|
@@ -26,7 +26,7 @@ const _RootComponent = require("../RootComponent/RootComponent");
|
|
|
26
26
|
const _Touch = require("../Touch/Touch");
|
|
27
27
|
const _Basic = require("./subcomponents/Basic/Basic");
|
|
28
28
|
const Snackbar = (_param)=>{
|
|
29
|
-
var { children, layout: layoutProps
|
|
29
|
+
var { children, layout: layoutProps, action, before, after, duration = 4000, onActionClick, onClose, mode = 'default', subtitle, offsetY, style } = _param, restProps = _object_without_properties._(_param, [
|
|
30
30
|
"children",
|
|
31
31
|
"layout",
|
|
32
32
|
"action",
|
|
@@ -121,7 +121,7 @@ const Snackbar = (_param)=>{
|
|
|
121
121
|
_react.useEffect(()=>closeTimeout.set(), [
|
|
122
122
|
closeTimeout
|
|
123
123
|
]);
|
|
124
|
-
const layout = after || isDesktop || subtitle ? 'vertical' :
|
|
124
|
+
const layout = layoutProps || (after || isDesktop || subtitle ? 'vertical' : 'horizontal');
|
|
125
125
|
return /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, null, /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
|
|
126
126
|
baseClassName: (0, _vkjs.classNames)("vkuiSnackbar", platform === 'ios' && "vkuiSnackbar--ios", closing && "vkuiSnackbar--closing", touched && "vkuiSnackbar--touched", isDesktop && "vkuiSnackbar--desktop"),
|
|
127
127
|
style: offsetY ? _object_spread_props._(_object_spread._({}, style), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { rubber } from '../../lib/touch';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Basic, BasicProps } from './subcomponents/Basic/Basic';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, BasicProps {\n /**\n * Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n */\n action?: React.ReactNode;\n\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (e: React.MouseEvent) => void;\n\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n */\n offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n children,\n layout: layoutProps = 'horizontal',\n action,\n before,\n after,\n duration = 4000,\n onActionClick,\n onClose,\n mode = 'default',\n subtitle,\n offsetY,\n style,\n ...restProps\n}: SnackbarProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivityWithJSMediaQueries();\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const [touched, setTouched] = React.useState(false);\n\n const shiftXPercentRef = React.useRef<number>(0);\n const shiftXCurrentRef = React.useRef<number>(0);\n\n const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n const transitionFinishDurationFallback = platform === 'ios' ? 320 : 400;\n\n const close = () => {\n setClosing(true);\n waitTransitionFinish(\n innerElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n };\n\n const handleActionClick = (e: React.MouseEvent) => {\n close();\n\n if (action && typeof onActionClick === 'function') {\n onActionClick(e);\n }\n };\n\n const closeTimeout = useTimeout(close, duration);\n\n const setBodyTransform = (percent: number) => {\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (bodyElRef.current) {\n bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n }\n });\n };\n\n const onTouchStart = closeTimeout.clear;\n\n const onTouchMoveX = (event: TouchEvent) => {\n const { shiftX, originalEvent } = event;\n originalEvent.preventDefault();\n\n if (!touched) {\n setTouched(true);\n }\n\n shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== 'ios');\n\n setBodyTransform(shiftXCurrentRef.current);\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n let callback: VoidFunction | undefined;\n\n if (touched) {\n let shiftXCurrent = shiftXCurrentRef.current;\n const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n if (isDesktop && shiftXCurrent <= -50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(-120);\n } else if (!isDesktop && shiftXCurrent >= 50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(120);\n } else {\n callback = () => {\n closeTimeout.set();\n setBodyTransform(0);\n };\n }\n } else {\n closeTimeout.set();\n }\n\n setTouched(false);\n callback && requestAnimationFrame(callback);\n };\n\n React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n const layout = after || isDesktop || subtitle ? 'vertical' : layoutProps;\n\n return (\n <AppRootPortal>\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Snackbar'],\n platform === 'ios' && styles['Snackbar--ios'],\n closing && styles['Snackbar--closing'],\n touched && styles['Snackbar--touched'],\n isDesktop && styles['Snackbar--desktop'],\n )}\n style={offsetY ? { ...style, bottom: offsetY } : style}\n >\n <Touch\n className={styles['Snackbar__in']}\n getRootRef={innerElRef}\n onStart={onTouchStart}\n onMoveX={onTouchMoveX}\n onEnd={onTouchEnd}\n >\n <Basic\n className={styles['Snackbar__snackbar']}\n getRootRef={bodyElRef}\n layout={layout}\n mode={mode}\n before={before}\n subtitle={subtitle}\n action={\n action && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={mode === 'dark' ? 'overlay' : 'accent'}\n size=\"s\"\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )\n }\n after={after}\n >\n {children}\n </Basic>\n </Touch>\n </RootComponent>\n </AppRootPortal>\n );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","closing","setClosing","React","useState","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","RootComponent","baseClassName","classNames","bottom","Touch","className","getRootRef","onStart","onMoveX","onEnd","Basic","Button","align","appearance","size","onClick"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Snackbar/Snackbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { ViewWidth } from '../../lib/adaptivity';\nimport { rubber } from '../../lib/touch';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { Button } from '../Button/Button';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { Basic, BasicProps } from './subcomponents/Basic/Basic';\nimport styles from './Snackbar.module.css';\n\nexport interface SnackbarProps extends HTMLAttributesWithRootRef<HTMLElement>, BasicProps {\n /**\n * Название кнопки действия в уведомлении\n * Не может использоваться одновременно с `subtitle`\n */\n action?: React.ReactNode;\n\n /**\n * Будет вызвано при клике на кнопку действия\n */\n onActionClick?: (e: React.MouseEvent) => void;\n\n /**\n * Время в миллисекундах, через которое плашка скроется\n */\n duration?: number;\n /**\n * Обработчик закрытия уведомления\n */\n onClose: () => void;\n /**\n * Величина отступа снизу. Используется для позиционирования элемента в случае, когда нежелательно, чтобы Snackbar при появлении перекрывал важные элементы интерфейса.\n */\n offsetY?: React.CSSProperties['bottom'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Snackbar\n */\nexport const Snackbar = ({\n children,\n layout: layoutProps,\n action,\n before,\n after,\n duration = 4000,\n onActionClick,\n onClose,\n mode = 'default',\n subtitle,\n offsetY,\n style,\n ...restProps\n}: SnackbarProps) => {\n const platform = usePlatform();\n const { viewWidth } = useAdaptivityWithJSMediaQueries();\n const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n const { waitTransitionFinish } = useWaitTransitionFinish();\n\n const [closing, setClosing] = React.useState(false);\n const [touched, setTouched] = React.useState(false);\n\n const shiftXPercentRef = React.useRef<number>(0);\n const shiftXCurrentRef = React.useRef<number>(0);\n\n const bodyElRef = React.useRef<HTMLDivElement | null>(null);\n const innerElRef = React.useRef<HTMLDivElement | null>(null);\n\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n\n const transitionFinishDurationFallback = platform === 'ios' ? 320 : 400;\n\n const close = () => {\n setClosing(true);\n waitTransitionFinish(\n innerElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n };\n\n const handleActionClick = (e: React.MouseEvent) => {\n close();\n\n if (action && typeof onActionClick === 'function') {\n onActionClick(e);\n }\n };\n\n const closeTimeout = useTimeout(close, duration);\n\n const setBodyTransform = (percent: number) => {\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (bodyElRef.current) {\n bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;\n }\n });\n };\n\n const onTouchStart = closeTimeout.clear;\n\n const onTouchMoveX = (event: TouchEvent) => {\n const { shiftX, originalEvent } = event;\n originalEvent.preventDefault();\n\n if (!touched) {\n setTouched(true);\n }\n\n shiftXPercentRef.current = (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;\n shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform !== 'ios');\n\n setBodyTransform(shiftXCurrentRef.current);\n };\n\n const onTouchEnd = (e: TouchEvent) => {\n let callback: VoidFunction | undefined;\n\n if (touched) {\n let shiftXCurrent = shiftXCurrentRef.current;\n const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;\n shiftXCurrent = shiftXCurrent + expectTranslateY;\n\n if (isDesktop && shiftXCurrent <= -50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(-120);\n } else if (!isDesktop && shiftXCurrent >= 50) {\n closeTimeout.clear();\n waitTransitionFinish(\n bodyElRef.current,\n () => {\n onClose();\n },\n transitionFinishDurationFallback,\n );\n setBodyTransform(120);\n } else {\n callback = () => {\n closeTimeout.set();\n setBodyTransform(0);\n };\n }\n } else {\n closeTimeout.set();\n }\n\n setTouched(false);\n callback && requestAnimationFrame(callback);\n };\n\n React.useEffect(() => closeTimeout.set(), [closeTimeout]);\n\n const layout = layoutProps || (after || isDesktop || subtitle ? 'vertical' : 'horizontal');\n\n return (\n <AppRootPortal>\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles['Snackbar'],\n platform === 'ios' && styles['Snackbar--ios'],\n closing && styles['Snackbar--closing'],\n touched && styles['Snackbar--touched'],\n isDesktop && styles['Snackbar--desktop'],\n )}\n style={offsetY ? { ...style, bottom: offsetY } : style}\n >\n <Touch\n className={styles['Snackbar__in']}\n getRootRef={innerElRef}\n onStart={onTouchStart}\n onMoveX={onTouchMoveX}\n onEnd={onTouchEnd}\n >\n <Basic\n className={styles['Snackbar__snackbar']}\n getRootRef={bodyElRef}\n layout={layout}\n mode={mode}\n before={before}\n subtitle={subtitle}\n action={\n action && (\n <Button\n align=\"left\"\n mode=\"link\"\n appearance={mode === 'dark' ? 'overlay' : 'accent'}\n size=\"s\"\n onClick={handleActionClick}\n >\n {action}\n </Button>\n )\n }\n after={after}\n >\n {children}\n </Basic>\n </Touch>\n </RootComponent>\n </AppRootPortal>\n );\n};\n\nSnackbar.Basic = Basic;\n"],"names":["Snackbar","children","layout","layoutProps","action","before","after","duration","onActionClick","onClose","mode","subtitle","offsetY","style","restProps","platform","usePlatform","viewWidth","useAdaptivityWithJSMediaQueries","isDesktop","ViewWidth","SMALL_TABLET","waitTransitionFinish","useWaitTransitionFinish","closing","setClosing","React","useState","touched","setTouched","shiftXPercentRef","useRef","shiftXCurrentRef","bodyElRef","innerElRef","animationFrameRef","transitionFinishDurationFallback","close","current","handleActionClick","e","closeTimeout","useTimeout","setBodyTransform","percent","cancelAnimationFrame","requestAnimationFrame","transform","onTouchStart","clear","onTouchMoveX","event","shiftX","originalEvent","preventDefault","offsetWidth","rubber","onTouchEnd","callback","shiftXCurrent","expectTranslateY","set","useEffect","AppRootPortal","RootComponent","baseClassName","classNames","bottom","Touch","className","getRootRef","onStart","onMoveX","onEnd","Basic","Button","align","appearance","size","onClick"],"mappings":"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"}
|
|
@@ -12,7 +12,8 @@ export interface BasicProps {
|
|
|
12
12
|
after?: React.ReactNode;
|
|
13
13
|
/**
|
|
14
14
|
* Варианты расположения кнопки действия
|
|
15
|
-
*
|
|
15
|
+
* По умолчанию на десктопах, или при наличии элементов `after` или `subtitle`
|
|
16
|
+
* имеет значение `vertical`, в остальных случаях `horizontal`
|
|
16
17
|
*/
|
|
17
18
|
layout?: 'vertical' | 'horizontal';
|
|
18
19
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Basic.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAW9D,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB
|
|
1
|
+
{"version":3,"file":"Basic.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Snackbar/subcomponents/Basic/Basic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAW9D,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;CAAG;AAEpG,wBAAgB,KAAK,CAAC,EACpB,MAAM,EAAE,WAAW,EACnB,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,qBA0BpB"}
|