From d879791dae147d9df4c915373a2ab3f5ccf22ac5 Mon Sep 17 00:00:00 2001 From: Pkpedram Date: Tue, 22 Feb 2022 12:08:52 +0330 Subject: [PATCH] Label Input Done --- package-lock.json | 16 ++++ package.json | 1 + src/App.css | 4 +- src/App.js | 2 +- src/components/Product/index.js | 8 +- src/view/addProduct/Main/index.js | 2 +- src/view/addProduct/Sidebar/index.js | 2 + src/view/addProduct/components/lable.js | 98 +++++++++++++++++++++++++ src/view/addProduct/components/tags.js | 5 +- src/view/addProduct/index.js | 2 +- src/view/services/index.js | 22 ++++-- yarn.lock | 9 ++- 12 files changed, 152 insertions(+), 19 deletions(-) create mode 100644 src/view/addProduct/components/lable.js diff --git a/package-lock.json b/package-lock.json index b29f893..eb5f496 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "lottie-web": "^5.8.1", "mapir-react-component": "^2.0.1", "react": "^17.0.2", + "react-colorful": "^5.5.1", "react-dom": "^17.0.2", "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.4.2", @@ -14146,6 +14147,15 @@ "node": ">=14" } }, + "node_modules/react-colorful": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", + "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", @@ -27579,6 +27589,12 @@ "whatwg-fetch": "^3.6.2" } }, + "react-colorful": { + "version": "5.5.1", + "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz", + "integrity": "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==", + "requires": {} + }, "react-dev-utils": { "version": "12.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz", diff --git a/package.json b/package.json index 42cb5fd..a0d4f50 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "lottie-web": "^5.8.1", "mapir-react-component": "^2.0.1", "react": "^17.0.2", + "react-colorful": "^5.5.1", "react-dom": "^17.0.2", "react-draft-wysiwyg": "^1.14.7", "react-dropzone": "^11.4.2", diff --git a/src/App.css b/src/App.css index 2575e5d..d241c0d 100644 --- a/src/App.css +++ b/src/App.css @@ -6,9 +6,9 @@ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } -*{ +/* *{ transition: all 0.3s; -} +} */ .rtl{ direction: rtl; } diff --git a/src/App.js b/src/App.js index 9810ece..e4bb529 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ import logo from './logo.svg'; import './App.css'; -import { HashRouter as Router, Routes, Route } from "react-router-dom"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Dashboard2 from './view/dashboard2/Dashboard2'; import Header from './components/header/Header'; import Nav from './components/nav/Nav'; diff --git a/src/components/Product/index.js b/src/components/Product/index.js index 4e281b8..5d2263e 100644 --- a/src/components/Product/index.js +++ b/src/components/Product/index.js @@ -37,7 +37,8 @@ const ProductDesign = ({ teacher, btnOnClick, catId, - isMobile + isMobile, + onClick }) => { const [isHovering, setIsHovering] = useState(false); @@ -78,7 +79,7 @@ const ProductDesign = ({ return (
@@ -106,7 +107,7 @@ const ProductDesign = ({ className={`bg-pinkF5 text-red26 w-32 border-2 border-red52 px-1 py-2 text-xs flex justify-center hover:bg-red52 hover:text-white `} > - +
@@ -279,6 +280,7 @@ const ProductDesign = ({ + ) } diff --git a/src/view/addProduct/Main/index.js b/src/view/addProduct/Main/index.js index ac6c5ed..4408002 100644 --- a/src/view/addProduct/Main/index.js +++ b/src/view/addProduct/Main/index.js @@ -8,7 +8,7 @@ import './editor.css'; const MainAP = () => { return ( -
+

اضافه کردن محصول جدید

diff --git a/src/view/addProduct/Sidebar/index.js b/src/view/addProduct/Sidebar/index.js index 3497c32..caa4b23 100644 --- a/src/view/addProduct/Sidebar/index.js +++ b/src/view/addProduct/Sidebar/index.js @@ -1,5 +1,6 @@ import React from "react"; import Grades from "../components/grade"; +import LableInput from "../components/lable"; import TagsInput from "../components/tags"; @@ -22,6 +23,7 @@ const SideAP = () => {
+
) } diff --git a/src/view/addProduct/components/lable.js b/src/view/addProduct/components/lable.js new file mode 100644 index 0000000..a9a316d --- /dev/null +++ b/src/view/addProduct/components/lable.js @@ -0,0 +1,98 @@ +import React, { useState, useEffect } from "react"; +import { HexColorPicker } from "react-colorful"; + +const LableInput = () => { + const [tags, setTags] = useState([]); + const [tag, setTag] = useState(null); + const [fakeState, setFakeState] = useState(5); + const initialColor = 'linear-gradient(143deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 0%, rgba(137,71,8,1) 9%, rgba(147,143,7,1) 18%, rgba(71,159,6,1) 29%, rgba(5,178,69,1) 37%, rgba(5,178,185,1) 48%, rgba(4,56,197,1) 57%, rgba(54,3,209,1) 66%, rgba(160,3,216,1) 76%, rgba(236,1,167,1) 87%, rgba(255,0,0,1) 100%)' + const [color, setColor] = useState(initialColor); + const [colorPopUp, setColorPopUp] = useState(false); + + useEffect(() => { + if (tag) { + tags.push(tag); + setFakeState(fakeState + 1) + console.log(tags) + } + + }, [tag]); + + + + return ( +
+

+ لیبل محصول +

+

توجه: امکان اضافه کردن فقط 3 لیبل بر روی تصاویر شاخص وجود دارد

+
+ { + if (e.key == 'Enter' && document.getElementById('colorInput').value) { + setTag({ + title: e.target.value, + color: document.getElementById('colorInput').value + }); + document.getElementById('lableInput').value = null + } + }} /> + + +
+
+
+ { if (e.target.value !== '') { setColor(e.target.value) } else { setColor(initialColor) } console.log(color, e.target.value); }} /> + +
setColorPopUp(true)} + > + +
+
+ + + + +
+ {colorPopUp &&
+

setColorPopUp(false)}>X

+ +
+ } +
+ { + tags.map( + (item, index) => ( +
+ +

{item.title}

+

{ tags.splice(tags.findIndex(e => e === item), 1); setFakeState(!fakeState); }}>x

+ +
+ ) + ) + } +
+ + +
+ ) +} + +export default LableInput; \ No newline at end of file diff --git a/src/view/addProduct/components/tags.js b/src/view/addProduct/components/tags.js index dc0b99b..8b4eeaf 100644 --- a/src/view/addProduct/components/tags.js +++ b/src/view/addProduct/components/tags.js @@ -13,6 +13,9 @@ const TagsInput = () => { } }, [tag]); + + + return(

@@ -32,7 +35,7 @@ const TagsInput = () => {

{item}

-

x

+

{tags.splice(tags.findIndex(e => e === item),1); setFakeState(!fakeState);}}>x

) diff --git a/src/view/addProduct/index.js b/src/view/addProduct/index.js index 45b463a..8be3d50 100644 --- a/src/view/addProduct/index.js +++ b/src/view/addProduct/index.js @@ -4,7 +4,7 @@ import SideAP from "./Sidebar"; const AddProduct = () => { return( -
+
diff --git a/src/view/services/index.js b/src/view/services/index.js index f3c908a..b5054ed 100644 --- a/src/view/services/index.js +++ b/src/view/services/index.js @@ -359,9 +359,9 @@ if (!isMobile){ }, ] }); - setPopUp(true); console.log(gameId) }} + > {/* {console.log(product)} */} + onClick={() => null} + btnOnClick={() =>{ pushToCart({ - productId: product?.productId, - userId: product?.userId, + productId: product?.id, + count: 1, - }) + }); + setPopUp(false) + console.log(product.id) + } } /> @@ -618,7 +622,7 @@ if (!isMobile){ }, ] }); - setPopUp(true); + // setPopUp(true); // console.log(gameId) }} > @@ -639,10 +643,12 @@ if (!isMobile){ catId={gameId} btnOnClick={() => pushToCart({ - productId: product?.productId, - userId: product?.userId, + productId: product?.id, + // userId: product?.userId, count: 1, }) + + } /> diff --git a/yarn.lock b/yarn.lock index ede4c9e..4209540 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7650,6 +7650,11 @@ "regenerator-runtime" "^0.13.9" "whatwg-fetch" "^3.6.2" +"react-colorful@^5.5.1": + "integrity" "sha512-M1TJH2X3RXEt12sWkpa6hLc/bbYS0H6F4rIqjQZ+RxNBstpY67d9TrFXtqdZwhpmBXcCwEi7stKqFue3ZRkiOg==" + "resolved" "https://registry.npmjs.org/react-colorful/-/react-colorful-5.5.1.tgz" + "version" "5.5.1" + "react-dev-utils@^12.0.0": "integrity" "sha512-xBQkitdxozPxt1YZ9O1097EJiVpwHr9FoAuEVURCKV0Av8NBERovJauzP7bo1ThvuhZ4shsQ1AJiu4vQpoT1AQ==" "resolved" "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.0.tgz" @@ -7680,7 +7685,7 @@ "strip-ansi" "^6.0.1" "text-table" "^0.2.0" -"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x": +"react-dom@*", "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react-dom@^15.0.0 || ^16.0.0 || ^17.0.0", "react-dom@^16.11.0", "react-dom@^17.0.2", "react-dom@>=0.14.0", "react-dom@>=16", "react-dom@>=16.8", "react-dom@>=16.8.0", "react-dom@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x": "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==" "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz" "version" "17.0.2" @@ -7872,7 +7877,7 @@ dependencies: "clsx" "^1.1.1" -"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2": +"react@*", "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", "react@^15.0.0 || ^16.0.0 || ^17.0.0", "react@^16.11.0", "react@^16.8.3 || ^17", "react@^17.0.2", "react@>= 16", "react@>= 16.8", "react@>=0.14.0", "react@>=16", "react@>=16.8", "react@>=16.8.0", "react@0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x", "react@17.0.2": "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==" "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz" "version" "17.0.2"