9adfa58d65
* Users can remove a component from a unit * The component is NOT deleted, and remains present in the library * A toast shows that the component was removed, and allows the user to undo * Overflow menu item appears in sidebar for selected components in unit * Overflow menu item appears directly on components in full page unit view
69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import { useCallback } from 'react';
|
|
import {
|
|
ActionRow,
|
|
} from '@openedx/paragon';
|
|
|
|
import { type ContentHit, PublishStatus } from '../../search-manager';
|
|
import { useComponentPickerContext } from '../common/context/ComponentPickerContext';
|
|
import { useLibraryContext } from '../common/context/LibraryContext';
|
|
import { useSidebarContext } from '../common/context/SidebarContext';
|
|
import { useLibraryRoutes } from '../routes';
|
|
import AddComponentWidget from './AddComponentWidget';
|
|
import BaseCard from './BaseCard';
|
|
import { ComponentMenu } from './ComponentMenu';
|
|
|
|
type ComponentCardProps = {
|
|
hit: ContentHit,
|
|
};
|
|
|
|
const ComponentCard = ({ hit }: ComponentCardProps) => {
|
|
const { showOnlyPublished } = useLibraryContext();
|
|
const { openComponentInfoSidebar } = useSidebarContext();
|
|
const { componentPickerMode } = useComponentPickerContext();
|
|
|
|
const {
|
|
blockType,
|
|
formatted,
|
|
tags,
|
|
usageKey,
|
|
publishStatus,
|
|
} = hit;
|
|
const componentDescription: string = (
|
|
showOnlyPublished ? formatted.published?.description : formatted.description
|
|
) ?? '';
|
|
const displayName: string = (
|
|
showOnlyPublished ? formatted.published?.displayName : formatted.displayName
|
|
) ?? '';
|
|
|
|
const { navigateTo } = useLibraryRoutes();
|
|
const openComponent = useCallback(() => {
|
|
openComponentInfoSidebar(usageKey);
|
|
|
|
if (!componentPickerMode) {
|
|
navigateTo({ componentId: usageKey });
|
|
}
|
|
}, [usageKey, navigateTo, openComponentInfoSidebar]);
|
|
|
|
return (
|
|
<BaseCard
|
|
itemType={blockType}
|
|
displayName={displayName}
|
|
description={componentDescription}
|
|
tags={tags}
|
|
actions={(
|
|
<ActionRow>
|
|
{componentPickerMode ? (
|
|
<AddComponentWidget usageKey={usageKey} blockType={blockType} />
|
|
) : (
|
|
<ComponentMenu usageKey={usageKey} />
|
|
)}
|
|
</ActionRow>
|
|
)}
|
|
hasUnpublishedChanges={publishStatus !== PublishStatus.Published}
|
|
onSelect={openComponent}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ComponentCard;
|