| 1 |
import { track } from '@shared/lib/track'; |
| 2 |
import { |
| 3 |
Button, |
| 4 |
Modal, |
| 5 |
Notice, |
| 6 |
Spinner, |
| 7 |
TextareaControl, |
| 8 |
TextControl, |
| 9 |
ToggleControl, |
| 10 |
} from '@wordpress/components'; |
| 11 |
import { useEffect, useState } from '@wordpress/element'; |
| 12 |
import { __ } from '@wordpress/i18n'; |
| 13 |
import { loadWpFormsField, saveWpFormsField } from '../../lib/api'; |
| 14 |
import { useCmdEnterSave } from '../../lib/cmd-enter-save'; |
| 15 |
import { friendlyMessage } from '../../lib/errors'; |
| 16 |
import { QE_MODAL_BODY_OPEN_CLASS } from '../../lib/modal-root'; |
| 17 |
import { pushUndo } from '../../state/undo'; |
| 18 |
import { ModalCloseButton } from './ModalCloseButton'; |
| 19 |
|
| 20 |
export const WPFormsFieldModal = ({ formId, fieldId, onAfterSave }) => { |
| 21 |
const [data, setData] = useState(null); |
| 22 |
const [loadError, setLoadError] = useState(null); |
| 23 |
const [label, setLabel] = useState(''); |
| 24 |
const [placeholder, setPlaceholder] = useState(''); |
| 25 |
const [description, setDescription] = useState(''); |
| 26 |
const [required, setRequired] = useState(false); |
| 27 |
const [saving, setSaving] = useState(false); |
| 28 |
const [error, setError] = useState(null); |
| 29 |
|
| 30 |
useEffect(() => { |
| 31 |
loadWpFormsField({ formId, fieldId }) |
| 32 |
.then((res) => { |
| 33 |
setData(res); |
| 34 |
setLabel(String(res.label || '')); |
| 35 |
setPlaceholder(String(res.placeholder || '')); |
| 36 |
setDescription(String(res.description || '')); |
| 37 |
setRequired(!!res.required); |
| 38 |
}) |
| 39 |
.catch((err) => setLoadError(friendlyMessage(err))); |
| 40 |
}, [formId, fieldId]); |
| 41 |
|
| 42 |
// `name` is composite (its sub-labels stand in for placeholder). |
| 43 |
const supportsPlaceholder = |
| 44 |
data?.type !== 'name' && |
| 45 |
data?.type !== 'select' && |
| 46 |
data?.type !== 'checkbox' && |
| 47 |
data?.type !== 'radio'; |
| 48 |
|
| 49 |
const handleSave = async () => { |
| 50 |
if (saving || !data) return; |
| 51 |
const changes = {}; |
| 52 |
const beforeChanges = {}; |
| 53 |
if (label !== (data.label || '')) { |
| 54 |
changes.label = label; |
| 55 |
beforeChanges.label = data.label || ''; |
| 56 |
} |
| 57 |
if (placeholder !== (data.placeholder || '')) { |
| 58 |
changes.placeholder = placeholder; |
| 59 |
beforeChanges.placeholder = data.placeholder || ''; |
| 60 |
} |
| 61 |
if (description !== (data.description || '')) { |
| 62 |
changes.description = description; |
| 63 |
beforeChanges.description = data.description || ''; |
| 64 |
} |
| 65 |
if (required !== !!data.required) { |
| 66 |
changes.required = required; |
| 67 |
beforeChanges.required = !!data.required; |
| 68 |
} |
| 69 |
if (Object.keys(changes).length === 0) { |
| 70 |
onAfterSave(false); |
| 71 |
return; |
| 72 |
} |
| 73 |
setSaving(true); |
| 74 |
setError(null); |
| 75 |
try { |
| 76 |
await saveWpFormsField({ formId, fieldId, changes }); |
| 77 |
pushUndo({ |
| 78 |
kind: 'wpforms-field', |
| 79 |
wpformsReplay: true, |
| 80 |
formId, |
| 81 |
fieldId, |
| 82 |
changes: beforeChanges, |
| 83 |
}); |
| 84 |
track('save', { kind: 'wpforms_field', type: data.type }); |
| 85 |
onAfterSave(true); |
| 86 |
} catch (err) { |
| 87 |
track('save_failed', { kind: 'wpforms_field', type: data?.type }); |
| 88 |
setError(friendlyMessage(err)); |
| 89 |
setSaving(false); |
| 90 |
} |
| 91 |
}; |
| 92 |
useCmdEnterSave(handleSave, !!data && !saving); |
| 93 |
|
| 94 |
return ( |
| 95 |
<Modal |
| 96 |
title={__('Edit form field', 'extendify-local')} |
| 97 |
onRequestClose={() => onAfterSave(false)} |
| 98 |
isDismissible={false} |
| 99 |
headerActions={<ModalCloseButton onClick={() => onAfterSave(false)} />} |
| 100 |
className="extendify-quick-edit-modal extendify-quick-edit-modal-wpforms" |
| 101 |
overlayClassName="extendify-quick-edit" |
| 102 |
bodyOpenClassName={QE_MODAL_BODY_OPEN_CLASS} |
| 103 |
size="medium" |
| 104 |
> |
| 105 |
{loadError ? ( |
| 106 |
<Notice status="error" isDismissible={false}> |
| 107 |
{loadError} |
| 108 |
</Notice> |
| 109 |
) : null} |
| 110 |
{error ? ( |
| 111 |
<Notice status="error" isDismissible={false}> |
| 112 |
{error} |
| 113 |
</Notice> |
| 114 |
) : null} |
| 115 |
{!data && !loadError ? <Spinner /> : null} |
| 116 |
{data ? ( |
| 117 |
<> |
| 118 |
<TextControl |
| 119 |
__nextHasNoMarginBottom |
| 120 |
label={__('Label', 'extendify-local')} |
| 121 |
value={label} |
| 122 |
onChange={setLabel} |
| 123 |
autoFocus |
| 124 |
/> |
| 125 |
{supportsPlaceholder ? ( |
| 126 |
<TextControl |
| 127 |
__nextHasNoMarginBottom |
| 128 |
label={__('Placeholder', 'extendify-local')} |
| 129 |
value={placeholder} |
| 130 |
onChange={setPlaceholder} |
| 131 |
/> |
| 132 |
) : null} |
| 133 |
<TextareaControl |
| 134 |
__nextHasNoMarginBottom |
| 135 |
label={__('Description (shown below the field)', 'extendify-local')} |
| 136 |
value={description} |
| 137 |
onChange={setDescription} |
| 138 |
rows={3} |
| 139 |
/> |
| 140 |
<ToggleControl |
| 141 |
__nextHasNoMarginBottom |
| 142 |
label={__('Required field', 'extendify-local')} |
| 143 |
checked={required} |
| 144 |
onChange={setRequired} |
| 145 |
/> |
| 146 |
</> |
| 147 |
) : null} |
| 148 |
<div className="extendify-quick-edit-modal-actions"> |
| 149 |
<Button variant="tertiary" onClick={() => onAfterSave(false)}> |
| 150 |
{__('Cancel', 'extendify-local')} |
| 151 |
</Button> |
| 152 |
<Button |
| 153 |
variant="primary" |
| 154 |
isBusy={saving} |
| 155 |
disabled={saving || !data} |
| 156 |
onClick={handleSave} |
| 157 |
> |
| 158 |
{__('Save', 'extendify-local')} |
| 159 |
</Button> |
| 160 |
</div> |
| 161 |
</Modal> |
| 162 |
); |
| 163 |
}; |
| 164 |
|
