import React, { useState } from 'react' import { __ } from '@wordpress/i18n' import { handleUnknownError } from '../../../utils/errors' import { Button } from '../../common/Button' import { ConfirmDialog } from '../../common/ConfirmDialog' import { isNetworkAdmin } from '../../../utils/general' import { useSnippetForm } from '../../../hooks/useSnippetForm' import type { Snippet } from '../../../types/Snippet' import type { ButtonProps } from '../../common/Button' interface SubmitButtonProps extends ButtonProps { inlineButtons?: boolean } const SaveChangesButton: React.FC = ({ inlineButtons, ...props }) => const SaveAndExecuteButton: React.FC = ({ inlineButtons, ...props }) => const DeactivateButton: React.FC = ({ inlineButtons, ...props }) => const ActivateButton: React.FC = ({ inlineButtons, ...props }) => interface ActivateOrDeactivateButtonProps { snippet: Snippet onActivate: VoidFunction onDeactivate: VoidFunction primaryActivate: boolean inlineButtons?: boolean disabled: boolean } const ActivateOrDeactivateButton: React.FC = ({ snippet, disabled, onActivate, onDeactivate, inlineButtons, primaryActivate }) => { const commonProps: SubmitButtonProps = { small: inlineButtons, type: 'submit', disabled, inlineButtons } switch (true) { case snippet.shared_network && isNetworkAdmin(): return null case 'single-use' === snippet.scope: return case snippet.active: return default: case !snippet.active: return } } const validateSnippet = (snippet: Snippet): undefined | string => { const missingCode = '' === snippet.code.trim() const missingTitle = '' === snippet.name.trim() switch (true) { case missingCode && missingTitle: return __('This snippet has no code or title.', 'code-snippets') case missingCode: return __('This snippet has no snippet code.', 'code-snippets') case missingTitle: return __('This snippet has no title.', 'code-snippets') default: return undefined } } const shouldActivateByDefault = (snippet: Snippet, inlineButtons?: boolean): boolean => !inlineButtons && !!window.CODE_SNIPPETS_EDIT?.activateByDefault && !snippet.active && 'single-use' !== snippet.scope && (!snippet.shared_network || !isNetworkAdmin()) interface SubmitConfirmDialogProps { isOpen: boolean onClose: VoidFunction onSubmit?: VoidFunction validationWarning?: string } const SubmitConfirmDialog: React.FC = ({ isOpen, onClose, onSubmit, validationWarning }) => { onSubmit?.() onClose() }} >

{`${validationWarning} ${__('Continue?', 'code-snippets')}`}

export interface SubmitButtonsProps { inlineButtons?: boolean } export const SubmitButton: React.FC = ({ inlineButtons }) => { const { snippet, isWorking, submitSnippet, submitAndActivateSnippet, submitAndDeactivateSnippet } = useSnippetForm() const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false) const [submitAction, setSubmitAction] = useState() const validationWarning = validateSnippet(snippet) const activateByDefault = shouldActivateByDefault(snippet, inlineButtons) const handleSubmit = (submitAction: () => Promise): void => { if (validationWarning) { setIsConfirmDialogOpen(true) setSubmitAction(() => submitAction) } else { submitAction() .then(() => undefined) .catch(handleUnknownError) } } return <> {activateByDefault ? null : handleSubmit(submitSnippet)} disabled={isWorking} inlineButtons={inlineButtons} />} handleSubmit(submitAndActivateSnippet)} onDeactivate={() => handleSubmit(submitAndDeactivateSnippet)} /> {activateByDefault ? handleSubmit(submitSnippet)} disabled={isWorking} inlineButtons={inlineButtons} /> : null} { setIsConfirmDialogOpen(false) setSubmitAction(undefined) }} /> }