woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-04 08:47:23 +08:00
Code Issues Projects Packages Wiki Activity Actions 11

♻️ Use the generic select field in ControlSelect

Browse source
This commit is contained in:
Philipp Stracker 2025-01-23 15:19:10 +01:00
parent 5e9abb8d80
commit 874b9c5e96
No known key found for this signature in database
1 changed files with 14 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

59
modules/ppcp-settings/resources/js/Components/ReusableComponents/Controls/ControlSelect.js
View file

@ -1,52 +1,21 @@
import Select, { components } from 'react-select';
import data from '../../../utils/data';
import { Title, Action, Description } from '../Elements';
const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
const DropdownIndicator = ( props ) => (
<components.DropdownIndicator { ...props }>
{ data().getImage( 'icon-arrow-down.svg' ) }
</components.DropdownIndicator>
);
const ELEMENT_RENDERERS = {
title: ( { title } ) => <Title>{ title }</Title>,
action: ( { actionProps } ) => (
<Action>
<Select
className="ppcp-r-multiselect"
classNamePrefix="ppcp-r"
isMulti={ actionProps?.isMulti }
options={ actionProps?.options }
components={ { DropdownIndicator } }
/>
</Action>
),
description: ( { description } ) => (
<Description>{ description }</Description>
),
};
import { Select } from '../Fields';
import { Action } from '../Elements';
const ControlSelect = ( {
title,
description,
order = DEFAULT_ELEMENT_ORDER,
...props
options,
value,
onChange,
placeholder,
isMulti = false,
} ) => (
<Action>
{ order.map( ( elementKey ) => {
const RenderElement = ELEMENT_RENDERERS[ elementKey ];
return RenderElement ? (
<RenderElement
key={ elementKey }
title={ title }
description={ description }
actionProps={ props.actionProps }
/>
) : null;
} ) }
<Select
isMulti={ isMulti }
options={ options }
value={ value }
placeholder={ placeholder }
onChange={ onChange }
/>
</Action>
);