Fix custom fields label saving for date
[MAILPOET-3926]
This commit is contained in:
@@ -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,
|
||||
|
@@ -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>
|
||||
);
|
||||
|
||||
|
Reference in New Issue
Block a user