Macbook
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface PaletteDragPayload {
|
|
type: 'operator' | 'indicator';
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface Props {
|
|
type: 'operator' | 'indicator';
|
|
value: string;
|
|
label: string;
|
|
desc?: string;
|
|
color?: string;
|
|
period?: string;
|
|
onAdd: () => void;
|
|
}
|
|
|
|
export default function PaletteChip({ type, value, label, desc, color, period, onAdd }: Props) {
|
|
const onDragStart = (e: React.DragEvent) => {
|
|
const payload: PaletteDragPayload = { type, value, label };
|
|
e.dataTransfer.setData('application/json', JSON.stringify(payload));
|
|
e.dataTransfer.effectAllowed = 'copy';
|
|
};
|
|
|
|
return (
|
|
<div
|
|
draggable
|
|
className={`se-palette-card ${color ? `se-palette-card--${color}` : 'se-palette-card--ind'}`}
|
|
onDragStart={onDragStart}
|
|
onClick={onAdd}
|
|
role="button"
|
|
tabIndex={0}
|
|
onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') onAdd(); }}
|
|
>
|
|
<div className="se-palette-card-head">
|
|
<span className="se-palette-card-icon">{label.slice(0, 1)}</span>
|
|
<div className="se-palette-card-meta">
|
|
<span className="se-palette-card-name">{label}</span>
|
|
{desc ? <span className="se-palette-card-desc">{desc}</span> : null}
|
|
</div>
|
|
</div>
|
|
{period ? (
|
|
<div className="se-palette-card-period">
|
|
<span>기간</span>
|
|
<input readOnly value={period} className="se-palette-period-input" tabIndex={-1} />
|
|
<span className="se-palette-sync" title="차트 지표 설정과 동기화">⟳</span>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|