@talend/react-faceted-search
Version:
128 lines • 4.43 kB
JavaScript
/* eslint-disable jsx-a11y/no-autofocus */
import { useMemo, useState } from 'react';
import PropTypes from 'prop-types';
import { ButtonPrimary, ButtonTertiary, DropdownButton, Form, SkeletonHeading, StackVertical } from '@talend/design-system';
import { getDataAttrFromProps } from '@talend/utils';
import styles from './BadgeMenu.module.scss';
import { get, isEmpty } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const createRowItemEntity = value => option => {
return {
id: option.id,
label: option.label,
checked: option.id === value.id
};
};
const getRows = (values, value) => {
return values.map(createRowItemEntity(value));
};
const getVisibleRows = (rows, filterValue, showAll) => {
const formatFilterValue = filterValue.trim().toLocaleLowerCase();
return rows.filter(option => get(option, 'label', '').toLocaleLowerCase().includes(formatFilterValue)).filter(row => showAll ? true : row.checked);
};
const BadgeMenuForm = ({
values,
id,
onChange,
onSubmit,
value,
filterBarPlaceholder,
t,
...rest
}) => {
const [filter, setFilter] = useState('');
const [showAll, setShowAll] = useState(true);
const badgeMenuFormId = `${id}-menu-form`;
const items = useMemo(() => getRows(values, value), [values, value]);
const visibleItems = useMemo(() => getVisibleRows(items, filter, showAll), [items, filter, showAll]);
const showSelectedToggleLabel = showAll ? t('SHOW_SELECTED_ITEMS', {
defaultValue: 'Show selected'
}) : t('SHOW_ALL_ITEMS', {
defaultValue: 'Show all'
});
return /*#__PURE__*/_jsxs(Form, {
id: `${badgeMenuFormId}-form`,
onSubmit: onSubmit,
children: [/*#__PURE__*/_jsx(Form.Search, {
id: `${badgeMenuFormId}-filter`,
placeholder: filterBarPlaceholder || t('FIND_COLUMN_FILTER_PLACEHOLDER', {
defaultValue: 'Find a column'
}),
onChange: event => {
var _event$target;
setFilter((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '');
},
value: filter,
"data-test": "badge-menu-filter",
"data-testid": "badge-menu-filter"
}), /*#__PURE__*/_jsx("div", {
className: styles['fs-badge-menu-form-items'],
children: !rest.isLoading ? /*#__PURE__*/_jsx(StackVertical, {
gap: "0",
children: visibleItems.map(rowItem => {
return /*#__PURE__*/_jsx(DropdownButton, {
onClick: event => {
onChange(event, rowItem);
},
checked: rowItem.checked,
"data-testid": `badge-menu-form-item-${rowItem.id}`,
"data-test": `badge-menu-form-item-${rowItem.id}`,
children: /*#__PURE__*/_jsx("span", {
children: rowItem.label
})
}, rowItem.id);
})
}) : /*#__PURE__*/_jsxs(StackVertical, {
gap: "S",
"data-testid": "badge-menu-form-skeleton-item",
"data-test": "badge-menu-form-skeleton-item",
children: [/*#__PURE__*/_jsx(SkeletonHeading, {
size: "L",
width: "100"
}), /*#__PURE__*/_jsx(SkeletonHeading, {
size: "L",
width: "100"
}), /*#__PURE__*/_jsx(SkeletonHeading, {
size: "L",
width: "100"
})]
})
}), /*#__PURE__*/_jsxs(Form.Buttons, {
padding: {
x: 0,
bottom: 0,
top: 'M'
},
children: [!isEmpty(value) && /*#__PURE__*/_jsx(ButtonTertiary, {
type: "button",
onClick: () => {
setShowAll(!showAll);
setFilter('');
},
children: showSelectedToggleLabel
}), /*#__PURE__*/_jsx(ButtonPrimary, {
type: "submit",
disabled: rest.isLoading,
...getDataAttrFromProps(rest),
children: t('APPLY', {
defaultValue: 'Apply'
})
})]
})]
});
};
BadgeMenuForm.propTypes = {
values: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
checked: PropTypes.bool
})),
id: PropTypes.string.isRequired,
onChange: PropTypes.func,
onSubmit: PropTypes.func.isRequired,
value: PropTypes.object,
filterBarPlaceholder: PropTypes.string,
t: PropTypes.func.isRequired
};
export { BadgeMenuForm };
//# sourceMappingURL=BadgeMenuForm.component.js.map