curver/functions/kirki/packages/kirki-framework/control-slider/src/KirkiSliderControl.js

import KirkiSliderForm from './KirkiSliderForm';

/**
 * KirkiSliderControl.
 *
 * Global objects brought:
 * - wp
 * - jQuery
 * - React
 * - ReactDOM
 *
 * @class
 * @augments wp.customize.Control
 * @augments wp.customize.Class
 */
const KirkiSliderControl = wp.customize.Control.extend({

	/**
	 * Initialize.
	 *
	 * @param {string} id - Control ID.
	 * @param {object} params - Control params.
	 */
	initialize: function (id, params) {
		const control = this;

		// Bind functions to this control context for passing as React props.
		control.setNotificationContainer = control.setNotificationContainer.bind(control);

		wp.customize.Control.prototype.initialize.call(control, id, params);

		// The following should be eliminated with <https://core.trac.wordpress.org/ticket/31334>.
		function onRemoved(removedControl) {
			if (control === removedControl) {
				control.destroy();
				control.container.remove();
				wp.customize.control.unbind('removed', onRemoved);
			}
		}
		wp.customize.control.bind('removed', onRemoved);
	},

	/**
	 * Set notification container and render.
	 *
	 * This is called when the React component is mounted.
	 *
	 * @param {Element} element - Notification container.
	 * @returns {void}
	 */
	setNotificationContainer: function setNotificationContainer(element) {
		const control = this;

		control.notifications.container = jQuery(element);
		control.notifications.render();
	},

	/**
	 * Render the control into the DOM.
	 *
	 * This is called from the Control#embed() method in the parent class.
	 *
	 * @returns {void}
	 */
	renderContent: function renderContent() {
		const control = this;

		ReactDOM.render(
			<KirkiSliderForm
				{...control.params}
				control={control}
				customizerSetting={control.setting}
				setNotificationContainer={control.setNotificationCotainer}
				value={control.params.value}
			/>,
			control.container[0]
		);

		if (false !== control.params.choices.allowCollapse) {
			control.container.addClass('allowCollapse');
		}
	},

	/**
	 * After control has been first rendered, start re-rendering when setting changes.
	 *
	 * React is able to be used here instead of the wp.customize.Element abstraction.
	 *
	 * @returns {void}
	 */
	ready: function ready() {
		const control = this;

		/**
		 * Update component value's state when customizer setting's value is changed.
		 */
		control.setting.bind((val) => {
			control.updateComponentState(val);
		});
	},

	/**
	 * This method will be overriden by the rendered component.
	 */
	updateComponentState: (val) => { },

	/**
	 * Handle removal/de-registration of the control.
	 *
	 * This is essentially the inverse of the Control#embed() method.
	 *
	 * @link https://core.trac.wordpress.org/ticket/31334
	 * @returns {void}
	 */
	destroy: function destroy() {
		const control = this;

		// Garbage collection: undo mounting that was done in the embed/renderContent method.
		ReactDOM.unmountComponentAtNode(control.container[0]);

		// Call destroy method in parent if it exists (as of #31334).
		if (wp.customize.Control.prototype.destroy) {
			wp.customize.Control.prototype.destroy.call(control);
		}
	}
});

export default KirkiSliderControl;