fix: datatable toolbar (#12757)
* Fix toolbar * Slide animation * Animate out and fix selection model * Disable on mobile - fix tablet position --------- Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
parent
65a36b37c5
commit
eb909cc87a
|
@ -8,9 +8,10 @@ import type { User } from "../UserListTable";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
users: User[];
|
users: User[];
|
||||||
|
onRemove: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function DeleteBulkUsers({ users }: Props) {
|
export function DeleteBulkUsers({ users, onRemove }: Props) {
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
const selectedRows = users; // Get selected rows from table
|
const selectedRows = users; // Get selected rows from table
|
||||||
const utils = trpc.useContext();
|
const utils = trpc.useContext();
|
||||||
|
@ -37,6 +38,7 @@ export function DeleteBulkUsers({ users }: Props) {
|
||||||
deleteMutation.mutateAsync({
|
deleteMutation.mutateAsync({
|
||||||
userIds: selectedRows.map((user) => user.id),
|
userIds: selectedRows.map((user) => user.id),
|
||||||
});
|
});
|
||||||
|
onRemove();
|
||||||
}}>
|
}}>
|
||||||
<p className="mt-5">
|
<p className="mt-5">
|
||||||
{t("remove_users_from_org_confirm", {
|
{t("remove_users_from_org_confirm", {
|
||||||
|
|
|
@ -290,7 +290,10 @@ export function UserListTable() {
|
||||||
{
|
{
|
||||||
type: "render",
|
type: "render",
|
||||||
render: (table) => (
|
render: (table) => (
|
||||||
<DeleteBulkUsers users={table.getSelectedRowModel().flatRows.map((row) => row.original)} />
|
<DeleteBulkUsers
|
||||||
|
users={table.getSelectedRowModel().flatRows.map((row) => row.original)}
|
||||||
|
onRemove={() => table.toggleAllPageRowsSelected(false)}
|
||||||
|
/>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import type { Table } from "@tanstack/react-table";
|
import type { Table } from "@tanstack/react-table";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import { Fragment } from "react";
|
import { Fragment } from "react";
|
||||||
|
|
||||||
import type { SVGComponent } from "@calcom/types/SVGComponent";
|
import type { SVGComponent } from "@calcom/types/SVGComponent";
|
||||||
|
@ -24,23 +25,30 @@ interface DataTableSelectionBarProps<TData> {
|
||||||
|
|
||||||
export function DataTableSelectionBar<TData>({ table, actions }: DataTableSelectionBarProps<TData>) {
|
export function DataTableSelectionBar<TData>({ table, actions }: DataTableSelectionBarProps<TData>) {
|
||||||
const numberOfSelectedRows = table.getSelectedRowModel().rows.length;
|
const numberOfSelectedRows = table.getSelectedRowModel().rows.length;
|
||||||
|
const isVisible = numberOfSelectedRows > 0;
|
||||||
if (numberOfSelectedRows === 0) return null;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="bg-brand-default text-brand item-center absolute bottom-0 left-1/2 flex -translate-x-1/2 gap-4 rounded-lg p-2">
|
<AnimatePresence>
|
||||||
<div className="text-brand-subtle my-auto px-2">{numberOfSelectedRows} selected</div>
|
{isVisible ? (
|
||||||
{actions?.map((action, index) => (
|
<motion.div
|
||||||
<Fragment key={index}>
|
initial={{ opacity: 0, y: 0 }}
|
||||||
{action.type === "action" ? (
|
animate={{ opacity: 1, y: 20 }}
|
||||||
<Button aria-label={action.label} onClick={action.onClick} StartIcon={action.icon}>
|
exit={{ opacity: 0, y: 0 }}
|
||||||
{action.label}
|
className="bg-brand-default text-brand item-center fixed bottom-6 left-1/4 hidden gap-4 rounded-lg p-2 md:flex lg:left-1/2">
|
||||||
</Button>
|
<div className="text-brand-subtle my-auto px-2">{numberOfSelectedRows} selected</div>
|
||||||
) : action.type === "render" ? (
|
{actions?.map((action, index) => (
|
||||||
action.render(table)
|
<Fragment key={index}>
|
||||||
) : null}
|
{action.type === "action" ? (
|
||||||
</Fragment>
|
<Button aria-label={action.label} onClick={action.onClick} StartIcon={action.icon}>
|
||||||
))}
|
{action.label}
|
||||||
</div>
|
</Button>
|
||||||
|
) : action.type === "render" ? (
|
||||||
|
action.render(table)
|
||||||
|
) : null}
|
||||||
|
</Fragment>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
) : null}
|
||||||
|
</AnimatePresence>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -95,7 +95,7 @@ export function DataTable<TData, TValue>({
|
||||||
virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
|
virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative space-y-4">
|
<div className="space-y-4">
|
||||||
<DataTableToolbar
|
<DataTableToolbar
|
||||||
table={table}
|
table={table}
|
||||||
filterableItems={filterableItems}
|
filterableItems={filterableItems}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user