From 31433e637752080b69238eddcf681c21b6096405 Mon Sep 17 00:00:00 2001 From: mahdi Date: Thu, 7 Jul 2022 18:26:43 +0430 Subject: [PATCH] build(deps): update package.json, src/components/Tabbar/index.js and yarn.lock --- package.json | 1 + src/components/Accordion/index.js | 259 ++++++++++++++++++++++++++++++ src/components/Questions/index.js | 19 +++ src/components/Tabbar/index.js | 5 +- yarn.lock | 92 ++++++++++- 5 files changed, 370 insertions(+), 6 deletions(-) create mode 100644 src/components/Accordion/index.js create mode 100644 src/components/Questions/index.js diff --git a/package.json b/package.json index f0be5e3..9469328 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "node-sass": "^7.0.1", "react": "^18.2.0", + "react-beautiful-dnd": "^13.1.0", "react-dom": "^18.2.0", "react-hook-form": "^7.33.1", "react-scripts": "5.0.1", diff --git a/src/components/Accordion/index.js b/src/components/Accordion/index.js new file mode 100644 index 0000000..80ccf42 --- /dev/null +++ b/src/components/Accordion/index.js @@ -0,0 +1,259 @@ +import React, { useState } from "react"; +import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +import CircleInCircle from "../../MiniComponents/CircleInCircle"; +import Button from "../../ButtonDesign/Button"; + +const finalSpaceCharacters = [ + { + id: "gary", + test: "mahdi", + title: + "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", + video: 4, + min: 30, + subItems: [ + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", + }, + { + name: "شرکت های بزرگ خیلی خوب هستند", + }, + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", + }, + ], + }, + { + id: "garfdsy", + test: "mahdi", + title: + "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", + video: 4, + min: 30, + subItems: [ + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", + }, + { + name: "شرکت های بزرگ خیلی خوب هستند", + }, + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", + }, + ], + }, + { + id: "kvn", + name: "KVN", + thumb: "/images/kvn.png", + test: "mahdi", + title: + "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", + video: 4, + min: 30, + + subItems: [ + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", + }, + { + name: "شرکت های بزرگ خیلی خوب هستند", + }, + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", + }, + ], + }, + { + id: "mooncake", + name: "Mooncake", + thumb: "/images/kvn.png", + test: "mahdi", + title: + "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", + video: 4, + min: 30, + subItems: [ + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", + }, + { + name: "شرکت های بزرگ خیلی خوب هستند", + }, + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", + }, + ], + }, + { + id: "garfsddsfy", + test: "mahdi", + title: + "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", + video: 4, + min: 30, + subItems: [ + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", + }, + { + name: "شرکت های بزرگ خیلی خوب هستند", + }, + { + name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", + }, + ], + }, +]; + +function Accordion({ vod }) { + const [activeAccordion, setActiveAccordion] = useState(null); + const [characters, updateCharacters] = useState(finalSpaceCharacters); + + function handleOnDragEnd(result) { + if (!result.destination) return; + + const items = Array.from(characters); + const [reorderedItem] = items.splice(result.source.index, 1); + items.splice(result.destination.index, 0, reorderedItem); + + updateCharacters(items); + } + + return ( +
+ + + {(provided) => ( +
+ {characters.map((item, index) => ( + + {(provided) => ( +
+ {/* parent */} +
+ setActiveAccordion( + activeAccordion === item ? null : item + ) + } + className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ + activeAccordion === item + ? "border-primary" + : "border-gray-100" + } cursor-pointer`} + > + +

+ {item.title} +

+ {vod && ( +
+

+ دقیقه: + {item.min} +

+
+

+ ویدیو: + {item.video} +

+
+ )} + +
{" "} + {/* child */} + {activeAccordion === item && + item.subItems.map((subItem, i) => ( +
+
+ {vod === !true && ( + line + )} + + {i + 1} + +
+
+

+ {subItem.name} +

+
+ {vod ? ( + <> +
+

+ دقیقه: + {item.min} +

+
+ + ) : ( + <> + delete-button + edit-button + + )} +
+
+ ))} + {provided.placeholder} +
+ )} +
+ ))} + + {provided.placeholder} +
+ )} +
+
+
+ ); +} + +export default Accordion; +Accordion.defaultProps = { + vod: true, +}; diff --git a/src/components/Questions/index.js b/src/components/Questions/index.js new file mode 100644 index 0000000..4b2ad8e --- /dev/null +++ b/src/components/Questions/index.js @@ -0,0 +1,19 @@ +import React from "react"; +import CustomSelectBox from "../CustomSelectBox"; + +const Questions = () => { + return ( +
+ +
+ ); +}; + +export default Questions; diff --git a/src/components/Tabbar/index.js b/src/components/Tabbar/index.js index 58c005d..8fc9ce8 100644 --- a/src/components/Tabbar/index.js +++ b/src/components/Tabbar/index.js @@ -1,6 +1,7 @@ import React, { useState } from "react"; import Button from "../Button"; import Condition from "../Condition"; +import Questions from "../Questions"; import Settingss from "../Settingss"; import Tavabee from "../Tavabee"; @@ -46,8 +47,8 @@ Tabbar.defaultProps = { { title: "سوالات", className: "", - components: "iran", - bg: "bg-blue-500", + components: , + bg: "bg-transparent", }, { title: "چک لیست", diff --git a/yarn.lock b/yarn.lock index 55d2028..29d6bc8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1027,7 +1027,7 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.18.6" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.6.tgz" integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ== @@ -1888,6 +1888,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/html-minifier-terser@^6.0.0": version "6.1.0" resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz" @@ -1994,6 +2002,16 @@ dependencies: "@types/react" "*" +"@types/react-redux@^7.1.20": + version "7.1.24" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0" + integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react@*": version "18.0.14" resolved "https://registry.npmjs.org/@types/react/-/react-18.0.14.tgz" @@ -3387,6 +3405,13 @@ css-blank-pseudo@^3.0.3: dependencies: postcss-selector-parser "^6.0.9" +css-box-model@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" + integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== + dependencies: + tiny-invariant "^1.0.6" + css-declaration-sorter@^6.3.0: version "6.3.0" resolved "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz" @@ -4971,6 +4996,13 @@ he@^1.2.0: resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== +hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hoopy@^0.1.4: version "0.1.4" resolved "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz" @@ -6404,6 +6436,11 @@ memfs@^3.1.2, memfs@^3.4.3: dependencies: fs-monkey "^1.0.3" +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + meow@^9.0.0: version "9.0.0" resolved "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz" @@ -7756,7 +7793,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.8.1: +prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7815,6 +7852,11 @@ quick-lru@^5.1.1: resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== +raf-schd@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== + raf@^3.4.1: version "3.4.1" resolved "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz" @@ -7856,6 +7898,19 @@ react-app-polyfill@^3.0.0: regenerator-runtime "^0.13.9" whatwg-fetch "^3.6.2" +react-beautiful-dnd@^13.1.0: + version "13.1.0" + resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" + integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== + dependencies: + "@babel/runtime" "^7.9.2" + css-box-model "^1.2.0" + memoize-one "^5.1.1" + raf-schd "^4.0.2" + react-redux "^7.2.0" + redux "^4.0.4" + use-memo-one "^1.1.1" + react-dev-utils@^12.0.1: version "12.0.1" resolved "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz" @@ -7904,12 +7959,12 @@ react-hook-form@^7.33.1: resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.33.1.tgz#8c4410e3420788d3b804d62cc4c142915c2e46d0" integrity sha512-ydTfTxEJdvgjCZBj5DDXRc58oTEfnFupEwwTAQ9FSKzykEJkX+3CiAkGtAMiZG7IPWHuzgT6AOBfogiKhUvKgg== -react-is@^16.13.1: +react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^17.0.1: +react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -7919,6 +7974,18 @@ react-is@^18.0.0: resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== +react-redux@^7.2.0: + version "7.2.8" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" + integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/react-redux" "^7.1.20" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^17.0.2" + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz" @@ -8056,6 +8123,13 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux@^4.0.0, redux@^4.0.4: + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^10.0.1: version "10.0.1" resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz" @@ -9066,6 +9140,11 @@ thunky@^1.0.2: resolved "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz" integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA== +tiny-invariant@^1.0.6: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" + integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== + tmpl@1.0.5: version "1.0.5" resolved "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz" @@ -9333,6 +9412,11 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" +use-memo-one@^1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" + integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== + util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"