59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { Button, Icon } from '@openedx/paragon';
|
|
import { Search } from '@openedx/paragon/icons';
|
|
|
|
import { useIntl } from '@edx/frontend-platform/i18n';
|
|
|
|
import { RequestStatus } from '../data/constants';
|
|
import messages from '../discussions/posts/post-actions-bar/messages';
|
|
|
|
const SearchInfo = ({
|
|
count,
|
|
text,
|
|
loadingStatus,
|
|
onClear,
|
|
textSearchRewrite,
|
|
}) => {
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<div className="d-flex flex-row border-bottom border-light-400">
|
|
<Icon src={Search} className="justify-content-start ml-3.5 mr-2 mb-2 mt-2.5" />
|
|
<Button variant="" size="inline" className="text-justify p-2">
|
|
{loadingStatus === RequestStatus.SUCCESSFUL && (
|
|
textSearchRewrite ? (
|
|
intl.formatMessage(messages.searchRewriteInfo, {
|
|
searchString: text,
|
|
count,
|
|
textSearchRewrite,
|
|
})
|
|
) : (
|
|
intl.formatMessage(messages.searchInfo, { count, text })
|
|
)
|
|
)}
|
|
{loadingStatus !== RequestStatus.SUCCESSFUL && intl.formatMessage(messages.searchInfoSearching)}
|
|
</Button>
|
|
<Button variant="link" size="inline" className="ml-auto mr-3" onClick={onClear} style={{ minWidth: '26%' }}>
|
|
{intl.formatMessage(messages.clearSearch)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
SearchInfo.propTypes = {
|
|
count: PropTypes.number.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
loadingStatus: PropTypes.string.isRequired,
|
|
textSearchRewrite: PropTypes.string,
|
|
onClear: PropTypes.func,
|
|
};
|
|
|
|
SearchInfo.defaultProps = {
|
|
onClear: () => {},
|
|
textSearchRewrite: null,
|
|
};
|
|
|
|
export default React.memo(SearchInfo);
|