diff --git a/TODO b/TODO index 232ee7870..b48d318e9 100644 --- a/TODO +++ b/TODO @@ -1,8 +1,6 @@ tables should be aware that rows are players who have pids. add bulk/all/select operations at table-level through ... menu -- different width cutoff for inline buttons in god mode or not - - trickier with dynamic actions like on roster page - - could add fudge factor per extra action - - could maybe somehow compute with exactly ahead of time? +- ... position changes vertically with hideAllControls + - did it used to? - test - career totals stats page - all seasons stats page diff --git a/src/ui/components/DataTable/BulkActions.tsx b/src/ui/components/DataTable/BulkActions.tsx index 81d69365a..6c75955d4 100644 --- a/src/ui/components/DataTable/BulkActions.tsx +++ b/src/ui/components/DataTable/BulkActions.tsx @@ -83,13 +83,15 @@ export type BulkAction = { export const BulkActions = ({ extraActions, + hasTitle, hideAllControls, name, selectedRows, wrapperRef, }: { - extraActions?: BulkAction[]; - hideAllControls?: Props["hideAllControls"]; + extraActions: BulkAction[] | undefined; + hasTitle: boolean; + hideAllControls: Props["hideAllControls"]; name: string; selectedRows: SelectedRows; wrapperRef: RefObject; @@ -104,18 +106,30 @@ export const BulkActions = ({ }, ); - const hideAllControlsHasTitle = - hideAllControls !== undefined && typeof hideAllControls !== "boolean"; + const numExtraActions = extraActions?.length ?? 0; const getUpdatedShowInlineButtons = useCallback(() => { // Never show inline if there's a title, because there's no room! - if (hideAllControlsHasTitle || !wrapperRef.current) { + if (hasTitle || !wrapperRef.current) { return false; } - // Cutoff for when there is enough room to show inline buttons - return wrapperRef.current.offsetWidth >= 510; - }, [hideAllControlsHasTitle, wrapperRef]); + // Cutoff for when there is enough room to show inline buttons - changes when more buttons are shown or more space is available + let baseCutoff = 460; + + // Assume 80 pixels per button + baseCutoff += numExtraActions * 80; + + if (godMode) { + baseCutoff += 108; + } + + if (hideAllControls) { + baseCutoff -= 220; + } + + return wrapperRef.current.offsetWidth >= baseCutoff; + }, [godMode, hasTitle, hideAllControls, numExtraActions, wrapperRef]); const [showInlineButtons, setShowInlineButtons] = useState(false); diff --git a/src/ui/components/DataTable/index.tsx b/src/ui/components/DataTable/index.tsx index 584614df0..c36a5de23 100644 --- a/src/ui/components/DataTable/index.tsx +++ b/src/ui/components/DataTable/index.tsx @@ -559,6 +559,7 @@ const DataTable = ({ {bulkSelectRows ? (