inspector.js
86 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | const { __ } = wp.i18n; |
| 5 | const { InspectorControls } = wp.blockEditor; |
| 6 | const { PanelBody, TextControl } = wp.components; |
| 7 | |
| 8 | /** |
| 9 | * Internal dependencies |
| 10 | */ |
| 11 | |
| 12 | import MultiSelectControl from '../../../components/multi-select-control'; |
| 13 | import ColorControl from '../../../components/color-control'; |
| 14 | import DateTimeControl from '../../../components/date-time-control'; |
| 15 | import { useFormOptions, useTagOptions, useCategoryOptions } from '../data/utils'; |
| 16 | |
| 17 | /* eslint-disable-next-line no-undef */ |
| 18 | const editorColorPalette = giveProgressBarThemeSupport.editorColorPalette; |
| 19 | |
| 20 | /** |
| 21 | * Render Inspector Controls |
| 22 | */ |
| 23 | |
| 24 | const Inspector = ( { attributes, setAttributes } ) => { |
| 25 | const { ids, categories, tags, goal, enddate, color } = attributes; |
| 26 | const formOptions = useFormOptions(); |
| 27 | const tagOptions = useTagOptions(); |
| 28 | const categoryOptions = useCategoryOptions(); |
| 29 | const saveSetting = ( name, value ) => { |
| 30 | setAttributes( { |
| 31 | [ name ]: value, |
| 32 | } ); |
| 33 | }; |
| 34 | return ( |
| 35 | <InspectorControls key="inspector"> |
| 36 | <PanelBody title={ __( 'Goal', 'give' ) } initialOpen={ true }> |
| 37 | <TextControl |
| 38 | name="goal" |
| 39 | label={ __( 'Goal amount', 'give' ) } |
| 40 | type="number" |
| 41 | onChange={ ( value ) => saveSetting( 'goal', value ) } |
| 42 | value={ goal } |
| 43 | /> |
| 44 | <DateTimeControl |
| 45 | name="enddate" |
| 46 | label={ __( 'Goal end date', 'give' ) } |
| 47 | value={ enddate } |
| 48 | onChange={ ( value ) => saveSetting( 'enddate', value ) } |
| 49 | /> |
| 50 | <ColorControl |
| 51 | colors={ editorColorPalette } |
| 52 | name="color" |
| 53 | label={ __( 'Progress bar color', 'give' ) } |
| 54 | onChange={ ( value ) => saveSetting( 'color', value ) } |
| 55 | value={ color } |
| 56 | /> |
| 57 | </PanelBody> |
| 58 | <PanelBody title={ __( 'Filters', 'give' ) } initialOpen={ false }> |
| 59 | <MultiSelectControl |
| 60 | name="ids" |
| 61 | label={ __( 'Filter by forms', 'give' ) } |
| 62 | value={ formOptions.filter( option => ids.includes( option.value ) ) } |
| 63 | placeholder={ `${ __( 'All forms', 'give' ) }...` } |
| 64 | options={ formOptions } |
| 65 | onChange={ ( value ) => saveSetting( 'ids', value ? value.map( ( option ) => option.value ) : [] ) } /> |
| 66 | <MultiSelectControl |
| 67 | name="categories" |
| 68 | label={ __( 'Filter by categories', 'give' ) } |
| 69 | value={ categoryOptions.filter( option => categories.includes( option.value ) ) } |
| 70 | placeholder={ `${ __( 'All categories', 'give' ) }...` } |
| 71 | options={ categoryOptions } |
| 72 | onChange={ ( value ) => saveSetting( 'categories', value ? value.map( ( option ) => option.value ) : [] ) } /> |
| 73 | <MultiSelectControl |
| 74 | name="tags" |
| 75 | label={ __( 'Filter by tags', 'give' ) } |
| 76 | value={ tagOptions.filter( option => tags.includes( option.value ) ) } |
| 77 | placeholder={ `${ __( 'All tags', 'give' ) }...` } |
| 78 | options={ tagOptions } |
| 79 | onChange={ ( value ) => saveSetting( 'tags', value ? value.map( ( option ) => option.value ) : [] ) } /> |
| 80 | </PanelBody> |
| 81 | </InspectorControls> |
| 82 | ); |
| 83 | }; |
| 84 | |
| 85 | export default Inspector; |
| 86 |