Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | 27x 27x | import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { Button, Icon } from '@folio/stripes/components';
import { useKintIntl } from '../hooks';
import css from '../../../styles/NoResultsMessage.css';
const NoResultsMessage = ({
className,
error,
filters,
filterPaneIsVisible,
icon: userIcon,
iconPresets: {
noTerms: noTermsIcon,
noTermsWhenFilterPane: noTermsWhenFilterPaneIcon,
noResults: noResultsIcon,
isLoading: isLoadingIcon,
error: errorIcon,
} = {},
intlKey: passedIntlKey,
intlNS: passedIntlNS,
isLoading,
isError,
label: userLabel,
labelOverrides = {},
searchTerm,
toggleFilterPane,
}) => {
const kintIntl = useKintIntl(passedIntlKey, passedIntlNS);
let icon = 'search';
let label = <FormattedMessage id="stripes-smart-components.sas.noResults.default" values={{ searchTerm }} />;
if (!isLoading && !searchTerm && !filters) {
// No search term and not loading
icon = noTermsIcon ?? (filterPaneIsVisible ? (noTermsWhenFilterPaneIcon ?? 'arrow-left') : null);
label = <FormattedMessage id="stripes-smart-components.sas.noResults.noTerms" />;
} else if (!isLoading) {
// Search term but not loading
icon = noResultsIcon ?? 'search';
label = <FormattedMessage id="stripes-smart-components.sas.noResults.noResults" />;
} else if (isLoading) {
// Loading
icon = isLoadingIcon ?? 'spinner-ellipsis';
label = <FormattedMessage id="stripes-smart-components.sas.noResults.loading" />;
} else if (isError) {
// Request failure
icon = errorIcon ?? 'exclamation-circle';
label = error?.message;
}
return (
<div className={`${className} ${css.noResultsMessage}`}>
<div className={css.noResultsMessageLabelWrap}>
{(userIcon || icon) &&
<Icon
icon={userIcon ?? icon}
iconRootClass={css.noResultsMessageIcon}
/>
}
<span className={css.noResultsMessageLabel}>{userLabel ?? labelOverrides.noResultsLabel ?? label}</span>
</div>
{/* If the filter pane is closed we show a button that toggles filter pane */}
{!filterPaneIsVisible && (
<Button
buttonClass={css.noResultsMessageButton}
marginBottom0
onClick={toggleFilterPane}
>
{
kintIntl.formatKintMessage({
id: 'showFilters',
overrideValue: labelOverrides?.showFilters
})
}
</Button>
)}
</div>
);
};
NoResultsMessage.propTypes = {
className: PropTypes.string,
error: PropTypes.object,
filters: PropTypes.string,
filterPaneIsVisible: PropTypes.bool.isRequired,
icon: PropTypes.string,
iconPresets: PropTypes.shape({
noTerms: PropTypes.string,
noTermsWhenFilterPane: PropTypes.string,
noResults: PropTypes.string,
isLoading: PropTypes.string,
error: PropTypes.string,
}),
intlKey: PropTypes.string,
intlNS: PropTypes.string,
isLoading: PropTypes.bool,
isError: PropTypes.bool,
label: PropTypes.oneOfType([
PropTypes.string,
PropTypes.node,
PropTypes.func
]),
labelOverrides: PropTypes.object,
searchTerm: PropTypes.string,
toggleFilterPane: PropTypes.func.isRequired,
};
export default NoResultsMessage;
|