import { Transition } from '@headlessui/react';
import { Check, X } from 'lucide-react';
import React, { Fragment, ReactNode, isValidElement, cloneElement } from 'react';
interface Props {
count: number;
onClear: () => void;
children: ReactNode;
}
/**
* Çağıran sayfada button içinde direkt yazılmış metin node'larını mobilde gizler:
*
* → mobilde:
* Böylece her sayfada tek tek sarmalamaya gerek kalmaz.
*/
function metinleriMobildeGizle(children: ReactNode): ReactNode {
return React.Children.map(children, (child) => {
if (!isValidElement(child)) return child;
const innerChildren = React.Children.map(
(child.props as any).children,
(bc: ReactNode, idx: number) => {
if (typeof bc === 'string' && bc.trim() !== '') {
return (
{bc}
);
}
return bc;
},
);
return cloneElement(child as any, {}, innerChildren);
});
}
/**
* Sticky alt bar — seçim olduğunda görünür, toplu işlem butonlarını içerir.
*/
export default function BulkActionBar({ count, onClear, children }: Props) {
const islenmisChildren = metinleriMobildeGizle(children);
return (
0}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-4"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-4"
>
{count} seçili
{islenmisChildren}
);
}