From a2c2404ba408cfe93d06c1d625f74e4ef5ba065a Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Thu, 17 Feb 2022 22:36:33 +0330 Subject: [PATCH] slide added --- src/App.js | 2 +- src/components/Digikala/Offer.js | 164 ++++++++++++++++++++++++++-- src/components/Digikala/index.scss | 11 ++ src/components/ReactTable4/index.js | 2 +- 4 files changed, 169 insertions(+), 10 deletions(-) create mode 100644 src/components/Digikala/index.scss diff --git a/src/App.js b/src/App.js index ef7722c..815fbfe 100644 --- a/src/App.js +++ b/src/App.js @@ -53,7 +53,7 @@ function App() { return (
- + {/* */} {/* */} {/* */} {/* */} diff --git a/src/components/Digikala/Offer.js b/src/components/Digikala/Offer.js index 5d1e9ab..87cb0ec 100644 --- a/src/components/Digikala/Offer.js +++ b/src/components/Digikala/Offer.js @@ -1,4 +1,5 @@ import React from "react"; +import "./index"; import leftArrow from "./white-left-arrow.svg"; import General from "./General.png"; @@ -17,7 +18,7 @@ const Offer = ({ products }) => { >
{/* right */} -
+
پیـــــشنهاد
@@ -32,9 +33,39 @@ const Offer = ({ products }) => {
{/* left */} -
+ {/* no-scrollbar */} +
{ + const slider = window.document.querySelector(".tabbar"); + window.isDown = true; + window.startX = e.pageX - slider.offsetLeft; + window.scrollLeft = slider.scrollLeft; + }} + onMouseLeave={(e) => { + window.isDown = false; + }} + onMouseUp={(e) => { + window.isDown = false; + }} + onMouseMove={(e) => { + const slider = window.document.querySelector(".tabbar"); + if (!window.isDown) return; + e.preventDefault(); + const x = e.pageX - slider.offsetLeft; + const walk = (x - window.startX) * 1; + slider.scrollLeft = window.scrollLeft - walk; + }} + > {products.map((product, index) => ( -
+
{ + if (window.isDown) return e.preventDefault(); + ///do here + }} + >
{/* right */} @@ -55,8 +86,17 @@ const Offer = ({ products }) => { className="text-left text-xs line-through my-2 ml-3" style={{ color: "#c0c2c5" }} > - 559000 + {product.discountPrice}

+
+
+
))}
@@ -69,9 +109,117 @@ export default Offer; Offer.defaultProps = { products: [ - { image: o2, price: 20900000, discount: 7, rangeWidht: 33 }, - { image: o3, price: 11000000, discount: 2, rangeWidht: 75 }, - { image: r1, price: 3205000, discount: 70, rangeWidht: 72 }, - { image: r2, price: 30000, discount: 75, rangeWidht: 96 }, + { + image: o2, + price: 20900000, + discount: 7, + rangeWidth: "33%", + discountPrice: 75000, + }, + { + image: o3, + price: 11000000, + discount: 2, + rangeWidth: "75%", + discountPrice: 75000, + }, + { + image: r1, + price: 3205000, + discount: 70, + rangeWidth: "72%", + discountPrice: 75000, + }, + { + image: r2, + price: 30000, + discount: 75, + rangeWidth: "44%", + discountPrice: 75000, + }, + { + image: o2, + price: 20900000, + discount: 7, + rangeWidth: "33%", + discountPrice: 75000, + }, + { + image: o3, + price: 11000000, + discount: 2, + rangeWidth: "75%", + discountPrice: 75000, + }, + { + image: r1, + price: 3205000, + discount: 70, + rangeWidth: "72%", + discountPrice: 75000, + }, + { + image: r2, + price: 30000, + discount: 75, + rangeWidth: "44%", + discountPrice: 75000, + }, + { + image: o2, + price: 20900000, + discount: 7, + rangeWidth: "33%", + discountPrice: 75000, + }, + { + image: o3, + price: 11000000, + discount: 2, + rangeWidth: "75%", + discountPrice: 75000, + }, + { + image: r1, + price: 3205000, + discount: 70, + rangeWidth: "72%", + discountPrice: 75000, + }, + { + image: r2, + price: 30000, + discount: 75, + rangeWidth: "44%", + discountPrice: 75000, + }, + { + image: o2, + price: 20900000, + discount: 7, + rangeWidth: "33%", + discountPrice: 75000, + }, + { + image: o3, + price: 11000000, + discount: 2, + rangeWidth: "75%", + discountPrice: 75000, + }, + { + image: r1, + price: 3205000, + discount: 70, + rangeWidth: "72%", + discountPrice: 75000, + }, + { + image: r2, + price: 30000, + discount: 75, + rangeWidth: "44%", + discountPrice: 75000, + }, ], }; diff --git a/src/components/Digikala/index.scss b/src/components/Digikala/index.scss new file mode 100644 index 0000000..9b6c0a0 --- /dev/null +++ b/src/components/Digikala/index.scss @@ -0,0 +1,11 @@ +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} +.tabbar { + cursor: pointer; +} +.active2, +.active2 li a { + cursor: move !important; +} diff --git a/src/components/ReactTable4/index.js b/src/components/ReactTable4/index.js index e7183cf..6289bdd 100644 --- a/src/components/ReactTable4/index.js +++ b/src/components/ReactTable4/index.js @@ -42,7 +42,7 @@ const ReactTable3 = ({ breadCrumbs, subTitle, title }) => {

{subTitle}

- {/* */} +
);