Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add hex color code box #362

Merged
merged 2 commits into from
Jun 11, 2024
+53 −57
Merged

feat: add hex color code box #362

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20368dc
feat: add hex color code box
harini-1597 Jun 7, 2024
b463b9e
fix: updated colorpicker
harini-1597 Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 50 additions & 112 deletions src/components/core/colorPicker/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,37 @@ import { useState } from "react";

type ColorpickerTypes = {
colors: {
color01: string;
color02: string;
color03: string;
color04: string;
[key: string]: string; // Add an index signature for colors
};
isPalleteTouched: boolean;
setColors: any;
setTouched: any;
};


// eslint-disable-next-line react/prop-types
function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: ColorpickerTypes) {
const [selectedColorSection, setColorSection] = useState<number | null>(null);
const [colorInputs, setColorInputs] = useState(colors);

const changeHandler = (color: string) => {
if (!isPalleteTouched) {
setTouched(true);
}
if (typeof color === "string")
setColors({ ...colors, [`color0` + selectedColorSection]: color });
if (typeof color === "string") {
setColors({ ...colors, [`color0${selectedColorSection}`]: color });
setColorInputs({ ...colorInputs, [`color0${selectedColorSection}`]: color });
}
harini-1597 marked this conversation as resolved.
Show resolved Hide resolved
};

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, section: number) => {
const value = e.target.value;
setColorInputs({ ...colorInputs, [`color0${section}`]: value });
if (/^#[0-9A-F]{6}$/i.test(value)) {
changeHandler(value);
}
harini-1597 marked this conversation as resolved.
Show resolved Hide resolved
};

const showPicker = (id: number) => {
if (id === selectedColorSection) {
setColorSection(null);
Expand All @@ -33,116 +44,43 @@ function Colorpicker({ colors, setColors, setTouched, isPalleteTouched }: Colorp

return (
<>
<div className="relative">
<div className="w-[300px] rounded-[0.8rem] h-[200px] bg-[#888A8A] mx-auto flex">
<div
onClick={() => showPicker(1)}
className="cursor-pointer w-full rounded-tl-[0.8rem] rounded-bl-[0.8rem]"
style={{
backgroundColor: (typeof colors.color01 === "string" && colors.color01) || "",
}}
></div>
<div
onClick={() => showPicker(2)}
className="cursor-pointer w-full "
style={{
backgroundColor: (typeof colors.color02 === "string" && colors.color02) || "",
}}
></div>
<div
onClick={() => showPicker(3)}
className="cursor-pointer w-full"
style={{
backgroundColor: (typeof colors.color03 === "string" && colors.color03) || "",
}}
></div>
<div
onClick={() => showPicker(4)}
className="cursor-pointer w-full rounded-tr-[0.8rem] rounded-br-[0.8rem]"
style={{
backgroundColor: (typeof colors.color04 === "string" && colors.color04) || "",
}}
></div>
<div className="relative mx-auto">
<div className="relative pl-[70px] pr-2">
<div className="mx-auto w-[400px] rounded-[0.8rem] h-[175px] bg-[#888A8A] flex">
{['color01', 'color02', 'color03', 'color04'].map((color, index) => (
<div
key={color}
onClick={() => showPicker(index + 1)}
className={`cursor-pointer w-full ${index === 0 ? 'rounded-tl-[0.8rem] rounded-bl-[0.8rem]' : ''} ${index === 3 ? 'rounded-tr-[0.8rem] rounded-br-[0.8rem]' : ''}`}
style={{
backgroundColor: colors[color],
}}
></div>
harini-1597 marked this conversation as resolved.
Show resolved Hide resolved
))}
</div>
<div className="flex justify-center mt-1 mx-20">
{['color01', 'color02', 'color03', 'color04'].map((color, index) => (
<input
key={color}
type="text"
value={colorInputs[color]}
onChange={(e) => handleInputChange(e, index + 1)}
placeholder="#000000"
className="w-20 text-center mx-2.5"
/>
))}
</div>
</div>
{selectedColorSection && (
<>
{/* <div className='fixed top-0 left-0 right-0 bottom-0' onClick={handleClose}></div> */}
<div className="absolute top-0">
<HexColorPicker
style={{ width: "100px" }}
onChange={changeHandler}
color={
(selectedColorSection &&
((selectedColorSection === 1 && colors["color01"]) ||
(selectedColorSection === 2 && colors["color02"]) ||
(selectedColorSection === 3 && colors["color03"]) ||
(selectedColorSection === 4 && colors["color04"]))) ||
""
}
/>
</div>
</>
<div className="absolute top-0">
<HexColorPicker
style={{ width: "100px" }}
onChange={changeHandler}
color={colors[`color0${selectedColorSection}`]}
/>
</div>
)}
</div>

{/* <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">

<div className="mb-3">
<input
type="text"
name="color01"
id="color01"
value={colors && String(colors.color01)}
required={true}
onChange={changeHandler}
placeholder="Enter 1st color"
className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
maxLength={6}
/>
</div>

<div className="mb-3">
<input
type="text"
name="color02"
id="color02"
required={true}
value={colors && String(colors.color02)}
onChange={changeHandler}
placeholder="Enter 2nd color"
className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
maxLength={6}
/>
</div>

<div className="mb-3">
<input
type="text"
name="color03"
id="color03"
required={true}
value={colors && String(colors.color02)}
onChange={changeHandler}
placeholder="Enter 3rd color"
className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
maxLength={6}
/>
</div>

<div className="mb-3">
<input
type="text"
name="color04"
id="color04"
required={true}
value={colors && String(colors.color02)}
onChange={changeHandler}
placeholder="Enter 4th color"
className="w-full rounded-md border border-[#e0e0e0] bg-white py-3 px-4 text-base font-medium text-[#1C223A] outline-none focus:border-[#6A64F1] focus:shadow-md"
maxLength={6}
/>
</div>
</div> */}
</>
);
}
Expand Down
Loading