@vkontakte/vkui 7.1.2 → 7.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Alert/Alert.js +5 -5
- package/dist/components/Alert/Alert.js.map +1 -1
- package/dist/components/CarouselBase/CarouselBase.d.ts.map +1 -1
- package/dist/components/CarouselBase/CarouselBase.js +1 -4
- package/dist/components/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/components/FormItem/FormItem.d.ts.map +1 -1
- package/dist/components/FormItem/FormItem.js +1 -0
- package/dist/components/FormItem/FormItem.js.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.d.ts.map +1 -1
- package/dist/components/HorizontalScroll/HorizontalScroll.js +17 -18
- package/dist/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/components/ModalCard/ModalCardInternal.d.ts +1 -1
- package/dist/components/ModalCard/ModalCardInternal.d.ts.map +1 -1
- package/dist/components/ModalCard/ModalCardInternal.js +4 -3
- package/dist/components/ModalCard/ModalCardInternal.js.map +1 -1
- package/dist/components/ModalCard/types.d.ts +7 -0
- package/dist/components/ModalCard/types.d.ts.map +1 -1
- package/dist/components/ModalCard/types.js.map +1 -1
- package/dist/components/ModalPage/ModalPageInternal.d.ts +1 -1
- package/dist/components/ModalPage/ModalPageInternal.d.ts.map +1 -1
- package/dist/components/ModalPage/ModalPageInternal.js +4 -3
- package/dist/components/ModalPage/ModalPageInternal.js.map +1 -1
- package/dist/components/ModalPage/types.d.ts +7 -0
- package/dist/components/ModalPage/types.d.ts.map +1 -1
- package/dist/components/ModalPage/types.js.map +1 -1
- package/dist/components/OnboardingTooltip/OnboardingTooltip.d.ts +7 -2
- package/dist/components/OnboardingTooltip/OnboardingTooltip.d.ts.map +1 -1
- package/dist/components/OnboardingTooltip/OnboardingTooltip.js +32 -13
- package/dist/components/OnboardingTooltip/OnboardingTooltip.js.map +1 -1
- package/dist/components/Pagination/Pagination.d.ts +6 -0
- package/dist/components/Pagination/Pagination.d.ts.map +1 -1
- package/dist/components/Pagination/Pagination.js +5 -3
- package/dist/components/Pagination/Pagination.js.map +1 -1
- package/dist/components/Pagination/PaginationPage/PaginationPageButton.d.ts.map +1 -1
- package/dist/components/Pagination/PaginationPage/PaginationPageButton.js +4 -4
- package/dist/components/Pagination/PaginationPage/PaginationPageButton.js.map +1 -1
- package/dist/components/Removable/Removable.d.ts +5 -1
- package/dist/components/Removable/Removable.d.ts.map +1 -1
- package/dist/components/Removable/Removable.js +4 -3
- package/dist/components/Removable/Removable.js.map +1 -1
- package/dist/components/TabbarItem/TabbarItem.d.ts +1 -1
- package/dist/components/TabbarItem/TabbarItem.d.ts.map +1 -1
- package/dist/components/TabbarItem/TabbarItem.js +16 -4
- package/dist/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/components/TooltipBase/TooltipBase.d.ts +6 -1
- package/dist/components/TooltipBase/TooltipBase.d.ts.map +1 -1
- package/dist/components/TooltipBase/TooltipBase.js +3 -1
- package/dist/components/TooltipBase/TooltipBase.js.map +1 -1
- package/dist/components.css +1 -1
- package/dist/components.css.map +1 -1
- package/dist/cssm/components/Alert/Alert.js +5 -5
- package/dist/cssm/components/Alert/Alert.js.map +1 -1
- package/dist/cssm/components/CarouselBase/CarouselBase.js +1 -4
- package/dist/cssm/components/CarouselBase/CarouselBase.js.map +1 -1
- package/dist/cssm/components/FormItem/FormItem.js +1 -0
- package/dist/cssm/components/FormItem/FormItem.js.map +1 -1
- package/dist/cssm/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css +1 -0
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js +18 -14
- package/dist/cssm/components/HorizontalScroll/HorizontalScroll.js.map +1 -1
- package/dist/cssm/components/IconButton/IconButton.module.css +6 -0
- package/dist/cssm/components/ModalCard/ModalCardInternal.js +2 -2
- package/dist/cssm/components/ModalCard/ModalCardInternal.js.map +1 -1
- package/dist/cssm/components/ModalCard/types.js.map +1 -1
- package/dist/cssm/components/ModalPage/ModalPageInternal.js +2 -2
- package/dist/cssm/components/ModalPage/ModalPageInternal.js.map +1 -1
- package/dist/cssm/components/ModalPage/types.js.map +1 -1
- package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js +21 -7
- package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.js.map +1 -1
- package/dist/cssm/components/OnboardingTooltip/OnboardingTooltip.module.css +15 -0
- package/dist/cssm/components/Pagination/Pagination.js +4 -2
- package/dist/cssm/components/Pagination/Pagination.js.map +1 -1
- package/dist/cssm/components/Pagination/PaginationPage/PaginationPageButton.js +4 -4
- package/dist/cssm/components/Pagination/PaginationPage/PaginationPageButton.js.map +1 -1
- package/dist/cssm/components/PanelHeaderButton/PanelHeaderButton.module.css +6 -0
- package/dist/cssm/components/Removable/Removable.js +2 -2
- package/dist/cssm/components/Removable/Removable.js.map +1 -1
- package/dist/cssm/components/Removable/Removable.module.css +3 -0
- package/dist/cssm/components/Search/Search.module.css +1 -0
- package/dist/cssm/components/SimpleCell/SimpleCell.module.css +2 -0
- package/dist/cssm/components/SubnavigationButton/SubnavigationButton.module.css +1 -0
- package/dist/cssm/components/TabbarItem/TabbarItem.js +13 -3
- package/dist/cssm/components/TabbarItem/TabbarItem.js.map +1 -1
- package/dist/cssm/components/TooltipBase/TooltipBase.js +2 -1
- package/dist/cssm/components/TooltipBase/TooltipBase.js.map +1 -1
- package/dist/cssm/components/TooltipBase/TooltipBase.module.css +1 -0
- package/dist/cssm/hooks/useFocusTrap.js +1 -1
- package/dist/cssm/hooks/useFocusTrap.js.map +1 -1
- package/dist/cssm/types.js.map +1 -1
- package/dist/hooks/useFocusTrap.js +1 -1
- package/dist/hooks/useFocusTrap.js.map +1 -1
- package/dist/types.d.ts +1 -1
- package/dist/types.d.ts.map +1 -1
- package/dist/types.js.map +1 -1
- package/dist/vkui.css +1 -1
- package/dist/vkui.css.map +1 -1
- package/package.json +1 -1
- package/src/components/Alert/Alert.tsx +5 -5
- package/src/components/CarouselBase/CarouselBase.tsx +1 -6
- package/src/components/FormItem/FormItem.tsx +1 -0
- package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.module.css +1 -0
- package/src/components/HorizontalScroll/HorizontalScroll.tsx +21 -15
- package/src/components/IconButton/IconButton.module.css +5 -0
- package/src/components/ModalCard/ModalCardInternal.tsx +5 -1
- package/src/components/ModalCard/types.ts +7 -0
- package/src/components/ModalPage/ModalPageInternal.tsx +2 -1
- package/src/components/ModalPage/types.ts +7 -0
- package/src/components/OnboardingTooltip/OnboardingTooltip.module.css +13 -0
- package/src/components/OnboardingTooltip/OnboardingTooltip.tsx +36 -8
- package/src/components/Pagination/Pagination.tsx +19 -5
- package/src/components/Pagination/PaginationPage/PaginationPageButton.tsx +3 -3
- package/src/components/PanelHeaderButton/PanelHeaderButton.module.css +5 -0
- package/src/components/Removable/Removable.module.css +3 -0
- package/src/components/Removable/Removable.tsx +12 -1
- package/src/components/Search/Search.module.css +1 -0
- package/src/components/SimpleCell/SimpleCell.module.css +2 -0
- package/src/components/SubnavigationButton/SubnavigationButton.module.css +1 -0
- package/src/components/TabbarItem/TabbarItem.tsx +18 -1
- package/src/components/TooltipBase/TooltipBase.module.css +1 -0
- package/src/components/TooltipBase/TooltipBase.tsx +7 -1
- package/src/hooks/useFocusTrap.ts +1 -1
- package/src/types.ts +2 -1
- package/dist/components/Pagination/utils.d.ts +0 -2
- package/dist/components/Pagination/utils.d.ts.map +0 -1
- package/dist/components/Pagination/utils.js +0 -5
- package/dist/components/Pagination/utils.js.map +0 -1
- package/dist/cssm/components/Pagination/utils.js +0 -5
- package/dist/cssm/components/Pagination/utils.js.map +0 -1
- package/src/components/Pagination/utils.ts +0 -3
|
@@ -115,17 +115,17 @@ import { AlertDescription, AlertTitle } from "./AlertTypography.js";
|
|
|
115
115
|
})
|
|
116
116
|
]
|
|
117
117
|
}),
|
|
118
|
+
isDismissButtonVisible && dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalDismissButton, {
|
|
119
|
+
onClick: close,
|
|
120
|
+
"data-testid": dismissButtonTestId,
|
|
121
|
+
children: dismissLabel
|
|
122
|
+
}),
|
|
118
123
|
/*#__PURE__*/ _jsx(AlertActions, {
|
|
119
124
|
actions: actions,
|
|
120
125
|
actionsAlign: actionsAlign,
|
|
121
126
|
actionsLayout: actionsLayout,
|
|
122
127
|
renderAction: renderAction,
|
|
123
128
|
onItemClick: onItemClick
|
|
124
|
-
}),
|
|
125
|
-
isDismissButtonVisible && dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalDismissButton, {
|
|
126
|
-
onClick: close,
|
|
127
|
-
"data-testid": dismissButtonTestId,
|
|
128
|
-
children: dismissLabel
|
|
129
129
|
})
|
|
130
130
|
]
|
|
131
131
|
}))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n AlignType,\n AnchorHTMLAttributesOnly,\n HasDataAttribute,\n HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n extends Pick<ButtonProps, 'Component'>,\n AnchorHTMLAttributesOnly,\n HasDataAttribute {\n title: string;\n /**\n * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n * то в аргументы `action` передаётся объект с функцией close,\n * вызвав которую можно закрыть `action` вручную.\n */\n action?: (args?: { close?: VoidFunction }) => void;\n /**\n * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n * позволяет отключить такое поведение\n */\n autoCloseDisabled?: boolean;\n mode: AlertActionMode;\n}\n\nexport interface AlertProps\n extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n Pick<UseFocusTrapProps, 'restoreFocus'>,\n HasRootRef<HTMLDivElement> {\n actionsLayout?: 'vertical' | 'horizontal';\n actionsAlign?: AlignType;\n actions?: AlertActionInterface[];\n renderAction?: (props: AlertActionProps) => React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n onClose: VoidFunction;\n /**\n * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n */\n dismissLabel?: string;\n /**\n * Расположение кнопки закрытия (внутри и вне `popout'a`)\n * Доступно только в `compact`-режиме, не отображается на `iOS`\n */\n dismissButtonMode?: 'inside' | 'outside';\n /**\n * Передает атрибут `data-testid` для кнопки закрытия\n */\n dismissButtonTestId?: string;\n usePortal?: AppRootPortalProps['usePortal'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions,\n actionsLayout = 'horizontal',\n children,\n className,\n style,\n title,\n description,\n onClose,\n dismissLabel = 'Закрыть предупреждение',\n renderAction,\n actionsAlign,\n dismissButtonMode = 'outside',\n dismissButtonTestId,\n getRootRef,\n usePortal,\n ...restProps\n}: AlertProps): React.ReactNode => {\n const generatedId = React.useId();\n\n const titleId = `vkui-alert-${generatedId}-title`;\n const descriptionId = `vkui-alert-${generatedId}-description`;\n\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n const [closing, setClosing] = React.useState(false);\n const itemActionCallbackRef = React.useRef(noop);\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n closing ? 'exit' : 'enter',\n {\n onExited() {\n itemActionCallbackRef.current();\n itemActionCallbackRef.current = noop;\n onClose();\n },\n },\n );\n const isDismissButtonVisible = isDesktop && platform !== 'ios';\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const close = React.useCallback(() => {\n setClosing(true);\n }, []);\n\n const onItemClick = React.useCallback(\n (item: AlertActionInterface) => {\n const { action: itemAction, autoCloseDisabled = false } = item;\n\n if (autoCloseDisabled) {\n itemAction && itemAction({ close });\n } else {\n if (itemAction) {\n itemActionCallbackRef.current = itemAction;\n }\n setClosing(true);\n }\n },\n [close],\n );\n\n useScrollLock();\n\n return (\n <AppRootPortal usePortal={usePortal}>\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={close}\n getRootRef={getRootRef}\n >\n <FocusTrap\n {...restProps}\n {...animationHandlers}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n autoFocus={animationState === 'entered'}\n className={classNames(\n styles.host,\n platform === 'ios' && styles.ios,\n platform === 'vkcom' && styles.vkcom,\n closing ? styles.closing : styles.opening,\n isDesktop && styles.desktop,\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n >\n <div\n className={classNames(\n styles.content,\n dismissButtonMode === 'inside' && styles.contentWithButton,\n )}\n >\n {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n {hasReactNode(description) && (\n <AlertDescription id={descriptionId}>{description}</AlertDescription>\n )}\n {children}\n {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n <IconButton\n label={dismissLabel}\n className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n onClick={close}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n data-testid={dismissButtonTestId}\n >\n <Icon20Cancel />\n </IconButton>\n )}\n </div>\n <AlertActions\n actions={actions}\n actionsAlign={actionsAlign}\n actionsLayout={actionsLayout}\n renderAction={renderAction}\n onItemClick={onItemClick}\n />\n {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n {dismissLabel}\n </ModalDismissButton>\n )}\n </FocusTrap>\n </PopoutWrapper>\n </AppRootPortal>\n );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","AppRootPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","role","aria-modal","aria-labelledby","aria-describedby","div","id","label","hoverMode","activeMode","data-testid"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n AlignType,\n AnchorHTMLAttributesOnly,\n HasDataAttribute,\n HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n extends Pick<ButtonProps, 'Component'>,\n AnchorHTMLAttributesOnly,\n HasDataAttribute {\n title: string;\n /**\n * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n * то в аргументы `action` передаётся объект с функцией close,\n * вызвав которую можно закрыть `action` вручную.\n */\n action?: (args?: { close?: VoidFunction }) => void;\n /**\n * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n * позволяет отключить такое поведение\n */\n autoCloseDisabled?: boolean;\n mode: AlertActionMode;\n}\n\nexport interface AlertProps\n extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n Pick<UseFocusTrapProps, 'restoreFocus'>,\n HasRootRef<HTMLDivElement> {\n actionsLayout?: 'vertical' | 'horizontal';\n actionsAlign?: AlignType;\n actions?: AlertActionInterface[];\n renderAction?: (props: AlertActionProps) => React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n onClose: VoidFunction;\n /**\n * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n */\n dismissLabel?: string;\n /**\n * Расположение кнопки закрытия (внутри и вне `popout'a`)\n * Доступно только в `compact`-режиме, не отображается на `iOS`\n */\n dismissButtonMode?: 'inside' | 'outside';\n /**\n * Передает атрибут `data-testid` для кнопки закрытия\n */\n dismissButtonTestId?: string;\n usePortal?: AppRootPortalProps['usePortal'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n actions,\n actionsLayout = 'horizontal',\n children,\n className,\n style,\n title,\n description,\n onClose,\n dismissLabel = 'Закрыть предупреждение',\n renderAction,\n actionsAlign,\n dismissButtonMode = 'outside',\n dismissButtonTestId,\n getRootRef,\n usePortal,\n ...restProps\n}: AlertProps): React.ReactNode => {\n const generatedId = React.useId();\n\n const titleId = `vkui-alert-${generatedId}-title`;\n const descriptionId = `vkui-alert-${generatedId}-description`;\n\n const platform = usePlatform();\n const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n const [closing, setClosing] = React.useState(false);\n const itemActionCallbackRef = React.useRef(noop);\n const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n closing ? 'exit' : 'enter',\n {\n onExited() {\n itemActionCallbackRef.current();\n itemActionCallbackRef.current = noop;\n onClose();\n },\n },\n );\n const isDismissButtonVisible = isDesktop && platform !== 'ios';\n const elementRef = React.useRef<HTMLDivElement>(null);\n\n const close = React.useCallback(() => {\n setClosing(true);\n }, []);\n\n const onItemClick = React.useCallback(\n (item: AlertActionInterface) => {\n const { action: itemAction, autoCloseDisabled = false } = item;\n\n if (autoCloseDisabled) {\n itemAction && itemAction({ close });\n } else {\n if (itemAction) {\n itemActionCallbackRef.current = itemAction;\n }\n setClosing(true);\n }\n },\n [close],\n );\n\n useScrollLock();\n\n return (\n <AppRootPortal usePortal={usePortal}>\n <PopoutWrapper\n className={className}\n closing={closing}\n style={style}\n onClick={close}\n getRootRef={getRootRef}\n >\n <FocusTrap\n {...restProps}\n {...animationHandlers}\n getRootRef={elementRef}\n onClick={stopPropagation}\n onClose={close}\n autoFocus={animationState === 'entered'}\n className={classNames(\n styles.host,\n platform === 'ios' && styles.ios,\n platform === 'vkcom' && styles.vkcom,\n closing ? styles.closing : styles.opening,\n isDesktop && styles.desktop,\n )}\n role=\"alertdialog\"\n aria-modal\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n >\n <div\n className={classNames(\n styles.content,\n dismissButtonMode === 'inside' && styles.contentWithButton,\n )}\n >\n {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n {hasReactNode(description) && (\n <AlertDescription id={descriptionId}>{description}</AlertDescription>\n )}\n {children}\n {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n <IconButton\n label={dismissLabel}\n className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n onClick={close}\n hoverMode=\"opacity\"\n activeMode=\"opacity\"\n data-testid={dismissButtonTestId}\n >\n <Icon20Cancel />\n </IconButton>\n )}\n </div>\n {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n {dismissLabel}\n </ModalDismissButton>\n )}\n <AlertActions\n actions={actions}\n actionsAlign={actionsAlign}\n actionsLayout={actionsLayout}\n renderAction={renderAction}\n onItemClick={onItemClick}\n />\n </FocusTrap>\n </PopoutWrapper>\n </AppRootPortal>\n );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","AppRootPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","role","aria-modal","aria-labelledby","aria-describedby","div","id","label","hoverMode","activeMode","data-testid"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,YAAY,gSAwBtB,gBAAgB,KAAG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,YAAY,gSAwBtB,gBAAgB,KAAG,KAAK,CAAC,SA6b3B,CAAC"}
|
|
@@ -265,10 +265,7 @@ export const CarouselBase = (_param)=>{
|
|
|
265
265
|
};
|
|
266
266
|
const simpleSlideChangePerform = ()=>{
|
|
267
267
|
const { snaps } = slidesManager.current;
|
|
268
|
-
|
|
269
|
-
const endPoint = snaps[slideIndex];
|
|
270
|
-
const distance = endPoint - startPoint;
|
|
271
|
-
addToAnimationQueue(getAnimateFunction((progress)=>transformCssStyles(startPoint + distance * progress)));
|
|
268
|
+
requestTransform(snaps[slideIndex], true);
|
|
272
269
|
};
|
|
273
270
|
useIsomorphicLayoutEffect(function performSlideChange() {
|
|
274
271
|
if (!initialized.current) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMutationObserver } from '../../hooks/useMutationObserver';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type CustomTouchEvent } from '../Touch/Touch';\nimport { Bullets } from './Bullets';\nimport { CarouselViewPort } from './CarouselViewPort';\nimport { ScrollArrows } from './ScrollArrows';\nimport {\n ANIMATION_DURATION,\n CONTROL_ELEMENTS_STATE,\n SLIDE_THRESHOLD,\n SLIDES_MANAGER_STATE,\n} from './constants';\nimport { calcMax, calcMin, calculateIndent, getLoopPoints, getTargetIndex } from './helpers';\nimport { useSlideAnimation } from './hooks';\nimport {\n type BaseGalleryProps,\n type ControlElementsState,\n type GallerySlidesState,\n type SlidesManagerState,\n} from './types';\nimport styles from './CarouselBase.module.css';\n\nconst warn = warnOnce('Gallery');\n\nexport const CarouselBase = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n resizeSource = 'window',\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize,\n arrowAreaHeight,\n slideTestId,\n bulletTestId,\n nextArrowTestId,\n prevArrowTestId,\n looped = false,\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n const layerRef = React.useRef<HTMLDivElement>(null);\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n const shiftXCurrentRef = React.useRef<number>(0);\n const shiftXDeltaRef = React.useRef<number>(0);\n const initialized = React.useRef<boolean>(false);\n const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();\n const isDragging = React.useRef(false);\n\n const [controlElementsState, setControlElementsState] =\n React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterAlign = align === 'center';\n\n /*\n * Считает отступ слоя галереи во время драга\n * Используется только для looped=false галереи\n * так как только у нее есть пределы по краям\n */\n const calculateDragIndent = () => {\n const localMax = slidesManager.current.max ?? 0;\n const localMin = slidesManager.current.min ?? 0;\n const indent = shiftXCurrentRef.current + shiftXDeltaRef.current;\n\n if (indent > localMax) {\n return localMax + Number((indent - localMax) / 3);\n } else if (indent < localMin) {\n return localMin + Number((indent - localMin) / 3);\n }\n\n return indent;\n };\n\n const calculateCanSlideLeft = () => {\n if (looped) {\n return !slidesManager.current.isFullyVisible;\n }\n return !slidesManager.current.isFullyVisible && shiftXCurrentRef.current < 0;\n };\n\n const calculateCanSlideRight = () => {\n if (looped) {\n return !slidesManager.current.isFullyVisible;\n }\n return (\n !slidesManager.current.isFullyVisible &&\n // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n ((align === 'left' &&\n slidesManager.current.containerWidth - shiftXCurrentRef.current <\n (slidesManager.current.layerWidth ?? 0)) ||\n // otherwise we need to check current slide index (align = right or align = center)\n (align !== 'left' && slideIndex < slidesManager.current.slides.length - 1))\n );\n };\n\n const transformCssStyles = (shiftX: number, animation = false) => {\n shiftX = Math.round(shiftX);\n if (looped) {\n slidesManager.current.loopPoints.forEach((loopPoint) => {\n const { target, index } = loopPoint;\n const slide = slidesStore.current[index];\n if (slide) {\n slide.style.transform = `translate3d(${target(shiftX)}px, 0, 0)`;\n }\n });\n } else {\n Object.values(slidesStore.current).forEach((slide) => {\n if (slide) {\n slide.style.transform = '';\n }\n });\n }\n\n if (layerRef.current) {\n const indent = isDragging.current && !looped ? calculateDragIndent() : shiftX;\n\n layerRef.current.style.transform = `translate3d(${indent}px, 0, 0)`;\n layerRef.current.style.transition = animation\n ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)`\n : '';\n }\n };\n\n const requestTransform = (shiftX: number, animation = false) => {\n const { snaps, contentSize, slides } = slidesManager.current;\n\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (looped && shiftX > snaps[0]) {\n shiftXCurrentRef.current = -contentSize + snaps[0];\n shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;\n }\n const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;\n\n if (looped && shiftX <= -lastPoint) {\n shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];\n }\n transformCssStyles(shiftX, animation);\n });\n };\n\n const initializeSlides = () => {\n if (!rootRef.current || !viewportRef.current) {\n return;\n }\n let localSlides =\n React.Children.map(children, (_item, i): GallerySlidesState => {\n const elem = slidesStore.current[i] || { offsetLeft: 0, offsetWidth: 0 };\n return { coordX: elem.offsetLeft, width: elem.offsetWidth };\n }) || [];\n\n if (localSlides.length === 0) {\n initialized.current = false;\n return;\n }\n\n const containerWidth = rootRef.current.offsetWidth;\n const viewportOffsetWidth = viewportRef.current.offsetWidth;\n const layerWidth = localSlides.reduce((val, slide) => slide.width + val, 0);\n\n if (process.env.NODE_ENV === 'development' && looped) {\n let remainingWidth = containerWidth;\n let slideIndex = 0;\n\n while (remainingWidth > 0 && slideIndex < localSlides.length) {\n remainingWidth -= localSlides[slideIndex].width;\n slideIndex++;\n }\n if (remainingWidth <= 0 && slideIndex === localSlides.length) {\n warn(\n 'Ширины слайдов недостаточно для корректной работы свойства \"looped\". Пожалуйста, сделайте её больше.',\n );\n }\n }\n\n const currentSlideOffsetOnCenterAlignment =\n (containerWidth - (localSlides[slideIndex]?.width ?? 0)) / 2;\n const isFullyVisible =\n align === 'center'\n ? layerWidth + currentSlideOffsetOnCenterAlignment <= containerWidth\n : layerWidth <= containerWidth;\n\n const onlyOneSlide = localSlides.length === 1;\n\n slidesManager.current = {\n ...slidesManager.current,\n layerWidth,\n containerWidth,\n viewportOffsetWidth,\n slides: localSlides,\n isFullyVisible,\n max:\n looped || onlyOneSlide\n ? null\n : calcMax({\n slides: localSlides,\n containerWidth,\n isCenterAlign,\n }),\n min:\n looped || onlyOneSlide\n ? null\n : calcMin({\n containerWidth,\n layerWidth,\n slides: localSlides,\n viewportOffsetWidth,\n isFullyVisible,\n align,\n }),\n };\n const snaps = localSlides.map((_, index) =>\n calculateIndent(index, slidesManager.current, isCenterAlign, looped),\n );\n\n let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;\n if (align === 'center') {\n contentSize += snaps[0];\n }\n\n slidesManager.current.snaps = snaps;\n slidesManager.current.contentSize = contentSize;\n // Если галерея не зациклена и слайд всего один, то рассчитывать loopPoints тоже не надо\n if (looped && !onlyOneSlide && !isFullyVisible) {\n slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);\n }\n\n shiftXCurrentRef.current = snaps[slideIndex];\n initialized.current = true;\n\n setControlElementsState({\n canSlideLeft: calculateCanSlideLeft(),\n canSlideRight: calculateCanSlideRight(),\n isDraggable: !(dragDisabled || slidesManager.current.isFullyVisible),\n });\n requestTransform(shiftXCurrentRef.current);\n };\n\n const onResize = () => {\n if (initialized.current) {\n initializeSlides();\n }\n };\n const { window } = useDOM();\n useResizeObserver(resizeSource === 'element' ? rootRef : window, onResize);\n\n const loopedSlideChangePerform = () => {\n const { snaps, slides } = slidesManager.current;\n const indent = snaps[slideIndex];\n let startPoint = shiftXCurrentRef.current;\n\n /**\n * Переключаемся с последнего элемента на первый\n * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) \"вперед\"\n * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения\n */\n if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {\n const distance =\n Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;\n\n addToAnimationQueue(\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress * distance * -1;\n\n transformCssStyles(shiftX);\n\n if (shiftX <= snaps[snaps.length - 1] - slides[slides.length - 1].width) {\n requestAnimationFrame(() => {\n shiftXCurrentRef.current = indent;\n transformCssStyles(snaps[0]);\n });\n }\n }),\n );\n /**\n * Переключаемся с первого слайда на последний\n * Для корректной анимации сначала задаем первым видимым слайдам смещение\n * В следующем кадре начинаем анимация прокрутки \"назад\"\n */\n } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {\n startPoint = indent - slides[slides.length - 1].width;\n\n addToAnimationQueue(() => {\n requestAnimationFrame(() => {\n const shiftX = indent - slides[slides.length - 1].width;\n transformCssStyles(shiftX);\n\n getAnimateFunction((progress) => {\n transformCssStyles(startPoint + progress * slides[slides.length - 1].width);\n })();\n });\n });\n /**\n * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения\n */\n } else {\n addToAnimationQueue(() => {\n const distance = Math.abs(indent - startPoint);\n let direction = startPoint <= indent ? 1 : -1;\n\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress * distance * direction;\n transformCssStyles(shiftX);\n })();\n });\n }\n };\n\n const simpleSlideChangePerform = () => {\n const { snaps } = slidesManager.current;\n const startPoint = shiftXCurrentRef.current;\n const endPoint = snaps[slideIndex];\n const distance = endPoint - startPoint;\n addToAnimationQueue(\n getAnimateFunction((progress) => transformCssStyles(startPoint + distance * progress)),\n );\n };\n\n useIsomorphicLayoutEffect(\n function performSlideChange() {\n if (!initialized.current) {\n return;\n }\n const { snaps } = slidesManager.current;\n const indent = snaps[slideIndex];\n\n if (looped) {\n loopedSlideChangePerform();\n } else {\n simpleSlideChangePerform();\n }\n\n startAnimation();\n\n shiftXCurrentRef.current = indent;\n\n setControlElementsState((v) => ({\n ...v,\n canSlideLeft: calculateCanSlideLeft(),\n canSlideRight: calculateCanSlideRight(),\n }));\n },\n [slideIndex],\n );\n\n useIsomorphicLayoutEffect(\n function updateIsDraggable() {\n setControlElementsState((v) => ({\n ...v,\n isDraggable: !(dragDisabled || slidesManager.current.isFullyVisible),\n }));\n },\n [dragDisabled],\n );\n\n useMutationObserver(layerRef, initializeSlides);\n\n useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth, looped]);\n\n const calculateMinDeltaXToSlide = () => {\n return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;\n };\n\n const slideLeft = (event: React.MouseEvent) => {\n if (slideIndex > 0) {\n shiftXCurrentRef.current += calculateMinDeltaXToSlide();\n }\n onChange?.(\n (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,\n );\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n if (slideIndex < slidesManager.current.slides.length - 1) {\n shiftXCurrentRef.current -= calculateMinDeltaXToSlide();\n }\n onChange?.((slideIndex + 1) % slidesManager.current.slides.length);\n onNextClick?.(event);\n };\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (controlElementsState.isDraggable) {\n onDragStart?.(e);\n shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];\n shiftXDeltaRef.current = 0;\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n isDragging.current = true;\n if (shiftXDeltaRef.current !== e.shiftX) {\n shiftXDeltaRef.current = e.shiftX;\n requestTransform(shiftXCurrentRef.current + shiftXDeltaRef.current);\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n isDragging.current = false;\n let targetIndex = slideIndex;\n if (e.isSlide) {\n targetIndex = getTargetIndex({\n slides: slidesManager.current.slides,\n slideIndex,\n currentShiftX: shiftXCurrentRef.current,\n currentShiftXDelta: shiftXDeltaRef.current,\n max: slidesManager.current.max,\n looped,\n });\n }\n onDragEnd?.(e, targetIndex);\n\n if (targetIndex !== slideIndex) {\n shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;\n onChange?.(targetIndex);\n } else {\n const initialShiftX = slidesManager.current.snaps[targetIndex];\n requestTransform(initialShiftX, true);\n }\n }\n };\n\n const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n slidesStore.current[slideIndex] = slideRef;\n };\n\n const { isDraggable, canSlideRight, canSlideLeft } = controlElementsState;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n slideWidth === 'custom' && styles.customWidth,\n isDraggable && styles.draggable,\n )}\n getRootRef={rootRef}\n >\n <CarouselViewPort\n slideWidth={slideWidth}\n slideTestId={slideTestId}\n onStart={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n getRootRef={viewportRef}\n layerRef={layerRef}\n setSlideRef={setSlideRef}\n >\n {children}\n </CarouselViewPort>\n\n {bullets && (\n <Bullets\n bullets={bullets}\n slideIndex={slideIndex}\n count={React.Children.count(children)}\n bulletTestId={bulletTestId}\n />\n )}\n <ScrollArrows\n hasPointer={hasPointer}\n canSlideLeft={canSlideLeft}\n canSlideRight={canSlideRight}\n onSlideRight={slideRight}\n onSlideLeft={slideLeft}\n showArrows={showArrows}\n arrowSize={arrowSize}\n arrowAreaHeight={arrowAreaHeight}\n prevArrowTestId={prevArrowTestId}\n nextArrowTestId={nextArrowTestId}\n />\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useMutationObserver","useResizeObserver","useDOM","useIsomorphicLayoutEffect","warnOnce","RootComponent","Bullets","CarouselViewPort","ScrollArrows","ANIMATION_DURATION","CONTROL_ELEMENTS_STATE","SLIDE_THRESHOLD","SLIDES_MANAGER_STATE","calcMax","calcMin","calculateIndent","getLoopPoints","getTargetIndex","useSlideAnimation","warn","CarouselBase","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","resizeSource","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","arrowAreaHeight","slideTestId","bulletTestId","nextArrowTestId","prevArrowTestId","looped","restProps","slidesStore","useRef","slidesManager","rootRef","viewportRef","layerRef","animationFrameRef","shiftXCurrentRef","shiftXDeltaRef","initialized","addToAnimationQueue","getAnimateFunction","startAnimation","isDragging","controlElementsState","setControlElementsState","useState","hasPointer","isCenterAlign","calculateDragIndent","localMax","current","max","localMin","min","indent","Number","calculateCanSlideLeft","isFullyVisible","calculateCanSlideRight","containerWidth","layerWidth","slides","length","transformCssStyles","shiftX","animation","Math","round","loopPoints","forEach","loopPoint","target","index","slide","style","transform","Object","values","transition","requestTransform","snaps","contentSize","cancelAnimationFrame","requestAnimationFrame","lastPoint","width","coordX","abs","initializeSlides","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","viewportOffsetWidth","reduce","val","process","env","NODE_ENV","remainingWidth","currentSlideOffsetOnCenterAlignment","onlyOneSlide","_","canSlideLeft","canSlideRight","isDraggable","onResize","window","loopedSlideChangePerform","startPoint","distance","progress","direction","simpleSlideChangePerform","endPoint","performSlideChange","v","updateIsDraggable","calculateMinDeltaXToSlide","slideLeft","event","slideRight","onStart","e","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","targetIndex","isSlide","currentShiftX","currentShiftXDelta","initialShiftX","setSlideRef","slideRef","baseClassName","count","onSlideRight","onSlideLeft"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CarouselBase/CarouselBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useMutationObserver } from '../../hooks/useMutationObserver';\nimport { useResizeObserver } from '../../hooks/useResizeObserver';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type CustomTouchEvent } from '../Touch/Touch';\nimport { Bullets } from './Bullets';\nimport { CarouselViewPort } from './CarouselViewPort';\nimport { ScrollArrows } from './ScrollArrows';\nimport {\n ANIMATION_DURATION,\n CONTROL_ELEMENTS_STATE,\n SLIDE_THRESHOLD,\n SLIDES_MANAGER_STATE,\n} from './constants';\nimport { calcMax, calcMin, calculateIndent, getLoopPoints, getTargetIndex } from './helpers';\nimport { useSlideAnimation } from './hooks';\nimport {\n type BaseGalleryProps,\n type ControlElementsState,\n type GallerySlidesState,\n type SlidesManagerState,\n} from './types';\nimport styles from './CarouselBase.module.css';\n\nconst warn = warnOnce('Gallery');\n\nexport const CarouselBase = ({\n bullets = false,\n getRootRef,\n children,\n slideWidth = '100%',\n slideIndex = 0,\n dragDisabled = false,\n resizeSource = 'window',\n onDragStart,\n onDragEnd,\n onChange,\n onPrevClick,\n onNextClick,\n align = 'left',\n showArrows,\n getRef,\n arrowSize,\n arrowAreaHeight,\n slideTestId,\n bulletTestId,\n nextArrowTestId,\n prevArrowTestId,\n looped = false,\n ...restProps\n}: BaseGalleryProps): React.ReactNode => {\n const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);\n\n const rootRef = useExternRef(getRootRef);\n const viewportRef = useExternRef(getRef);\n const layerRef = React.useRef<HTMLDivElement>(null);\n const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);\n const shiftXCurrentRef = React.useRef<number>(0);\n const shiftXDeltaRef = React.useRef<number>(0);\n const initialized = React.useRef<boolean>(false);\n const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();\n const isDragging = React.useRef(false);\n\n const [controlElementsState, setControlElementsState] =\n React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);\n\n const hasPointer = useAdaptivityHasPointer();\n\n const isCenterAlign = align === 'center';\n\n /*\n * Считает отступ слоя галереи во время драга\n * Используется только для looped=false галереи\n * так как только у нее есть пределы по краям\n */\n const calculateDragIndent = () => {\n const localMax = slidesManager.current.max ?? 0;\n const localMin = slidesManager.current.min ?? 0;\n const indent = shiftXCurrentRef.current + shiftXDeltaRef.current;\n\n if (indent > localMax) {\n return localMax + Number((indent - localMax) / 3);\n } else if (indent < localMin) {\n return localMin + Number((indent - localMin) / 3);\n }\n\n return indent;\n };\n\n const calculateCanSlideLeft = () => {\n if (looped) {\n return !slidesManager.current.isFullyVisible;\n }\n return !slidesManager.current.isFullyVisible && shiftXCurrentRef.current < 0;\n };\n\n const calculateCanSlideRight = () => {\n if (looped) {\n return !slidesManager.current.isFullyVisible;\n }\n return (\n !slidesManager.current.isFullyVisible &&\n // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n ((align === 'left' &&\n slidesManager.current.containerWidth - shiftXCurrentRef.current <\n (slidesManager.current.layerWidth ?? 0)) ||\n // otherwise we need to check current slide index (align = right or align = center)\n (align !== 'left' && slideIndex < slidesManager.current.slides.length - 1))\n );\n };\n\n const transformCssStyles = (shiftX: number, animation = false) => {\n shiftX = Math.round(shiftX);\n if (looped) {\n slidesManager.current.loopPoints.forEach((loopPoint) => {\n const { target, index } = loopPoint;\n const slide = slidesStore.current[index];\n if (slide) {\n slide.style.transform = `translate3d(${target(shiftX)}px, 0, 0)`;\n }\n });\n } else {\n Object.values(slidesStore.current).forEach((slide) => {\n if (slide) {\n slide.style.transform = '';\n }\n });\n }\n\n if (layerRef.current) {\n const indent = isDragging.current && !looped ? calculateDragIndent() : shiftX;\n\n layerRef.current.style.transform = `translate3d(${indent}px, 0, 0)`;\n layerRef.current.style.transition = animation\n ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)`\n : '';\n }\n };\n\n const requestTransform = (shiftX: number, animation = false) => {\n const { snaps, contentSize, slides } = slidesManager.current;\n\n if (animationFrameRef.current !== null) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n animationFrameRef.current = requestAnimationFrame(() => {\n if (looped && shiftX > snaps[0]) {\n shiftXCurrentRef.current = -contentSize + snaps[0];\n shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;\n }\n const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;\n\n if (looped && shiftX <= -lastPoint) {\n shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];\n }\n transformCssStyles(shiftX, animation);\n });\n };\n\n const initializeSlides = () => {\n if (!rootRef.current || !viewportRef.current) {\n return;\n }\n let localSlides =\n React.Children.map(children, (_item, i): GallerySlidesState => {\n const elem = slidesStore.current[i] || { offsetLeft: 0, offsetWidth: 0 };\n return { coordX: elem.offsetLeft, width: elem.offsetWidth };\n }) || [];\n\n if (localSlides.length === 0) {\n initialized.current = false;\n return;\n }\n\n const containerWidth = rootRef.current.offsetWidth;\n const viewportOffsetWidth = viewportRef.current.offsetWidth;\n const layerWidth = localSlides.reduce((val, slide) => slide.width + val, 0);\n\n if (process.env.NODE_ENV === 'development' && looped) {\n let remainingWidth = containerWidth;\n let slideIndex = 0;\n\n while (remainingWidth > 0 && slideIndex < localSlides.length) {\n remainingWidth -= localSlides[slideIndex].width;\n slideIndex++;\n }\n if (remainingWidth <= 0 && slideIndex === localSlides.length) {\n warn(\n 'Ширины слайдов недостаточно для корректной работы свойства \"looped\". Пожалуйста, сделайте её больше.',\n );\n }\n }\n\n const currentSlideOffsetOnCenterAlignment =\n (containerWidth - (localSlides[slideIndex]?.width ?? 0)) / 2;\n const isFullyVisible =\n align === 'center'\n ? layerWidth + currentSlideOffsetOnCenterAlignment <= containerWidth\n : layerWidth <= containerWidth;\n\n const onlyOneSlide = localSlides.length === 1;\n\n slidesManager.current = {\n ...slidesManager.current,\n layerWidth,\n containerWidth,\n viewportOffsetWidth,\n slides: localSlides,\n isFullyVisible,\n max:\n looped || onlyOneSlide\n ? null\n : calcMax({\n slides: localSlides,\n containerWidth,\n isCenterAlign,\n }),\n min:\n looped || onlyOneSlide\n ? null\n : calcMin({\n containerWidth,\n layerWidth,\n slides: localSlides,\n viewportOffsetWidth,\n isFullyVisible,\n align,\n }),\n };\n const snaps = localSlides.map((_, index) =>\n calculateIndent(index, slidesManager.current, isCenterAlign, looped),\n );\n\n let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;\n if (align === 'center') {\n contentSize += snaps[0];\n }\n\n slidesManager.current.snaps = snaps;\n slidesManager.current.contentSize = contentSize;\n // Если галерея не зациклена и слайд всего один, то рассчитывать loopPoints тоже не надо\n if (looped && !onlyOneSlide && !isFullyVisible) {\n slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);\n }\n\n shiftXCurrentRef.current = snaps[slideIndex];\n initialized.current = true;\n\n setControlElementsState({\n canSlideLeft: calculateCanSlideLeft(),\n canSlideRight: calculateCanSlideRight(),\n isDraggable: !(dragDisabled || slidesManager.current.isFullyVisible),\n });\n requestTransform(shiftXCurrentRef.current);\n };\n\n const onResize = () => {\n if (initialized.current) {\n initializeSlides();\n }\n };\n const { window } = useDOM();\n useResizeObserver(resizeSource === 'element' ? rootRef : window, onResize);\n\n const loopedSlideChangePerform = () => {\n const { snaps, slides } = slidesManager.current;\n const indent = snaps[slideIndex];\n let startPoint = shiftXCurrentRef.current;\n\n /**\n * Переключаемся с последнего элемента на первый\n * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) \"вперед\"\n * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения\n */\n if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {\n const distance =\n Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;\n\n addToAnimationQueue(\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress * distance * -1;\n\n transformCssStyles(shiftX);\n\n if (shiftX <= snaps[snaps.length - 1] - slides[slides.length - 1].width) {\n requestAnimationFrame(() => {\n shiftXCurrentRef.current = indent;\n transformCssStyles(snaps[0]);\n });\n }\n }),\n );\n /**\n * Переключаемся с первого слайда на последний\n * Для корректной анимации сначала задаем первым видимым слайдам смещение\n * В следующем кадре начинаем анимация прокрутки \"назад\"\n */\n } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {\n startPoint = indent - slides[slides.length - 1].width;\n\n addToAnimationQueue(() => {\n requestAnimationFrame(() => {\n const shiftX = indent - slides[slides.length - 1].width;\n transformCssStyles(shiftX);\n\n getAnimateFunction((progress) => {\n transformCssStyles(startPoint + progress * slides[slides.length - 1].width);\n })();\n });\n });\n /**\n * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения\n */\n } else {\n addToAnimationQueue(() => {\n const distance = Math.abs(indent - startPoint);\n let direction = startPoint <= indent ? 1 : -1;\n\n getAnimateFunction((progress) => {\n const shiftX = startPoint + progress * distance * direction;\n transformCssStyles(shiftX);\n })();\n });\n }\n };\n\n const simpleSlideChangePerform = () => {\n const { snaps } = slidesManager.current;\n requestTransform(snaps[slideIndex], true);\n };\n\n useIsomorphicLayoutEffect(\n function performSlideChange() {\n if (!initialized.current) {\n return;\n }\n const { snaps } = slidesManager.current;\n const indent = snaps[slideIndex];\n\n if (looped) {\n loopedSlideChangePerform();\n } else {\n simpleSlideChangePerform();\n }\n\n startAnimation();\n\n shiftXCurrentRef.current = indent;\n\n setControlElementsState((v) => ({\n ...v,\n canSlideLeft: calculateCanSlideLeft(),\n canSlideRight: calculateCanSlideRight(),\n }));\n },\n [slideIndex],\n );\n\n useIsomorphicLayoutEffect(\n function updateIsDraggable() {\n setControlElementsState((v) => ({\n ...v,\n isDraggable: !(dragDisabled || slidesManager.current.isFullyVisible),\n }));\n },\n [dragDisabled],\n );\n\n useMutationObserver(layerRef, initializeSlides);\n\n useIsomorphicLayoutEffect(initializeSlides, [align, slideWidth, looped]);\n\n const calculateMinDeltaXToSlide = () => {\n return slidesManager.current.slides[slideIndex].width * SLIDE_THRESHOLD;\n };\n\n const slideLeft = (event: React.MouseEvent) => {\n if (slideIndex > 0) {\n shiftXCurrentRef.current += calculateMinDeltaXToSlide();\n }\n onChange?.(\n (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,\n );\n onPrevClick?.(event);\n };\n\n const slideRight = (event: React.MouseEvent) => {\n if (slideIndex < slidesManager.current.slides.length - 1) {\n shiftXCurrentRef.current -= calculateMinDeltaXToSlide();\n }\n onChange?.((slideIndex + 1) % slidesManager.current.slides.length);\n onNextClick?.(event);\n };\n\n const onStart = (e: CustomTouchEvent) => {\n e.originalEvent.stopPropagation();\n if (controlElementsState.isDraggable) {\n onDragStart?.(e);\n shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];\n shiftXDeltaRef.current = 0;\n }\n };\n\n const onMoveX = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n e.originalEvent.preventDefault();\n\n if (e.isSlideX) {\n isDragging.current = true;\n if (shiftXDeltaRef.current !== e.shiftX) {\n shiftXDeltaRef.current = e.shiftX;\n requestTransform(shiftXCurrentRef.current + shiftXDeltaRef.current);\n }\n }\n }\n };\n\n const onEnd = (e: CustomTouchEvent) => {\n if (controlElementsState.isDraggable) {\n isDragging.current = false;\n let targetIndex = slideIndex;\n if (e.isSlide) {\n targetIndex = getTargetIndex({\n slides: slidesManager.current.slides,\n slideIndex,\n currentShiftX: shiftXCurrentRef.current,\n currentShiftXDelta: shiftXDeltaRef.current,\n max: slidesManager.current.max,\n looped,\n });\n }\n onDragEnd?.(e, targetIndex);\n\n if (targetIndex !== slideIndex) {\n shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;\n onChange?.(targetIndex);\n } else {\n const initialShiftX = slidesManager.current.snaps[targetIndex];\n requestTransform(initialShiftX, true);\n }\n }\n };\n\n const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n slidesStore.current[slideIndex] = slideRef;\n };\n\n const { isDraggable, canSlideRight, canSlideLeft } = controlElementsState;\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n slideWidth === 'custom' && styles.customWidth,\n isDraggable && styles.draggable,\n )}\n getRootRef={rootRef}\n >\n <CarouselViewPort\n slideWidth={slideWidth}\n slideTestId={slideTestId}\n onStart={onStart}\n onMoveX={onMoveX}\n onEnd={onEnd}\n getRootRef={viewportRef}\n layerRef={layerRef}\n setSlideRef={setSlideRef}\n >\n {children}\n </CarouselViewPort>\n\n {bullets && (\n <Bullets\n bullets={bullets}\n slideIndex={slideIndex}\n count={React.Children.count(children)}\n bulletTestId={bulletTestId}\n />\n )}\n <ScrollArrows\n hasPointer={hasPointer}\n canSlideLeft={canSlideLeft}\n canSlideRight={canSlideRight}\n onSlideRight={slideRight}\n onSlideLeft={slideLeft}\n showArrows={showArrows}\n arrowSize={arrowSize}\n arrowAreaHeight={arrowAreaHeight}\n prevArrowTestId={prevArrowTestId}\n nextArrowTestId={nextArrowTestId}\n />\n </RootComponent>\n );\n};\n"],"names":["React","classNames","useAdaptivityHasPointer","useExternRef","useMutationObserver","useResizeObserver","useDOM","useIsomorphicLayoutEffect","warnOnce","RootComponent","Bullets","CarouselViewPort","ScrollArrows","ANIMATION_DURATION","CONTROL_ELEMENTS_STATE","SLIDE_THRESHOLD","SLIDES_MANAGER_STATE","calcMax","calcMin","calculateIndent","getLoopPoints","getTargetIndex","useSlideAnimation","warn","CarouselBase","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","resizeSource","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","arrowAreaHeight","slideTestId","bulletTestId","nextArrowTestId","prevArrowTestId","looped","restProps","slidesStore","useRef","slidesManager","rootRef","viewportRef","layerRef","animationFrameRef","shiftXCurrentRef","shiftXDeltaRef","initialized","addToAnimationQueue","getAnimateFunction","startAnimation","isDragging","controlElementsState","setControlElementsState","useState","hasPointer","isCenterAlign","calculateDragIndent","localMax","current","max","localMin","min","indent","Number","calculateCanSlideLeft","isFullyVisible","calculateCanSlideRight","containerWidth","layerWidth","slides","length","transformCssStyles","shiftX","animation","Math","round","loopPoints","forEach","loopPoint","target","index","slide","style","transform","Object","values","transition","requestTransform","snaps","contentSize","cancelAnimationFrame","requestAnimationFrame","lastPoint","width","coordX","abs","initializeSlides","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","viewportOffsetWidth","reduce","val","process","env","NODE_ENV","remainingWidth","currentSlideOffsetOnCenterAlignment","onlyOneSlide","_","canSlideLeft","canSlideRight","isDraggable","onResize","window","loopedSlideChangePerform","startPoint","distance","progress","direction","simpleSlideChangePerform","performSlideChange","v","updateIsDraggable","calculateMinDeltaXToSlide","slideLeft","event","slideRight","onStart","e","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","targetIndex","isSlide","currentShiftX","currentShiftXDelta","initialShiftX","setSlideRef","slideRef","baseClassName","count","onSlideRight","onSlideLeft"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormItem.d.ts","sourceRoot":"","sources":["../../../src/components/FormItem/FormItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAclE,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY,EACZ,cAAc;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAC/C,GAAG,EAAE,OAAO,WAAW,CAAC;IACxB,QAAQ,EAAE,OAAO,gBAAgB,CAAC;IAClC,QAAQ,EAAE,OAAO,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"FormItem.d.ts","sourceRoot":"","sources":["../../../src/components/FormItem/FormItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAC;AAclE,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,EAC1C,UAAU,CAAC,WAAW,CAAC,EACvB,YAAY,EACZ,cAAc;IAChB,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACjC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IACvC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG;IAC/C,GAAG,EAAE,OAAO,WAAW,CAAC;IACxB,QAAQ,EAAE,OAAO,gBAAgB,CAAC;IAClC,QAAQ,EAAE,OAAO,gBAAgB,CAAC;CAqFnC,CAAC"}
|
|
@@ -84,6 +84,7 @@ const stylesStatus = {
|
|
|
84
84
|
},
|
|
85
85
|
removePlaceholder: removePlaceholder,
|
|
86
86
|
indent: removable === 'indent',
|
|
87
|
+
noPadding: noPadding,
|
|
87
88
|
children: /*#__PURE__*/ _jsx("div", {
|
|
88
89
|
className: classNames("vkuiFormItem__removable", 'vkuiInternalFormItem__removable'),
|
|
89
90
|
children: wrappedChildren
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n none: classNames(styles.sizeYNone, 'vkuiInternalFormItem--sizeY-none'),\n compact: classNames(styles.sizeYCompact, 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n error: classNames(styles.statusError, 'vkuiInternalFormItem--status-error'),\n valid: classNames(styles.statusValid, 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n RemovableProps {\n top?: React.ReactNode;\n topId?: string;\n /**\n * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n */\n topMultiline?: boolean;\n /**\n * Позволяет поменять тег используемый для top\n * Если оставить пустым, то тег top будет span.\n * Если оставить пустым и использовать htmlFor, то тег top будет label.\n */\n topComponent?: React.ElementType;\n bottom?: React.ReactNode;\n /**\n * Передаётся при использовании `bottom`.\n *\n * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n */\n bottomId?: string;\n status?: 'default' | 'error' | 'valid';\n /**\n * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n *\n * Режим `indent` предназначен для визуального отступа\n */\n removable?: boolean | 'indent';\n /**\n * Удаляет внешние отступы вокруг компонента\n * @since 5.8.0\n */\n noPadding?: boolean;\n /**\n * Помечает поле обязательным\n */\n required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem: React.FC<FormItemProps> & {\n Top: typeof FormItemTop;\n TopLabel: typeof FormItemTopLabel;\n TopAside: typeof FormItemTopAside;\n} = ({\n children,\n top,\n topId,\n topMultiline = false,\n topComponent: topComponentProp,\n bottom,\n status = 'default',\n removable,\n onRemove,\n removePlaceholder = 'Удалить',\n getRootRef,\n htmlFor,\n bottomId,\n noPadding,\n required = false,\n ...restProps\n}: FormItemProps) => {\n const rootEl = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n const wrappedChildren = (\n <React.Fragment>\n {isPrimitiveReactNode(top) ? (\n <FormItemTop>\n <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} id={topId}>\n {top}\n </FormItemTopLabel>\n </FormItemTop>\n ) : hasReactNode(top) ? (\n top\n ) : null}\n {children}\n {hasReactNode(bottom) && (\n <Footnote\n className={styles.bottom}\n id={bottomId}\n role={status === 'error' ? 'alert' : undefined}\n >\n {bottom}\n </Footnote>\n )}\n </React.Fragment>\n );\n\n const context = React.useMemo(() => ({ required, topMultiline }), [required, topMultiline]);\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootEl}\n baseClassName={classNames(\n styles.host,\n !noPadding && styles.withPadding,\n 'vkuiInternalFormItem',\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n hasReactNode(top) && classNames(styles.withTop, 'vkuiInternalFormItem--withTop'),\n removable && classNames(styles.withRemovable, 'vkuiInternalFormItem--removable'),\n )}\n >\n <FormItemContext.Provider value={context}>\n {removable ? (\n <Removable\n align=\"start\"\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove?.(e, rootEl.current);\n }\n }}\n removePlaceholder={removePlaceholder}\n indent={removable === 'indent'}\n >\n <div className={classNames(styles.removable, 'vkuiInternalFormItem__removable')}>\n {wrappedChildren}\n </div>\n </Removable>\n ) : (\n wrappedChildren\n )}\n </FormItemContext.Provider>\n </RootComponent>\n );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","useAdaptivity","useExternRef","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","sizeYClassNames","none","compact","stylesStatus","error","valid","FormItem","children","top","topId","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","id","className","role","undefined","context","useMemo","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,eAAe,QAAQ,eAAY;AAG5C,MAAMC,kBAAkB;IACtBC,MAAMb,sCAA6B;IACnCc,SAASd,yCAAgC;AAC3C;AAEA,MAAMe,eAAe;IACnBC,OAAOhB,wCAA+B;IACtCiB,OAAOjB,wCAA+B;AACxC;AA4CA;;CAEC,GACD,OAAO,MAAMkB,WAIT;QAAC,EACHC,QAAQ,EACRC,GAAG,EACHC,KAAK,EACLC,eAAe,KAAK,EACpBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAW,KAAK,EAEF,WADXC;QAfHhB;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,SAAShC,aAAa0B;IAC5B,MAAM,EAAEO,QAAQ,MAAM,EAAE,GAAGlC;IAE3B,MAAMmC,gCACJ,MAACvC,MAAMwC,QAAQ;;YACZrC,qBAAqBkB,qBACpB,KAACZ;0BACC,cAAA,KAACE;oBAAiBqB,SAASA;oBAASS,WAAWhB;oBAAkBiB,IAAIpB;8BAClED;;iBAGHnB,aAAamB,OACfA,MACE;YACHD;YACAlB,aAAawB,yBACZ,KAAClB;gBACCmC,SAAS;gBACTD,IAAIT;gBACJW,MAAMjB,WAAW,UAAU,UAAUkB;0BAEpCnB;;;;IAMT,MAAMoB,UAAU9C,MAAM+C,OAAO,CAAC,IAAO,CAAA;YAAEZ;YAAUZ;QAAa,CAAA,GAAI;QAACY;QAAUZ;KAAa;IAE1F,qBACE,KAAChB,uDACK6B;QACJL,YAAYM;QACZW,eAAe/C,iCAEb,CAACiC,0CACD,wBACAP,WAAW,aAAaX,YAAY,CAACW,OAAO,EAC5CW,UAAU,aAAazB,eAAe,CAACyB,MAAM,EAC7CpC,aAAamB,QAAQpB,oCAA2B,kCAChD2B,aAAa3B,0CAAiC;kBAGhD,cAAA,KAACW,gBAAgBqC,QAAQ;YAACC,OAAOJ;sBAC9BlB,0BACC,KAACtB;gBACC6C,OAAM;gBACNtB,UAAU,CAACuB;oBACT,IAAIf,mBAAAA,6BAAAA,OAAQgB,OAAO,EAAE;wBACnBxB,qBAAAA,+BAAAA,SAAWuB,GAAGf,OAAOgB,OAAO;oBAC9B;gBACF;gBACAvB,mBAAmBA;gBACnBwB,QAAQ1B,cAAc;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HasComponent, HasRootRef } from '../../types';\nimport { Removable, type RemovableProps } from '../Removable/Removable';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { FormItemTop } from './FormItemTop/FormItemTop';\nimport { FormItemTopAside } from './FormItemTop/FormItemTopAside';\nimport { FormItemTopLabel } from './FormItemTop/FormItemTopLabel';\nimport { FormItemContext } from './context';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n none: classNames(styles.sizeYNone, 'vkuiInternalFormItem--sizeY-none'),\n compact: classNames(styles.sizeYCompact, 'vkuiInternalFormItem--sizeY-compact'),\n};\n\nconst stylesStatus = {\n error: classNames(styles.statusError, 'vkuiInternalFormItem--status-error'),\n valid: classNames(styles.statusValid, 'vkuiInternalFormItem--status-valid'),\n};\n\nexport interface FormItemProps\n extends React.AllHTMLAttributes<HTMLElement>,\n HasRootRef<HTMLElement>,\n HasComponent,\n RemovableProps {\n top?: React.ReactNode;\n topId?: string;\n /**\n * Многострочный вывод заголовка. По умолчанию текст не переносится при переполнении.\n */\n topMultiline?: boolean;\n /**\n * Позволяет поменять тег используемый для top\n * Если оставить пустым, то тег top будет span.\n * Если оставить пустым и использовать htmlFor, то тег top будет label.\n */\n topComponent?: React.ElementType;\n bottom?: React.ReactNode;\n /**\n * Передаётся при использовании `bottom`.\n *\n * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n */\n bottomId?: string;\n status?: 'default' | 'error' | 'valid';\n /**\n * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n *\n * Режим `indent` предназначен для визуального отступа\n */\n removable?: boolean | 'indent';\n /**\n * Удаляет внешние отступы вокруг компонента\n * @since 5.8.0\n */\n noPadding?: boolean;\n /**\n * Помечает поле обязательным\n */\n required?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem: React.FC<FormItemProps> & {\n Top: typeof FormItemTop;\n TopLabel: typeof FormItemTopLabel;\n TopAside: typeof FormItemTopAside;\n} = ({\n children,\n top,\n topId,\n topMultiline = false,\n topComponent: topComponentProp,\n bottom,\n status = 'default',\n removable,\n onRemove,\n removePlaceholder = 'Удалить',\n getRootRef,\n htmlFor,\n bottomId,\n noPadding,\n required = false,\n ...restProps\n}: FormItemProps) => {\n const rootEl = useExternRef(getRootRef);\n const { sizeY = 'none' } = useAdaptivity();\n\n const wrappedChildren = (\n <React.Fragment>\n {isPrimitiveReactNode(top) ? (\n <FormItemTop>\n <FormItemTopLabel htmlFor={htmlFor} Component={topComponentProp} id={topId}>\n {top}\n </FormItemTopLabel>\n </FormItemTop>\n ) : hasReactNode(top) ? (\n top\n ) : null}\n {children}\n {hasReactNode(bottom) && (\n <Footnote\n className={styles.bottom}\n id={bottomId}\n role={status === 'error' ? 'alert' : undefined}\n >\n {bottom}\n </Footnote>\n )}\n </React.Fragment>\n );\n\n const context = React.useMemo(() => ({ required, topMultiline }), [required, topMultiline]);\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootEl}\n baseClassName={classNames(\n styles.host,\n !noPadding && styles.withPadding,\n 'vkuiInternalFormItem',\n status !== 'default' && stylesStatus[status],\n sizeY !== 'regular' && sizeYClassNames[sizeY],\n hasReactNode(top) && classNames(styles.withTop, 'vkuiInternalFormItem--withTop'),\n removable && classNames(styles.withRemovable, 'vkuiInternalFormItem--removable'),\n )}\n >\n <FormItemContext.Provider value={context}>\n {removable ? (\n <Removable\n align=\"start\"\n onRemove={(e) => {\n if (rootEl?.current) {\n onRemove?.(e, rootEl.current);\n }\n }}\n removePlaceholder={removePlaceholder}\n indent={removable === 'indent'}\n noPadding={noPadding}\n >\n <div className={classNames(styles.removable, 'vkuiInternalFormItem__removable')}>\n {wrappedChildren}\n </div>\n </Removable>\n ) : (\n wrappedChildren\n )}\n </FormItemContext.Provider>\n </RootComponent>\n );\n};\n\nFormItem.displayName = 'FormItem';\n\nFormItem.Top = FormItemTop;\nFormItem.Top.displayName = 'FormItem.Top';\n\nFormItem.TopLabel = FormItemTopLabel;\nFormItem.TopLabel.displayName = 'FormItem.TopLabel';\n\nFormItem.TopAside = FormItemTopAside;\nFormItem.TopAside.displayName = 'FormItem.TopAside';\n"],"names":["React","classNames","hasReactNode","isPrimitiveReactNode","useAdaptivity","useExternRef","Removable","RootComponent","Footnote","FormItemTop","FormItemTopAside","FormItemTopLabel","FormItemContext","sizeYClassNames","none","compact","stylesStatus","error","valid","FormItem","children","top","topId","topMultiline","topComponent","topComponentProp","bottom","status","removable","onRemove","removePlaceholder","getRootRef","htmlFor","bottomId","noPadding","required","restProps","rootEl","sizeY","wrappedChildren","Fragment","Component","id","className","role","undefined","context","useMemo","baseClassName","Provider","value","align","e","current","indent","div","displayName","Top","TopLabel","TopAside"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,oBAAoB,QAAQ,kBAAkB;AACjF,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,YAAY,QAAQ,8BAA2B;AAExD,SAASC,SAAS,QAA6B,4BAAyB;AACxE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,WAAW,QAAQ,+BAA4B;AACxD,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,gBAAgB,QAAQ,oCAAiC;AAClE,SAASC,eAAe,QAAQ,eAAY;AAG5C,MAAMC,kBAAkB;IACtBC,MAAMb,sCAA6B;IACnCc,SAASd,yCAAgC;AAC3C;AAEA,MAAMe,eAAe;IACnBC,OAAOhB,wCAA+B;IACtCiB,OAAOjB,wCAA+B;AACxC;AA4CA;;CAEC,GACD,OAAO,MAAMkB,WAIT;QAAC,EACHC,QAAQ,EACRC,GAAG,EACHC,KAAK,EACLC,eAAe,KAAK,EACpBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,SAAS,SAAS,EAClBC,SAAS,EACTC,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,UAAU,EACVC,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAW,KAAK,EAEF,WADXC;QAfHhB;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,SAAShC,aAAa0B;IAC5B,MAAM,EAAEO,QAAQ,MAAM,EAAE,GAAGlC;IAE3B,MAAMmC,gCACJ,MAACvC,MAAMwC,QAAQ;;YACZrC,qBAAqBkB,qBACpB,KAACZ;0BACC,cAAA,KAACE;oBAAiBqB,SAASA;oBAASS,WAAWhB;oBAAkBiB,IAAIpB;8BAClED;;iBAGHnB,aAAamB,OACfA,MACE;YACHD;YACAlB,aAAawB,yBACZ,KAAClB;gBACCmC,SAAS;gBACTD,IAAIT;gBACJW,MAAMjB,WAAW,UAAU,UAAUkB;0BAEpCnB;;;;IAMT,MAAMoB,UAAU9C,MAAM+C,OAAO,CAAC,IAAO,CAAA;YAAEZ;YAAUZ;QAAa,CAAA,GAAI;QAACY;QAAUZ;KAAa;IAE1F,qBACE,KAAChB,uDACK6B;QACJL,YAAYM;QACZW,eAAe/C,iCAEb,CAACiC,0CACD,wBACAP,WAAW,aAAaX,YAAY,CAACW,OAAO,EAC5CW,UAAU,aAAazB,eAAe,CAACyB,MAAM,EAC7CpC,aAAamB,QAAQpB,oCAA2B,kCAChD2B,aAAa3B,0CAAiC;kBAGhD,cAAA,KAACW,gBAAgBqC,QAAQ;YAACC,OAAOJ;sBAC9BlB,0BACC,KAACtB;gBACC6C,OAAM;gBACNtB,UAAU,CAACuB;oBACT,IAAIf,mBAAAA,6BAAAA,OAAQgB,OAAO,EAAE;wBACnBxB,qBAAAA,+BAAAA,SAAWuB,GAAGf,OAAOgB,OAAO;oBAC9B;gBACF;gBACAvB,mBAAmBA;gBACnBwB,QAAQ1B,cAAc;gBACtBM,WAAWA;0BAEX,cAAA,KAACqB;oBAAIZ,WAAW1C,sCAA6B;8BAC1CsC;;iBAILA;;;AAKV,EAAE;AAEFpB,SAASqC,WAAW,GAAG;AAEvBrC,SAASsC,GAAG,GAAGhD;AACfU,SAASsC,GAAG,CAACD,WAAW,GAAG;AAE3BrC,SAASuC,QAAQ,GAAG/C;AACpBQ,SAASuC,QAAQ,CAACF,WAAW,GAAG;AAEhCrC,SAASwC,QAAQ,GAAGjD;AACpBS,SAASwC,QAAQ,CAACH,WAAW,GAAG"}
|
|
@@ -35,5 +35,5 @@ export interface HorizontalScrollProps extends HTMLAttributesWithRootRef<HTMLDiv
|
|
|
35
35
|
/**
|
|
36
36
|
* @see https://vkcom.github.io/VKUI/#/HorizontalScroll
|
|
37
37
|
*/
|
|
38
|
-
export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId,
|
|
38
|
+
export declare const HorizontalScroll: ({ children, getScrollToLeft, getScrollToRight, showArrows, arrowSize, arrowOffsetY, scrollAnimationDuration, getRef, scrollOnAnyWheel, prevButtonTestId, nextButtonTestId, ...restProps }: HorizontalScrollProps) => React.ReactNode;
|
|
39
39
|
//# sourceMappingURL=HorizontalScroll.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAmBhF,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,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;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;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAsGD;;GAEG;AACH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,MAAM,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAErE,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAmBhF,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,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACrC;;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;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAsGD;;GAEG;AACH,eAAO,MAAM,gBAAgB,8LAa1B,qBAAqB,KAAG,KAAK,CAAC,SA0IhC,CAAC"}
|
|
@@ -81,7 +81,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
81
81
|
/**
|
|
82
82
|
* @see https://vkcom.github.io/VKUI/#/HorizontalScroll
|
|
83
83
|
*/ export const HorizontalScroll = (_param)=>{
|
|
84
|
-
var { children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId
|
|
84
|
+
var { children, getScrollToLeft, getScrollToRight, showArrows = true, arrowSize = 'm', arrowOffsetY, scrollAnimationDuration = SCROLL_ONE_FRAME_TIME, getRef, scrollOnAnyWheel = false, prevButtonTestId, nextButtonTestId } = _param, restProps = _object_without_properties(_param, [
|
|
85
85
|
"children",
|
|
86
86
|
"getScrollToLeft",
|
|
87
87
|
"getScrollToRight",
|
|
@@ -92,8 +92,7 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
92
92
|
"getRef",
|
|
93
93
|
"scrollOnAnyWheel",
|
|
94
94
|
"prevButtonTestId",
|
|
95
|
-
"nextButtonTestId"
|
|
96
|
-
"getRootRef"
|
|
95
|
+
"nextButtonTestId"
|
|
97
96
|
]);
|
|
98
97
|
const [canScrollLeft, setCanScrollLeft] = React.useState(false);
|
|
99
98
|
const [canScrollRight, setCanScrollRight] = React.useState(false);
|
|
@@ -103,7 +102,6 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
103
102
|
const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;
|
|
104
103
|
const isCustomScrollingRef = React.useRef(false);
|
|
105
104
|
const scrollerRef = useExternRef(getRef, directionRef);
|
|
106
|
-
const rootRef = useExternRef(getRootRef);
|
|
107
105
|
const animationQueue = React.useRef([]);
|
|
108
106
|
const hasPointer = useAdaptivityHasPointer();
|
|
109
107
|
const scrollTo = React.useCallback((getScrollPosition)=>{
|
|
@@ -165,38 +163,40 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
165
163
|
children
|
|
166
164
|
]);
|
|
167
165
|
useIsomorphicLayoutEffect(function addWheelEventHandler() {
|
|
168
|
-
|
|
169
|
-
if (!
|
|
166
|
+
const scrollEl = scrollerRef.current;
|
|
167
|
+
if (!scrollEl) {
|
|
170
168
|
return noop;
|
|
171
169
|
}
|
|
172
170
|
/**
|
|
173
171
|
* Прокрутка с помощью любого колеса мыши
|
|
174
172
|
*/ const onWheel = (e)=>{
|
|
175
|
-
const left = e.deltaX + (scrollOnAnyWheel ? e.deltaY : 0);
|
|
176
173
|
scrollerRef.current.scrollBy({
|
|
177
|
-
left,
|
|
174
|
+
left: e.deltaX + e.deltaY,
|
|
178
175
|
behavior: 'auto'
|
|
179
176
|
});
|
|
180
|
-
|
|
181
|
-
e.preventDefault();
|
|
182
|
-
}
|
|
177
|
+
e.preventDefault();
|
|
183
178
|
};
|
|
184
179
|
const listenerOptions = {
|
|
185
180
|
passive: false
|
|
186
181
|
};
|
|
187
|
-
(
|
|
188
|
-
|
|
182
|
+
if (scrollOnAnyWheel) {
|
|
183
|
+
scrollEl.addEventListener('wheel', onWheel, listenerOptions);
|
|
184
|
+
}
|
|
185
|
+
scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);
|
|
189
186
|
return ()=>{
|
|
190
|
-
|
|
191
|
-
|
|
187
|
+
if (scrollOnAnyWheel) {
|
|
188
|
+
// @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства
|
|
189
|
+
scrollEl.removeEventListener('wheel', onWheel, listenerOptions);
|
|
190
|
+
}
|
|
191
|
+
// @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства
|
|
192
|
+
scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);
|
|
192
193
|
};
|
|
193
194
|
}, [
|
|
194
|
-
rootRef,
|
|
195
195
|
scrollOnAnyWheel,
|
|
196
|
+
calculateArrowsVisibility,
|
|
196
197
|
scrollerRef
|
|
197
198
|
]);
|
|
198
199
|
return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps), {
|
|
199
|
-
getRootRef: rootRef,
|
|
200
200
|
baseClassName: classNames("vkuiHorizontalScroll__host", 'vkuiInternalHorizontalScroll', showArrows === 'always' && "vkuiHorizontalScroll__withConstArrows"),
|
|
201
201
|
onMouseEnter: calculateArrowsVisibility,
|
|
202
202
|
children: [
|
|
@@ -223,7 +223,6 @@ function doScroll({ scrollElement, getScrollPosition, animationQueue, onScrollTo
|
|
|
223
223
|
/*#__PURE__*/ _jsx("div", {
|
|
224
224
|
className: "vkuiHorizontalScroll__in",
|
|
225
225
|
ref: scrollerRef,
|
|
226
|
-
onScroll: calculateArrowsVisibility,
|
|
227
226
|
children: /*#__PURE__*/ _jsx("div", {
|
|
228
227
|
className: "vkuiHorizontalScroll__inWrapper",
|
|
229
228
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } 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?: ScrollArrowProps['size'];\n /**\n * Смещает иконки кнопок навигации по вертикали.\n */\n arrowOffsetY?: number | string;\n showArrows?: boolean | 'always';\n scrollAnimationDuration?: number;\n /**\n * Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n */\n scrollOnAnyWheel?: boolean;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента\n */\n prevButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента\n */\n nextButtonTestId?: string;\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,\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 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 = 'm',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n prevButtonTestId,\n nextButtonTestId,\n getRootRef,\n ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n const [directionRef, textDirection] = useDirection<HTMLDivElement>();\n const direction = textDirection || 'ltr';\n const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft;\n\n const isCustomScrollingRef = React.useRef(false);\n\n const scrollerRef = useExternRef(getRef, directionRef);\n\n const rootRef = useExternRef(getRootRef);\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: direction,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, direction, 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 React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n useIsomorphicLayoutEffect(\n function addWheelEventHandler() {\n if (!rootRef.current) {\n return noop;\n }\n /**\n * Прокрутка с помощью любого колеса мыши\n */\n const onWheel = (e: WheelEvent) => {\n const left = e.deltaX + (scrollOnAnyWheel ? e.deltaY : 0);\n scrollerRef.current!.scrollBy({ left, behavior: 'auto' });\n if (e.deltaY && scrollOnAnyWheel) {\n e.preventDefault();\n }\n };\n const listenerOptions = { passive: false };\n rootRef.current?.addEventListener('wheel', onWheel, listenerOptions);\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n return () => rootRef.current?.removeEventListener('wheel', onWheel, listenerOptions);\n },\n [rootRef, scrollOnAnyWheel, scrollerRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n getRootRef={rootRef}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles.withConstArrows,\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n data-testid={prevButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowLeft)}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n data-testid={nextButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowRight)}\n onClick={scrollToRight}\n />\n )}\n <div className={styles.in} ref={scrollerRef} onScroll={calculateArrowsVisibility}>\n <div className={styles.inWrapper}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","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","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","getRootRef","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","direction","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","rootRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","useEffect","addWheelEventHandler","onWheel","e","left","deltaX","deltaY","scrollBy","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref","onScroll"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { easeInOutSine } from '../../lib/fx';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow, type ScrollArrowProps } 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?: ScrollArrowProps['size'];\n /**\n * Смещает иконки кнопок навигации по вертикали.\n */\n arrowOffsetY?: number | string;\n showArrows?: boolean | 'always';\n scrollAnimationDuration?: number;\n /**\n * Добавляет возможность прокручивать контент на любое колесо мыши.\n * По умолчанию прокручивается как любой горизонтальный контент через shift.\n */\n scrollOnAnyWheel?: boolean;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента\n */\n prevButtonTestId?: string;\n /**\n * Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента\n */\n nextButtonTestId?: string;\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,\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 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 = 'm',\n arrowOffsetY,\n scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,\n getRef,\n scrollOnAnyWheel = false,\n prevButtonTestId,\n nextButtonTestId,\n ...restProps\n}: HorizontalScrollProps): React.ReactNode => {\n const [canScrollLeft, setCanScrollLeft] = React.useState(false);\n const [canScrollRight, setCanScrollRight] = React.useState(false);\n const [directionRef, textDirection] = useDirection<HTMLDivElement>();\n const direction = textDirection || 'ltr';\n const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight;\n const setCanScrollEnd = direction === '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: direction,\n }),\n );\n if (animationQueue.current.length === 1) {\n animationQueue.current[0]();\n }\n },\n [scrollerRef, scrollAnimationDuration, direction, 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 React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);\n\n useIsomorphicLayoutEffect(\n function addWheelEventHandler() {\n const scrollEl = scrollerRef.current;\n if (!scrollEl) {\n return noop;\n }\n /**\n * Прокрутка с помощью любого колеса мыши\n */\n const onWheel = (e: WheelEvent) => {\n scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });\n e.preventDefault();\n };\n\n const listenerOptions = { passive: false };\n\n if (scrollOnAnyWheel) {\n scrollEl.addEventListener('wheel', onWheel, listenerOptions);\n }\n scrollEl.addEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n\n return () => {\n if (scrollOnAnyWheel) {\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для wheel нет passive свойства\n scrollEl.removeEventListener('wheel', onWheel, listenerOptions);\n }\n // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions для scroll нет passive свойства\n scrollEl.removeEventListener('scroll', calculateArrowsVisibility, listenerOptions);\n };\n },\n [scrollOnAnyWheel, calculateArrowsVisibility, scrollerRef],\n );\n\n return (\n <RootComponent\n {...restProps}\n baseClassName={classNames(\n styles.host,\n 'vkuiInternalHorizontalScroll',\n showArrows === 'always' && styles.withConstArrows,\n )}\n onMouseEnter={calculateArrowsVisibility}\n >\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (\n <ScrollArrow\n data-testid={prevButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"left\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowLeft)}\n onClick={scrollToLeft}\n />\n )}\n {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (\n <ScrollArrow\n data-testid={nextButtonTestId}\n size={arrowSize}\n offsetY={arrowOffsetY}\n direction=\"right\"\n aria-hidden\n tabIndex={-1}\n className={classNames(styles.arrow, styles.arrowRight)}\n onClick={scrollToRight}\n />\n )}\n <div className={styles.in} ref={scrollerRef}>\n <div className={styles.inWrapper}>{children}</div>\n </div>\n </RootComponent>\n );\n};\n"],"names":["React","classNames","noop","useAdaptivityHasPointer","useDirection","useExternRef","easeInOutSine","useIsomorphicLayoutEffect","RootComponent","ScrollArrow","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","currentScrollLeft","scrollEnd","max","requestAnimationFrame","shift","length","HorizontalScroll","children","getScrollToLeft","getScrollToRight","showArrows","arrowSize","arrowOffsetY","getRef","scrollOnAnyWheel","prevButtonTestId","nextButtonTestId","restProps","canScrollLeft","setCanScrollLeft","useState","canScrollRight","setCanScrollRight","directionRef","direction","setCanScrollStart","setCanScrollEnd","isCustomScrollingRef","useRef","scrollerRef","hasPointer","scrollTo","useCallback","current","push","firstElementChild","scrollWidth","scrollToLeft","i","scrollToRight","calculateArrowsVisibility","useEffect","addWheelEventHandler","scrollEl","onWheel","e","scrollBy","left","deltaX","deltaY","behavior","preventDefault","listenerOptions","passive","addEventListener","removeEventListener","baseClassName","onMouseEnter","undefined","data-testid","size","offsetY","aria-hidden","tabIndex","className","onClick","div","ref"],"mappings":"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"}
|
|
@@ -9,5 +9,5 @@ export interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'ke
|
|
|
9
9
|
*
|
|
10
10
|
* @private
|
|
11
11
|
*/
|
|
12
|
-
export declare const ModalCardInternal: ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose, onClosed, ...restProps }: ModalCardInternalProps) => ReactNode;
|
|
12
|
+
export declare const ModalCardInternal: ({ icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose, onClosed, disableFocusTrap, ...restProps }: ModalCardInternalProps) => ReactNode;
|
|
13
13
|
//# sourceMappingURL=ModalCardInternal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalCardInternal.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCardInternal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsB,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAa5F,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoB9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,aAAa,CAAC;IACzF,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACjD;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ModalCardInternal.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCard/ModalCardInternal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsB,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAa5F,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAoB9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,aAAa,CAAC;IACzF,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACjD;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,gVA0B3B,sBAAsB,KAAG,SAyG3B,CAAC"}
|
|
@@ -35,7 +35,7 @@ const transitionStateClassNames = {
|
|
|
35
35
|
*
|
|
36
36
|
* @private
|
|
37
37
|
*/ export const ModalCardInternal = (_param)=>{
|
|
38
|
-
var { icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose = noop, onClosed } = _param, restProps = _object_without_properties(_param, [
|
|
38
|
+
var { icon, title, titleComponent, description, descriptionComponent, children, actions, size, open, style: styleProp, className, preventClose, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalDismissButtonTestId, getRootRef, dismissButtonMode, dismissLabel, noFocusToDialog, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap } = _param, restProps = _object_without_properties(_param, [
|
|
39
39
|
"icon",
|
|
40
40
|
"title",
|
|
41
41
|
"titleComponent",
|
|
@@ -58,7 +58,8 @@ const transitionStateClassNames = {
|
|
|
58
58
|
"onOpen",
|
|
59
59
|
"onOpened",
|
|
60
60
|
"onClose",
|
|
61
|
-
"onClosed"
|
|
61
|
+
"onClosed",
|
|
62
|
+
"disableFocusTrap"
|
|
62
63
|
]);
|
|
63
64
|
const platform = usePlatform();
|
|
64
65
|
const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
|
|
@@ -111,7 +112,7 @@ const transitionStateClassNames = {
|
|
|
111
112
|
useScrollLock(!hidden);
|
|
112
113
|
useFocusTrap(ref, {
|
|
113
114
|
autoFocus: !noFocusToDialog,
|
|
114
|
-
disabled: !opened || hidden
|
|
115
|
+
disabled: !opened || hidden || disableFocusTrap
|
|
115
116
|
});
|
|
116
117
|
return /*#__PURE__*/ _jsxs(ModalOutlet, {
|
|
117
118
|
hidden: hidden,
|