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 formatLabel from '../label_formatter.jsx';
const CustomDateEdit = ({ attributes, setAttributes }) => {
const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[]
@@ -70,29 +70,28 @@ const CustomDateEdit = ({ attributes, setAttributes }) => {
);
return (
<>
<div className="mailpoet_custom_date">
{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)}
<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>
</>
<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,
mandatory: PropTypes.bool.isRequired,
}).isRequired,
clientId: PropTypes.string.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';
const CustomSelectEdit = ({ attributes, setAttributes }) => {
const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[]
@@ -68,16 +68,19 @@ const CustomSelectEdit = ({ attributes, setAttributes }) => {
const getInput = () => {
const options = [{
label: attributes.labelWithinInput ? formatLabel(attributes) : '-',
value: null,
}];
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 (
<select className="mailpoet_select">
<select className="mailpoet_select" id={clientId}>
{
options.map((option) => (
<option key={option.label} value={option.label}>{option.label}</option>
<option key={option.label} value={option.label}>
{option.label}
</option>
))
}
</select>
@@ -88,14 +91,12 @@ const CustomSelectEdit = ({ attributes, setAttributes }) => {
<>
{inspectorControls}
<div className="mailpoet_custom_select">
{attributes.labelWithinInput ? (getInput()
) : (
<label className="mailpoet_select_label" htmlFor="mailpoet_custom_select">
{!attributes.labelWithinInput ? (
<label className="mailpoet_select_label" htmlFor={clientId}>
{formatLabel(attributes)}
<br />
{getInput()}
</label>
)}
) : null}
{getInput()}
</div>
</>
);
@@ -112,6 +113,7 @@ CustomSelectEdit.propTypes = {
mandatory: PropTypes.bool.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
clientId: PropTypes.string.isRequired,
};
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 formatLabel from '../label_formatter.jsx';
const CustomTextEdit = ({ attributes, setAttributes }) => {
const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[]
@@ -68,7 +68,7 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
const getTextInput = (placeholder) => (
<input
id="custom_text"
id={clientId}
className="mailpoet_text"
type="text"
name="custom_text"
@@ -81,14 +81,12 @@ const CustomTextEdit = ({ attributes, setAttributes }) => {
return (
<>
{inspectorControls}
{attributes.labelWithinInput ? (getTextInput(formatLabel(attributes))
) : (
<label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
{!attributes.labelWithinInput ? (
<label className="mailpoet_text_label" data-automation-id="editor_custom_text_label" htmlFor={clientId}>
{formatLabel(attributes)}
<br />
{getTextInput('')}
</label>
)}
) : null}
{getTextInput(attributes.labelWithinInput ? formatLabel(attributes) : '')}
</>
);
};
@@ -101,6 +99,7 @@ CustomTextEdit.propTypes = {
customFieldId: PropTypes.number.isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
clientId: PropTypes.string.isRequired,
};
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}
{attributes.labelWithinInput ? (getTextArea(formatLabel(attributes))
) : (
<label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
{formatLabel(attributes)}
<br />
<>
<label className="mailpoet_textarea_label" data-automation-id="editor_custom_text_label" htmlFor="custom_text">
{formatLabel(attributes)}
</label>
{getTextArea('')}
</label>
</>
)}
</>
);

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

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