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