164 lines
8.2 KiB
JavaScript
164 lines
8.2 KiB
JavaScript
// Shared mobile-friendly colour picker — used by EventTypesPanel and MobileEventForm
|
|
// Renders inline (no sheet wrapper) so callers can embed it wherever they like.
|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
|
const COLOUR_SUGGESTIONS = [
|
|
'#1a73e8','#a142f4','#e53935','#fa7b17','#34a853','#00bcd4',
|
|
'#ff5722','#795548','#607d8b','#e91e63','#9c27b0','#3f51b5',
|
|
];
|
|
|
|
function hexToHsv(hex) {
|
|
const r=parseInt(hex.slice(1,3),16)/255, g=parseInt(hex.slice(3,5),16)/255, b=parseInt(hex.slice(5,7),16)/255;
|
|
const max=Math.max(r,g,b), min=Math.min(r,g,b), d=max-min;
|
|
let h=0;
|
|
if(d!==0){if(max===r)h=((g-b)/d+(g<b?6:0))/6;else if(max===g)h=((b-r)/d+2)/6;else h=((r-g)/d+4)/6;}
|
|
return{h:h*360,s:max===0?0:d/max,v:max};
|
|
}
|
|
function hsvToHex(h,s,v){
|
|
h=h/360;const i=Math.floor(h*6),f=h*6-i;
|
|
const p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s);
|
|
let r,g,b;
|
|
switch(i%6){case 0:r=v;g=t;b=p;break;case 1:r=q;g=v;b=p;break;case 2:r=p;g=v;b=t;break;case 3:r=p;g=q;b=v;break;case 4:r=t;g=p;b=v;break;default:r=v;g=p;b=q;}
|
|
return'#'+[r,g,b].map(x=>Math.round(x*255).toString(16).padStart(2,'0')).join('');
|
|
}
|
|
function isValidHex(h){return/^#[0-9a-fA-F]{6}$/.test(h);}
|
|
|
|
function SvSquare({hue,s,v,onChange}){
|
|
const canvasRef=useRef(null);const dragging=useRef(false);
|
|
useEffect(()=>{
|
|
const canvas=canvasRef.current;if(!canvas)return;
|
|
const ctx=canvas.getContext('2d'),W=canvas.width,H=canvas.height;
|
|
const hGrad=ctx.createLinearGradient(0,0,W,0);hGrad.addColorStop(0,'#fff');hGrad.addColorStop(1,`hsl(${hue},100%,50%)`);
|
|
ctx.fillStyle=hGrad;ctx.fillRect(0,0,W,H);
|
|
const vGrad=ctx.createLinearGradient(0,0,0,H);vGrad.addColorStop(0,'transparent');vGrad.addColorStop(1,'#000');
|
|
ctx.fillStyle=vGrad;ctx.fillRect(0,0,W,H);
|
|
},[hue]);
|
|
const getPos=(e,canvas)=>{
|
|
const r=canvas.getBoundingClientRect();
|
|
const cx=(e.touches?e.touches[0].clientX:e.clientX)-r.left;
|
|
const cy=(e.touches?e.touches[0].clientY:e.clientY)-r.top;
|
|
return{s:Math.max(0,Math.min(1,cx/r.width)),v:Math.max(0,Math.min(1,1-cy/r.height))};
|
|
};
|
|
const handle=(e)=>{e.preventDefault();const p=getPos(e,canvasRef.current);onChange(p.s,p.v);};
|
|
return(
|
|
<div style={{position:'relative',userSelect:'none',touchAction:'none'}}>
|
|
<canvas ref={canvasRef} width={280} height={160}
|
|
style={{display:'block',width:'100%',height:160,borderRadius:8,cursor:'crosshair',border:'1px solid var(--border)'}}
|
|
onMouseDown={e=>{dragging.current=true;handle(e);}} onMouseMove={e=>{if(dragging.current)handle(e);}}
|
|
onMouseUp={()=>{dragging.current=false;}} onMouseLeave={()=>{dragging.current=false;}}
|
|
onTouchStart={handle} onTouchMove={handle}/>
|
|
<div style={{position:'absolute',left:`calc(${s*100}% - 7px)`,top:`calc(${(1-v)*100}% - 7px)`,
|
|
width:14,height:14,borderRadius:'50%',border:'2px solid white',
|
|
boxShadow:'0 0 0 1.5px rgba(0,0,0,0.4)',pointerEvents:'none'}}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HueBar({hue,onChange}){
|
|
const barRef=useRef(null);const dragging=useRef(false);
|
|
const handle=(e)=>{
|
|
e.preventDefault();const r=barRef.current.getBoundingClientRect();
|
|
const cx=(e.touches?e.touches[0].clientX:e.clientX)-r.left;
|
|
onChange(Math.max(0,Math.min(360,(cx/r.width)*360)));
|
|
};
|
|
return(
|
|
<div style={{position:'relative',userSelect:'none',touchAction:'none',marginTop:10}}>
|
|
<div ref={barRef} style={{height:22,borderRadius:11,background:'linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)',border:'1px solid var(--border)',cursor:'pointer'}}
|
|
onMouseDown={e=>{dragging.current=true;handle(e);}} onMouseMove={e=>{if(dragging.current)handle(e);}}
|
|
onMouseUp={()=>{dragging.current=false;}} onMouseLeave={()=>{dragging.current=false;}}
|
|
onTouchStart={handle} onTouchMove={handle}/>
|
|
<div style={{position:'absolute',left:`calc(${(hue/360)*100}% - 10px)`,top:-2,
|
|
width:20,height:26,borderRadius:5,background:`hsl(${hue},100%,50%)`,
|
|
border:'2px solid white',boxShadow:'0 0 0 1.5px rgba(0,0,0,0.3)',pointerEvents:'none'}}/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Full inline picker — no sheet wrapper, callers handle the container
|
|
export function ColourPicker({ value, onChange }) {
|
|
const {h:ih,s:is,v:iv}=hexToHsv(value||'#6366f1');
|
|
const [mode,setMode]=useState('suggestions'); // 'suggestions' | 'custom'
|
|
const [hue,setHue]=useState(ih);
|
|
const [sat,setSat]=useState(is);
|
|
const [val,setVal]=useState(iv);
|
|
const [hexInput,setHexInput]=useState(value||'#6366f1');
|
|
const [hexError,setHexError]=useState(false);
|
|
const current=hsvToHex(hue,sat,val);
|
|
|
|
// Sync from value prop when it changes externally
|
|
useEffect(()=>{
|
|
if(value&&isValidHex(value)){
|
|
const{h,s,v}=hexToHsv(value);
|
|
setHue(h);setSat(s);setVal(v);setHexInput(value);
|
|
}
|
|
},[value]);
|
|
|
|
useEffect(()=>{setHexInput(current);setHexError(false);},[current]);
|
|
|
|
const handleHexInput=(e)=>{
|
|
const v=e.target.value;setHexInput(v);
|
|
if(isValidHex(v)){const{h,s,v:bv}=hexToHsv(v);setHue(h);setSat(s);setVal(bv);setHexError(false);}
|
|
else setHexError(true);
|
|
};
|
|
|
|
if(mode==='suggestions') return(
|
|
<div>
|
|
{/* Current preview */}
|
|
<div style={{display:'flex',alignItems:'center',gap:10,marginBottom:12}}>
|
|
<div style={{width:36,height:36,borderRadius:8,background:value,border:'2px solid var(--border)',flexShrink:0}}/>
|
|
<span style={{fontSize:13,fontFamily:'monospace',color:'var(--text-secondary)'}}>{value}</span>
|
|
</div>
|
|
{/* Swatches */}
|
|
<div style={{display:'flex',flexWrap:'wrap',gap:8,marginBottom:12}}>
|
|
{COLOUR_SUGGESTIONS.map(hex=>(
|
|
<button key={hex} onClick={()=>onChange(hex)} style={{
|
|
width:36,height:36,borderRadius:8,background:hex,cursor:'pointer',flexShrink:0,
|
|
border:hex===value?'3px solid var(--text-primary)':'2px solid var(--border)',
|
|
boxShadow:hex===value?'0 0 0 2px var(--surface),0 0 0 4px var(--text-primary)':'none',
|
|
}}/>
|
|
))}
|
|
</div>
|
|
<button className="btn btn-secondary btn-sm" onClick={()=>setMode('custom')}>Custom colour</button>
|
|
</div>
|
|
);
|
|
|
|
return(
|
|
<div>
|
|
<SvSquare hue={hue} s={sat} v={val} onChange={(s,v)=>{setSat(s);setVal(v);}}/>
|
|
<HueBar hue={hue} onChange={setHue}/>
|
|
<div style={{display:'flex',alignItems:'center',gap:10,marginTop:12}}>
|
|
<div style={{width:40,height:40,borderRadius:8,background:current,border:'2px solid var(--border)',flexShrink:0}}/>
|
|
<input value={hexInput} onChange={handleHexInput} maxLength={7} placeholder="#000000"
|
|
style={{fontFamily:'monospace',fontSize:14,padding:'6px 10px',borderRadius:8,
|
|
border:`1px solid ${hexError?'#e53935':'var(--border)'}`,width:110,
|
|
background:'var(--surface)',color:'var(--text-primary)'}} autoComplete="new-password" />
|
|
</div>
|
|
<div style={{display:'flex',gap:8,marginTop:12}}>
|
|
<button className="btn btn-primary btn-sm" onClick={()=>{onChange(current);setMode('suggestions');}} disabled={hexError}>Set</button>
|
|
<button className="btn btn-secondary btn-sm" onClick={()=>setMode('suggestions')}>Back</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Bottom-sheet wrapper for mobile — position:fixed, slides up from bottom
|
|
export default function ColourPickerSheet({ value, onChange, onClose, title='Pick a colour' }) {
|
|
return (
|
|
<div style={{position:'fixed',inset:0,zIndex:300,display:'flex',alignItems:'flex-end'}}
|
|
onClick={e=>e.target===e.currentTarget&&onClose()}>
|
|
<div style={{width:'100%',background:'var(--surface)',borderRadius:'16px 16px 0 0',
|
|
padding:20,boxShadow:'0 -4px 24px rgba(0,0,0,0.2)',maxHeight:'85vh',overflowY:'auto'}}>
|
|
<div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:16}}>
|
|
<span style={{fontWeight:700,fontSize:16}}>{title}</span>
|
|
<button onClick={onClose} style={{background:'none',border:'none',cursor:'pointer',
|
|
color:'var(--text-secondary)',fontSize:20,lineHeight:1}}>✕</button>
|
|
</div>
|
|
<ColourPicker value={value} onChange={v=>{onChange(v);}}/>
|
|
<button onClick={onClose} style={{width:'100%',padding:'14px',marginTop:16,
|
|
background:'var(--primary)',color:'white',border:'none',borderRadius:'var(--radius)',
|
|
fontSize:16,fontWeight:700,cursor:'pointer'}}>Done</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|