← All changes | blocks/donor-wall/edit/inspector.js +259 -39 2.3.0 → 4.18.0 View file →

		@@ -1,22 +1,53 @@
1	1	/**
2	2	* WordPress dependencies
3	3	*/
4		-const { __ } = wp.i18n;
5		-const { InspectorControls } = wp.editor;
6		-const { PanelBody, SelectControl, ToggleControl } = wp.components;
	4	+import { __ } from '@wordpress/i18n'
7	5
	6	+import {InspectorControls, ColorPalette,} from '@wordpress/block-editor';
	7	+import {PanelBody, Panel, SelectControl, ToggleControl, TextControl, FormTokenField } from '@wordpress/components';
	8	+
8	9	/**
9	10	* Internal dependencies
10	11	*/
11	12	import giveDonorWallOptions from '../data/options';
12	13
	14	+import ColumnSelector from '../../components/column-selector';
	15	+import ToggleOptions from '../../components/toggle';
	16	+
	17	+import './style.scss'
	18	+import Toggle from "../../components/toggle";
	19	+
13	20	/**
14	21	* Render Inspector Controls
15	22	*/
16	23
17	24	const Inspector = ( { attributes, setAttributes } ) => {
18		- const { columns, showAvatar, showName, showTotal, showDate, showComments } = attributes;
	25	+
	26	+const { donorsPerPage,
	27	+ ids,
	28	+ formID,
	29	+ categories,
	30	+ tags, orderBy,
	31	+ order,
	32	+ columns,
	33	+ avatarSize,
	34	+ showAvatar,
	35	+ showName,
	36	+ showCompanyName,
	37	+ onlyComments,
	38	+ showForm,
	39	+ showTotal,
	40	+ showComments,
	41	+ showAnonymous,
	42	+ commentLength, readMoreText,
	43	+ loadMoreText,
	44	+ toggleOptions,
	45	+ filterOptions,
	46	+ color,
	47	+ showTimestamp,
	48	+ showTributes } = attributes;
	49	+
19	50	const saveSetting = ( name, value ) => {
20	51	setAttributes( {
21	52	[ name ]: value,
22	53	} );
		@@ -21,44 +52,233 @@
21	52	[ name ]: value,
22	53	} );
23	54	};
24	55
25		- return (
	56	+ const getAsArray = value => {
	57	+ if (Array.isArray(value)) {
	58	+ return value;
	59	+ }
	60	+
	61	+ // Backward compatibility
	62	+ if (formIDs.indexOf(',')) {
	63	+ return value.split(',');
	64	+ }
	65	+
	66	+ return [value];
	67	+ };
	68	+
	69	+ const filterValue = () => {
	70	+ if(filterOptions === 'categories'){
	71	+ return <> <FormTokenField
	72	+ className="give-donor-wall-inspector"
	73	+ onChange ={(value) => saveSetting('categories', value)}
	74	+ value={getAsArray(categories)}/>
	75	+ <p className="components-form-token-field__help">
	76	+ {__('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')}
	77	+ </p>
	78	+ </>
	79	+
	80	+ } else if (filterOptions === 'tags'){
	81	+ return <> <FormTokenField
	82	+ className="give-donor-wall-inspector"
	83	+ name="tags"
	84	+ value={getAsArray(tags)}
	85	+ onChange ={(value) => saveSetting('tags', value)}/>
	86	+ <p className="components-form-token-field__help">
	87	+ {__('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')}
	88	+ </p>
	89	+ </>
	90	+
	91	+ } else if (filterOptions === 'ids'){
	92	+ return <> <FormTokenField
	93	+ className="give-donor-wall-inspector"
	94	+ name="ids"
	95	+ value={getAsArray(ids)}
	96	+ onChange ={(value) => saveSetting('ids', value)}/>
	97	+ <p className="components-form-token-field__help">
	98	+ {__('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')}
	99	+ </p>
	100	+ </>
	101	+
	102	+ } else if (filterOptions === 'formID' ){
	103	+ return <> <FormTokenField
	104	+ className="give-donor-wall-inspector"
	105	+ 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')}
	106	+ name="formID"
	107	+ value={getAsArray(formID)}
	108	+ onChange ={(value) => saveSetting('formID', value)}/>
	109	+ <p className="components-form-token-field__help">
	110	+ {__('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')}
	111	+ </p>
	112	+ </>
	113	+ }
	114	+ };
	115	+ return (
26	116	<InspectorControls key="inspector">
27		- <PanelBody title={ __( 'Settings' ) }>
28		- <SelectControl
29		- label={ __( 'Columns' ) }
30		- name="columns"
31		- value={ columns }
32		- options={ giveDonorWallOptions.columns }
33		- onChange={ ( value ) => saveSetting( 'columns', value ) } />
34		- <ToggleControl
35		- name="showAvatar"
36		- label={ __( 'Show Avatar' ) }
37		- checked={ !! showAvatar }
38		- onChange={ ( value ) => saveSetting( 'showAvatar', value ) } />
39		- <ToggleControl
40		- name="showName"
41		- label={ __( 'Show Name' ) }
42		- checked={ !! showName }
43		- onChange={ ( value ) => saveSetting( 'showName', value ) } />
44		- <ToggleControl
45		- name="showTotal"
46		- label={ __( 'Show Total' ) }
47		- checked={ !! showTotal }
48		- onChange={ ( value ) => saveSetting( 'showTotal', value ) } />
49		- <ToggleControl
50		- name="showDate"
51		- label={ __( 'Show Time' ) }
52		- checked={ !! showDate }
53		- onChange={ ( value ) => saveSetting( 'showDate', value ) } />
54		- <ToggleControl
55		- name="showComments"
56		- label={ __( 'Show Comments' ) }
57		- checked={ !! showComments }
58		- onChange={ ( value ) => saveSetting( 'showComments', value ) } />
59		- </PanelBody>
60		- </InspectorControls>
	117	+ <Panel>
	118	+ <PanelBody title= {__('Layout', 'give')} initialOpen={ true }>
	119	+ <ColumnSelector
	120	+ selected={columns}
	121	+ onClick={(value) => saveSetting('columns', value)}
	122	+ 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')}
	123	+ />
	124	+ <SelectControl
	125	+ className="give-donor-wall-inspector"
	126	+ name="columns"
	127	+ label={ __( 'Columns', 'give' ) }
	128	+ value={ columns }
	129	+ options={ giveDonorWallOptions.columns }
	130	+ onChange={ ( value ) => saveSetting( 'columns', value ) } />
	131	+ </PanelBody>
	132	+ </Panel>
	133	+ <Panel>
	134	+ <PanelBody title= {__('Display Elements', 'give')} initialOpen={ false }>
	135	+ <ToggleOptions
	136	+ options={giveDonorWallOptions.toggleOptions}
	137	+ onClick={( value ) => saveSetting( 'toggleOptions', value ) }
	138	+ selected={toggleOptions}/>
	139	+ {toggleOptions === 'donorInfo' ?
	140	+ <>
	141	+ <ToggleControl
	142	+ className="give-donor-wall-inspector"
	143	+ name="showName"
	144	+ label={ __( 'Show Name', 'give' ) }
	145	+ checked={ !! showName }
	146	+ onChange={ ( value ) => saveSetting( 'showName', value ) } />
	147	+ <ToggleControl
	148	+ className="give-donor-wall-inspector"
	149	+ name="showName"
	150	+ label={ __( 'Show Company Name', 'give' ) }
	151	+ checked={ !! showCompanyName }
	152	+ onChange={ ( value ) => saveSetting( 'showCompanyName', value ) } />
	153	+ <ToggleControl
	154	+ className="give-donor-wall-inspector"
	155	+ name="showAnonymous"
	156	+ label={ __( 'Show Anonymous', 'give' ) }
	157	+ checked={ !! showAnonymous }
	158	+ onChange={ ( value ) => saveSetting( 'showAnonymous', value ) } />
	159	+ <ToggleControl
	160	+ className="give-donor-wall-inspector"
	161	+ name="showAvatar"
	162	+ label={ __( 'Show Avatar', 'give' ) }
	163	+ checked={ !! showAvatar }
	164	+ onChange={ ( value ) => saveSetting( 'showAvatar', value ) } />
	165	+ <TextControl
	166	+ className="give-donor-wall-inspector"
	167	+ name="avatarSize"
	168	+ label={ __( 'Avatar Size', 'give' ) }
	169	+ help={__('Avatar size. Default height is 75. Accepts valid heights in px.', 'give')}
	170	+ value={ avatarSize }
	171	+ onChange={ ( value ) => saveSetting( 'avatarSize', value ) } />
	172	+ </> :
	173	+ <>
	174	+ <ToggleControl
	175	+ className="give-donor-wall-inspector"
	176	+ name="showForm"
	177	+ label={ __( 'Show Donation Form', 'give' ) }
	178	+ checked={ !! showForm }
	179	+ onChange={ ( value ) => saveSetting( 'showForm', value ) } />
	180	+ <ToggleControl
	181	+ className="give-donor-wall-inspector"
	182	+ name="showTotal"
	183	+ label={ __( 'Show Total', 'give' ) }
	184	+ checked={ !! showTotal }
	185	+ onChange={ ( value ) => saveSetting( 'showTotal', value ) } />
	186	+ <ToggleControl
	187	+ className="give-donor-wall-inspector"
	188	+ name="showTimestamp"
	189	+ label={ __( 'Show Time', 'give' ) }
	190	+ checked={ !! showTimestamp }
	191	+ onChange={ ( value ) => saveSetting( 'showTimestamp', value ) } />
	192	+ { !!window.Give_Tribute && <ToggleControl
	193	+ className="give-donor-wall-inspector"
	194	+ name="showTributes"
	195	+ label={ __( 'Show Tributes', 'give' ) }
	196	+ checked={ !! showTributes }
	197	+ onChange={ ( value ) => saveSetting( 'showTributes', value ) } />}
	198	+ <ToggleControl
	199	+ className="give-donor-wall-inspector"
	200	+ name="showComments"
	201	+ label={ __( 'Show Comments', 'give' ) }
	202	+ checked={ !! showComments }
	203	+ onChange={ ( value ) => saveSetting( 'showComments', value ) } />
	204	+ <ToggleControl
	205	+ className="give-donor-wall-inspector"
	206	+ name="onlyComments"
	207	+ label={ __( 'Only Comments', 'give' ) }
	208	+ checked={ !! onlyComments }
	209	+ onChange={ ( value ) => saveSetting( 'onlyComments', value ) } />
	210	+ <TextControl
	211	+ className="give-donor-wall-inspector"
	212	+ name="commentLength"
	213	+ label={ __( 'Comment Length', 'give' ) }
	214	+ help={__('Limits the amount of characters to be displayed on donations with comments.', 'give')}
	215	+ value={ commentLength }
	216	+ onChange={ ( value ) => saveSetting( 'commentLength', value ) } />
	217	+ <TextControl
	218	+ className="give-donor-wall-inspector"
	219	+ name="readMoreText"
	220	+ label={ __( 'Read More Text', 'give' ) }
	221	+ value={ readMoreText }
	222	+ onChange={ ( value ) => saveSetting( 'readMoreText', value ) } />
	223	+ </>
	224	+ }
	225	+ </PanelBody>
	226	+ </Panel>
	227	+ <Panel>
	228	+ <PanelBody className="give-wall--wall-settings" title= {__('Wall Settings', 'give')} initialOpen={ false }>
	229	+ <SelectControl
	230	+ className="give-donor-wall-inspector"
	231	+ label={ __( 'Sort By', 'give' ) }
	232	+ name="orderBy"
	233	+ value={ orderBy }
	234	+ options={ giveDonorWallOptions.orderBy }
	235	+ onChange={ ( value ) => saveSetting( 'orderBy', value ) } />
	236	+ <SelectControl
	237	+ className="give-donor-wall-inspector"
	238	+ label={ __( 'Order', 'give' ) }
	239	+ name="order"
	240	+ value={ order }
	241	+ options={ giveDonorWallOptions.order }
	242	+ onChange={ ( value ) => saveSetting( 'order', value ) } />
	243	+ <SelectControl
	244	+ className="give-donor-wall-inspector"
	245	+ label={ __( 'Filter', 'give' ) }
	246	+ name="filter"
	247	+ value={ filterOptions }
	248	+ options={ giveDonorWallOptions.filter }
	249	+ onChange={ ( value ) => saveSetting( 'filterOptions', value ) } />
	250	+
	251	+ {filterValue(filterOptions)}
	252	+ </PanelBody>
	253	+ </Panel>
	254	+ <Panel>
	255	+ <PanelBody title= {__('Wall Interaction', 'give')} initialOpen={ true }>
	256	+ <TextControl
	257	+ className="give-donor-wall-inspector"
	258	+ name="donorsPerPage"
	259	+ label={ __( 'Donors Per Page', 'give' ) }
	260	+ value={ donorsPerPage }
	261	+ onChange={ ( value ) => saveSetting( 'donorsPerPage', value ) }
	262	+ help={ __('How many donors should show up on the initial page load?', 'give' ) }
	263	+ />
	264	+ <TextControl
	265	+ className="give-donor-wall-inspector"
	266	+ name="loadMoreText"
	267	+ label={ __( 'Load More Text', 'give' ) }
	268	+ value={ loadMoreText }
	269	+ onChange={ ( value ) => saveSetting( 'loadMoreText', value ) } />
	270	+ </PanelBody>
	271	+ </Panel>
	272	+ <Panel>
	273	+ <PanelBody title= {__('Color', 'give')} initialOpen={ false }>
	274	+ <ColorPalette
	275	+ value={color}
	276	+ onChange={( value ) => setAttributes( { color: value } )}
	277	+ />
	278	+ </PanelBody>
	279	+ </Panel>
	280	+ </InspectorControls>
61	281	);
62	282	};
63	283
64	284	export default Inspector;