From 0ac61e3ac19c917ec8c0f712192d863011e5f400 Mon Sep 17 00:00:00 2001 From: kirill-k88 Date: Tue, 14 May 2024 07:56:27 +0300 Subject: [PATCH 1/2] =?UTF-8?q?=D0=92=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE?= =?UTF-8?q?=D0=BD=D0=B5=D0=BD=D1=82=20Scroll=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BD=D0=B5=D0=BE=D0=B1=D1=8F=D0=B7?= =?UTF-8?q?=D0=B0=D1=82=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=BF=D1=80?= =?UTF-8?q?=D0=BE=D0=BF=D1=81,=20=D0=BF=D0=BE=D0=B7=D0=B2=D0=BE=D0=BB?= =?UTF-8?q?=D1=8F=D1=8E=D1=89=D0=B8=D0=B9=20=D1=81=D0=BA=D1=80=D0=BE=D0=BB?= =?UTF-8?q?=D0=B8=D1=82=D1=8C=20=D0=B7=D0=B0=D1=85=D0=B2=D0=B0=D1=82=D1=8B?= =?UTF-8?q?=D0=B2=D0=B0=D1=8F=20=D1=8D=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82?= =?UTF-8?q?.=20=D0=9A=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20?= =?UTF-8?q?=D0=9D=D0=B0=D1=88=D0=B8=20=D0=BA=D0=BB=D0=B8=D0=B5=D0=BD=D1=82?= =?UTF-8?q?=D1=8B=20=D0=BE=20=D0=BD=D0=B0=D1=81=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=B4=D0=B5=D0=BB=D0=B0=D0=BD=20=D0=BD=D0=B0=20=D0=B8=D1=81?= =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8?= =?UTF-8?q?=D0=B5=20Scroll?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/Scroll/Scroll.tsx | 45 +++++++++++++++++-- .../ui/ReviewsBlock/ReviewsBlock.tsx | 37 ++------------- .../ui/ReviewsBlock/reviewsBlock.module.scss | 23 ---------- .../ViewedProducts/ViewedProducts.module.scss | 1 + src/widgets/ViewedProducts/ViewedProducts.tsx | 4 +- 5 files changed, 50 insertions(+), 60 deletions(-) diff --git a/src/shared/ui/Scroll/Scroll.tsx b/src/shared/ui/Scroll/Scroll.tsx index 678289ce..c6738cc6 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.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} + ) } From cd85ba7c8ac2b6fc5f270b1b57e2da2bf76ab997 Mon Sep 17 00:00:00 2001 From: kirill-k88 Date: Wed, 15 May 2024 19:08:34 +0300 Subject: [PATCH 2/2] =?UTF-8?q?=D0=B8=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=BF=D1=80=D0=BE=D0=B2=D0=B5=D1=80=D0=BA=D1=83=20?= =?UTF-8?q?=D1=80=D0=B5=D1=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/Scroll/Scroll.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/ui/Scroll/Scroll.tsx b/src/shared/ui/Scroll/Scroll.tsx index c6738cc6..5b086e68 100644 --- a/src/shared/ui/Scroll/Scroll.tsx +++ b/src/shared/ui/Scroll/Scroll.tsx @@ -22,7 +22,7 @@ const Scroll: FC = ({ withManualGrip = false, className, children }) => const handleMouseDown = (e: MouseEvent) => { startX.current = e.clientX - if (listRef.current) { + if (listRef && listRef.current) { startScrollLeft.current = listRef.current.scrollLeft } isDragging.current = true