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

Fix custom color pickers unwanted state reset in style settings

Browse Source 
[MAILPOE-2599]
This commit is contained in:
Rostislav Wolny
2020-03-16 15:02:23 +01:00
committed by Veljko V
parent 0e2afb9c80
commit f1aee6f971
3 changed files with 18 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/src/components/formEditor/components/_header.scss
View File

@@ -3,7 +3,7 @@
padding-right: 8px; padding-right: 8px;
@media (min-width: 600px) { @media (min-width: 600px) {
padding: 0 12px;
margin-right: 12px; margin-right: 12px;
padding: 0 12px;
} }
} }

9
assets/js/src/form_editor/blocks/input_styles_settings.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useRef } from 'react';
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import { import {
Button, Button,
@@ -17,7 +17,8 @@ const InputStylesSettings = ({
styles, styles,
onChange, onChange,
}) => { }) => {
const [localStyles, setStyles] = useState(styles); const localStylesRef = useRef(styles);
const localStyles = localStylesRef.current;
const { settingsColors } = useSelect( const { settingsColors } = useSelect(
(select) => { (select) => {
@@ -32,10 +33,10 @@ const InputStylesSettings = ({
const { applyStylesToAllTextInputs } = useDispatch('mailpoet-form-editor'); const { applyStylesToAllTextInputs } = useDispatch('mailpoet-form-editor');
const updateStyles = (property, value) => { const updateStyles = (property, value) => {
const updated = { ...localStyles }; const updated = { ...localStylesRef.current };
updated[property] = value; updated[property] = value;
onChange(updated); onChange(updated);
setStyles(updated); localStylesRef.current = updated;
}; };
return ( return (
<Panel className="mailpoet-automation-input-styles-panel"> <Panel className="mailpoet-automation-input-styles-panel">

33
assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react'; import React, { useRef } from 'react';
import { import {
ColorIndicator, ColorIndicator,
ColorPalette, ColorPalette,
@@ -9,6 +9,7 @@ import {
import MailPoet from 'mailpoet'; import MailPoet from 'mailpoet';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useSelect, useDispatch } from '@wordpress/data'; import { useSelect, useDispatch } from '@wordpress/data';
import { partial } from 'lodash';
const BasicSettingsPanel = ({ onToggle, isOpened }) => { const BasicSettingsPanel = ({ onToggle, isOpened }) => {
const { changeFormSettings } = useDispatch('mailpoet-form-editor'); const { changeFormSettings } = useDispatch('mailpoet-form-editor');
@@ -16,24 +17,14 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
(select) => select('mailpoet-form-editor').getFormSettings(), (select) => select('mailpoet-form-editor').getFormSettings(),
[] []
); );
const setBackgroundColor = (color) => { const settingsRef = useRef(settings);
changeFormSettings({ const updateStyles = (property, value) => {
...settings, const updated = { ...settingsRef.current };
backgroundColor: color, updated[property] = value;
}); changeFormSettings(updated);
}; settingsRef.current = updated;
const setFontColor = (color) => {
changeFormSettings({
...settings,
fontColor: color,
});
};
const setFontSize = (size) => {
changeFormSettings({
...settings,
fontSize: size,
});
}; };
const { settingsColors, fontSizes } = useSelect( const { settingsColors, fontSizes } = useSelect(
(select) => { (select) => {
const { getSettings } = select('core/block-editor'); const { getSettings } = select('core/block-editor');
@@ -66,7 +57,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
</h3> </h3>
<ColorPalette <ColorPalette
value={settings.backgroundColor} value={settings.backgroundColor}
onChange={setBackgroundColor} onChange={partial(updateStyles, 'backgroundColor')}
colors={settingsColors} colors={settingsColors}
/> />
</div> </div>
@@ -85,7 +76,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
</h3> </h3>
<ColorPalette <ColorPalette
value={settings.fontColor} value={settings.fontColor}
onChange={setFontColor} onChange={partial(updateStyles, 'fontColor')}
colors={settingsColors} colors={settingsColors}
/> />
</div> </div>
@@ -96,7 +87,7 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
</h3> </h3>
<FontSizePicker <FontSizePicker
value={settings.fontSize} value={settings.fontSize}
onChange={setFontSize} onChange={partial(updateStyles, 'fontSize')}
fontSizes={fontSizes} fontSizes={fontSizes}
/> />
</div> </div>