File: /var/www/html/wpmuhibbah_err/wp-content/plugins/give/blocks/donor-wall/edit/inspector.js
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n'
import {InspectorControls, ColorPalette,} from '@wordpress/block-editor';
import {PanelBody, Panel, SelectControl, ToggleControl, TextControl, FormTokenField } from '@wordpress/components';
/**
* Internal dependencies
*/
import giveDonorWallOptions from '../data/options';
import ColumnSelector from '../../components/column-selector';
import ToggleOptions from '../../components/toggle';
import './style.scss'
import Toggle from "../../components/toggle";
/**
* Render Inspector Controls
*/
const Inspector = ( { attributes, setAttributes } ) => {
const { donorsPerPage,
ids,
formID,
categories,
tags, orderBy,
order,
columns,
avatarSize,
showAvatar,
showName,
showCompanyName,
onlyComments,
showForm,
showTotal,
showComments,
showAnonymous,
commentLength, readMoreText,
loadMoreText,
toggleOptions,
filterOptions,
color,
showTimestamp,
showTributes } = attributes;
const saveSetting = ( name, value ) => {
setAttributes( {
[ name ]: value,
} );
};
const getAsArray = value => {
if (Array.isArray(value)) {
return value;
}
// Backward compatibility
if (formIDs.indexOf(',')) {
return value.split(',');
}
return [value];
};
const filterValue = () => {
if(filterOptions === 'categories'){
return <> <FormTokenField
className="give-donor-wall-inspector"
onChange ={(value) => saveSetting('categories', value)}
value={getAsArray(categories)}/>
<p className="components-form-token-field__help">
{__('Type the name of your category to add it to the list. Only forms within the categories you choose will be displayed in this grid.', 'give')}
</p>
</>
} else if (filterOptions === 'tags'){
return <> <FormTokenField
className="give-donor-wall-inspector"
name="tags"
value={getAsArray(tags)}
onChange ={(value) => saveSetting('tags', value)}/>
<p className="components-form-token-field__help">
{__('Type the name of your tag to add it to the list. Only forms with these tags you choose will be displayed in this grid.', 'give')}
</p>
</>
} else if (filterOptions === 'ids'){
return <> <FormTokenField
className="give-donor-wall-inspector"
name="ids"
value={getAsArray(ids)}
onChange ={(value) => saveSetting('ids', value)}/>
<p className="components-form-token-field__help">
{__('By default, all donors will display. Use this setting to restrict the donor wall to only display certain donors. Use a comma-separated list of donor IDs.', 'give')}
</p>
</>
} else if (filterOptions === 'formID' ){
return <> <FormTokenField
className="give-donor-wall-inspector"
help={__('By Default, donations to all forms will display. Use this setting to restrict the donor to display only donations to certains forms. Use a comma-separated list of form IDs.', 'give')}
name="formID"
value={getAsArray(formID)}
onChange ={(value) => saveSetting('formID', value)}/>
<p className="components-form-token-field__help">
{__('Type the ID of your form to add it to the list. Only forms with these IDs you choose will be displayed in this grid.', 'give')}
</p>
</>
}
};
return (
<InspectorControls key="inspector">
<Panel>
<PanelBody title= {__('Layout', 'give')} initialOpen={ true }>
<ColumnSelector
selected={columns}
onClick={(value) => saveSetting('columns', value)}
help={__('Controls how many columns of the Form Grid appear. All sizes will adjust responsively to the space available. The maximum number allowed per row is 4', 'give')}
/>
<SelectControl
className="give-donor-wall-inspector"
name="columns"
label={ __( 'Columns', 'give' ) }
value={ columns }
options={ giveDonorWallOptions.columns }
onChange={ ( value ) => saveSetting( 'columns', value ) } />
</PanelBody>
</Panel>
<Panel>
<PanelBody title= {__('Display Elements', 'give')} initialOpen={ false }>
<ToggleOptions
options={giveDonorWallOptions.toggleOptions}
onClick={( value ) => saveSetting( 'toggleOptions', value ) }
selected={toggleOptions}/>
{toggleOptions === 'donorInfo' ?
<>
<ToggleControl
className="give-donor-wall-inspector"
name="showName"
label={ __( 'Show Name', 'give' ) }
checked={ !! showName }
onChange={ ( value ) => saveSetting( 'showName', value ) } />
<ToggleControl
className="give-donor-wall-inspector"
name="showName"
label={ __( 'Show Company Name', 'give' ) }
checked={ !! showCompanyName }
onChange={ ( value ) => saveSetting( 'showCompanyName', value ) } />
<ToggleControl
className="give-donor-wall-inspector"
name="showAnonymous"
label={ __( 'Show Anonymous', 'give' ) }
checked={ !! showAnonymous }
onChange={ ( value ) => saveSetting( 'showAnonymous', value ) } />
<ToggleControl
className="give-donor-wall-inspector"
name="showAvatar"
label={ __( 'Show Avatar', 'give' ) }
checked={ !! showAvatar }
onChange={ ( value ) => saveSetting( 'showAvatar', value ) } />
<TextControl
className="give-donor-wall-inspector"
name="avatarSize"
label={ __( 'Avatar Size', 'give' ) }
help={__('Avatar size. Default height is 75. Accepts valid heights in px.', 'give')}
value={ avatarSize }
onChange={ ( value ) => saveSetting( 'avatarSize', value ) } />
</> :
<>
<ToggleControl
className="give-donor-wall-inspector"
name="showForm"
label={ __( 'Show Donation Form', 'give' ) }
checked={ !! showForm }
onChange={ ( value ) => saveSetting( 'showForm', value ) } />
<ToggleControl
className="give-donor-wall-inspector"
name="showTotal"
label={ __( 'Show Total', 'give' ) }
checked={ !! showTotal }
onChange={ ( value ) => saveSetting( 'showTotal', value ) } />
<ToggleControl
className="give-donor-wall-inspector"
name="showTimestamp"
label={ __( 'Show Time', 'give' ) }
checked={ !! showTimestamp }
onChange={ ( value ) => saveSetting( 'showTimestamp', value ) } />
{ !!window.Give_Tribute && <ToggleControl
className="give-donor-wall-inspector"
name="showTributes"
label={ __( 'Show Tributes', 'give' ) }
checked={ !! showTributes }
onChange={ ( value ) => saveSetting( 'showTributes', value ) } />}
<ToggleControl
className="give-donor-wall-inspector"
name="showComments"
label={ __( 'Show Comments', 'give' ) }
checked={ !! showComments }
onChange={ ( value ) => saveSetting( 'showComments', value ) } />
<ToggleControl
className="give-donor-wall-inspector"
name="onlyComments"
label={ __( 'Only Comments', 'give' ) }
checked={ !! onlyComments }
onChange={ ( value ) => saveSetting( 'onlyComments', value ) } />
<TextControl
className="give-donor-wall-inspector"
name="commentLength"
label={ __( 'Comment Length', 'give' ) }
help={__('Limits the amount of characters to be displayed on donations with comments.', 'give')}
value={ commentLength }
onChange={ ( value ) => saveSetting( 'commentLength', value ) } />
<TextControl
className="give-donor-wall-inspector"
name="readMoreText"
label={ __( 'Read More Text', 'give' ) }
value={ readMoreText }
onChange={ ( value ) => saveSetting( 'readMoreText', value ) } />
</>
}
</PanelBody>
</Panel>
<Panel>
<PanelBody className="give-wall--wall-settings" title= {__('Wall Settings', 'give')} initialOpen={ false }>
<SelectControl
className="give-donor-wall-inspector"
label={ __( 'Sort By', 'give' ) }
name="orderBy"
value={ orderBy }
options={ giveDonorWallOptions.orderBy }
onChange={ ( value ) => saveSetting( 'orderBy', value ) } />
<SelectControl
className="give-donor-wall-inspector"
label={ __( 'Order', 'give' ) }
name="order"
value={ order }
options={ giveDonorWallOptions.order }
onChange={ ( value ) => saveSetting( 'order', value ) } />
<SelectControl
className="give-donor-wall-inspector"
label={ __( 'Filter', 'give' ) }
name="filter"
value={ filterOptions }
options={ giveDonorWallOptions.filter }
onChange={ ( value ) => saveSetting( 'filterOptions', value ) } />
{filterValue(filterOptions)}
</PanelBody>
</Panel>
<Panel>
<PanelBody title= {__('Wall Interaction', 'give')} initialOpen={ true }>
<TextControl
className="give-donor-wall-inspector"
name="donorsPerPage"
label={ __( 'Donors Per Page', 'give' ) }
value={ donorsPerPage }
onChange={ ( value ) => saveSetting( 'donorsPerPage', value ) }
help={ __('How many donors should show up on the initial page load?', 'give' ) }
/>
<TextControl
className="give-donor-wall-inspector"
name="loadMoreText"
label={ __( 'Load More Text', 'give' ) }
value={ loadMoreText }
onChange={ ( value ) => saveSetting( 'loadMoreText', value ) } />
</PanelBody>
</Panel>
<Panel>
<PanelBody title= {__('Color', 'give')} initialOpen={ false }>
<ColorPalette
value={color}
onChange={( value ) => setAttributes( { color: value } )}
/>
</PanelBody>
</Panel>
</InspectorControls>
);
};
export default Inspector;