ElasticPress / 4.7.2

ElasticPress v4.7.2

elasticpress / assets / js / blocks / facets / common / edit.js

edit.js in ElasticPress 4.7.2, at assets/js/blocks/facets/common/edit.js

130 lines 3.6 KB

Raw Download Zip

1	/* eslint-disable no-nested-ternary */
2	/**
3	* WordPress dependencies.
4	*/
5	import { getBlockType } from '@wordpress/blocks';
6	import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
7	import { Disabled, PanelBody, Placeholder } from '@wordpress/components';
8	import { Fragment, WPElement } from '@wordpress/element';
9	import { __ } from '@wordpress/i18n';
10	import ServerSideRender from '@wordpress/server-side-render';
11
12	/**
13	* Internal dependencies.
14	*/
15	import icon from './icon';
16	import EmptyResponsePlaceholder from './components/empty-response-placeholder';
17	import FacetDisplayCountControl from './components/facet-display-count-control';
18	import FacetMetaControl from './components/facet-meta-control';
19	import FacetOrderControl from './components/facet-order-control';
20	import FacetSearchPlaceholderControl from './components/facet-search-placeholder-control';
21	import FacetTaxonomyControl from './components/facet-taxonomy-control';
22	import LoadingResponsePlaceholder from './components/loading-response-placeholder';
23
24	/**
25	* Filter by Metadata block edit component.
26	*
27	* @param {object} props Component props.
28	* @param {object} props.attributes Block attributes.
29	* @param {string} props.name Block name.
30	* @param {Function} props.setAttributes Block attribute setter.
31	* @returns {WPElement}
32	*/
33	export default ({ attributes, name, setAttributes }) => {
34	const { displayCount, facet, orderby, order, searchPlaceholder, type } = attributes;
35
36	const { title } = getBlockType(name);
37
38	const blockProps = useBlockProps();
39
40	const FacetControl = type === 'meta' ? FacetMetaControl : FacetTaxonomyControl;
41
42	/**
43	* Display count change handler.
44	*
45	* @param {boolean} displayCount Display count?
46	* @returns {void}
47	*/
48	const onChangeDisplayCount = (displayCount) => {
49	setAttributes({ displayCount });
50	};
51
52	/**
53	* Facet change handler.
54	*
55	* @param {string} facet Selected facet.
56	* @returns {void}
57	*/
58	const onChangeFacet = (facet) => {
59	setAttributes({ facet });
60	};
61
62	/**
63	* Facet change handler.
64	*
65	* @param {object} value Value.
66	* @param {string} value.orderby Order by value.
67	* @param {string} value.order Order value.
68	* @returns {void}
69	*/
70	const onChangeOrder = ({ orderby, order }) => {
71	setAttributes({ orderby, order });
72	};
73
74	/**
75	* Search placeholder change handler.
76	*
77	* @param {string} searchPlaceholder Search placeholder.
78	* @returns {void}
79	*/
80	const onChangeSearchPlaceholder = (searchPlaceholder) => {
81	setAttributes({ searchPlaceholder });
82	};
83
84	return (
85	<Fragment>
86	<InspectorControls>
87	<PanelBody title={__('Settings', 'elasticpress')}>
88	<FacetControl onChange={onChangeFacet} value={facet} />
89	{type === 'meta' ? (
90	<FacetSearchPlaceholderControl
91	onChange={onChangeSearchPlaceholder}
92	value={searchPlaceholder}
93	/>
94	) : null}
95	<FacetDisplayCountControl
96	checked={displayCount}
97	onChange={onChangeDisplayCount}
98	/>
99	<FacetOrderControl onChange={onChangeOrder} orderby={orderby} order={order} />
100	</PanelBody>
101	</InspectorControls>
102	<div {...blockProps}>
103	{facet ? (
104	<Disabled>
105	<ServerSideRender
106	attributes={{
107	displayCount,
108	facet,
109	isPreview: true,
110	orderby,
111	order,
112	searchPlaceholder,
113	type,
114	}}
115	block={name}
116	EmptyResponsePlaceholder={EmptyResponsePlaceholder}
117	LoadingResponsePlaceholder={LoadingResponsePlaceholder}
118	skipBlockSupportAttributes
119	/>
120	</Disabled>
121	) : (
122	<Placeholder icon={icon} label={title}>
123	<FacetControl onChange={onChangeFacet} value={facet} />
124	</Placeholder>
125	)}
126	</div>
127	</Fragment>
128	);
129	};
130