From 45cfc2560911ec0100428bd5eb7bdfafcfeb70f7 Mon Sep 17 00:00:00 2001 From: mahdi andalib Date: Mon, 4 Apr 2022 12:01:43 +0430 Subject: [PATCH] update --- package.json | 1 + src/App.js | 3 +- src/components/IndianaDragScroll/index.js | 97 +++++++++++++++++++++++ src/components/SelectYear/index.js | 25 ++++-- yarn.lock | 21 ++++- 5 files changed, 139 insertions(+), 8 deletions(-) create mode 100644 src/components/IndianaDragScroll/index.js diff --git a/package.json b/package.json index 94a8be1..40c24ff 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "react-apexcharts": "^1.3.9", "react-dom": "^17.0.2", "react-icons": "^4.3.1", + "react-indiana-drag-scroll": "^2.1.0", "react-input-range": "^1.3.0", "react-redux": "^7.2.6", "react-scripts": "5.0.0", diff --git a/src/App.js b/src/App.js index 2ebb532..7e7f800 100644 --- a/src/App.js +++ b/src/App.js @@ -70,6 +70,7 @@ import TitleSubtitle from "./components/TitleSubtitle"; import TimeLine from "./components/TimeLineComponent/Timeline"; import ProfilePicNextToEachOther from "./components/ProfilePicNextToEachOther"; import SelectYear from "./components/SelectYear"; +import IndianaDragScroll from "./components/IndianaDragScroll"; // import Digikala from "./components/Digikala/ImageSlider"; @@ -147,7 +148,7 @@ function App() { {/* */} - + {/* */} {/* */} diff --git a/src/components/IndianaDragScroll/index.js b/src/components/IndianaDragScroll/index.js new file mode 100644 index 0000000..1617f52 --- /dev/null +++ b/src/components/IndianaDragScroll/index.js @@ -0,0 +1,97 @@ +import React from "react"; + +import ScrollContainer from "react-indiana-drag-scroll"; +/** min から max までの数字の入った配列を生成する関数 */ +const range = (min, max, step = 1) => { + return Array.from( + { length: (max - min + step) / step }, + (v, k) => min + k * step + ); +}; +export default function IndianaDragScroll() { + return ( +
+ +
+
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
mahdi
+
+ +
+ divider between vertical && horizontal scroll bar inside + IndianaDragScroll COMPONENT +
+ +
+
この上では
+
ドラッグしてもスクロールしません
+
+
+ {range(0, 100).map((i, index) => ( +
+ {i} +
+ ))} +
+ +
+ ); +} diff --git a/src/components/SelectYear/index.js b/src/components/SelectYear/index.js index a3207f2..097a4f5 100644 --- a/src/components/SelectYear/index.js +++ b/src/components/SelectYear/index.js @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import ScrollContainer from "react-indiana-drag-scroll"; import "./index.scss"; @@ -13,9 +14,21 @@ const SelectYear = ({ items }) => {
-
- {items.map((item, index) => ( -
+ +
+
+ {items.map((item, index) => (

setSelectedYear(item)} className={`text-base my-2 cursor-pointer text-center ${ @@ -26,9 +39,9 @@ const SelectYear = ({ items }) => { > {item.year}

-
- ))} -
+ ))} +
+
diff --git a/yarn.lock b/yarn.lock index 0d72e48..e0ae862 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3223,7 +3223,7 @@ cjs-module-lexer@^1.0.0: resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz" integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA== -classnames@^2.2.5: +classnames@^2.2.5, classnames@^2.2.6: version "2.3.1" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz" integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA== @@ -3770,6 +3770,11 @@ date-fns@^2.28.0: resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.28.0.tgz" integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== +debounce@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5" + integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug== + debug@2.6.9, debug@^2.6.0, debug@^2.6.9: version "2.6.9" resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz" @@ -4091,6 +4096,11 @@ duplexer@^0.1.2: resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz" integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg== +easy-bem@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/easy-bem/-/easy-bem-1.1.1.tgz#1bfcc10425498090bcfddc0f9c000aba91399e03" + integrity sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A== + ee-first@1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz" @@ -7654,6 +7664,15 @@ react-icons@^4.3.1: resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz" integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ== +react-indiana-drag-scroll@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz#37654eae8caced01cdecc8bce55f0382871a021d" + integrity sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew== + dependencies: + classnames "^2.2.6" + debounce "^1.2.0" + easy-bem "^1.1.1" + react-input-range@^1.3.0: version "1.3.0" resolved "https://registry.npmjs.org/react-input-range/-/react-input-range-1.3.0.tgz"