@talend/react-faceted-search
Version:
171 lines (170 loc) • 6.44 kB
JavaScript
/* eslint-disable jsx-a11y/no-autofocus */
import { Fragment, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
import { ButtonPrimary, ButtonTertiary, Divider, Form, SkeletonHeading, StackVertical } from '@talend/design-system';
import { getDataAttrFromProps } from '@talend/utils';
import { I18N_DOMAIN_FACETED_SEARCH } from '../../../constants';
import { getApplyDataFeature } from '../../../helpers/usage.helpers';
import styles from './BadgeCheckboxes.module.scss';
import { get } from "lodash";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const createCheckboxEntity = value => checkbox => {
const entity = value.find(v => v.id === checkbox.id);
return {
id: checkbox.id,
label: checkbox.label,
checked: entity ? entity.checked : checkbox.checked || false
};
};
const getCheckboxes = (checkboxes, value, filterValue, showAll) => {
const formatFilterValue = filterValue.trim().toLocaleLowerCase();
return checkboxes.filter(checkbox => get(checkbox, 'label', '').toLocaleLowerCase().includes(formatFilterValue)).map(createCheckboxEntity(value)).filter(checkbox => showAll ? true : checkbox.checked);
};
const BadgeCheckboxesForm = ({
checkboxValues,
id,
onChange,
onSubmit,
value,
feature,
filterBarPlaceholder,
allSelector,
...rest
}) => {
const {
t
} = useTranslation(I18N_DOMAIN_FACETED_SEARCH);
const [filter, setFilter] = useState('');
const [showAll, setShowAll] = useState(true);
const leftBtnLabel = showAll ? t('NB_SELECTED_TAGS', {
count: value.length,
defaultValue: '{{count}} selected'
}) : t('SHOW_ALL_TAGS', {
defaultValue: 'Show all'
});
const badgeCheckBoxesFormId = `${id}-checkboxes-form`;
const checkboxes = useCallback(getCheckboxes(checkboxValues, value, filter, showAll), [checkboxValues, value, filter, showAll]);
const applyDataFeature = useMemo(() => getApplyDataFeature(feature), [feature]);
const onChangeCheckBoxes = (event, checkboxId) => {
const entity = checkboxes.find(checkboxValue => checkboxValue.id === checkboxId);
if (entity) {
entity.checked = event.target.checked;
}
onChange(event, checkboxes.filter(c => c.checked));
};
const onToggleAll = event => {
const checked = event.target.checked;
if (checked) {
const checkedCheckboxes = checkboxes.map(entity => ({
...entity,
checked: true
}));
onChange(event, checkedCheckboxes);
} else {
onChange(event, []);
}
};
return /*#__PURE__*/_jsx(Fragment, {
children: /*#__PURE__*/_jsxs(Form, {
id: `${badgeCheckBoxesFormId}-form`,
onSubmit: onSubmit,
children: [allSelector ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Form.Checkbox, {
id: 'selectAll-checkbox',
onChange: onToggleAll,
label: t('FACETED_SEARCH_VALUE_ALL', {
defaultValue: 'All'
}),
checked: checkboxes.filter(c => c.checked).length === checkboxValues.length,
"data-test": "badge-checkbox-form-checkbox-selectAll",
"data-testid": "badge-checkbox-form-checkbox-selectAll"
}, "selectAll"), /*#__PURE__*/_jsx(Divider, {
orientation: "horizontal"
})]
}) : /*#__PURE__*/_jsx(Form.Search, {
id: `${badgeCheckBoxesFormId}-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-checkbox-form-filter",
"data-testid": "badge-checkbox-form-filter"
}), /*#__PURE__*/_jsx("div", {
className: styles['fs-badge-checkbox-form-checkboxes'],
children: !rest.isLoading ? /*#__PURE__*/_jsx(StackVertical, {
gap: "S",
children: checkboxes.map(checkbox => {
return /*#__PURE__*/_jsx(Form.Checkbox, {
id: `${checkbox.id}-checkbox`,
label: checkbox.label,
onChange: event => {
onChangeCheckBoxes(event, checkbox.id);
},
checked: checkbox.checked,
"data-testid": `badge-checkbox-form-checkbox-${checkbox.id}`,
"data-test": `badge-checkbox-form-checkbox-${checkbox.id}`
}, checkbox.id);
})
}) : /*#__PURE__*/_jsxs(StackVertical, {
gap: "S",
"data-testid": "badge-checkbox-form-skeleton-item",
"data-test": "badge-checkbox-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: [value.length > 0 && /*#__PURE__*/_jsx(ButtonTertiary, {
type: "button",
onClick: () => {
setFilter('');
setShowAll(!showAll);
},
children: leftBtnLabel
}), /*#__PURE__*/_jsx(ButtonPrimary, {
"data-feature": applyDataFeature,
type: "submit",
disabled: rest.isLoading,
...getDataAttrFromProps(rest),
children: t('APPLY', {
defaultValue: 'Apply'
})
})]
})]
})
});
};
BadgeCheckboxesForm.propTypes = {
checkboxValues: PropTypes.arrayOf(PropTypes.shape({
checked: PropTypes.bool,
id: PropTypes.string.isRequired,
label: PropTypes.string.isRequired
})),
id: PropTypes.string.isRequired,
onChange: PropTypes.func,
onSubmit: PropTypes.func.isRequired,
value: PropTypes.array,
feature: PropTypes.string.isRequired,
filterBarPlaceholder: PropTypes.string,
allSelector: PropTypes.bool
};
// eslint-disable-next-line import/prefer-default-export
export { BadgeCheckboxesForm };
//# sourceMappingURL=BadgeCheckboxesForm.component.js.map