CopyBot/mediacms
1
0
Fork 0
mirror of https://github.com/mediacms-io/mediacms.git synced 2026-03-14 00:41:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

all

Browse Source
This commit is contained in:
Markos Gogoulos
2026-03-13 14:45:04 +02:00
parent 0954b3ff0d
commit 633e666cea
10 changed files with 90 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/src/static/js/components/MediaListWrapper.tsx
View File

@@ -2,8 +2,9 @@ import React from 'react';
import { MediaListRow } from './MediaListRow';
import { BulkActionsDropdown } from './BulkActionsDropdown';
import { SelectAllCheckbox } from './SelectAllCheckbox';
import { CircleIconButton, MaterialIcon } from './_shared';
import { CircleIconButton, MaterialIcon, PopupMain, NavigationMenuList } from './_shared';
import { LinksConsumer } from '../utils/contexts';
import { usePopup } from '../utils/hooks';
import { translateString } from '../utils/helpers/';
import './MediaListWrapper.scss';
@@ -37,36 +38,60 @@ export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
onSelectAll = () => {},
onDeselectAll = () => {},
showAddMediaButton = false,
}) => (
<div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
<MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
{showBulkActions && (
<LinksConsumer>
{(links) => (
<div className="bulk-actions-container">
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
<SelectAllCheckbox
totalCount={totalCount}
selectedCount={selectedCount}
onSelectAll={onSelectAll}
onDeselectAll={onDeselectAll}
/>
</div>
{showAddMediaButton && (
<div className="add-media-button">
<a href={links.user.addMedia} title={translateString('Add media')}>
<CircleIconButton>
<MaterialIcon type="video_call" />
</CircleIconButton>
</a>
}) => {
const [popupContentRef, PopupContent, PopupTrigger] = usePopup() as [any, any, any];
return (
<div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
<MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
{showBulkActions && (
<LinksConsumer>
{(links) => {
const uploadMenuItems = [
{
link: links.user.addMedia,
icon: 'upload',
text: translateString('Upload'),
},
{
link: '/record_screen',
icon: 'videocam',
text: translateString('Record Screen'),
},
];
return (
<div className="bulk-actions-container">
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
<BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
<SelectAllCheckbox
totalCount={totalCount}
selectedCount={selectedCount}
onSelectAll={onSelectAll}
onDeselectAll={onDeselectAll}
/>
</div>
{showAddMediaButton && (
<div className="add-media-button">
<PopupTrigger contentRef={popupContentRef}>
<CircleIconButton title={translateString('Add media')}>
<MaterialIcon type="video_call" />
</CircleIconButton>
</PopupTrigger>
<PopupContent contentRef={popupContentRef}>
<PopupMain>
<NavigationMenuList items={uploadMenuItems} />
</PopupMain>
</PopupContent>
</div>
)}
</div>
)}
</div>
)}
</LinksConsumer>
)}
{children || null}
</MediaListRow>
</div>
);
);
}}
</LinksConsumer>
)}
{children || null}
</MediaListRow>
</div>
);
};