From 471a9d13d024f41298dd8fbf7fc7d6f5459b7db7 Mon Sep 17 00:00:00 2001 From: mahdi Date: Sat, 28 May 2022 17:17:40 +0430 Subject: [PATCH] update 5 files --- src/components/ThemeColor/ColorCard.js | 10 ++++----- src/components/ThemeColor/default.js | 2 +- src/components/ThemeColor/index.js | 26 ++++++++++++++++++++---- src/components/ThemeColor/util/Picker.js | 26 +++++++++++++++--------- tailwind.config.js | 14 ++++++------- 5 files changed, 51 insertions(+), 27 deletions(-) diff --git a/src/components/ThemeColor/ColorCard.js b/src/components/ThemeColor/ColorCard.js index 32692ba..d149ec4 100644 --- a/src/components/ThemeColor/ColorCard.js +++ b/src/components/ThemeColor/ColorCard.js @@ -16,7 +16,7 @@ const ColorCard = ({ className={`w-[344px] h-[130px] flex flex-col cursor-pointer rounded-sm relative p-4 bg-${item} ${ text ? `text-${item}Text` : "" } ${borderColor ? ` border border-${item}Border` : ""} `} - onClick={() => setItem(item)} + onClick={(e) => setItem(item, e)} >
@@ -27,7 +27,7 @@ const ColorCard = ({ theme={theme} onClick={(e) => { e.stopPropagation(); - setItem(item + "Text"); + setItem(item + "Text", e); }} /> )} @@ -38,7 +38,7 @@ const ColorCard = ({ theme={theme} onClick={(e) => { e.stopPropagation(); - setItem(item + "Border"); + setItem(item + "Border", e); }} /> )} @@ -51,7 +51,7 @@ const ColorCard = ({ className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${ text ? `text-${item}Text` : "" }`} - onClick={() => setItem(item + "Dark")} + onClick={(e) => setItem(item + "Dark", e)} > setItem(item + "Light")} + onClick={(e) => setItem(item + "Light", e)} > { - const [item, setItem] = useState(null); + const [item, setItem_] = useState(null); + const [position, setPosition] = useState({ top: 0, left: 0 }); + const setItem = (nitem, e) => { + e.stopPropagation(); + if (item == nitem) nitem = ""; + setItem_(nitem); + setPosition({ top: e.clientY, left: e.clientX }); + }; const [theme, setTheme] = useState(defaultTheme); putTheme(theme); return ( -
+
setItem_("")} + >

Theme Properties

@@ -34,7 +44,7 @@ const ThemeColor = ({ inputFields }) => {

Screens

-
+

بعد از نوشتن عدد مورد نظر حتما از px @@ -77,6 +87,7 @@ const ThemeColor = ({ inputFields }) => { Original Colors

{/* Primary && Secondary */} +
{
- {item && } + {item && ( + + )}
); }; diff --git a/src/components/ThemeColor/util/Picker.js b/src/components/ThemeColor/util/Picker.js index 21ff169..b54ec76 100644 --- a/src/components/ThemeColor/util/Picker.js +++ b/src/components/ThemeColor/util/Picker.js @@ -1,17 +1,23 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import { SketchPicker } from "react-color"; -const Picker = ({ theme, item, setTheme }) => { +const Picker = ({ theme, item, setTheme, position }) => { const [color, setColor] = useState(theme[item]); + useEffect(() => { + setColor(theme[item]); + }, [theme,item]); + + console.log({ position }); return ( - { - setColor(updatedColor.hex); - setTheme({ ...theme, [item]: updatedColor.hex }); - }} - /> +
+ { + setColor(updatedColor.hex); + setTheme({ ...theme, [item]: updatedColor.hex }); + }} + /> +
); }; export default Picker; diff --git a/tailwind.config.js b/tailwind.config.js index 94488f1..306e00d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -34,13 +34,13 @@ module.exports = { error: "var(--theme-error)", errorText: "var(--theme-errorText)", }, - screens: { - sm: "var(--theme-sm)", - md: "var(--theme-md)", - lg: "var(--theme-lg)", - xl: "var(--theme-xl)", - "2xl": "var(--theme-2xl)", - }, + // screens: { + // sm: "var(--theme-sm)", + // md: "var(--theme-md)", + // lg: "var(--theme-lg)", + // xl: "var(--theme-xl)", + // "2xl": "var(--theme-2xl)", + // }, }, plugins: [ require("@themesberg/flowbite/plugin"),