code-snippets / js / components / SnippetForm / buttons / SubmitButtons.tsx

SubmitButtons.tsx in Code Snippets 3.6.6, at js/components/SnippetForm/buttons/SubmitButtons.tsx

197 lines 5.7 KB

Raw Download Zip

1	import React, { useState } from 'react'
2	import { __ } from '@wordpress/i18n'
3	import { handleUnknownError } from '../../../utils/errors'
4	import { Button } from '../../common/Button'
5	import { ConfirmDialog } from '../../common/ConfirmDialog'
6	import { isNetworkAdmin } from '../../../utils/general'
7	import { useSnippetForm } from '../../../hooks/useSnippetForm'
8	import type { Snippet } from '../../../types/Snippet'
9	import type { ButtonProps } from '../../common/Button'
10
11	interface SubmitButtonProps extends ButtonProps {
12	inlineButtons?: boolean
13	}
14
15	const SaveChangesButton: React.FC<SubmitButtonProps> = ({ inlineButtons, ...props }) =>
16	<Button
17	name="save_snippet"
18	type="submit"
19	small={inlineButtons}
20	title={inlineButtons ? __('Save Snippet', 'code-snippets') : undefined}
21	{...props}
22	>
23	{__('Save Changes', 'code-snippets')}
24	</Button>
25
26	const SaveAndExecuteButton: React.FC<SubmitButtonProps> = ({ inlineButtons, ...props }) =>
27	<Button
28	name="save_snippet_execute"
29	title={inlineButtons ? __('Save Snippet and Execute Once', 'code-snippets') : undefined}
30	{...props}
31	>
32	{inlineButtons ?
33	__('Execute Once', 'code-snippets') :
34	__('Save Changes and Execute Once', 'code-snippets')}
35	</Button>
36
37	const DeactivateButton: React.FC<SubmitButtonProps> = ({ inlineButtons, ...props }) =>
38	<Button
39	name="save_snippet_deactivate"
40	title={inlineButtons ? __('Save Snippet and Deactivate', 'code-snippets') : undefined}
41	{...props}
42	>
43	{inlineButtons ?
44	__('Deactivate', 'code-snippets') :
45	__('Save Changes and Deactivate', 'code-snippets')}
46	</Button>
47
48	const ActivateButton: React.FC<SubmitButtonProps> = ({ inlineButtons, ...props }) =>
49	<Button
50	name="save_snippet_activate"
51	title={inlineButtons ? __('Save Snippet and Activate', 'code-snippets') : undefined}
52	{...props}
53	>
54	{inlineButtons ?
55	__('Activate', 'code-snippets') :
56	__('Save Changes and Activate', 'code-snippets')}
57	</Button>
58
59	interface ActivateOrDeactivateButtonProps {
60	snippet: Snippet
61	onActivate: VoidFunction
62	onDeactivate: VoidFunction
63	primaryActivate: boolean
64	inlineButtons?: boolean
65	disabled: boolean
66	}
67
68	const ActivateOrDeactivateButton: React.FC<ActivateOrDeactivateButtonProps> = ({
69	snippet,
70	disabled,
71	onActivate,
72	onDeactivate,
73	inlineButtons,
74	primaryActivate
75	}) => {
76	const commonProps: SubmitButtonProps = { small: inlineButtons, type: 'submit', disabled, inlineButtons }
77
78	switch (true) {
79	case snippet.shared_network && isNetworkAdmin():
80	return null
81
82	case 'single-use' === snippet.scope:
83	return <SaveAndExecuteButton onClick={onActivate} {...commonProps} />
84
85	case snippet.active:
86	return <DeactivateButton onClick={onDeactivate} {...commonProps} />
87
88	default:
89	case !snippet.active:
90	return <ActivateButton onClick={onActivate} primary={primaryActivate} {...commonProps} />
91	}
92	}
93
94	const validateSnippet = (snippet: Snippet): undefined \| string => {
95	const missingCode = '' === snippet.code.trim()
96	const missingTitle = '' === snippet.name.trim()
97
98	switch (true) {
99	case missingCode && missingTitle:
100	return __('This snippet has no code or title.', 'code-snippets')
101
102	case missingCode:
103	return __('This snippet has no snippet code.', 'code-snippets')
104
105	case missingTitle:
106	return __('This snippet has no title.', 'code-snippets')
107
108	default:
109	return undefined
110	}
111	}
112
113	const shouldActivateByDefault = (snippet: Snippet, inlineButtons?: boolean): boolean =>
114	!inlineButtons && !!window.CODE_SNIPPETS_EDIT?.activateByDefault &&
115	!snippet.active && 'single-use' !== snippet.scope &&
116	(!snippet.shared_network \|\| !isNetworkAdmin())
117
118	interface SubmitConfirmDialogProps {
119	isOpen: boolean
120	onClose: VoidFunction
121	onSubmit?: VoidFunction
122	validationWarning?: string
123	}
124
125	const SubmitConfirmDialog: React.FC<SubmitConfirmDialogProps> = ({ isOpen, onClose, onSubmit, validationWarning }) =>
126	<ConfirmDialog
127	open={isOpen}
128	title={__('Snippet incomplete', 'code-snippets')}
129	confirmLabel={__('Continue', 'code-snippets')}
130	onCancel={onClose}
131	onConfirm={() => {
132	onSubmit?.()
133	onClose()
134	}}
135	>
136	<p>{`${validationWarning} ${__('Continue?', 'code-snippets')}`}</p>
137	</ConfirmDialog>
138
139	export interface SubmitButtonsProps {
140	inlineButtons?: boolean
141	}
142
143	export const SubmitButton: React.FC<SubmitButtonsProps> = ({ inlineButtons }) => {
144	const { snippet, isWorking, submitSnippet, submitAndActivateSnippet, submitAndDeactivateSnippet } = useSnippetForm()
145	const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false)
146	const [submitAction, setSubmitAction] = useState<VoidFunction>()
147	const validationWarning = validateSnippet(snippet)
148	const activateByDefault = shouldActivateByDefault(snippet, inlineButtons)
149
150	const handleSubmit = (submitAction: () => Promise<Snippet \| undefined>): void => {
151	if (validationWarning) {
152	setIsConfirmDialogOpen(true)
153	setSubmitAction(() => submitAction)
154	} else {
155	submitAction()
156	.then(() => undefined)
157	.catch(handleUnknownError)
158	}
159	}
160
161	return <>
162	{activateByDefault ? null :
163	<SaveChangesButton
164	primary={!inlineButtons}
165	onClick={() => handleSubmit(submitSnippet)}
166	disabled={isWorking}
167	inlineButtons={inlineButtons}
168	/>}
169
170	<ActivateOrDeactivateButton
171	snippet={snippet}
172	disabled={isWorking}
173	inlineButtons={inlineButtons}
174	primaryActivate={activateByDefault}
175	onActivate={() => handleSubmit(submitAndActivateSnippet)}
176	onDeactivate={() => handleSubmit(submitAndDeactivateSnippet)}
177	/>
178
179	{activateByDefault ?
180	<SaveChangesButton
181	onClick={() => handleSubmit(submitSnippet)}
182	disabled={isWorking}
183	inlineButtons={inlineButtons}
184	/> : null}
185
186	<SubmitConfirmDialog
187	isOpen={isConfirmDialogOpen}
188	validationWarning={validationWarning}
189	onSubmit={submitAction}
190	onClose={() => {
191	setIsConfirmDialogOpen(false)
192	setSubmitAction(undefined)
193	}}
194	/>
195	</>
196	}
197