Move form placement settings into a single file

[MAILPOET-3120]
This commit is contained in:
Pavel Dohnal
2020-09-07 12:28:57 +02:00
committed by Veljko V
parent 52e3c25946
commit abfe0b75f9
5 changed files with 42 additions and 40 deletions

View File

@@ -4,6 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { ToggleControl } from '@wordpress/components';
import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import PlacementSettings from './placement_settings';
const BelowPostsSettings = () => {
const formSettings = useSelect(
@@ -23,16 +24,7 @@ const BelowPostsSettings = () => {
/>
{isActive && (
<>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPages')}
checked={formSettings.formPlacement.belowPosts.pages.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.belowPosts.pages.all', __, formSettings)])}
/>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPosts')}
checked={formSettings.formPlacement.belowPosts.posts.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.belowPosts.posts.all', __, formSettings)])}
/>
<PlacementSettings settingsPlacementKey="belowPosts" />
<SizeSettings
label={MailPoet.I18n.t('formSettingsWidth')}
value={formSettings.formPlacement.belowPosts.styles.width}

View File

@@ -5,6 +5,7 @@ import { SelectControl, RadioControl, ToggleControl } from '@wordpress/component
import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import AnimationSettings from './animation_settings';
import PlacementSettings from './placement_settings';
const delayValues = [0, 15, 30, 60, 120, 180, 240];
@@ -28,16 +29,7 @@ const FixedBarSettings = () => {
{isActive && (
<>
<hr />
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPages')}
checked={formSettings.formPlacement.fixedBar.pages.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.pages.all', __, formSettings)])}
/>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPosts')}
checked={formSettings.formPlacement.fixedBar.posts.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.posts.all', __, formSettings)])}
/>
<PlacementSettings settingsPlacementKey="fixedBar" />
<SelectControl
label={MailPoet.I18n.t('formPlacementDelay')}
value={formSettings.formPlacement.fixedBar.delay}

View File

@@ -0,0 +1,34 @@
import React from 'react';
import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data';
import { ToggleControl } from '@wordpress/components';
import { assocPath, compose, __ } from 'lodash/fp';
type Props = {
settingsPlacementKey: string
}
const PlacementSettings = ({ settingsPlacementKey }: Props) => {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[]
);
const { changeFormSettings } = useDispatch('mailpoet-form-editor');
return (
<>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPages')}
checked={formSettings.formPlacement[settingsPlacementKey].pages.all}
onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, __, formSettings)])}
/>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPosts')}
checked={formSettings.formPlacement[settingsPlacementKey].posts.all}
onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.posts.all`, __, formSettings)])}
/>
</>
);
};
export default PlacementSettings;

View File

@@ -5,6 +5,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import AnimationSettings from './animation_settings';
import PlacementSettings from './placement_settings';
const delayValues = [0, 15, 30, 60, 120, 180, 240];
@@ -29,16 +30,7 @@ const PopUpSettings = () => {
{isActive && (
<>
<hr />
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPages')}
checked={formSettings.formPlacement.popup.pages.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.popup.pages.all', __, formSettings)])}
/>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPosts')}
checked={formSettings.formPlacement.popup.posts.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.popup.posts.all', __, formSettings)])}
/>
<PlacementSettings settingsPlacementKey="popup" />
<SelectControl
label={MailPoet.I18n.t('formPlacementDelay')}
value={formSettings.formPlacement.popup.delay}

View File

@@ -5,6 +5,7 @@ import { SelectControl, RadioControl, ToggleControl } from '@wordpress/component
import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import AnimationSettings from './animation_settings';
import PlacementSettings from './placement_settings';
const delayValues = [0, 15, 30, 60, 120, 180, 240];
@@ -28,16 +29,7 @@ const SlideInSettings = () => {
{isActive && (
<>
<hr />
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPages')}
checked={formSettings.formPlacement.slideIn.pages.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.pages.all', __, formSettings)])}
/>
<ToggleControl
label={MailPoet.I18n.t('placeFormOnAllPosts')}
checked={formSettings.formPlacement.slideIn.posts.all}
onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.posts.all', __, formSettings)])}
/>
<PlacementSettings settingsPlacementKey="slideIn" />
<SelectControl
label={MailPoet.I18n.t('formPlacementDelay')}
value={formSettings.formPlacement.slideIn.delay}