Function Tab

src/components/tabs/tab.tsx:73–165

({ tab, active, ...restEvents }: ITabComponent)

export type ITabComponent = { tab: ITabProps; active?: boolean } & ITabEvent;

export function Tab({ tab, active, ...restEvents }: ITabComponent) {
    const { name, closable, id, icon, status } = tab;
    const { onCloseTab, onSelectTab, onContextMenu, onDrag } = restEvents;

    const ref = useRef<HTMLDivElement>(null);

    const handleOnContextMenu = (event: React.MouseEvent) => {
        event.preventDefault();
        onContextMenu?.(event, tab);
    };

    const [, drag] = useDrag({
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
        type: 'DND_NODE',
        item: tab,
    } as any);

    const [, drop] = useDrop({
        accept: 'DND_NODE',
        hover(item: ITabProps, monitor) {
            if (!ref.current) return;
            const component = ref.current;
            const hoverBoundingRect = component?.getBoundingClientRect();
            const hoverMiddleX =
                (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
            const clientOffset = monitor.getClientOffset();
            const hoverClientX =
                (clientOffset as { x: number; y: number }).x -
                hoverBoundingRect.left;

            const dragInfo = {
                hoverMiddleX,
                hoverClientX,
            };
            onDrag?.(item, tab, dragInfo);
        },
    });

    drag(drop(ref));

    const renderIcon = (icon: string | JSX.Element) => {
        return typeof icon === 'string' ? <Icon type={icon} /> : icon;
    };

    const renderStatus = (
        status?: ITabStatus | ((tab: ITabProps) => JSX.Element),
        isHover?: boolean
    ) => {
        if (status && !isHover) {
            if (typeof status === 'function') {
                return status(tab);
            }
            switch (status) {
                case 'edited':
                    return <Icon type="primitive-dot" />;