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 MailPoet from 'mailpoet';
import Select from 'common/form/select/select'; import Select from 'common/form/select/select';
import { Grid } from 'common/grid';
import ReactSelect from 'common/form/react_select/react_select'; import ReactSelect from 'common/form/react_select/react_select';
import { import {
@@ -61,40 +62,45 @@ export const SubscribedToList: React.FunctionComponent<Props> = ({ filterIndex }
return ( return (
<> <>
<Select <Grid.CenteredRow>
key="select" <Select
value={segment.operator} key="select"
onChange={(e) => { isFullWidth
updateSegmentFilterFromEvent('operator', filterIndex, e); 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> <option value={AnyValueTypes.ANY}>{MailPoet.I18n.t('anyOf')}</option>
</Select> <option value={AnyValueTypes.ALL}>{MailPoet.I18n.t('allOf')}</option>
<ReactSelect <option value={AnyValueTypes.NONE}>{MailPoet.I18n.t('noneOf')}</option>
dimension="small" </Select>
isFullWidth </Grid.CenteredRow>
isMulti <Grid.CenteredRow>
placeholder={MailPoet.I18n.t('searchLists')} <ReactSelect
options={options} dimension="small"
value={ isFullWidth
filter( isMulti
(option) => { placeholder={MailPoet.I18n.t('searchLists')}
if (!segment.segments) return undefined; options={options}
const segmentId = option.value; value={
return segment.segments.indexOf(segmentId) !== -1; filter(
}, (option) => {
options if (!segment.segments) return undefined;
) const segmentId = option.value;
} return segment.segments.indexOf(segmentId) !== -1;
onChange={(options: SelectOption[]): void => { },
updateSegmentFilter( options
{ segments: map('value', options) }, )
filterIndex }
); 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} {MinusIcon}
</a> </a>
)} )}
<Select <Grid.CenteredRow>
dimension="small" <Select
placeholder={MailPoet.I18n.t('selectActionPlaceholder')} dimension="small"
options={segmentFilters} placeholder={MailPoet.I18n.t('selectActionPlaceholder')}
value={filterRow.filterValue} options={segmentFilters}
onChange={(newValue: FilterValue): void => { value={filterRow.filterValue}
updateSegmentFilter({ onChange={(newValue: FilterValue): void => {
segmentType: newValue.group, updateSegmentFilter({
action: newValue.value, segmentType: newValue.group,
}, index); action: newValue.value,
}} }, index);
automationId="select-segment-action" }}
isFullWidth automationId="select-segment-action"
/> isFullWidth
/>
</Grid.CenteredRow>
{filterRow.index !== undefined && ( {filterRow.index !== undefined && (
<FormFilterFields filterIndex={filterRow.index} /> <FormFilterFields filterIndex={filterRow.index} />
)} )}