← All changes | js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx +24 -14 3.10.0 → trunk View file →

		@@ -12,11 +12,10 @@
12	12	import { Button } from '../../common/Button'
13	13	import { KebabMenu, KebabMenuDivider, KebabMenuItem, KebabMenuRow } from '../../common/KebabMenu'
14	14	import { SnippetCard } from '../../common/snippets/SnippetCard'
15	15	import { SnippetPreviewModal } from '../../common/snippets/SnippetPreviewModal'
16		-import { SnippetPriorityInput } from '../../common/snippets/SnippetPriorityInput'
17	16	import { useFilteredSnippets } from './WithFilteredSnippetsContext'
18		-import { ActivateColumn, SnippetExtraIcons, SnippetName, TagsColumn, TypeColumn } from './TableColumns'
	17	+import { ActivateColumn, PriorityColumn, SnippetExtraIcons, SnippetName, TagsColumn, TypeColumn } from './TableColumns'
19	18	import type { Snippet } from '../../../types/Snippet'
20	19
21	20	interface SnippetCardActionsProps {
22	21	snippet: Snippet
		@@ -21,8 +20,12 @@
21	20	interface SnippetCardActionsProps {
22	21	snippet: Snippet
23	22	}
24	23
	24	+interface SnippetCardActionsProps {
	25	+ snippet: Snippet
	26	+}
	27	+
25	28	const CardPreviewButton: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
26	29	const [isPreviewOpen, setIsPreviewOpen] = useState(false)
27	30
28	31	return (
		@@ -30,9 +33,13 @@
30	33	<Button secondary onClick={() => setIsPreviewOpen(true)}>
31	34	{__('Preview', 'code-snippets')}
32	35	</Button>
33	36
34		- {isPreviewOpen && <SnippetPreviewModal snippet={snippet} setIsOpen={setIsPreviewOpen} />}
	37	+ {isPreviewOpen && (
	38	+ <SnippetPreviewModal
	39	+ snippet={snippet}
	40	+ setIsOpen={setIsPreviewOpen}
	41	+ />)}
35	42	</>
36	43	)
37	44	}
38	45
		@@ -102,9 +109,9 @@
102	109	}
103	110
104	111	const CardActionsMenu: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
105	112	const { refreshSnippetsList } = useSnippetsList()
106		- const canModify = canModifySnippet(snippet)
	113	+
107	114	const { requestDelete, deleteDialogProps } = useDeleteSnippet({
108	115	snippet,
109	116	onSuccess: refreshSnippetsList,
110	117	onError: handleUnknownError
		@@ -118,16 +125,16 @@
118	125	__('Actions for %s', 'code-snippets'),
119	126	getSnippetDisplayName(snippet)
120	127	)}
121	128	>
122		- {canModify && !snippet.trashed ? <CloneExportMenuItems snippet={snippet} /> : null}
	129	+ {!snippet.trashed ? <CloneExportMenuItems snippet={snippet} /> : null}
123	130
124	131	<KebabMenuRow className="kebab-menu-priority">
125	132	<label htmlFor={`snippet-${snippet.id}-priority`}>{__('Priority', 'code-snippets')}</label>
126		- <SnippetPriorityInput snippet={snippet} />
	133	+ <PriorityColumn snippet={snippet} />
127	134	</KebabMenuRow>
128	135
129		- {canModify && (snippet.trashed || !snippet.locked) && (
	136	+ {canModifySnippet(snippet) && (snippet.trashed || !snippet.locked) && (
130	137	<RestoreDeleteMenuItems snippet={snippet} requestDelete={() => void requestDelete()} />)}
131	138	</KebabMenu>
132	139
133	140	<ConfirmDeleteDialog {...deleteDialogProps} />
		@@ -150,9 +157,9 @@
150	157	{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
151	158	</a>
152	159	: null}
153	160
154		- <CardActionsMenu snippet={snippet} />
	161	+ {canModifySnippet(snippet) ? <CardActionsMenu snippet={snippet} /> : null}
155	162	</>
156	163
157	164	const CardModifiedDate: React.FC<SnippetCardActionsProps> = ({ snippet }) =>
158	165	snippet.modified
		@@ -164,8 +171,16 @@
164	171	)}
165	172	</time>
166	173	: null
167	174
	175	+const CardHeader: React.FC<SnippetCardActionsProps> = ({ snippet }) =>
	176	+ <div className="snippet-card-header">
	177	+ <ActivateColumn snippet={snippet} />
	178	+ <TypeColumn snippet={snippet} />
	179	+ <h3><SnippetName snippet={snippet} /></h3>
	180	+ <SnippetExtraIcons snippet={snippet} />
	181	+ </div>
	182	+
168	183	export interface ManageSnippetCardProps {
169	184	snippet: Snippet
170	185	isSelected: boolean
171	186	onSelectedChange: (isSelected: boolean) => void
		@@ -195,14 +210,9 @@
195	210	)}
196	211	footer={<CardFooterActions snippet={snippet} />}
197	212	>
198	213	<div className="card-inner">
199		- <div className="snippet-card-header">
200		- <ActivateColumn snippet={snippet} />
201		- <TypeColumn snippet={snippet} />
202		- <h3><SnippetName snippet={snippet} /></h3>
203		- <SnippetExtraIcons snippet={snippet} />
204		- </div>
	214	+ <CardHeader snippet={snippet} />
205	215
206	216	{(0 < snippet.tags.length || !!snippet.modified) && (
207	217	<div className={classnames('snippet-card-meta', { 'has-tags': 0 < snippet.tags.length })}>
208	218	{0 < snippet.tags.length && (