222 lines
8.6 KiB
JavaScript
222 lines
8.6 KiB
JavaScript
import React, { useRef, useEffect, useState } from "react";
|
|
import styles from "./ItemType.module.css";
|
|
import { Coffee, CupSoda, CakeSlice, Utensils, Grid2X2, Plus } from 'lucide-react';
|
|
|
|
export default function ItemType({
|
|
onClick,
|
|
onCreate,
|
|
blank,
|
|
name,
|
|
imageUrl,
|
|
selected,
|
|
rectangular,
|
|
}) {
|
|
const inputRef = useRef(null);
|
|
const [namee, setName] = useState(name);
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
const [previewUrl, setPreviewUrl] = useState(imageUrl);
|
|
|
|
// Effect to update local state when name prop changes
|
|
useEffect(() => {
|
|
setName(name);
|
|
}, [name]);
|
|
|
|
useEffect(() => {
|
|
if (blank && inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, [blank]);
|
|
|
|
useEffect(() => {
|
|
if (selectedImage) {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
onClick(reader.result, selectedImage);
|
|
};
|
|
reader.readAsDataURL(selectedImage);
|
|
} else {
|
|
setPreviewUrl(imageUrl);
|
|
}
|
|
}, [selectedImage, imageUrl]);
|
|
|
|
const handleImageChange = (e) => {
|
|
setSelectedImage(e.target.files[0]);
|
|
console.log(e.target.files[0]);
|
|
e.target.value = null; // This clears the input
|
|
};
|
|
|
|
const handleNameChange = (e) => {
|
|
setName(e.target.value);
|
|
};
|
|
|
|
const handleCreate = async () => {
|
|
if (!selectedImage) {
|
|
console.error("No image selected");
|
|
return;
|
|
}
|
|
|
|
onCreate(namee, selectedImage);
|
|
};
|
|
|
|
const formatName = (val) => {
|
|
if (!val || typeof val !== 'string') return val;
|
|
return val
|
|
.toLowerCase()
|
|
.replace(/\b\w/g, (c) => c.toUpperCase());
|
|
};
|
|
|
|
const iconImageUrl = imageUrl === 'uploads/assets/All.png' ? 'icon:all' : imageUrl;
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
styles[
|
|
namee
|
|
? "item-type"
|
|
: rectangular
|
|
? "item-type-rectangular"
|
|
: "item-type-nomargin"
|
|
]
|
|
}
|
|
style={{ zIndex: blank ? 301 : "inherit" }}
|
|
>
|
|
<div
|
|
onClick={
|
|
rectangular ? (blank ? null : () => onClick(iconImageUrl)) : onClick
|
|
}
|
|
className={styles["item-type-rect"]}
|
|
style={{
|
|
// Remove lift-up effect; only color changes when selected
|
|
backgroundColor: selected ? 'var(--brand-sage, #6B8F71)' : '#ffffff',
|
|
border: selected ? '1px solid var(--brand-sage, #6B8F71)' : '1px solid #e6e6e6',
|
|
color: selected ? '#ffffff' : '#4a6b5a'
|
|
}}
|
|
>
|
|
{iconImageUrl === 'uploads/assets/All.png' ? (
|
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
|
|
preserveAspectRatio="xMidYMid meet">
|
|
<metadata>
|
|
Created by potrace 1.16, written by Peter Selinger 2001-2019
|
|
</metadata>
|
|
<g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
|
|
fill="currentColor" stroke="none">
|
|
<path d="M3708 7165 c-3 -4 -44 -10 -90 -15 -266 -28 -530 -91 -753 -180 -11
|
|
-4 -42 -16 -70 -26 -27 -9 -129 -57 -225 -106 -186 -94 -188 -95 -262 -145
|
|
-26 -18 -52 -33 -58 -33 -5 0 -24 -13 -42 -28 -18 -16 -53 -43 -78 -61 -124
|
|
-88 -157 -114 -217 -168 -87 -78 -244 -236 -318 -318 -56 -63 -84 -99 -166
|
|
-215 -18 -25 -47 -62 -66 -83 -18 -20 -33 -42 -33 -47 0 -6 -12 -29 -27 -53
|
|
-15 -23 -32 -49 -38 -59 -30 -49 -194 -380 -209 -423 -10 -27 -22 -59 -26 -70
|
|
-81 -203 -137 -426 -177 -700 -20 -137 -23 -692 -5 -830 24 -184 59 -380 73
|
|
-407 5 -10 9 -23 9 -30 0 -25 78 -266 130 -403 25 -65 193 -392 237 -460 171
|
|
-264 379 -510 591 -701 59 -52 114 -102 123 -110 9 -7 19 -14 23 -14 7 0 110
|
|
-75 173 -125 17 -14 52 -37 78 -51 26 -13 61 -35 79 -49 17 -13 42 -28 56 -34
|
|
14 -6 32 -15 40 -21 8 -5 67 -35 130 -66 63 -30 122 -59 130 -64 8 -4 33 -15
|
|
55 -23 22 -8 83 -31 135 -50 94 -36 219 -71 410 -117 51 -12 201 -37 305 -50
|
|
92 -12 651 -12 740 0 39 6 102 14 140 19 210 28 511 109 663 177 29 13 57 24
|
|
62 24 19 0 251 111 357 170 53 30 88 51 118 70 17 11 43 27 59 36 30 16 103
|
|
70 164 120 18 14 50 38 72 53 21 14 66 52 99 84 33 31 64 57 67 57 17 0 293
|
|
299 337 363 16 23 38 53 51 67 19 21 118 164 151 218 6 9 25 38 43 64 17 26
|
|
32 54 32 62 0 8 4 17 9 20 13 8 181 354 181 372 0 5 11 36 24 69 52 132 121
|
|
391 146 545 6 41 17 95 23 120 8 31 12 168 12 430 0 326 -3 402 -18 495 -10
|
|
61 -22 133 -27 160 -7 45 -22 107 -52 220 -6 22 -35 114 -65 205 -49 149 -97
|
|
255 -240 533 -17 35 -81 136 -145 231 -29 41 -149 203 -175 235 -39 47 -342
|
|
350 -383 384 -63 51 -297 222 -331 242 -19 11 -65 39 -104 62 -63 38 -193 104
|
|
-361 184 -89 42 -370 133 -519 167 -192 44 -230 51 -340 64 -109 12 -697 23
|
|
-707 13z m-553 -1586 c12 -23 15 -87 15 -359 l0 -332 -31 -29 -31 -29 -335 0
|
|
-335 0 -29 29 -29 29 0 334 1 333 26 30 26 30 326 5 c179 3 339 1 354 -4 15
|
|
-4 34 -21 42 -37z m1201 31 c50 -27 54 -57 54 -386 0 -251 -3 -310 -15 -334
|
|
-31 -61 -28 -60 -390 -60 -298 0 -332 2 -351 18 -42 34 -44 48 -44 382 0 347
|
|
1 354 56 383 31 16 658 13 690 -3z m1267 -31 c15 -27 17 -65 17 -359 l0 -328
|
|
-31 -31 -31 -31 -328 0 c-218 0 -337 4 -353 11 -53 24 -57 52 -57 390 0 327 3
|
|
354 47 375 23 11 660 22 693 11 14 -4 33 -21 43 -38z m-2504 -1203 c49 -26 51
|
|
-42 51 -389 0 -296 -2 -324 -19 -353 -30 -49 -65 -54 -386 -54 -274 0 -289 1
|
|
-325 21 -21 12 -43 32 -49 46 -7 16 -11 134 -11 350 l0 327 32 33 32 33 323 0
|
|
c261 0 329 -3 352 -14z m1237 -2 c52 -35 54 -49 54 -379 0 -348 -2 -360 -69
|
|
-394 -38 -20 -57 -21 -327 -21 -320 0 -355 5 -385 54 -17 29 -19 56 -19 356 1
|
|
251 4 330 14 349 27 49 39 50 384 51 283 0 326 -2 348 -16z m1233 2 c49 -26
|
|
51 -43 51 -386 0 -285 -2 -322 -17 -349 -33 -56 -61 -61 -384 -61 -271 0 -292
|
|
1 -329 20 -69 35 -70 40 -70 394 l0 316 36 40 36 40 325 0 c261 0 329 -3 352
|
|
-14z m-2475 -1226 c53 -20 56 -41 56 -389 0 -227 -3 -328 -12 -346 -24 -53
|
|
-40 -55 -387 -55 l-320 0 -36 31 -35 31 0 335 0 335 34 34 34 34 320 0 c180 0
|
|
332 -4 346 -10z m1243 -7 c50 -33 53 -57 53 -388 0 -254 -3 -311 -15 -335 -30
|
|
-58 -43 -60 -389 -60 -223 0 -323 3 -341 12 -53 24 -55 39 -55 394 l0 326 34
|
|
34 34 34 326 0 c291 0 330 -2 353 -17z m1227 7 c53 -20 56 -40 56 -396 l0
|
|
-326 -34 -34 -34 -34 -326 0 c-358 0 -360 0 -392 61 -21 42 -21 637 1 679 30
|
|
58 40 59 387 60 178 0 328 -4 342 -10z"/>
|
|
</g>
|
|
</svg>
|
|
) : (iconImageUrl && typeof iconImageUrl === 'string' && iconImageUrl.startsWith('icon:')) ? (
|
|
<div style={{width:'100%',height:'100%',display:'flex',alignItems:'center',justifyContent:'center'}}>
|
|
<LucideCategoryIcon name={namee} iconKey={(iconImageUrl || '').split(':')[1]} />
|
|
</div>
|
|
) : (
|
|
<img
|
|
src={previewUrl}
|
|
alt={namee}
|
|
className={styles["item-type-image"]}
|
|
/>
|
|
)}
|
|
{blank && rectangular && (
|
|
<div className={styles["item-type-image-container"]}>
|
|
<input
|
|
type="file"
|
|
accept=".png, .jpg, .jpeg"
|
|
className={styles["item-type-image-input"]}
|
|
onChange={handleImageChange}
|
|
id="image-input"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!rectangular && !blank && (
|
|
<input
|
|
ref={inputRef}
|
|
className={`${styles["item-type-name"]} ${styles.noborder}`}
|
|
value={formatName(namee)}
|
|
onChange={handleNameChange}
|
|
disabled={true}
|
|
style={{
|
|
top: 'initial',
|
|
borderBottom: 'none',
|
|
color: selected ? '#2d2d2d' : '#333',
|
|
textTransform: 'capitalize'
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function LucideCategoryIcon({ name, iconKey }) {
|
|
const key = pickIconKey(name, iconKey);
|
|
const size = '56%';
|
|
switch (key) {
|
|
case 'coffee':
|
|
return <Coffee color={'currentColor'} size={size} strokeWidth={2} />;
|
|
case 'drink':
|
|
return <CupSoda color={'currentColor'} size={size} strokeWidth={2} />;
|
|
case 'dessert':
|
|
return <CakeSlice color={'currentColor'} size={size} strokeWidth={2} />;
|
|
case 'food':
|
|
return <Utensils color={'currentColor'} size={size} strokeWidth={2} />;
|
|
case 'all':
|
|
return <Grid2X2 color={'currentColor'} size={size} strokeWidth={2} />;
|
|
case 'plus':
|
|
return <Plus color={'currentColor'} size={size} strokeWidth={2} />;
|
|
default:
|
|
return <Utensils color={'currentColor'} size={size} strokeWidth={2} />;
|
|
}
|
|
}
|
|
|
|
function pickIconKey(name, iconKey) {
|
|
const n = (name || '').toLowerCase();
|
|
if (iconKey === 'plus') return 'plus';
|
|
if (iconKey === 'all') return 'all';
|
|
if (/(kopi|coffee|espresso|latte|americano|kapal|brew)/.test(n)) return 'coffee';
|
|
if (/(teh|tea|drink|minum|soda|juice|jus|milk|susu|lemon)/.test(n)) return 'drink';
|
|
if (/(dessert|cake|kue|manis|ice|es krim|ice-cream)/.test(n)) return 'dessert';
|
|
if (/(food|makan|snack|cemilan|nasi|mie|noodle|soup|sup|ayam|daging|ikan|roti|sandwich|burger|pizza)/.test(n)) return 'food';
|
|
return 'food';
|
|
}
|