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

Move preview into a separate file

Browse Source 
[MAILPOET-2452]
This commit is contained in:
Pavel Dohnal
2019-12-09 14:56:23 +01:00
committed by Rostislav Wolný
parent 40f7fab521
commit 056d1ae4b0
3 changed files with 57 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/js/src/form_editor/blocks/segment_select/edit.jsx
View File

@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import Settings from './settings.jsx';
const SegmentSelectEdit = ({ attributes, setAttributes }) => {
const renderValues = () => {
if (attributes.values.length === 0) {

53
assets/js/src/form_editor/blocks/segment_select/settings.jsx
View File

@@ -1,10 +1,8 @@
import React from 'react';
import MailPoet from 'mailpoet';
import PropTypes from 'prop-types';
import { partial } from 'lodash';
import { InspectorControls } from '@wordpress/block-editor';
import {
CheckboxControl,
Panel,
PanelBody,
PanelRow,
@@ -13,57 +11,10 @@ import {
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import Preview from './settings_preview.jsx';
const findSegment = (segments, segmentId) => segments.find((s) => s.id === segmentId);
const Preview = ({ segments, updateSegment, removeSegment }) => {
if (segments.length === 0) {
return null;
}
const onCheck = (segmentId, isChecked) => {
const segment = findSegment(segments, segmentId);
segment.isChecked = isChecked;
updateSegment(segment);
};
return segments.map((segment) => (
<div className="mailpoet-form-segments-settings-list" key={segment.id}>
<CheckboxControl
label={segment.name}
checked={!!segment.isChecked}
onChange={partial(onCheck, segment.id)}
key={`check-${segment.id}`}
/>
<span
role="button"
className="mailpoet-form-segments-segment-remove mailpoet_error"
onClick={partial(removeSegment, segment.id)}
key={`remove-${segment.id}`}
tabIndex={0}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
partial(removeSegment, segment.id);
}
}}
>
✗
</span>
</div>
));
};
Preview.propTypes = {
segments: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
isChecked: PropTypes.boolean,
id: PropTypes.string.isRequired,
}).isRequired).isRequired,
updateSegment: PropTypes.func.isRequired,
removeSegment: PropTypes.func.isRequired,
};
const SegmentSelectSettings = ({
label,
onLabelChanged,

55
assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx Normal file
View File

@@ -0,0 +1,55 @@
import React from 'react';
import PropTypes from 'prop-types';
import { CheckboxControl } from '@wordpress/components';
import { partial } from 'lodash';
const Preview = ({ segments, updateSegment, removeSegment }) => {
if (segments.length === 0) {
return null;
}
const onCheck = (segmentId, isChecked) => {
const segment = segments.find((s) => s.id === segmentId);
segment.isChecked = isChecked;
updateSegment(segment);
};
return segments.map((segment) => (
<div className="mailpoet-form-segments-settings-list" key={segment.id}>
<CheckboxControl
label={segment.name}
checked={!!segment.isChecked}
onChange={partial(onCheck, segment.id)}
key={`check-${segment.id}`}
/>
<span
role="button"
className="mailpoet-form-segments-segment-remove mailpoet_error"
onClick={partial(removeSegment, segment.id)}
key={`remove-${segment.id}`}
tabIndex={0}
onKeyDown={(event) => {
if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
) {
event.preventDefault();
partial(removeSegment, segment.id);
}
}}
>
✗
</span>
</div>
));
};
Preview.propTypes = {
segments: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string.isRequired,
isChecked: PropTypes.boolean,
id: PropTypes.string.isRequired,
}).isRequired).isRequired,
updateSegment: PropTypes.func.isRequired,
removeSegment: PropTypes.func.isRequired,
};
export default Preview;