Commit 4568b384 authored by Andrei Mondoc's avatar Andrei Mondoc
Browse files

prettier formatted

parent a9e61b4e
......@@ -14,52 +14,68 @@ import ExtraAttributesListControl from './components/ExtraAttributesListControl'
import NoPreview from './components/NoPreview'
const CiviCRMContentBlock = ({ attributes, setAttributes }) => {
const { component, gid, id, mode, action, hijack, extra_attributes } = attributes
const profileModes = ['create', 'edit', 'view', 'search']
const pageModes = ['live', 'test']
const {
component,
gid,
id,
mode,
action,
hijack,
extra_attributes,
} = attributes
const profileModes = ['create', 'edit', 'view', 'search']
const pageModes = ['live', 'test']
switch (component) {
case 'profile':
selectControl = <SelectProfileControl {...{ gid, setAttributes }} />
if (!profileModes.includes(mode)) setAttributes({ mode: 'create' })
break
switch (component) {
case 'profile':
selectControl = <SelectProfileControl {...{ gid, setAttributes }} />
if (!profileModes.includes(mode)) setAttributes({ mode: 'create' })
break
case 'event':
selectControl = <SelectEventControl {...{ id, setAttributes }} />
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
case 'event':
selectControl = <SelectEventControl {...{ id, setAttributes }} />
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
case 'contribution':
selectControl = <SelectContributionPageControl {...{ id, setAttributes }} />
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
}
case 'contribution':
selectControl = (
<SelectContributionPageControl {...{ id, setAttributes }} />
)
if (!pageModes.includes(mode)) setAttributes({ mode: 'live' })
break
}
let selectControl,
profileModeControl = <ProfileModeControl {...{ mode, setAttributes }} />,
modeControl = <ModeControl {...{ mode, setAttributes }} />,
actionControl = <ActionControl {...{ action, setAttributes }} />
let selectControl,
profileModeControl = (
<ProfileModeControl {...{ mode, setAttributes }} />
),
modeControl = <ModeControl {...{ mode, setAttributes }} />,
actionControl = <ActionControl {...{ action, setAttributes }} />
return (
<>
<InspectorControls key='inspector'>
<ComponentControl {...{ component, setAttributes }} />
{selectControl}
{component == 'profile' ? profileModeControl : ''}
{component == 'event' ? actionControl : ''}
{['event', 'contribution'].includes(component) ? modeControl : ''}
<HijackControl {...{ hijack, setAttributes }} />
<ExtraAttributesListControl {...{ extra_attributes, setAttributes }} />
</InspectorControls>
<ServerSideRender
block='civicrm/civicrm-content-block'
attributes={attributes}
className='civicrm-content-block'
ErrorResponsePlaceholder={NoPreview}
EmptyResponsePlaceholder={NoPreview}
/>
</>
)
return (
<>
<InspectorControls key="inspector">
<ComponentControl {...{ component, setAttributes }} />
{selectControl}
{component == 'profile' ? profileModeControl : ''}
{component == 'event' ? actionControl : ''}
{['event', 'contribution'].includes(component)
? modeControl
: ''}
<HijackControl {...{ hijack, setAttributes }} />
<ExtraAttributesListControl
{...{ extra_attributes, setAttributes }}
/>
</InspectorControls>
<ServerSideRender
block="civicrm/civicrm-content-block"
attributes={attributes}
className="civicrm-content-block"
ErrorResponsePlaceholder={NoPreview}
EmptyResponsePlaceholder={NoPreview}
/>
</>
)
}
export default CiviCRMContentBlock
import { __ } from '@wordpress/i18n'
import { RadioControl } from '@wordpress/components'
const ActionControl = ({action, setAttributes}) => {
const onChangeAction = action => setAttributes({ action })
const options = [
{ label: __('Event Info Page', 'civicrm'), value: 'info' },
{ label: __('Event Registration Page', 'civicrm'), value: 'register' },
]
const ActionControl = ({ action, setAttributes }) => {
const onChangeAction = (action) => setAttributes({ action })
const options = [
{ label: __('Event Info Page', 'civicrm'), value: 'info' },
{ label: __('Event Registration Page', 'civicrm'), value: 'register' },
]
return <RadioControl
label={__('Action', 'civicrm')}
value={action}
options={options}
selected={action || 'info'}
onChange={onChangeAction}
/>
return (
<RadioControl
label={__('Action', 'civicrm')}
value={action}
options={options}
selected={action || 'info'}
onChange={onChangeAction}
/>
)
}
export default ActionControl
import { __ } from '@wordpress/i18n'
import { useState, useEffect } from "@wordpress/element";
import { useState, useEffect } from '@wordpress/element'
import { SelectControl } from '@wordpress/components'
const ComponentControl = ({ component, setAttributes }) => {
const onChangeComponent = component => setAttributes({ component })
const onChangeComponent = (component) => setAttributes({ component })
const [components, setComponents] = useState([
{ label: __('User Dashboard', 'civicrm'), value: 'user-dashboard' },
{ label: __('Profile', 'civicrm'), value: 'profile' },
{ label: __('Contribution Page', 'civicrm'), value: 'contribution', component: 'CiviContribute' },
{ label: __('Event Page', 'civicrm'), value: 'event', component: 'CiviEvent' },
{ label: __('Petition', 'civicrm'), value: 'petition', component: 'CiviCampaign' },
])
const [components, setComponents] = useState([
{ label: __('User Dashboard', 'civicrm'), value: 'user-dashboard' },
{ label: __('Profile', 'civicrm'), value: 'profile' },
{
label: __('Contribution Page', 'civicrm'),
value: 'contribution',
component: 'CiviContribute',
},
{
label: __('Event Page', 'civicrm'),
value: 'event',
component: 'CiviEvent',
},
{
label: __('Petition', 'civicrm'),
value: 'petition',
component: 'CiviCampaign',
},
])
useEffect(() => {
CRM.api4('Setting', 'get', {
select: ['enable_components']
})
.then(function(result) {
const setting = result[0]
if (!setting.value || !setting.value.length) return;
useEffect(() => {
CRM.api4('Setting', 'get', {
select: ['enable_components'],
}).then(function (result) {
const setting = result[0]
if (!setting.value || !setting.value.length) return
const filteredComponents = components.filter(component => {
const isEnabled = setting.value.includes(
component.component
);
return !component.component || isEnabled;
});
const filteredComponents = components.filter((component) => {
const isEnabled = setting.value.includes(component.component)
return !component.component || isEnabled
})
setComponents(filteredComponents)
})
}, [])
setComponents(filteredComponents)
})
}, [])
return <SelectControl
label={__('Component', 'civicrm')}
value={component}
options={components}
onChange={onChangeComponent}
/>
return (
<SelectControl
label={__('Component', 'civicrm')}
value={component}
options={components}
onChange={onChangeComponent}
/>
)
}
export default ComponentControl
import { __ } from '@wordpress/i18n'
import { BaseControl, IconButton } from '@wordpress/components'
const ExtraAttributeItemControl = ({ attribute, index, extra_attributes, setAttributes }) => {
const ExtraAttributeItemControl = ({
attribute,
index,
extra_attributes,
setAttributes,
}) => {
const updateAttribute = (e) => {
const newAttrs = [...extra_attributes]
newAttrs[index] = {
...attribute,
[e.target.name]: e.target.value,
}
setAttributes({
extra_attributes: [...newAttrs],
})
}
const updateAttribute = e => {
const newAttrs = [...extra_attributes]
newAttrs[index] = {
...attribute,
[e.target.name]: e.target.value
}
setAttributes({
extra_attributes: [...newAttrs]
})
}
const deleteAttribute = () => {
const newAttrs = [...extra_attributes]
newAttrs.splice(index, 1)
setAttributes({
extra_attributes: [...newAttrs],
})
}
const deleteAttribute = () => {
const newAttrs = [...extra_attributes]
newAttrs.splice(index, 1)
setAttributes({
extra_attributes: [...newAttrs]
})
}
return <>
<strong>{__('Attribute', 'civicrm')} {index + 1}</strong>
<BaseControl label={__('Attribute name', 'civicrm')}>
<input
className='components-text-control__input'
type='text'
name='name'
value={attribute.name}
onChange={updateAttribute}
/>
</BaseControl>
<BaseControl label={__('Attribute value', 'civicrm')}>
<input
className='components-text-control__input'
type='text'
name='value'
value={attribute.value}
onChange={updateAttribute}
/>
</BaseControl>
<IconButton icon='trash' onClick={() => deleteAttribute()}>
{__('Delete attribute', 'civicrm')} {index + 1}
</IconButton>
<hr />
</>
return (
<>
<strong>
{__('Attribute', 'civicrm')} {index + 1}
</strong>
<BaseControl label={__('Attribute name', 'civicrm')}>
<input
className="components-text-control__input"
type="text"
name="name"
value={attribute.name}
onChange={updateAttribute}
/>
</BaseControl>
<BaseControl label={__('Attribute value', 'civicrm')}>
<input
className="components-text-control__input"
type="text"
name="value"
value={attribute.value}
onChange={updateAttribute}
/>
</BaseControl>
<IconButton icon="trash" onClick={() => deleteAttribute()}>
{__('Delete attribute', 'civicrm')} {index + 1}
</IconButton>
<hr />
</>
)
}
export default ExtraAttributeItemControl
......@@ -3,36 +3,48 @@ import { PanelBody, PanelRow, IconButton } from '@wordpress/components'
import ExtraAttributeItemControl from './ExtraAttributeItemControl'
const ExtraAttributesListControl = ({ extra_attributes, setAttributes }) => {
const addAttribute = () => {
setAttributes({
extra_attributes: [
...extra_attributes,
{
name: '',
value: '',
},
],
})
}
const addAttribute = () => {
setAttributes({
extra_attributes: [
...extra_attributes,
{
name: '',
value: ''
}
]
})
}
return <PanelBody title={__('Extra attributes', 'civicrm')} initialOpen={false}>
<PanelRow>
<IconButton icon="insert" isDefault isLarge onClick={addAttribute}>
{__('Add attribute', 'civicrm')}
</IconButton>
</PanelRow>
{
extra_attributes.length
? extra_attributes.map(
(attribute, index) => <ExtraAttributeItemControl
key={index}
{...{attribute, index, extra_attributes, setAttributes}}
/>
)
: ''
}
</PanelBody>
return (
<PanelBody
title={__('Extra shortcode attributes', 'civicrm')}
initialOpen={false}
>
<PanelRow>
<IconButton
icon="insert"
isDefault
isLarge
onClick={addAttribute}
>
{__('Add attribute', 'civicrm')}
</IconButton>
</PanelRow>
{extra_attributes.length
? extra_attributes.map((attribute, index) => (
<ExtraAttributeItemControl
key={index}
{...{
attribute,
index,
extra_attributes,
setAttributes,
}}
/>
))
: ''}
</PanelBody>
)
}
export default ExtraAttributesListControl
......@@ -2,13 +2,18 @@ import { __ } from '@wordpress/i18n'
import { ToggleControl } from '@wordpress/components'
const HijackControl = ({ hijack, setAttributes }) => {
const onChangeHijack = () => setAttributes({ hijack: !hijack })
return <ToggleControl
label={__('Override page content')}
help={__('If you only insert one shortcode, you can choose to override all page content with the content of the shortcode.', 'civicrm')}
checked={hijack}
onChange={onChangeHijack}
/>
const onChangeHijack = () => setAttributes({ hijack: !hijack })
return (
<ToggleControl
label={__('Override page content')}
help={__(
'If you only insert one shortcode, you can choose to override all page content with the content of the shortcode.',
'civicrm'
)}
checked={hijack}
onChange={onChangeHijack}
/>
)
}
export default HijackControl
......@@ -2,19 +2,21 @@ import { __ } from '@wordpress/i18n'
import { RadioControl } from '@wordpress/components'
const ModeControl = ({ mode, setAttributes }) => {
const onChangeMode = mode => setAttributes({ mode })
const options = [
{ label: __('Live Mode', 'civicrm'), value: 'live' },
{ label: __('Test Mode', 'civicrm'), value: 'test' },
]
const onChangeMode = (mode) => setAttributes({ mode })
const options = [
{ label: __('Live Mode', 'civicrm'), value: 'live' },
{ label: __('Test Mode', 'civicrm'), value: 'test' },
]
return <RadioControl
label={__('Mode', 'civicrm')}
value={mode}
options={options}
selected={mode || 'live'}
onChange={onChangeMode}
/>
return (
<RadioControl
label={__('Mode', 'civicrm')}
value={mode}
options={options}
selected={mode || 'live'}
onChange={onChangeMode}
/>
)
}
export default ModeControl
......@@ -2,21 +2,23 @@ import { __ } from '@wordpress/i18n'
import { RadioControl } from '@wordpress/components'
const ProfileModeControl = ({ mode, setAttributes }) => {
const onChangeMode = mode => setAttributes({ mode })
const options = [
{ label: __('Create', 'civicrm'), value: 'create' },
{ label: __('Edit', 'civicrm'), value: 'edit' },
{ label: __('View', 'civicrm'), value: 'view' },
{ label: __('Search/Public Directory', 'civicrm'), value: 'search' },
]
const onChangeMode = (mode) => setAttributes({ mode })
const options = [
{ label: __('Create', 'civicrm'), value: 'create' },
{ label: __('Edit', 'civicrm'), value: 'edit' },
{ label: __('View', 'civicrm'), value: 'view' },
{ label: __('Search/Public Directory', 'civicrm'), value: 'search' },
]
return <RadioControl
label={__('Mode', 'civicrm')}
value={mode}
options={options}
selected={mode || 'create'}
onChange={onChangeMode}
/>
return (
<RadioControl
label={__('Mode', 'civicrm')}
value={mode}
options={options}
selected={mode || 'create'}
onChange={onChangeMode}
/>
)
}
export default ProfileModeControl
......@@ -2,60 +2,61 @@ import { __ } from '@wordpress/i18n'
import { useState, useEffect } from '@wordpress/element'
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 ? data.intro_text.slice(0, 40) : ''}...
</span>
</components.Option>
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 ? data.intro_text.slice(0, 40) : ''}...
</span>
</components.Option>
)
}
const SelectContributionPageControl = ({ id, setAttributes }) => {
const [contributionPages, setConstributionPages] = useState([])
const [contributionPage, setConstributionPage] = useState({})
useEffect(() => {
CRM.api4('ContributionPage', 'get', {
select: ['title', 'intro_text'],
where: [['is_active', '=', '1']]
})
.then((result) => {
if (!result && !result.length) return;
const options = result.map(page => ({
...page,