← All changes | js/components/EditMenu/EditorSidebar/controls/LockControl.tsx +21 -25 4.0.0-beta.1 → trunk View file →

		@@ -1,21 +1,22 @@
1	1	import React from 'react'
	2	+import classnames from 'classnames'
2	3	import { __ } from '@wordpress/i18n'
3	4	import { useSnippetsAPI } from '../../../../hooks/useSnippetsAPI'
4		-import { Tooltip } from '../../../common/Tooltip'
	5	+import { TooltipButton } from '../../../common/TooltipButton'
5	6	import { useSnippetForm } from '../../SnippetForm/WithSnippetFormContext'
6	7
7	8	export const LockControl: React.FC = () => {
8		- const { snippet, setSnippet, isWorking, setIsWorking, setCurrentNotice } = useSnippetForm()
9	9	const { update } = useSnippetsAPI()
	10	+ const { acceptSnippet, snippet, setSnippet, isWorking, setIsWorking, setCurrentNotice } = useSnippetForm()
10	11
11	12	const handleToggle = () => {
	13	+ setIsWorking(true)
12	14	setSnippet(previous => ({ ...previous, locked: !previous.locked }))
13		- setIsWorking(true)
14	15
15	16	update({ id: snippet.id, network: snippet.network, locked: !snippet.locked })
16	17	.then(result => {
17		- setSnippet(result)
	18	+ acceptSnippet(result)
18	19
19	20	setCurrentNotice(['updated', result.locked
20	21	? __('Snippet <strong>locked</strong>.', 'code-snippets')
21	22	: __('Snippet <strong>unlocked</strong>.', 'code-snippets')])
		@@ -24,29 +25,24 @@
24	25	.finally(() => setIsWorking(false))
25	26	}
26	27
27	28	return (
28		- <div className="inline-form-field lock-control-container">
29		- <label htmlFor="snippet-lock" id="snippet-lock-label">
30		- {__('Lock snippet', 'code-snippets')}
31		- </label>
32		-
33		- <Tooltip block end>
34		- {__('Mark this snippet as read-only to prevent accidental changes or deletion.', 'code-snippets')}
35		- </Tooltip>
36		-
37		- <span className="lock-status-text">
38		- {snippet.locked ? __('Locked', 'code-snippets') : __('Unlocked', 'code-snippets')}
39		- </span>
40		-
41		- <input
42		- id="snippet-lock"
43		- type="checkbox"
44		- checked={snippet.locked}
	29	+ <div className={classnames('snippet-lock-control', { 'tooltip tooltip-block tooltip-end': !isWorking })}>
	30	+ <TooltipButton
	31	+ small block end
	32	+ primary={snippet.locked}
	33	+ className="snippet-lock-button"
	34	+ containerClassName="snippet-lock-control"
45	35	disabled={isWorking}
46		- className="switch"
47		- onChange={handleToggle}
48		- aria-labelledby="snippet-lock-label"
49		- />
	36	+ onClick={handleToggle}
	37	+ tooltip={snippet.locked
	38	+ ? __('Unlock this snippet to allow editing and deletion.', 'code-snippets')
	39	+ : __('Mark this snippet as read-only to prevent accidental changes or deletion.', 'code-snippets')}
	40	+ >
	41	+ {snippet.locked
	42	+ ? <span className="dashicons dashicons-unlock" aria-hidden="true" />
	43	+ : <span className="dashicons dashicons-lock" aria-hidden="true" />}
	44	+ {snippet.locked ? __('Unlock', 'code-snippets') : __('Lock', 'code-snippets')}
	45	+ </TooltipButton>
50	46	</div>
51	47	)
52	48	}