1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import { n__ } from '~/locale';
/**
* Accepts an array of options and an array of selected option IDs
* and optionally a placeholder and maximum number of options to show.
*
* Returns a string with the text of the selected options:
* - If no options are selected, returns the placeholder or an empty string.
* - If less than maxOptionsShown is selected, returns the text of those options comma-separated.
* - If more than maxOptionsShown is selected, returns the text of those options comma-separated
* followed by the text "+X more", where X is the number of additional selected options
*
* @param {Object} opts
* @param {Array<{ id: number | string, value: string }>} opts.options
* @param {Array<{ id: number | string }>} opts.selected
* @param {String} opts.placeholder - Placeholder when no option is selected
* @param {Integer} opts.maxOptionsShown – Max number of options to show
* @returns {String}
*/
export const getSelectedOptionsText = ({
options,
selected,
placeholder = '',
maxOptionsShown = 1,
}) => {
const selectedOptions = options.filter(({ id, value }) => selected.includes(id || value));
if (selectedOptions.length === 0) {
return placeholder;
}
const optionTexts = selectedOptions.map((option) => option.text);
if (selectedOptions.length <= maxOptionsShown) {
return optionTexts.join(', ');
}
// Prevent showing "+-1 more" when the array is empty.
const additionalItemsCount = selectedOptions.length - maxOptionsShown;
return `${optionTexts.slice(0, maxOptionsShown).join(', ')} ${n__(
'+%d more',
'+%d more',
additionalItemsCount,
)}`;
};
|
