@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
87 lines • 2.76 kB
JavaScript
import { createDialog, DialogType } from 'chayns-api';
import React, { useMemo } from 'react';
import Button from '../button/Button';
import { StyledSelectButton } from './SelectButton.styles';
const SelectButton = _ref => {
let {
buttonText,
isDisabled,
list,
onSelect,
selectedItemIds,
shouldAllowMultiSelect,
shouldShowButtonTextWithSelection,
maxDisplayedItems = 3,
additionalText = ', ##count## weitere',
shouldShowSearch,
selectAllText,
title
} = _ref;
const itemList = useMemo(() => {
const items = [];
list.forEach(_ref2 => {
let {
text,
id
} = _ref2;
const isSelected = selectedItemIds ? selectedItemIds.includes(id) : false;
items.push({
name: text,
id,
isSelected
});
});
return items;
}, [list, selectedItemIds]);
const internalButtonText = useMemo(() => {
if (shouldShowButtonTextWithSelection || !selectedItemIds || selectedItemIds.length === 0) {
return buttonText;
}
let addedCount = 0;
let newText = '';
const additionalCount = selectedItemIds.length - maxDisplayedItems;
list.forEach(_ref3 => {
let {
text,
id
} = _ref3;
if (addedCount < maxDisplayedItems && selectedItemIds?.includes(id)) {
addedCount++;
newText += newText.length === 0 ? `${text}` : `, ${text}`;
}
});
if (additionalCount >= 1) {
newText += additionalText.replace('##count##', String(additionalCount));
}
return newText;
}, [additionalText, buttonText, list, maxDisplayedItems, selectedItemIds, shouldShowButtonTextWithSelection]);
const handleClick = () => {
void createDialog({
text: title ? `[h1]${title}[/h1]` : undefined,
type: DialogType.SELECT,
list: itemList,
multiselect: shouldAllowMultiSelect,
quickfind: shouldShowSearch,
selectAllCheckbox: selectAllText
}).open().then(result => {
// Ignore because there is no type
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (result && result.buttonType === 1 && typeof onSelect === 'function') {
// Ignore because there is no type
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
onSelect(result.result.map(Number));
}
});
};
return /*#__PURE__*/React.createElement(StyledSelectButton, null, /*#__PURE__*/React.createElement(Button, {
onClick: handleClick,
isDisabled: isDisabled,
isSecondary: true,
shouldShowTextAsRobotoMedium: false
}, internalButtonText));
};
SelectButton.displayName = 'SelectButton';
export default SelectButton;
//# sourceMappingURL=SelectButton.js.map