← All changes | js/components/ManageMenu/SnippetsTable/ManageSnippetCard.tsx +45 -45 3.10.0-beta.1 → trunk View file →

		@@ -1,8 +1,10 @@
	1	+import classnames from 'classnames'
1	2	import { humanTimeDiff } from '@wordpress/date'
2	3	import { RawHTML } from '@wordpress/element'
3	4	import { __, sprintf } from '@wordpress/i18n'
4	5	import React, { useState } from 'react'
	6	+import { ConfirmDeleteDialog, useDeleteSnippet } from '../../common/snippets/ConfirmDeleteDialog'
5	7	import { useSnippetsAPI } from '../../../hooks/useSnippetsAPI'
6	8	import { useSnippetsList } from '../../../hooks/useSnippetsList'
7	9	import { handleUnknownError } from '../../../utils/errors'
8	10	import { downloadSnippetExportFile } from '../../../utils/files'
		@@ -7,15 +9,13 @@
7	9	import { handleUnknownError } from '../../../utils/errors'
8	10	import { downloadSnippetExportFile } from '../../../utils/files'
9	11	import { canModifySnippet, cloneSnippetObject, getSnippetDisplayName, getSnippetEditUrl, getSnippetType, isNetworkOnlySnippet, isSnippetActive } from '../../../utils/snippets/snippets'
10	12	import { Button } from '../../common/Button'
11		-import { useDeleteSnippet } from '../../common/DeleteButton'
12	13	import { KebabMenu, KebabMenuDivider, KebabMenuItem, KebabMenuRow } from '../../common/KebabMenu'
13		-import { SnippetCard } from '../../common/SnippetCard'
14		-import { SnippetPreviewModal } from '../../common/SnippetPreviewModal'
15		-import { SnippetPriorityInput } from '../../common/SnippetPriorityInput'
	14	+import { SnippetCard } from '../../common/snippets/SnippetCard'
	15	+import { SnippetPreviewModal } from '../../common/snippets/SnippetPreviewModal'
16	16	import { useFilteredSnippets } from './WithFilteredSnippetsContext'
17		-import { ActivateColumn, SnippetExtraIcons, SnippetName, TagsColumn, TypeColumn } from './TableColumns'
	17	+import { ActivateColumn, PriorityColumn, SnippetExtraIcons, SnippetName, TagsColumn, TypeColumn } from './TableColumns'
18	18	import type { Snippet } from '../../../types/Snippet'
19	19
20	20	interface SnippetCardActionsProps {
21	21	snippet: Snippet
		@@ -20,8 +20,12 @@
20	20	interface SnippetCardActionsProps {
21	21	snippet: Snippet
22	22	}
23	23
	24	+interface SnippetCardActionsProps {
	25	+ snippet: Snippet
	26	+}
	27	+
24	28	const CardPreviewButton: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
25	29	const [isPreviewOpen, setIsPreviewOpen] = useState(false)
26	30
27	31	return (
		@@ -29,16 +33,13 @@
29	33	<Button secondary onClick={() => setIsPreviewOpen(true)}>
30	34	{__('Preview', 'code-snippets')}
31	35	</Button>
32	36
33		- <SnippetPreviewModal
34		- title={getSnippetDisplayName(snippet)}
35		- code={snippet.code}
36		- type={getSnippetType(snippet)}
37		- isOpen={isPreviewOpen}
38		- setIsOpen={setIsPreviewOpen}
39		- snippet={snippet}
40		- />
	37	+ {isPreviewOpen && (
	38	+ <SnippetPreviewModal
	39	+ snippet={snippet}
	40	+ setIsOpen={setIsPreviewOpen}
	41	+ />)}
41	42	</>
42	43	)
43	44	}
44	45
		@@ -73,9 +74,9 @@
73	74	)
74	75	}
75	76
76	77	interface RestoreDeleteMenuItemsProps extends SnippetCardActionsProps {
77		- requestDelete: () => void
	78	+ requestDelete: VoidFunction
78	79	}
79	80
80	81	const RestoreDeleteMenuItems: React.FC<RestoreDeleteMenuItemsProps> = ({
81	82	snippet,
		@@ -108,10 +109,10 @@
108	109	}
109	110
110	111	const CardActionsMenu: React.FC<SnippetCardActionsProps> = ({ snippet }) => {
111	112	const { refreshSnippetsList } = useSnippetsList()
112		- const canModify = canModifySnippet(snippet)
113		- const { requestDelete, confirmDialog } = useDeleteSnippet({
	113	+
	114	+ const { requestDelete, deleteDialogProps } = useDeleteSnippet({
114	115	snippet,
115	116	onSuccess: refreshSnippetsList,
116	117	onError: handleUnknownError
117	118	})
		@@ -124,21 +125,20 @@
124	125	__('Actions for %s', 'code-snippets'),
125	126	getSnippetDisplayName(snippet)
126	127	)}
127	128	>
128		- {canModify && !snippet.trashed ? <CloneExportMenuItems snippet={snippet} /> : null}
	129	+ {!snippet.trashed ? <CloneExportMenuItems snippet={snippet} /> : null}
129	130
130	131	<KebabMenuRow className="kebab-menu-priority">
131	132	<label htmlFor={`snippet-${snippet.id}-priority`}>{__('Priority', 'code-snippets')}</label>
132		- <SnippetPriorityInput snippet={snippet} />
	133	+ <PriorityColumn snippet={snippet} />
133	134	</KebabMenuRow>
134	135
135		- {canModify && (snippet.trashed || !snippet.locked)
136		- ? <RestoreDeleteMenuItems snippet={snippet} requestDelete={requestDelete} />
137		- : null}
	136	+ {canModifySnippet(snippet) && (snippet.trashed || !snippet.locked) && (
	137	+ <RestoreDeleteMenuItems snippet={snippet} requestDelete={() => void requestDelete()} />)}
138	138	</KebabMenu>
139	139
140		- {confirmDialog}
	140	+ <ConfirmDeleteDialog {...deleteDialogProps} />
141	141	</>
142	142	)
143	143	}
144	144
		@@ -157,9 +157,9 @@
157	157	{snippet.locked ? __('View', 'code-snippets') : __('Edit', 'code-snippets')}
158	158	</a>
159	159	: null}
160	160
161		- <CardActionsMenu snippet={snippet} />
	161	+ {canModifySnippet(snippet) ? <CardActionsMenu snippet={snippet} /> : null}
162	162	</>
163	163
164	164	const CardModifiedDate: React.FC<SnippetCardActionsProps> = ({ snippet }) =>
165	165	snippet.modified
		@@ -171,8 +171,16 @@
171	171	)}
172	172	</time>
173	173	: null
174	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	+
175	183	export interface ManageSnippetCardProps {
176	184	snippet: Snippet
177	185	isSelected: boolean
178	186	onSelectedChange: (isSelected: boolean) => void
		@@ -186,14 +194,14 @@
186	194	const { activeByCondition } = useFilteredSnippets()
187	195
188	196	return (
189	197	<SnippetCard
190		- className={[
	198	+ className={classnames(
191	199	'snippet',
192	200	`${isSnippetActive(snippet, activeByCondition) ? 'active' : 'inactive'}-snippet`,
193	201	`${getSnippetType(snippet)}-snippet`,
194	202	`${snippet.scope}-snippet`
195		- ].join(' ')}
	203	+ )}
196	204	isSelected={isSelected}
197	205	onSelectedChange={onSelectedChange}
198	206	selectionLabel={sprintf(
199	207	/* translators: %s: name of the snippet. */
		@@ -202,32 +210,24 @@
202	210	)}
203	211	footer={<CardFooterActions snippet={snippet} />}
204	212	>
205	213	<div className="card-inner">
206		- <div className="snippet-card-header">
207		- <ActivateColumn snippet={snippet} />
208		- <TypeColumn snippet={snippet} />
209		- <h3><SnippetName snippet={snippet} /></h3>
210		- <SnippetExtraIcons snippet={snippet} />
211		- </div>
	214	+ <CardHeader snippet={snippet} />
212	215
213		- {0 < snippet.tags.length || snippet.modified
214		- ? <div className="snippet-card-meta">
215		- {0 < snippet.tags.length
216		- ? <span className="snippet-card-tags">
217		- <span className="snippet-card-tags-label">{__('Tags:', 'code-snippets')}</span>
218		- {' '}
219		- <TagsColumn snippet={snippet} />
220		- </span>
221		- : null}
	216	+ {(0 < snippet.tags.length || !!snippet.modified) && (
	217	+ <div className={classnames('snippet-card-meta', { 'has-tags': 0 < snippet.tags.length })}>
	218	+ {0 < snippet.tags.length && (
	219	+ <span className="snippet-card-tags">
	220	+ <span className="snippet-card-tags-label">
	221	+ {__('Tags:', 'code-snippets')}
	222	+ </span> <TagsColumn snippet={snippet} />
	223	+ </span>)}
222	224
223	225	<CardModifiedDate snippet={snippet} />
224		- </div>
225		- : null}
	226	+ </div>)}
226	227
227		- {snippet.desc
228		- ? <div className="snippet-description-content"><RawHTML>{snippet.desc}</RawHTML></div>
229		- : null}
	228	+ {snippet.desc && (
	229	+ <div className="snippet-description-content"><RawHTML>{snippet.desc}</RawHTML></div>)}
230	230	</div>
231	231	</SnippetCard>
232	232	)
233	233	}