Fix custom fields label saving for date

[MAILPOET-3926]
This commit is contained in:
Pavel Dohnal
2021-11-10 15:37:03 +01:00
committed by Veljko V
parent 822587e92b
commit 9700e9abbb
2 changed files with 18 additions and 14 deletions

View File

@@ -2,13 +2,14 @@ import React, { useEffect, useMemo, useState } from 'react';
import {
Button,
ToggleControl,
SelectControl,
SelectControl, TextControl,
} from '@wordpress/components';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import CustomFieldDelete from '../custom_field_delete.jsx';
const CustomFieldSettings = ({
label,
mandatory,
dateType,
dateFormat,
@@ -20,22 +21,25 @@ const CustomFieldSettings = ({
onCustomFieldDelete,
onChange,
}) => {
const [localLabel, setLocalLabel] = useState(label);
const [localMandatory, setLocalMandatory] = useState(mandatory);
const [localDefaultToday, setLocalDefaultToday] = useState(defaultToday);
const [localDateType, setLocalDateType] = useState(dateType);
const [localDateFormat, setLocalDateFormat] = useState(dateFormat);
const localData = useMemo(() => ({
label: localLabel,
mandatory: localMandatory,
dateType: localDateType,
dateFormat: localDateFormat,
defaultToday: localDefaultToday,
}), [localMandatory, localDateType, localDateFormat, localDefaultToday]);
}), [localLabel, localMandatory, localDateType, localDateFormat, localDefaultToday]);
const hasUnsavedChanges = localMandatory !== mandatory
|| localDefaultToday !== defaultToday
|| localDateType !== dateType
|| localDateFormat !== dateFormat;
|| localDateFormat !== dateFormat
|| localLabel !== label;
useEffect(() => {
if (onChange) {
@@ -64,6 +68,12 @@ const CustomFieldSettings = ({
return (
<div className="custom-field-settings">
<TextControl
label={MailPoet.I18n.t('label')}
value={localLabel}
data-automation-id="settings_custom_date_label_input"
onChange={setLocalLabel}
/>
<ToggleControl
label={MailPoet.I18n.t('blockMandatory')}
checked={localMandatory}
@@ -94,6 +104,7 @@ const CustomFieldSettings = ({
dateType: localDateType,
dateFormat: localDateFormat,
defaultToday: localDefaultToday,
label: localLabel,
})}
isBusy={isSaving}
disabled={isSaving || !hasUnsavedChanges}
@@ -114,6 +125,7 @@ const CustomFieldSettings = ({
CustomFieldSettings.propTypes = {
mandatory: PropTypes.bool,
label: PropTypes.string,
dateType: PropTypes.string,
dateFormat: PropTypes.string,
defaultToday: PropTypes.bool,
@@ -133,6 +145,7 @@ CustomFieldSettings.propTypes = {
};
CustomFieldSettings.defaultProps = {
label: '',
mandatory: false,
isSaving: false,
dateType: null,

View File

@@ -3,7 +3,6 @@ import moment from 'moment';
import {
Panel,
PanelBody,
TextControl,
} from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
@@ -40,6 +39,7 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
<Panel>
<PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
<CustomFieldSettings
label={attributes.label}
mandatory={attributes.mandatory}
dateSettings={dateSettings}
defaultToday={attributes.defaultToday}
@@ -56,6 +56,7 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
dateType: params.dateType,
dateFormat: params.dateFormat,
defaultToday: params.defaultToday,
label: params.label,
}),
})}
onCustomFieldDelete={() => deleteCustomField(
@@ -67,16 +68,6 @@ const CustomDateEdit = ({ attributes, setAttributes, clientId }) => {
/>
</PanelBody>
</Panel>
<Panel>
<PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
<TextControl
label={MailPoet.I18n.t('label')}
value={attributes.label}
data-automation-id="settings_custom_date_label_input"
onChange={(label) => (setAttributes({ label }))}
/>
</PanelBody>
</Panel>
</InspectorControls>
);