fix: team availability data table scrolling (#13036)
* fixed data table scrolling for team availability * Update packages/features/shell/Shell.tsx * nit
This commit is contained in:
parent
ecb693c70e
commit
49f9f5489b
|
@ -384,7 +384,7 @@ function BookingListItem(booking: BookingItemProps) {
|
||||||
target="_blank"
|
target="_blank"
|
||||||
title={locationToDisplay}
|
title={locationToDisplay}
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className="text-sm leading-6 text-blue-600 hover:underline">
|
className="text-sm leading-6 text-blue-600 hover:underline dark:text-blue-400">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{provider?.iconUrl && (
|
{provider?.iconUrl && (
|
||||||
<img
|
<img
|
||||||
|
|
|
@ -130,7 +130,7 @@ export function AvailabilitySliderTable() {
|
||||||
id: "slider",
|
id: "slider",
|
||||||
header: () => {
|
header: () => {
|
||||||
return (
|
return (
|
||||||
<div className="flex items-center">
|
<div className="flex items-center space-x-2">
|
||||||
<ButtonGroup containerProps={{ className: "space-x-0" }}>
|
<ButtonGroup containerProps={{ className: "space-x-0" }}>
|
||||||
<Button
|
<Button
|
||||||
color="minimal"
|
color="minimal"
|
||||||
|
@ -145,7 +145,7 @@ export function AvailabilitySliderTable() {
|
||||||
variant="icon"
|
variant="icon"
|
||||||
/>
|
/>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<span>{browsingDate.format("DD dddd MMM, YYYY")}</span>
|
<span>{browsingDate.format("LL")}</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
@ -192,8 +192,9 @@ export function AvailabilitySliderTable() {
|
||||||
browsingDate: browsingDate.toDate(),
|
browsingDate: browsingDate.toDate(),
|
||||||
})}>
|
})}>
|
||||||
<>
|
<>
|
||||||
<div className="relative">
|
<div className="relative -mx-2 w-[calc(100%+16px)] overflow-x-scroll px-2 lg:-mx-6 lg:w-[calc(100%+48px)] lg:px-6">
|
||||||
<DataTable
|
<DataTable
|
||||||
|
variant="compact"
|
||||||
searchKey="member"
|
searchKey="member"
|
||||||
tableContainerRef={tableContainerRef}
|
tableContainerRef={tableContainerRef}
|
||||||
columns={memorisedColumns}
|
columns={memorisedColumns}
|
||||||
|
|
|
@ -106,7 +106,7 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex items-end overflow-auto text-sm">
|
<div className="flex items-end justify-center overflow-auto text-sm">
|
||||||
{days.map((day, i) => {
|
{days.map((day, i) => {
|
||||||
if (!day.length) return null;
|
if (!day.length) return null;
|
||||||
const dateWithDaySet = usersTimezoneDate.add(i - 1, "day");
|
const dateWithDaySet = usersTimezoneDate.add(i - 1, "day");
|
||||||
|
@ -165,7 +165,7 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
|
||||||
key={h}
|
key={h}
|
||||||
className={classNames(
|
className={classNames(
|
||||||
"flex h-8 flex-col items-center justify-center",
|
"flex h-8 flex-col items-center justify-center",
|
||||||
isInRange ? "text-emphasis dark:text-inverted" : "",
|
isInRange ? "text-emphasis" : "",
|
||||||
isInRange && !rangeOverlap ? "bg-success" : "",
|
isInRange && !rangeOverlap ? "bg-success" : "",
|
||||||
hours ? "" : "bg-subtle font-medium"
|
hours ? "" : "bg-subtle font-medium"
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -40,7 +40,7 @@ export function DataTableToolbar<TData>({
|
||||||
const { t } = useLocale();
|
const { t } = useLocale();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="sticky top-[3rem] z-10 flex items-center justify-end space-x-2 py-4 md:top-0">
|
<div className="flex items-center justify-end space-x-2 py-4">
|
||||||
{searchKey && (
|
{searchKey && (
|
||||||
<Input
|
<Input
|
||||||
className="max-w-64 mb-0 mr-auto rounded-md"
|
className="max-w-64 mb-0 mr-auto rounded-md"
|
||||||
|
|
|
@ -38,6 +38,7 @@ export interface DataTableProps<TData, TValue> {
|
||||||
onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
|
onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
|
||||||
CTA?: React.ReactNode;
|
CTA?: React.ReactNode;
|
||||||
tableOverlay?: React.ReactNode;
|
tableOverlay?: React.ReactNode;
|
||||||
|
variant?: "default" | "compact";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function DataTable<TData, TValue>({
|
export function DataTable<TData, TValue>({
|
||||||
|
@ -50,6 +51,7 @@ export function DataTable<TData, TValue>({
|
||||||
tableContainerRef,
|
tableContainerRef,
|
||||||
isLoading,
|
isLoading,
|
||||||
tableOverlay,
|
tableOverlay,
|
||||||
|
variant,
|
||||||
/** This should only really be used if you dont have actions in a row. */
|
/** This should only really be used if you dont have actions in a row. */
|
||||||
onRowMouseclick,
|
onRowMouseclick,
|
||||||
onScroll,
|
onScroll,
|
||||||
|
@ -102,7 +104,7 @@ export function DataTable<TData, TValue>({
|
||||||
searchKey={searchKey}
|
searchKey={searchKey}
|
||||||
tableCTA={tableCTA}
|
tableCTA={tableCTA}
|
||||||
/>
|
/>
|
||||||
<div className="border-subtle border" ref={tableContainerRef} onScroll={onScroll}>
|
<div ref={tableContainerRef} onScroll={onScroll}>
|
||||||
<Table>
|
<Table>
|
||||||
<TableHeader>
|
<TableHeader>
|
||||||
{table.getHeaderGroups().map((headerGroup) => (
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
@ -128,16 +130,18 @@ export function DataTable<TData, TValue>({
|
||||||
{virtualRows && !isLoading ? (
|
{virtualRows && !isLoading ? (
|
||||||
virtualRows.map((virtualRow) => {
|
virtualRows.map((virtualRow) => {
|
||||||
const row = rows[virtualRow.index] as Row<TData>;
|
const row = rows[virtualRow.index] as Row<TData>;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<TableRow
|
<TableRow
|
||||||
key={row.id}
|
key={row.id}
|
||||||
data-state={row.getIsSelected() && "selected"}
|
data-state={row.getIsSelected() && "selected"}
|
||||||
onClick={() => onRowMouseclick && onRowMouseclick(row)}
|
onClick={() => onRowMouseclick && onRowMouseclick(row)}
|
||||||
className={classNames(onRowMouseclick && "hover:cursor-pointer")}>
|
className={classNames(
|
||||||
|
onRowMouseclick && "hover:cursor-pointer",
|
||||||
|
variant === "compact" && "!border-0"
|
||||||
|
)}>
|
||||||
{row.getVisibleCells().map((cell) => {
|
{row.getVisibleCells().map((cell) => {
|
||||||
return (
|
return (
|
||||||
<TableCell key={cell.id}>
|
<TableCell key={cell.id} className={classNames(variant === "compact" && "p-1.5")}>
|
||||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
</TableCell>
|
</TableCell>
|
||||||
);
|
);
|
||||||
|
|
|
@ -54,7 +54,7 @@ export const ToggleGroup = ({ options, onValueChange, isFullWidth, ...props }: T
|
||||||
"aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition-colors",
|
"aria-checked:bg-emphasis relative rounded-[4px] px-3 py-1 text-sm leading-tight transition-colors",
|
||||||
option.disabled
|
option.disabled
|
||||||
? "text-gray-400 hover:cursor-not-allowed"
|
? "text-gray-400 hover:cursor-not-allowed"
|
||||||
: "text-default [&[aria-checked='false']]:hover:bg-emphasis",
|
: "text-default [&[aria-checked='false']]:hover:text-emphasis",
|
||||||
isFullWidth && "w-full"
|
isFullWidth && "w-full"
|
||||||
)}>
|
)}>
|
||||||
<div className="item-center flex justify-center ">
|
<div className="item-center flex justify-center ">
|
||||||
|
|
|
@ -5,7 +5,11 @@ import { classNames } from "@calcom/lib";
|
||||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
||||||
({ className, ...props }, ref) => (
|
({ className, ...props }, ref) => (
|
||||||
<div className="w-full overflow-auto md:overflow-visible">
|
<div className="w-full overflow-auto md:overflow-visible">
|
||||||
<table ref={ref} className={classNames("w-full caption-bottom text-sm", className)} {...props} />
|
<table
|
||||||
|
ref={ref}
|
||||||
|
className={classNames("border-subtle w-full caption-bottom border text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
@ -68,7 +72,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<
|
||||||
({ className, ...props }, ref) => (
|
({ className, ...props }, ref) => (
|
||||||
<td
|
<td
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={classNames("text-default p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
className={classNames("text-default px-2 py-2.5 align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user