Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Refactor labels rendering in form block editor

Browse Source 
[MAILPOET-2592]
This commit is contained in:
Rostislav Wolny
2020-01-07 13:51:12 +01:00
committed by Rostislav Wolný
parent bcb2f1f4d8
commit 8914304bff
7 changed files with 55 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
assets/js/src/form_editor/blocks/custom_date/edit.jsx
View File

@@ -14,7 +14,7 @@ import CustomFieldSettings from './custom_field_settings.jsx';
import FormFieldDate from '../../../form/fields/date.jsx'; import FormFieldDate from '../../../form/fields/date.jsx';
import formatLabel from '../label_formatter.jsx'; import formatLabel from '../label_formatter.jsx';
const CustomDateEdit = ({ attributes, setAttributes }) => { const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect( const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(), (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[] []
@@ -70,29 +70,28 @@ const CustomDateEdit = ({ attributes, setAttributes }) => {
); );
return ( return (
<> <div className="mailpoet_custom_date">
{inspectorControls} {inspectorControls}
<label className="mailpoet_date_label mailpoet_custom_date" data-automation-id="editor_custom_date_label" htmlFor="custom_text"> <label className="mailpoet_date_label" data-automation-id="editor_custom_date_label" htmlFor={clientId}>
{formatLabel(attributes)} {formatLabel(attributes)}
<br />
<FormFieldDate
field={{
name: 'field',
day_placeholder: MailPoet.I18n.t('customFieldDay'),
month_placeholder: MailPoet.I18n.t('customFieldMonth'),
year_placeholder: MailPoet.I18n.t('customFieldYear'),
params: {
date_type: attributes.dateType,
date_format: attributes.dateFormat,
},
}}
item={{
field: attributes.defaultToday ? moment().format('YYYY-MM-DD') : '',
}}
onValueChange={() => {}}
/>
</label> </label>
</> <FormFieldDate
field={{
name: clientId,
day_placeholder: MailPoet.I18n.t('customFieldDay'),
month_placeholder: MailPoet.I18n.t('customFieldMonth'),
year_placeholder: MailPoet.I18n.t('customFieldYear'),
params: {
date_type: attributes.dateType,
date_format: attributes.dateFormat,
},
}}
item={{
field: attributes.defaultToday ? moment().format('YYYY-MM-DD') : '',
}}
onValueChange={() => {}}
/>
</div>
); );
}; };
@@ -104,6 +103,7 @@ CustomDateEdit.propTypes = {
defaultToday: PropTypes.bool, defaultToday: PropTypes.bool,
mandatory: PropTypes.bool.isRequired, mandatory: PropTypes.bool.isRequired,
}).isRequired, }).isRequired,
clientId: PropTypes.string.isRequired,
setAttributes: PropTypes.func.isRequired, setAttributes: PropTypes.func.isRequired,
}; };

24
assets/js/src/form_editor/blocks/custom_select/edit.jsx
View File

@@ -13,7 +13,7 @@ import formatLabel from '../label_formatter.jsx';
import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx'; import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
const CustomSelectEdit = ({ attributes, setAttributes }) => { const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect( const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(), (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[] []
@@ -68,16 +68,19 @@ const CustomSelectEdit = ({ attributes, setAttributes }) => {
const getInput = () => { const getInput = () => {
const options = [{ const options = [{
label: attributes.labelWithinInput ? formatLabel(attributes) : '-', label: attributes.labelWithinInput ? formatLabel(attributes) : '-',
value: null,
}]; }];
if (Array.isArray(attributes.values) || !attributes.values.length) { if (Array.isArray(attributes.values) || !attributes.values.length) {
attributes.values.forEach((value) => options.push({ label: value.name })); attributes.values.forEach((value) => options.push({
label: value.name,
}));
} }
return ( return (
<select className="mailpoet_select"> <select className="mailpoet_select" id={clientId}>
{ {
options.map((option) => ( options.map((option) => (
<option key={option.label} value={option.label}>{option.label}</option> <option key={option.label} value={option.label}>
{option.label}
</option>
)) ))
} }
</select> </select>
@@ -88,14 +91,12 @@ const CustomSelectEdit = ({ attributes, setAttributes }) => {
<> <>
{inspectorControls} {inspectorControls}
<div className="mailpoet_custom_select"> <div className="mailpoet_custom_select">
{attributes.labelWithinInput ? (getInput() {!attributes.labelWithinInput ? (
) : ( <label className="mailpoet_select_label" htmlFor={clientId}>
<label className="mailpoet_select_label" htmlFor="mailpoet_custom_select">
{formatLabel(attributes)} {formatLabel(attributes)}
<br />
{getInput()}
</label> </label>
)} ) : null}
{getInput()}
</div> </div>
</> </>
); );
@@ -112,6 +113,7 @@ CustomSelectEdit.propTypes = {
mandatory: PropTypes.bool.isRequired, mandatory: PropTypes.bool.isRequired,
}).isRequired, }).isRequired,
setAttributes: PropTypes.func.isRequired, setAttributes: PropTypes.func.isRequired,
clientId: PropTypes.string.isRequired,
}; };
export default CustomSelectEdit; export default CustomSelectEdit;

15
assets/js/src/form_editor/blocks/custom_text/edit.jsx
View File

@@ -13,7 +13,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
import CustomFieldSettings from './custom_field_settings.jsx'; import CustomFieldSettings from './custom_field_settings.jsx';
import formatLabel from '../label_formatter.jsx'; import formatLabel from '../label_formatter.jsx';
const CustomTextEdit = ({ attributes, setAttributes }) => { const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect( const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(), (sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[] []
@@ -68,7 +68,7 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
const getTextInput = (placeholder) => ( const getTextInput = (placeholder) => (
<input <input
id="custom_text" id={clientId}
className="mailpoet_text" className="mailpoet_text"
type="text" type="text"
name="custom_text" name="custom_text"
@@ -81,14 +81,12 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
return ( return (
<> <>
{inspectorControls} {inspectorControls}
{attributes.labelWithinInput ? (getTextInput(formatLabel(attributes)) {!attributes.labelWithinInput ? (
) : ( <label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor={clientId}>
<label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
{formatLabel(attributes)} {formatLabel(attributes)}
<br />
{getTextInput('')}
</label> </label>
)} ) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</> </>
); );
}; };
@@ -101,6 +99,7 @@ CustomTextEdit.propTypes = {
customFieldId: PropTypes.number.isRequired, customFieldId: PropTypes.number.isRequired,
}).isRequired, }).isRequired,
setAttributes: PropTypes.func.isRequired, setAttributes: PropTypes.func.isRequired,
clientId: PropTypes.string.isRequired,
}; };
export default CustomTextEdit; export default CustomTextEdit;

9
assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
View File

@@ -107,11 +107,12 @@ const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
{inspectorControls} {inspectorControls}
{attributes.labelWithinInput ? (getTextArea(formatLabel(attributes)) {attributes.labelWithinInput ? (getTextArea(formatLabel(attributes))
) : ( ) : (
<label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text"> <>
{formatLabel(attributes)} <label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
<br /> {formatLabel(attributes)}
</label>
{getTextArea('')} {getTextArea('')}
</label> </>
)} )}
</> </>
); );

8
assets/js/src/form_editor/blocks/email/edit.jsx
View File

@@ -46,14 +46,12 @@ const EmailEdit = ({ attributes, setAttributes }) => {
return ( return (
<> <>
{inspectorControls} {inspectorControls}
{attributes.labelWithinInput ? (getTextInput(`${attributes.label} *`) {!attributes.labelWithinInput ? (
) : (
<label className="mailpoet_text_label" data-automation-id="editor_email_label" htmlFor="email"> <label className="mailpoet_text_label" data-automation-id="editor_email_label" htmlFor="email">
{`${attributes.label} *`} {`${attributes.label} *`}
<br />
{getTextInput('')}
</label> </label>
)} ) : null}
{getTextInput(attributes.labelWithinInput ? `${attributes.label} *` : '')}
</> </>
); );
}; };

8
assets/js/src/form_editor/blocks/first_name/edit.jsx
View File

@@ -53,14 +53,12 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
return ( return (
<> <>
{inspectorControls} {inspectorControls}
{attributes.labelWithinInput ? (getTextInput(formatLabel(attributes)) {!attributes.labelWithinInput ? (
) : (
<label className="mailpoet_text_label" data-automation-id="editor_first_name_label" htmlFor="first_name"> <label className="mailpoet_text_label" data-automation-id="editor_first_name_label" htmlFor="first_name">
{formatLabel(attributes)} {formatLabel(attributes)}
<br />
{getTextInput('')}
</label> </label>
)} ) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</> </>
); );
}; };

8
assets/js/src/form_editor/blocks/last_name/edit.jsx
View File

@@ -53,14 +53,12 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
return ( return (
<> <>
{inspectorControls} {inspectorControls}
{attributes.labelWithinInput ? (getTextInput(formatLabel(attributes)) {!attributes.labelWithinInput ? (
) : (
<label className="mailpoet_text_label" data-automation-id="editor_last_name_label" htmlFor="last_name"> <label className="mailpoet_text_label" data-automation-id="editor_last_name_label" htmlFor="last_name">
{formatLabel(attributes)} {formatLabel(attributes)}
<br />
{getTextInput('')}
</label> </label>
)} ) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</> </>
); );
}; };