fix(footer): set max-toolbar-items when mini table is used (#634)

Set max-toolbar-items on cosmoz-bottom-bar when mini table is used AB#17737
Neovici · Dec 10, 2024 · 51b9f58 · 51b9f58
1 parent 4158e70
commit 51b9f58
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 81 deletions.
diff --git a/lib/render-footer.js b/lib/render-footer.js
@@ -11,61 +11,56 @@ export const renderFooter = ({
 	csvFilename,
 	xlsxFilename,
 	xlsxSheetname,
-	topPlacement
-}) => {
-	return html`
-		<cosmoz-bottom-bar
-			id="bottomBar"
-			?active=${!isEmpty(selectedItems.length)}
-		>
-			<slot name="info" slot="info">
-				${ngettext(
-					'{0} selected item',
-					'{0} selected items',
-					selectedItems.length
-				)}
-			</slot>
-			<slot name="actions" id="actions"></slot>
-			<!-- These slots are needed by cosmoz-bottom-bar
+	topPlacement,
+	maxToolbarItems,
+}) =>
+	html`<cosmoz-bottom-bar
+		id="bottomBar"
+		?active=${!isEmpty(selectedItems.length)}
+		?max-toolbar-items=${!isEmpty(maxToolbarItems)}
+	>
+		<slot name="info" slot="info">
+			${ngettext(
+				'{0} selected item',
+				'{0} selected items',
+				selectedItems.length,
+			)}
+		</slot>
+		<slot name="actions" id="actions"></slot>
+		<!-- These slots are needed by cosmoz-bottom-bar
         as it might change the slot of the actions to distribute them in the menu -->
-			<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
-			<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
-			<cosmoz-dropdown-menu slot="extra" .placement=${topPlacement}>
-				<svg
-					slot="button"
-					width="14"
-					height="18"
-					viewBox="0 0 14 18"
-					fill="none"
-					stroke="currentColor"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						d="M1 8.5L7.00024 14.5L13 8.5"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
-					<path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
-				</svg>
-				<button
-					@click=${() => saveAsCsvAction(columns, selectedItems, csvFilename)}
-				>
-					${_('Save as CSV')}
-				</button>
-				<button
-					@click=${() =>
-						saveAsXlsxAction(
-							columns,
-							selectedItems,
-							xlsxFilename,
-							xlsxSheetname
-						)}
-				>
-					${_('Save as XLSX')}
-				</button>
-				<slot name="download-menu"></slot>
-			</cosmoz-dropdown-menu>
-		</cosmoz-bottom-bar>`;
-};
+		<slot name="bottom-bar-toolbar" slot="bottom-bar-toolbar"></slot>
+		<slot name="bottom-bar-menu" slot="bottom-bar-menu"></slot>
+		<cosmoz-dropdown-menu slot="extra" .placement=${topPlacement}>
+			<svg
+				slot="button"
+				width="14"
+				height="18"
+				viewBox="0 0 14 18"
+				fill="none"
+				stroke="currentColor"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M1 8.5L7.00024 14.5L13 8.5"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				/>
+				<path d="M13 17L1 17" stroke-width="2" stroke-linecap="round" />
+				<path d="M7 1V13" stroke-width="2" stroke-linecap="round" />
+			</svg>
+			<button
+				@click=${() => saveAsCsvAction(columns, selectedItems, csvFilename)}
+			>
+				${_('Save as CSV')}
+			</button>
+			<button
+				@click=${() =>
+					saveAsXlsxAction(columns, selectedItems, xlsxFilename, xlsxSheetname)}
+			>
+				${_('Save as XLSX')}
+			</button>
+			<slot name="download-menu"></slot>
+		</cosmoz-dropdown-menu>
+	</cosmoz-bottom-bar>`;
diff --git a/lib/use-fast-layout.js b/lib/use-fast-layout.js
@@ -16,7 +16,11 @@ export const useFastLayout = ({
 	sortAndGroupOptions,
 }) => {
 	const canvasWidth = useCanvasWidth(host),
-		{ miniColumn, miniColumns } = useMini({ host, canvasWidth, columns }),
+		{ isMini, miniColumn, miniColumns } = useMini({
+			host,
+			canvasWidth,
+			columns,
+		}),
 		{ groupOnColumn } = sortAndGroupOptions,
 		layout = useLayout({
 			canvasWidth,
@@ -52,5 +56,5 @@ export const useFastLayout = ({
 
 	useStyleSheet(layoutCss);
 
-	return { collapsedColumns, miniColumns };
+	return { isMini, collapsedColumns, miniColumns };
 };
diff --git a/lib/use-footer.js b/lib/use-footer.js
@@ -1,22 +1,21 @@
 import { defaultPlacement } from '@neovici/cosmoz-dropdown';
 const _defaultPlacement = ['top-right', ...defaultPlacement];
 
-export const useFooter = ({
-	host,
-	...rest
-}) => {
+export const useFooter = ({ host, ...rest }) => {
 	const {
-			csvFilename = 'omnitable.csv',
-			xlsxFilename = 'omnitable.xlsx',
-			xlsxSheetname = 'Omnitable',
-			topPlacement = _defaultPlacement,
-		} = host;
+		csvFilename = 'omnitable.csv',
+		xlsxFilename = 'omnitable.xlsx',
+		xlsxSheetname = 'Omnitable',
+		topPlacement = _defaultPlacement,
+		maxToolbarItems,
+	} = host;
 
 	return {
 		csvFilename,
 		xlsxFilename,
 		xlsxSheetname,
 		topPlacement,
+		maxToolbarItems,
 		...rest,
 	};
 };
diff --git a/lib/use-mini.js b/lib/use-mini.js
@@ -7,22 +7,23 @@ export const useMini = ({ host, canvasWidth, columns: _columns }) => {
 		[canvasWidth, breakpoint],
 	);
 	const columns = useMemo(
-		() =>
-			isMiniSize
-				? _columns
-						?.filter((c) => c.mini != null)
-						.sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
-				: [],
-		[_columns, isMiniSize],
-	);
-
-	const [miniColumn, ...miniColumns] = columns ?? [];
+			() =>
+				isMiniSize
+					? _columns
+							?.filter((c) => c.mini != null)
+							.sort((a, b) => (a.mini ?? 0) - (b.mini ?? 0))
+					: [],
+			[_columns, isMiniSize],
+		),
+		[miniColumn, ...miniColumns] = columns ?? [],
+		hasMiniColumn = !!miniColumn;
 
 	useEffect(() => {
-		host.toggleAttribute('mini', !!miniColumn);
-	}, [miniColumn]);
+		host.toggleAttribute('mini', hasMiniColumn);
+	}, [hasMiniColumn]);
 
 	return {
+		isMini: hasMiniColumn && isMiniSize,
 		miniColumn,
 		miniColumns,
 	};

diff --git a/lib/use-omnitable.js b/lib/use-omnitable.js
@@ -40,14 +40,15 @@ export const useOmnitable = (host) => {
 				noLocalSort,
 				noLocalFilter,
 			}),
-		{ collapsedColumns, miniColumns } = useFastLayout({
+		{ isMini, collapsedColumns, miniColumns } = useFastLayout({
 			host,
 			columns,
 			settings,
 			setSettings,
 			resizeSpeedFactor,
 			sortAndGroupOptions,
 		}),
+		maxToolbarItems = isMini ? '0' : undefined,
 		dataIsValid = data && Array.isArray(data) && data.length > 0,
 		[selectedItems, setSelectedItems] = useState([]);
 
@@ -94,6 +95,7 @@ export const useOmnitable = (host) => {
 			host,
 			selectedItems,
 			columns,
+			maxToolbarItems,
 		}),
 	};
 };