feat(list): add showItemCount prop to MultiList and SingleList

packages/web/src/components/list/MultiList.d.ts

@@ -26,6 +26,7 @@ export interface MultiList extends CommonProps {
 	selectAllLabel?: string;
 	showCheckbox: boolean;
 	showCount?: boolean;
+	showItemCount?: boolean;
 	showFilter?: boolean;
 	showSearch?: boolean;
 	size?: number;

packages/web/src/components/list/MultiList.js

@@ -29,7 +29,7 @@ import {
 import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions';
 import types from '@appbaseio/reactivecore/lib/utils/types';
 
-import Title from '../../styles/Title';
+import Title, { TitleCount } from '../../styles/Title';
 import Input from '../../styles/Input';
 import Button, { loadMoreContainer } from '../../styles/Button';
 import Container from '../../styles/Container';
@@ -445,6 +445,16 @@ class MultiList extends Component {
 		return listItems;
 	}
 
+	/**
+	 * The number of items shown next to the title when `showItemCount` is set.
+	 * Counts the items currently rendered, so it stays in sync with the list as
+	 * `showSearch` narrows it down, and reflects the buckets actually returned
+	 * rather than the requested `size`.
+	 */
+	get itemCount() {
+		return this.listItems.length;
+	}
+
 	getComponent() {
 		const { error, isLoading, rawData } = this.props;
 		const { currentValue } = this.state;
@@ -469,6 +479,7 @@ class MultiList extends Component {
 			error,
 			isLoading,
 			showCount,
+			showItemCount,
 			total,
 		} = this.props;
 		const { isLastBucket } = this.state;
@@ -493,6 +504,15 @@ class MultiList extends Component {
 				{this.props.title && (
 					<Title className={getClassName(this.props.innerClass, 'title') || null}>
 						{this.props.title}
+						{showItemCount && (
+							<TitleCount
+								className={
+									getClassName(this.props.innerClass, 'itemCount') || null
+								}
+							>
+								{this.itemCount}
+							</TitleCount>
+						)}
 					</Title>
 				)}
 				{this.renderSearch()}
@@ -648,6 +668,7 @@ MultiList.propTypes = {
 	selectAllLabel: types.string,
 	showCheckbox: types.boolRequired,
 	showCount: types.bool,
+	showItemCount: types.bool,
 	showSearch: types.bool,
 	size: types.number,
 	sortBy: types.sortByWithCount,
@@ -669,6 +690,7 @@ MultiList.defaultProps = {
 	queryFormat: 'or',
 	showCheckbox: true,
 	showCount: true,
+	showItemCount: false,
 	showSearch: true,
 	size: 100,
 	sortBy: 'count',

packages/web/src/components/list/MultiList.test.js

@@ -161,6 +161,46 @@ it('should use render prop to render the list item', () => {
 	expect(elem).toMatchSnapshot();
 });
 
+it('should render item count next to the title when showItemCount is true', () => {
+	const elem = renderer
+		.create(
+			<ReactiveBase app="test" url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@localhost:800">
+				<MultiList
+					mode="test"
+					componentId="authors"
+					dataField="authors.keyword"
+					title="Authors"
+					showItemCount
+					mockData={{
+						aggregations: MOCK_AGGREGATIONS_DATA,
+					}}
+				/>
+			</ReactiveBase>,
+		)
+		.toJSON();
+	expect(elem).toMatchSnapshot();
+});
+
+it('should not render item count when showItemCount is false', () => {
+	const elem = renderer
+		.create(
+			<ReactiveBase app="test" url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@localhost:800">
+				<MultiList
+					mode="test"
+					componentId="authors"
+					dataField="authors.keyword"
+					title="Authors"
+					showItemCount={false}
+					mockData={{
+						aggregations: MOCK_AGGREGATIONS_DATA,
+					}}
+				/>
+			</ReactiveBase>,
+		)
+		.toJSON();
+	expect(elem).toMatchSnapshot();
+});
+
 it('should select default value', () => {
 	const elem = renderer
 		.create(

packages/web/src/components/list/SingleList.d.ts

@@ -24,6 +24,7 @@ export interface SingleList extends CommonProps {
 	transformData?: (...args: any[]) => any;
 	selectAllLabel?: string;
 	showCount?: boolean;
+	showItemCount?: boolean;
 	showFilter?: boolean;
 	showRadio?: boolean;
 	showSearch?: boolean;

packages/web/src/components/list/SingleList.js

@@ -28,7 +28,7 @@ import { replaceDiacritics } from '@appbaseio/reactivecore/lib/utils/suggestions
 import types from '@appbaseio/reactivecore/lib/utils/types';
 import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
 import { getInternalComponentID } from '@appbaseio/reactivecore/lib/utils/transform';
-import Title from '../../styles/Title';
+import Title, { TitleCount } from '../../styles/Title';
 import Input from '../../styles/Input';
 import Button, { loadMoreContainer } from '../../styles/Button';
 import Container from '../../styles/Container';
@@ -340,6 +340,16 @@ class SingleList extends Component {
 		return listItems;
 	}
 
+	/**
+	 * The number of items shown next to the title when `showItemCount` is set.
+	 * Counts the items currently rendered, so it stays in sync with the list as
+	 * `showSearch` narrows it down, and reflects the buckets actually returned
+	 * rather than the requested `size`.
+	 */
+	get itemCount() {
+		return this.listItems.length;
+	}
+
 	getComponent() {
 		const { error, isLoading, rawData } = this.props;
 		const { currentValue } = this.state;
@@ -363,6 +373,7 @@ class SingleList extends Component {
 			renderError,
 			error,
 			isLoading,
+			showItemCount,
 			total,
 		} = this.props;
 		const { isLastBucket } = this.state;
@@ -390,6 +401,15 @@ class SingleList extends Component {
 				{this.props.title && (
 					<Title className={getClassName(this.props.innerClass, 'title') || null}>
 						{this.props.title}
+						{showItemCount && (
+							<TitleCount
+								className={
+									getClassName(this.props.innerClass, 'itemCount') || null
+								}
+							>
+								{this.itemCount}
+							</TitleCount>
+						)}
 					</Title>
 				)}
 				{this.renderSearch()}
@@ -535,6 +555,7 @@ SingleList.propTypes = {
 	transformData: types.func,
 	selectAllLabel: types.string,
 	showCount: types.bool,
+	showItemCount: types.bool,
 	showFilter: types.bool,
 	showRadio: types.boolRequired,
 	showSearch: types.bool,
@@ -558,6 +579,7 @@ SingleList.defaultProps = {
 	className: null,
 	placeholder: 'Search',
 	showCount: true,
+	showItemCount: false,
 	showFilter: true,
 	showRadio: true,
 	showSearch: true,

packages/web/src/components/list/SingleList.test.js

@@ -158,6 +158,46 @@ it('should use render prop to render the list item', () => {
 	expect(elem).toMatchSnapshot();
 });
 
+it('should render item count next to the title when showItemCount is true', () => {
+	const elem = renderer
+		.create(
+			<ReactiveBase app="test" url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@localhost:800">
+				<SingleList
+					mode="test"
+					componentId="authors"
+					dataField="authors.keyword"
+					title="Authors"
+					showItemCount
+					mockData={{
+						aggregations: MOCK_AGGREGATIONS_DATA,
+					}}
+				/>
+			</ReactiveBase>,
+		)
+		.toJSON();
+	expect(elem).toMatchSnapshot();
+});
+
+it('should not render item count when showItemCount is false', () => {
+	const elem = renderer
+		.create(
+			<ReactiveBase app="test" url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@localhost:800">
+				<SingleList
+					mode="test"
+					componentId="authors"
+					dataField="authors.keyword"
+					title="Authors"
+					showItemCount={false}
+					mockData={{
+						aggregations: MOCK_AGGREGATIONS_DATA,
+					}}
+				/>
+			</ReactiveBase>,
+		)
+		.toJSON();
+	expect(elem).toMatchSnapshot();
+});
+
 it('should select default value', () => {
 	const elem = renderer
 		.create(