kendo-ui-react-jquery-fixed-events-scheduler/dist/index.js

The Kendo UI for jQuery Scheduler widget wrapped as a React component.

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _kendoScheduler = require('kendo/js/kendo.scheduler.js');

var _kendoScheduler2 = _interopRequireDefault(_kendoScheduler);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _deepDiff = require('deep-diff');

var _deepDiff2 = _interopRequireDefault(_deepDiff);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } // import/require dependencies


// create a React component, that is a wrapper for a Kendo UI widget
var KendoScheduler = _react2['default'].createClass({
	displayName: 'KendoScheduler',


	//component is in the DOM, so do stuff to it in this callback
	componentDidMount: function () {
		function componentDidMount() {
			//get, child element node for this component
			var elementNode = _reactDom2['default'].findDOMNode(this);

			//determine if a selector was passed on which to invoke the KUI widget
			if (this.props.selector) {
				elementNode = elementNode.querySelector(this.props.selector);
			}

			//instantiate and save reference to the Kendo UI widget on elementNode
			//note I am not using jQuery plugin to instantiate, don't want to wait for namespace on $.fn
			this.widgetInstance = new _kendoScheduler2['default'].ui.Scheduler(elementNode, this.props.options);

			//if props are avaliable for events, triggers, unbind events, or methods make it happen now
			this.props.events ? this.bindEventsToKendoWidget(this.props.events) : null;
			this.props.methods ? this.callKendoWidgetMethods(this.props.methods) : null;
			this.props.triggerEvents ? this.triggerKendoWidgetEvents(this.props.triggerEvents) : null;
		}

		return componentDidMount;
	}(),

	//instance methods for updating widget
	triggerKendoWidgetEvents: function () {
		function triggerKendoWidgetEvents(events) {
			events.forEach(function (event) {
				//loop over events, and trigger
				this.widgetInstance.trigger(event);
			}, this);
		}

		return triggerKendoWidgetEvents;
	}(),
	bindEventsToKendoWidget: function () {
		function bindEventsToKendoWidget(events) {
			Object.keys(events).forEach(function (event) {
				//loop over events and bind
				this.widgetInstance.bind(event, events[event]);
			}, this);
		}

		return bindEventsToKendoWidget;
	}(),
	unbindEventsToKendoWidget: function () {
		function unbindEventsToKendoWidget(events) {
			events.forEach(function (event) {
				//loop ove revents and unbind
				this.widgetInstance.unbind(event);
			}, this);
		}

		return unbindEventsToKendoWidget;
	}(),
	callKendoWidgetMethods: function () {
		function callKendoWidgetMethods(methods) {
			Object.keys(methods).forEach(function (method) {
				var _widgetInstance;

				//loop over methods and call
				(_widgetInstance = this.widgetInstance)[method].apply(_widgetInstance, _toConsumableArray(methods[method]));
			}, this);
		}

		return callKendoWidgetMethods;
	}(),

	//not called on inital render, but whenever parent state changes this is called
	componentWillReceiveProps: function () {
		function componentWillReceiveProps(nextProps) {
			if (nextProps.unbindEvents) {
				// if(deepDiff(nextProps.unbindEvents,this.props.unbindEvents)){
				this.unbindEventsToKendoWidget(nextProps.unbindEvents);
				// }
			}

			//always update the widget with nextProp changes if avaliable
			if (nextProps.events) {
				this.bindEventsToKendoWidget(nextProps.events);
			}

			if (this.widgetInstance.setOptions) {
				if (nextProps.options) {
					this.widgetInstance.setOptions(nextProps.options);
				}
			}

			//try and determine if any of the nextProps have changed, and if so, update the widget
			if (nextProps.methods) {
				if ((0, _deepDiff2['default'])(nextProps.methods, this.props.methods)) {
					this.callKendoWidgetMethods(nextProps.methods);
				}
			}

			if (nextProps.triggerEvents) {
				if ((0, _deepDiff2['default'])(nextProps.triggerEvents, this.props.triggerEvents)) {
					this.triggerKendoWidgetEvents(nextProps.triggerEvents);
				}
			}
		}

		return componentWillReceiveProps;
	}(),

	//don't run render again, create widget once, then leave it alone
	shouldComponentUpdate: function () {
		function shouldComponentUpdate() {
			return false;
		}

		return shouldComponentUpdate;
	}(),

	//destory it, when the component is unmouted
	componentWillUnmount: function () {
		function componentWillUnmount() {
			this.widgetInstance.destroy();
		}

		return componentWillUnmount;
	}(),

	//use the passed in React nodes or a plain <div> if no React child nodes are defined
	render: function () {
		function render() {
			return this.props.children ? this.props.children : _react2['default'].createElement('div', null);
		}

		return render;
	}()
});

//export the wrapped component
exports['default'] = KendoScheduler;