app
1 year ago
app.tsx
1 year ago
block.json
7 months ago
edit.tsx
1 year ago
index.tsx
1 year ago
render.php
1 year ago
types.ts
10 months ago
edit.tsx
141 lines
| 1 | import {__} from '@wordpress/i18n'; |
| 2 | import {InspectorControls, useBlockProps} from '@wordpress/block-editor'; |
| 3 | import {BlockEditProps} from '@wordpress/blocks'; |
| 4 | import {FormTokenField, PanelBody, SelectControl, TextControl, ToggleControl} from '@wordpress/components'; |
| 5 | import {TokenItem} from '@wordpress/components/build-types/form-token-field/types' |
| 6 | import GridControl from '../shared/components/GridControl'; |
| 7 | import useCampaigns from '../shared/hooks/useCampaigns'; |
| 8 | import {CampaignGridType} from './types'; |
| 9 | import CampaignGridApp from './app/index' |
| 10 | |
| 11 | export default function Edit({attributes, setAttributes}: BlockEditProps<CampaignGridType>) { |
| 12 | const blockProps = useBlockProps(); |
| 13 | const {campaigns, hasResolved} = useCampaigns(); |
| 14 | const suggestions = campaigns?.map((campaign) => campaign.title); |
| 15 | |
| 16 | return ( |
| 17 | <div {...blockProps}> |
| 18 | {hasResolved && ( |
| 19 | <> |
| 20 | <CampaignGridApp attributes={attributes} /> |
| 21 | <InspectorControls> |
| 22 | <PanelBody title={__('Layout', 'give')} initialOpen={true}> |
| 23 | <GridControl |
| 24 | label={__('Grid', 'give')} |
| 25 | value={attributes.layout} |
| 26 | onChange={(layout) => setAttributes({layout})} |
| 27 | options={[ |
| 28 | { |
| 29 | value: 'full', |
| 30 | label: __('Full Width', 'give'), |
| 31 | }, |
| 32 | { |
| 33 | value: 'double', |
| 34 | label: __('Double', 'give'), |
| 35 | }, |
| 36 | { |
| 37 | value: 'triple', |
| 38 | label: __('Triple', 'give'), |
| 39 | } |
| 40 | ]} |
| 41 | /> |
| 42 | </PanelBody> |
| 43 | |
| 44 | <PanelBody title={__('Display Elements', 'give')} initialOpen={true}> |
| 45 | <ToggleControl |
| 46 | label={__('Show campaign image', 'give')} |
| 47 | checked={attributes.showImage} |
| 48 | onChange={(showImage) => setAttributes({showImage})} |
| 49 | /> |
| 50 | <ToggleControl |
| 51 | label={__('Show description', 'give')} |
| 52 | checked={attributes.showDescription} |
| 53 | onChange={(showDescription) => setAttributes({showDescription})} |
| 54 | /> |
| 55 | <ToggleControl |
| 56 | label={__('Show goal', 'give')} |
| 57 | checked={attributes.showGoal} |
| 58 | onChange={(showGoal) => setAttributes({showGoal})} |
| 59 | /> |
| 60 | </PanelBody> |
| 61 | |
| 62 | <PanelBody title={__('Grid Settings', 'give')} initialOpen={true}> |
| 63 | <SelectControl |
| 64 | label={__('Order By', 'give')} |
| 65 | onChange={(sortBy: string) => setAttributes({sortBy})} |
| 66 | value={attributes.sortBy} |
| 67 | help={__('The order campaigns are displayed in.', 'give')} |
| 68 | options={[ |
| 69 | { |
| 70 | value: 'date', |
| 71 | label: __('Date Created', 'give'), |
| 72 | }, |
| 73 | { |
| 74 | value: 'amount', |
| 75 | label: __('Total Amount Raised', 'give'), |
| 76 | }, |
| 77 | { |
| 78 | value: 'donations', |
| 79 | label: __('Number of Donations', 'give'), |
| 80 | }, |
| 81 | { |
| 82 | value: 'donors', |
| 83 | label: __('Number of Donors', 'give'), |
| 84 | } |
| 85 | ]} |
| 86 | /> |
| 87 | <SelectControl |
| 88 | label={__('Order', 'give')} |
| 89 | onChange={(orderBy: string) => setAttributes({orderBy})} |
| 90 | value={attributes.orderBy} |
| 91 | help={__('Choose whether the campaign order ascends or descends.', 'give')} |
| 92 | options={[ |
| 93 | { |
| 94 | value: 'desc', |
| 95 | label: __('Descending', 'give'), |
| 96 | }, |
| 97 | { |
| 98 | value: 'asc', |
| 99 | label: __('Ascending', 'give'), |
| 100 | } |
| 101 | ]} |
| 102 | /> |
| 103 | <FormTokenField |
| 104 | value={attributes.filterBy?.map((item: TokenItem) => item.title)} |
| 105 | label={__('Filter by Campaign', 'give')} |
| 106 | onChange={(values) => { |
| 107 | const filterBy = campaigns |
| 108 | .filter((campaign) => values.includes(campaign.title)) |
| 109 | .map((campaign) => { |
| 110 | return { |
| 111 | value: String(campaign.id), |
| 112 | title: campaign.title |
| 113 | } |
| 114 | }); |
| 115 | |
| 116 | setAttributes({filterBy}) |
| 117 | }} |
| 118 | suggestions={suggestions} |
| 119 | /> |
| 120 | <TextControl |
| 121 | type="number" |
| 122 | min="1" |
| 123 | label={__('Campaigns per page', 'give')} |
| 124 | value={attributes.perPage} |
| 125 | onChange={(perPage: string) => setAttributes({perPage: Number(perPage)})} |
| 126 | help={__('Set the number of campaigns to be displayed on the first page load.', 'give')} |
| 127 | /> |
| 128 | <ToggleControl |
| 129 | label={__('Show pagination', 'give')} |
| 130 | checked={attributes.showPagination} |
| 131 | onChange={(showPagination) => setAttributes({showPagination})} |
| 132 | help={__('All campaigns will be spread across multiple pages.', 'give')} |
| 133 | /> |
| 134 | </PanelBody> |
| 135 | </InspectorControls> |
| 136 | </> |
| 137 | )} |
| 138 | </div> |
| 139 | ) |
| 140 | } |
| 141 |