49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
/**
|
|
* NodeListItem - Draggable node type item for the sidebar.
|
|
* Used in both regular categories and I/O sub-groups.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { NodeType } from '../../api/automation2Api';
|
|
import { getCategoryIcon } from './utils';
|
|
import type { GetLabelFn } from './utils';
|
|
import styles from './Automation2FlowEditor.module.css';
|
|
|
|
interface NodeListItemProps {
|
|
node: NodeType;
|
|
language: string;
|
|
getLabel: GetLabelFn;
|
|
getCategoryIcon?: (categoryId: string) => React.ReactNode;
|
|
}
|
|
|
|
export const NodeListItem: React.FC<NodeListItemProps> = ({
|
|
node,
|
|
language,
|
|
getLabel,
|
|
getCategoryIcon: getIcon = getCategoryIcon,
|
|
}) => (
|
|
<div
|
|
className={styles.nodeItem}
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData('application/json', JSON.stringify({ type: node.id }));
|
|
e.dataTransfer.effectAllowed = 'copy';
|
|
}}
|
|
>
|
|
<div
|
|
className={styles.nodeItemIcon}
|
|
style={{
|
|
backgroundColor: node.meta?.color
|
|
? `${node.meta.color}20`
|
|
: 'var(--bg-tertiary, #e9ecef)',
|
|
color: node.meta?.color ?? 'var(--text-secondary, #666)',
|
|
}}
|
|
>
|
|
{getIcon(node.category)}
|
|
</div>
|
|
<div className={styles.nodeItemInfo}>
|
|
<span className={styles.nodeItemLabel}>{getLabel(node.label, language)}</span>
|
|
<span className={styles.nodeItemDesc}>{getLabel(node.description, language)}</span>
|
|
</div>
|
|
</div>
|
|
);
|