Commit 3a6da03f authored by Andrei Mondoc's avatar Andrei Mondoc
Browse files

replace profile, event, and contribution dropdowns with react-select

parent 3a308c24
This diff is collapsed.
......@@ -9,5 +9,8 @@
"scripts": {
"build": "wp-scripts build",
"start": "wp-scripts start"
},
"dependencies": {
"react-select": "^3.0.8"
}
}
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components'
import Select, { components } from 'react-select'
const ContributionPageOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
{data.title}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
id:{data.id}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
{data.intro_text.slice(0, 40)}...
</span>
</components.Option>
}
const SelectContributionPageControl = ({ id, setAttributes }) => {
const onChangeContributionPage = id => setAttributes({ id })
const [ contributionPages, setConstributionPages ] = useState([{
label: __('Select a Contribution page', 'civicrm'),
value: '0',
disabled: true
}])
const [contributionPages, setConstributionPages] = useState([])
const [contributionPage, setConstributionPage] = useState({})
useEffect(() => {
CRM.api4('ContributionPage', 'get', {
......@@ -20,9 +31,10 @@ const SelectContributionPageControl = ({ id, setAttributes }) => {
if (!result && !result.length) return;
const options = result.map(page => ({
...page,
label: page.title,
value: page.id
}))
}));
setConstributionPages([
...contributionPages,
......@@ -31,12 +43,19 @@ const SelectContributionPageControl = ({ id, setAttributes }) => {
})
}, [])
return <SelectControl
label={__('Contribution Page', 'civicrm')}
value={id}
useEffect(() => {
setConstributionPage(contributionPages.filter(page => page.id == id)[0])
}, [contributionPages, id])
return <>
<Select
placeholder={__('Select a Contribution page', 'civicrm')}
value={contributionPage || 0}
onChange={option => setAttributes({id: option.value})}
options={contributionPages}
onChange={onChangeContributionPage}
components={{Option: ContributionPageOption}}
/>
</>
}
export default SelectContributionPageControl
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components'
import { date } from '@wordpress/date'
import Select, { components } from 'react-select'
const EventOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
{data.title}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
{data['event_type.label']}: {date('F j, Y g:i a', data.start_date)} | id:{data.id}
</span>
<span style={{fontSize: '12px', display: 'block'}}>
{data.summary.slice(0, 40)}...
</span>
</components.Option>
}
const SelectEventControl = ({ id, setAttributes }) => {
const onChangeEvent = id => setAttributes({ id })
const [events, setEvents] = useState([{
label: __('Select an Event', 'civicrm'),
value: 0,
disabled: true
}])
const [events, setEvents] = useState([])
const [event, setEvent] = useState({})
useEffect(() => {
CRM.api4('Event', 'get', {
......@@ -23,6 +35,7 @@ const SelectEventControl = ({ id, setAttributes }) => {
if (!result && !result.length) return;
const options = result.map(event => ({
...event,
label: event.title,
value: event.id
}))
......@@ -34,12 +47,19 @@ const SelectEventControl = ({ id, setAttributes }) => {
})
}, [])
return <SelectControl
label={__('Event Page', 'civicrm')}
value={id}
useEffect(() => {
setEvent(events.filter(event => event.id == id)[0])
}, [events, id])
return <>
<Select
placeholder={__('Select an Event', 'civicrm')}
value={event || 0}
onChange={option => setAttributes({id: option.value})}
options={events}
onChange={onChangeEvent}
components={{Option: EventOption}}
/>
</>
}
export default SelectEventControl
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components'
import Select, { components } from 'react-select'
const ProfileOption = props => {
const {data} = props
return <components.Option {...props} >
<span style={{fontWeight: 'bold', display: 'block'}}>
{data.title}
</span>
<span style={{fontSize: '12px'}}>
{data.group_type.join(', ')} | id:{data.id}
</span>
</components.Option>
}
const SelectProfileControl = ({ gid, setAttributes }) => {
const onChangeProfile = gid => setAttributes({ gid })
const [profiles, setProfiles] = useState([{
label: __('Select a Profile', 'civicrm'),
value: 0,
disabled: true
}])
const [profiles, setProfiles] = useState([])
const [profile, setProfile] = useState({})
useEffect(() => {
CRM.api4('UFGroup', 'get', {
select: ['title', 'group_type'],
where: [['is_active', '=', '1']]
where: [
['is_active', '=', '1'],
['is_reserved', '=', '0']
]
})
.then((result) => {
if (!result && !result.length) return;
const options = result.map(ufGroup => ({
const options = result.map(ufGroup => {
return {
...ufGroup,
label: ufGroup.title,
value: ufGroup.id
}))
};
})
setProfiles([
...profiles,
...options
......@@ -30,12 +44,19 @@ const SelectProfileControl = ({ gid, setAttributes }) => {
})
}, [])
return <SelectControl
label={__('Profile', 'civicrm')}
value={gid}
useEffect(() => {
setProfile(profiles.filter(profile => profile.id == gid)[0]);
}, [profiles, gid])
return <>
<Select
placeholder={__('Select a Profile', 'civicrm')}
value={profile || 0}
onChange={option => setAttributes({gid: option.value})}
options={profiles}
onChange={onChangeProfile}
components={{Option: ProfileOption}}
/>
</>
}
export default SelectProfileControl
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment