fb7caffdd5
The sort and filter UI of the video gallery was not working, this fixes that issue, and also adds a new UI for filering videos that allows filtering videos to include more than one status. It also fixes the hooks related to VideoGallery to avoid potential bugs in the future and updates tests to use react testing library instead of enzyme. It also reduces the padding in gallery page.
96 lines
2.3 KiB
JavaScript
96 lines
2.3 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import {
|
|
Scrollable, SelectableBox, Spinner,
|
|
} from '@edx/paragon';
|
|
|
|
import {
|
|
FormattedMessage,
|
|
useIntl,
|
|
} from '@edx/frontend-platform/i18n';
|
|
|
|
import messages from './messages';
|
|
import GalleryCard from './GalleryCard';
|
|
|
|
export const Gallery = ({
|
|
galleryIsEmpty,
|
|
searchIsEmpty,
|
|
displayList,
|
|
highlighted,
|
|
onHighlightChange,
|
|
emptyGalleryLabel,
|
|
showIdsOnCards,
|
|
height,
|
|
isLoaded,
|
|
}) => {
|
|
const intl = useIntl();
|
|
if (!isLoaded) {
|
|
return (
|
|
<div style={{
|
|
position: 'absolute',
|
|
left: '50%',
|
|
top: '50%',
|
|
transform: 'translate(-50%, -50%)',
|
|
}}
|
|
>
|
|
<Spinner
|
|
animation="border"
|
|
className="mie-3"
|
|
screenReaderText={intl.formatMessage(messages.loading)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
if (galleryIsEmpty) {
|
|
return (
|
|
<div className="gallery p-4 bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
|
|
<FormattedMessage {...emptyGalleryLabel} />
|
|
</div>
|
|
);
|
|
}
|
|
if (searchIsEmpty) {
|
|
return (
|
|
<div className="gallery p-4 bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
|
|
<FormattedMessage {...messages.emptySearchLabel} />
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<Scrollable className="gallery bg-light-400" style={{ height, margin: '0 -1.5rem' }}>
|
|
<div className="p-4">
|
|
<SelectableBox.Set
|
|
columns={1}
|
|
name="images"
|
|
onChange={onHighlightChange}
|
|
type="radio"
|
|
value={highlighted}
|
|
>
|
|
{ displayList.map(asset => <GalleryCard key={asset.id} asset={asset} showId={showIdsOnCards} />) }
|
|
</SelectableBox.Set>
|
|
</div>
|
|
</Scrollable>
|
|
);
|
|
};
|
|
|
|
Gallery.defaultProps = {
|
|
highlighted: '',
|
|
showIdsOnCards: false,
|
|
height: '375px',
|
|
show: true,
|
|
};
|
|
Gallery.propTypes = {
|
|
show: PropTypes.bool,
|
|
isLoaded: PropTypes.bool.isRequired,
|
|
galleryIsEmpty: PropTypes.bool.isRequired,
|
|
searchIsEmpty: PropTypes.bool.isRequired,
|
|
displayList: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
|
|
highlighted: PropTypes.string,
|
|
onHighlightChange: PropTypes.func.isRequired,
|
|
emptyGalleryLabel: PropTypes.shape({}).isRequired,
|
|
showIdsOnCards: PropTypes.bool,
|
|
height: PropTypes.string,
|
|
};
|
|
|
|
export default Gallery;
|