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

Move textarea settings

Browse Source 
[MAILPOET-2453]
This commit is contained in:
Pavel Dohnal
2019-12-16 15:47:05 +01:00
committed by Rostislav Wolný
parent 185566460b
commit de00219b9a
2 changed files with 140 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
assets/js/src/form_editor/blocks/custom_textarea/custom_field_settings.jsx Normal file
View File

@@ -0,0 +1,127 @@
import React, { useState } from 'react';
import {
Button,
SelectControl,
ToggleControl,
} from '@wordpress/components';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import { useDispatch, useSelect } from '@wordpress/data';
const CustomFieldSettings = ({
mandatory,
validate,
lines,
customFieldId,
updateAttributes,
}) => {
const [localMandatory, setLocalMandatory] = useState(mandatory);
const [localValidate, setLocalValidate] = useState(validate);
const [localLines, setLocalLines] = useState(lines);
const { saveCustomField } = useDispatch('mailpoet-form-editor');
const isSaving = useSelect(
(sel) => sel('mailpoet-form-editor').getIsCustomFieldSaving(),
[]
);
return (
<>
<Button
isPrimary
isDefault
onClick={() => saveCustomField({
customFieldId,
data: {
params: {
required: localMandatory ? '1' : undefined,
validate: localValidate,
lines: localLines,
},
},
onFinish: () => updateAttributes({
mandatory: localMandatory,
validate: localValidate,
lines: localLines,
}),
})}
isBusy={isSaving}
disabled={isSaving}
className="button-on-top"
>
{MailPoet.I18n.t('customFieldSaveCTA')}
</Button>
<ToggleControl
label={MailPoet.I18n.t('blockMandatory')}
checked={localMandatory}
onChange={setLocalMandatory}
/>
<SelectControl
label={`${MailPoet.I18n.t('customFieldValidateFor')}:`}
options={[
{
label: MailPoet.I18n.t('customFieldValidateNothing'),
value: '',
},
{
label: MailPoet.I18n.t('customFieldValidateNumbersOnly'),
value: 'alphanum',
},
{
label: MailPoet.I18n.t('customFieldValidateAlphanumerical'),
value: 'number',
},
{
label: MailPoet.I18n.t('customFieldValidatePhoneNumber'),
value: 'phone',
},
]}
value={localValidate}
onChange={setLocalValidate}
/>
<SelectControl
label={`${MailPoet.I18n.t('customFieldNumberOfLines')}:`}
value={localLines}
options={[
{
label: MailPoet.I18n.t('customField1Line'),
value: '1',
},
{
label: MailPoet.I18n.t('customField2Lines'),
value: '2',
},
{
label: MailPoet.I18n.t('customField3Lines'),
value: '3',
},
{
label: MailPoet.I18n.t('customField4Lines'),
value: '4',
},
{
label: MailPoet.I18n.t('customField5Lines'),
value: '5',
},
]}
onChange={setLocalLines}
/>
</>
);
};
CustomFieldSettings.propTypes = {
mandatory: PropTypes.bool,
validate: PropTypes.string,
lines: PropTypes.string,
customFieldId: PropTypes.number.isRequired,
updateAttributes: PropTypes.func.isRequired,
};
CustomFieldSettings.defaultProps = {
mandatory: false,
validate: '',
lines: '1',
};
export default CustomFieldSettings;

69
assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
View File

@@ -2,7 +2,6 @@ import React from 'react';
import {
Panel,
PanelBody,
SelectControl,
TextControl,
ToggleControl,
} from '@wordpress/components';
@@ -10,9 +9,21 @@ import { InspectorControls } from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import CustomFieldSettings from './custom_field_settings.jsx';
const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
const inspectorControls = (
<InspectorControls>
<Panel>
<PanelBody title={MailPoet.I18n.t('customFieldSettings')} initialOpen>
<CustomFieldSettings
updateAttributes={(attrs) => (setAttributes(attrs))}
customFieldId={attributes.customFieldId}
mandatory={attributes.mandatory}
validate={attributes.validate}
/>
</PanelBody>
</Panel>
<Panel>
<PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
<TextControl
@@ -26,60 +37,6 @@ const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
checked={attributes.labelWithinInput}
onChange={(labelWithinInput) => (setAttributes({ labelWithinInput }))}
/>
<ToggleControl
label={MailPoet.I18n.t('blockMandatory')}
checked={attributes.mandatory}
onChange={(mandatory) => (setAttributes({ mandatory }))}
/>
<SelectControl
label={`${MailPoet.I18n.t('customFieldValidateFor')}:`}
options={[
{
label: MailPoet.I18n.t('customFieldValidateNothing'),
value: '',
},
{
label: MailPoet.I18n.t('customFieldValidateNumbersOnly'),
value: 'alphanum',
},
{
label: MailPoet.I18n.t('customFieldValidateAlphanumerical'),
value: 'number',
},
{
label: MailPoet.I18n.t('customFieldValidatePhoneNumber'),
value: 'phone',
},
]}
onChange={(validate) => (setAttributes({ validate }))}
/>
<SelectControl
label={`${MailPoet.I18n.t('customFieldNumberOfLines')}:`}
value={attributes.lines}
options={[
{
label: MailPoet.I18n.t('customField1Line'),
value: '1',
},
{
label: MailPoet.I18n.t('customField2Lines'),
value: '2',
},
{
label: MailPoet.I18n.t('customField3Lines'),
value: '3',
},
{
label: MailPoet.I18n.t('customField4Lines'),
value: '4',
},
{
label: MailPoet.I18n.t('customField5Lines'),
value: '5',
},
]}
onChange={(lines) => (setAttributes({ lines }))}
/>
</PanelBody>
</Panel>
@@ -93,7 +50,7 @@ const CustomTextAreaEdit = ({ attributes, setAttributes }) => {
name="custom_text"
disabled
data-automation-id="editor_custom_text_input"
defaultValue={placeholder}
value={placeholder}
rows={attributes.lines}
/>
);