Scrollsequence – Cinematic Scroll Image Animation Plugin / 1.5.5

Scrollsequence – Cinematic Scroll Image Animation Plugin v1.5.5

scrollsequence / includes / carbonfields / htmlburger / carbon-fields / packages / blocks / components / server-side-render / index.js

index.js in Scrollsequence – Cinematic Scroll Image Animation Plugin 1.5.5, at includes/carbonfields/htmlburger/carbon-fields/packages/blocks/components/server-side-render/index.js

155 lines 3.3 KB

Raw Download Zip

1	/**
2	* External dependencies.
3	*/
4	import apiFetch from '@wordpress/api-fetch';
5	import { Component, RawHTML } from '@wordpress/element';
6	import { Placeholder, Spinner } from '@wordpress/components';
7	import { withSelect } from '@wordpress/data';
8	import { serialize } from '@wordpress/blocks';
9	import { __, sprintf } from '@wordpress/i18n';
10	import { isEqual, debounce } from 'lodash';
11
12	/**
13	* This component is slightly modified version of the `ServerSideRender` component
14	* that comes by default with Gutenberg.
15	*
16	* @see https://github.com/WordPress/gutenberg/tree/master/packages/components/src/server-side-render
17	*/
18	class ServerSideRender extends Component {
19	/**
20	* Local state.
21	*
22	* @type {Object}
23	*/
24	state = {
25	response: null
26	};
27
28	/**
29	* Lifecycle hook.
30	*
31	* @return {void}
32	*/
33	componentDidMount() {
34	this.isStillMounted = true;
35
36	// Do the initial rendering.
37	this.fetch( this.props );
38
39	// Only debounce once the initial fetch occurs to ensure that the first
40	// renders show data as soon as possible.
41	this.fetch = debounce( this.fetch, 500 );
42	}
43
44	/**
45	* Lifecycle hook.
46	*
47	* @return {void}
48	*/
49	componentWillUnmount() {
50	this.isStillMounted = false;
51	}
52
53	/**
54	* Lifecycle hook.
55	*
56	* @param {Object} prevProps
57	* @return {void}
58	*/
59	componentDidUpdate( prevProps ) {
60	if ( ! isEqual( prevProps, this.props ) ) {
61	this.fetch( this.props );
62	}
63	}
64
65	/**
66	* Fetch the preview of the block.
67	*
68	* @param {Object} props
69	* @return {void}
70	*/
71	fetch( props ) {
72	if ( ! this.isStillMounted ) {
73	return;
74	}
75
76	if ( null !== this.state.response ) {
77	this.setState( { response: null } );
78	}
79
80	const { block } = props;
81
82	// Store the latest fetch request so that when we process it, we can
83	// check if it is the current request, to avoid race conditions on slow networks.
84	const fetchRequest = this.currentFetchRequest = apiFetch( {
85	method: 'post',
86	path: '/carbon-fields/v1/block-renderer',
87	data: {
88	name: block.name,
89	content: serialize( [ block ] )
90	}
91	} )
92	.then( ( response ) => {
93	if ( this.isStillMounted && fetchRequest === this.currentFetchRequest && response && response.rendered ) {
94	this.setState( {
95	response: response.rendered
96	} );
97	}
98	} )
99	.catch( ( error ) => {
100	if ( this.isStillMounted && fetchRequest === this.currentFetchRequest ) {
101	this.setState( {
102	response: {
103	error: true,
104	errorMsg: error.message
105	}
106	} );
107	}
108	} );
109	}
110
111	/**
112	* Render the component.
113	*
114	* @return {Object}
115	*/
116	render() {
117	const { response } = this.state;
118	const { className } = this.props;
119
120	if ( ! response ) {
121	return (
122	<Placeholder className={ className }>
123	<Spinner />
124	</Placeholder>
125	);
126	} else if ( response.error ) {
127	return (
128	<Placeholder className={ className }>
129	{ sprintf( __( 'Error loading block: %s', 'carbon-fields-ui' ), response.errorMsg ) }
130	</Placeholder>
131	);
132	} else if ( ! response.length ) {
133	return (
134	<Placeholder className={ className }>
135	{ __( 'No results found.', 'carbon-fields-ui' ) }
136	</Placeholder>
137	);
138	}
139
140	return (
141	<RawHTML key="html" className={ className }>
142	{ response }
143	</RawHTML>
144	);
145	}
146	}
147
148	export default withSelect( ( select, { clientId } ) => {
149	const { getBlock } = select( 'core/block-editor' );
150
151	return {
152	block: getBlock( clientId )
153	};
154	} )( ServerSideRender );
155