diff --git a/src/shared/ui/Scroll/Scroll.tsx b/src/shared/ui/Scroll/Scroll.tsx index 678289ce..5b086e68 100644 --- a/src/shared/ui/Scroll/Scroll.tsx +++ b/src/shared/ui/Scroll/Scroll.tsx @@ -1,19 +1,58 @@ -import React, { FC } from 'react' +import React, { FC, MouseEvent, useRef } from 'react' import styles from './Scroll.module.scss' export type TProps = { className?: string children: React.ReactNode + withManualGrip?: boolean } /** * Scrollbar * @param {string} className - для дополнительных свойств * @param {React.ReactNode} children - элементы внутри компонента + * @param {boolean} withManualGrip - флаг, использовать ли ручной захват содержимого для скроллинга */ -const Scroll: FC = ({ className, children }) => { - return
{children}
+const Scroll: FC = ({ withManualGrip = false, className, children }) => { + const listRef = useRef(null) + const startX = useRef(0) + const startScrollLeft = useRef(0) + const isDragging = useRef(false) + + const handleMouseDown = (e: MouseEvent) => { + startX.current = e.clientX + if (listRef && listRef.current) { + startScrollLeft.current = listRef.current.scrollLeft + } + isDragging.current = true + } + + const handleMouseMove = (e: MouseEvent) => { + if (!isDragging.current) return + const deltaX = e.clientX - startX.current + if (listRef.current) { + listRef.current.scrollLeft = startScrollLeft.current - deltaX + } + } + + const handleMouseUp = () => { + isDragging.current = false + } + + return withManualGrip ? ( +
+ {children} +
+ ) : ( +
{children}
+ ) } export default Scroll diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx index 18a4930c..396240c4 100644 --- a/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx +++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/ReviewsBlock.tsx @@ -1,4 +1,4 @@ -import { MouseEvent, useEffect, useRef, type FC } from 'react' +import { useEffect, type FC } from 'react' import { useSelector } from 'react-redux' import { StateSchema } from '@/app/providers/StoreProvider' @@ -10,6 +10,7 @@ import { IFeedback } from '@/features/Reviews/model/types/types' import { useAppDispatch } from '@/shared/libs/hooks/store' import Heading, { HeadingType } from '@/shared/ui/Heading/Heading' import Link from '@/shared/ui/Link/Link' +import Scroll from '@/shared/ui/Scroll/Scroll' import styles from './reviewsBlock.module.scss' @@ -31,10 +32,6 @@ const ReviewsBlock: FC = props => { const dispatch = useAppDispatch() const reviews = useSelector((store: StateSchema) => store.feedbacks) - const listRef = useRef(null) - const startX = useRef(0) - const startScrollLeft = useRef(0) - const isDragging = useRef(false) useEffect(() => { dispatch(getFirstFeedbacks()) @@ -42,26 +39,6 @@ const ReviewsBlock: FC = props => { dispatch(getAverageMark()) }, []) - const handleMouseDown = (e: MouseEvent) => { - startX.current = e.clientX - if (listRef.current) { - startScrollLeft.current = listRef.current.scrollLeft - } - isDragging.current = true - } - - const handleMouseMove = (e: MouseEvent) => { - if (!isDragging.current) return - const deltaX = e.clientX - startX.current - if (listRef.current) { - listRef.current.scrollLeft = startScrollLeft.current - deltaX - } - } - - const handleMouseUp = () => { - isDragging.current = false - } - return (
@@ -75,13 +52,7 @@ const ReviewsBlock: FC = props => { {IconLink({ styles: styles.svg })}
-
+ = props => { index={index} /> ))} -
+
) } diff --git a/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss b/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss index 0a6db1ac..594f0f8e 100644 --- a/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss +++ b/src/widgets/ReviewsBlock/ui/ReviewsBlock/reviewsBlock.module.scss @@ -34,27 +34,4 @@ margin-left: 0.5rem; vertical-align: middle; } - - .list { - display: flex; - gap: 20px; - max-width: 100%; - padding: 20px 25px; - overflow: auto hidden; - cursor: grab; - - &::-webkit-scrollbar { - height: 3px; - } - - &::-webkit-scrollbar-thumb { - background: color.$theme-primary-color; - cursor: grab; - } - - &::-webkit-scrollbar-track { - margin-left: 25px; - margin-right: 25px; - } - } } diff --git a/src/widgets/ViewedProducts/ViewedProducts.module.scss b/src/widgets/ViewedProducts/ViewedProducts.module.scss index e64dce74..02d4ece6 100644 --- a/src/widgets/ViewedProducts/ViewedProducts.module.scss +++ b/src/widgets/ViewedProducts/ViewedProducts.module.scss @@ -33,5 +33,6 @@ &__scroll { width: 100%; + user-select: none; } } diff --git a/src/widgets/ViewedProducts/ViewedProducts.tsx b/src/widgets/ViewedProducts/ViewedProducts.tsx index 8d48314b..9b6e9f2b 100644 --- a/src/widgets/ViewedProducts/ViewedProducts.tsx +++ b/src/widgets/ViewedProducts/ViewedProducts.tsx @@ -52,7 +52,9 @@ export const ViewedProducts: FC = ({ title, hasLabel }) => {title} {hasLabel && Вы смотрели} - {productList} + + {productList} + ) }