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

Make the fields the same width

Browse Source 
[MAILPOET-3502]
This commit is contained in:
Pavel Dohnal
2021-11-29 15:27:05 +01:00
committed by Veljko V
parent 96f19daa6f
commit a52b669af3
2 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
View File

@@ -4,6 +4,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
import MailPoet from 'mailpoet';
import Select from 'common/form/select/select';
import { Grid } from 'common/grid';
import ReactSelect from 'common/form/react_select/react_select';
import {
@@ -61,40 +62,45 @@ export const SubscribedToList: React.FunctionComponent<Props> = ({ filterIndex }
return (
<>
<Select
key="select"
value={segment.operator}
onChange={(e) => {
updateSegmentFilterFromEvent('operator', filterIndex, e);
}}
>
<option value={AnyValueTypes.ANY}>{MailPoet.I18n.t('anyOf')}</option>
<option value={AnyValueTypes.ALL}>{MailPoet.I18n.t('allOf')}</option>
<option value={AnyValueTypes.NONE}>{MailPoet.I18n.t('noneOf')}</option>
</Select>
<ReactSelect
dimension="small"
isFullWidth
isMulti
placeholder={MailPoet.I18n.t('searchLists')}
options={options}
value={
filter(
(option) => {
if (!segment.segments) return undefined;
const segmentId = option.value;
return segment.segments.indexOf(segmentId) !== -1;
},
options
)
}
onChange={(options: SelectOption[]): void => {
updateSegmentFilter(
{ segments: map('value', options) },
filterIndex
);
}}
/>
<Grid.CenteredRow>
<Select
key="select"
isFullWidth
value={segment.operator}
onChange={(e) => {
updateSegmentFilterFromEvent('operator', filterIndex, e);
}}
>
<option value={AnyValueTypes.ANY}>{MailPoet.I18n.t('anyOf')}</option>
<option value={AnyValueTypes.ALL}>{MailPoet.I18n.t('allOf')}</option>
<option value={AnyValueTypes.NONE}>{MailPoet.I18n.t('noneOf')}</option>
</Select>
</Grid.CenteredRow>
<Grid.CenteredRow>
<ReactSelect
dimension="small"
isFullWidth
isMulti
placeholder={MailPoet.I18n.t('searchLists')}
options={options}
value={
filter(
(option) => {
if (!segment.segments) return undefined;
const segmentId = option.value;
return segment.segments.indexOf(segmentId) !== -1;
},
options
)
}
onChange={(options: SelectOption[]): void => {
updateSegmentFilter(
{ segments: map('value', options) },
filterIndex
);
}}
/>
</Grid.CenteredRow>
</>
);
};

30
assets/js/src/segments/dynamic/form.tsx
View File

@@ -135,20 +135,22 @@ export const Form: React.FunctionComponent<Props> = ({
{MinusIcon}
</a>
)}
<Select
dimension="small"
placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
options={segmentFilters}
value={filterRow.filterValue}
onChange={(newValue: FilterValue): void => {
updateSegmentFilter({
segmentType: newValue.group,
action: newValue.value,
}, index);
}}
automationId="select-segment-action"
isFullWidth
/>
<Grid.CenteredRow>
<Select
dimension="small"
placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
options={segmentFilters}
value={filterRow.filterValue}
onChange={(newValue: FilterValue): void => {
updateSegmentFilter({
segmentType: newValue.group,
action: newValue.value,
}, index);
}}
automationId="select-segment-action"
isFullWidth
/>
</Grid.CenteredRow>
{filterRow.index !== undefined && (
<FormFilterFields filterIndex={filterRow.index} />
)}