@shopgate/pwa-common/components/Widgets/index.js

Common library for the Shopgate Connect PWA.

function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Component}from'react';import PropTypes from'prop-types';import isEqual from'lodash/isEqual';import WidgetGrid from"./components/WidgetGrid";import shouldShowWidget from"./helpers/shouldShowWidget";var WIDGET_GRID_TYPE='@shopgate/commerce-widgets/widget-grid';var GRID_COLUMNS=12;// One grid row has 12 columns. // TODO: is it deprecated since css grid?
/**
 * Creates a grid wrapper for widget(s).
 * @param {string} key The unique key.
 * @param {Array} config Array of widgets to be placed in the grid.
 * @param {Array} components The component definitions for the widgets.
 * @returns {JSX} The wrapper.
 */var createGridWrapper=function createGridWrapper(key,config,components){return React.createElement(WidgetGrid,{key:key,config:config,components:components});};/**
 * The widgets component.
 */var Widgets=/*#__PURE__*/function(_Component){/**
   * @param {Object} props The component props.
   */function Widgets(props){var _this2;_classCallCheck(this,Widgets);_this2=_callSuper(this,Widgets,[props]);_this2.autoReloadInterval=undefined;if(_this2.hasSchedulableWidgets()){_this2.startAutoRerender();}return _this2;}/**
   * @param {Object} nextProps The next component props.
   * @return {JSX}
   */_inherits(Widgets,_Component);return _createClass(Widgets,[{key:"shouldComponentUpdate",value:function shouldComponentUpdate(nextProps){if(!isEqual(this.props.components,nextProps.components)){return true;}if(!isEqual(this.props.widgets,nextProps.widgets)){return true;}return false;}/**
   * Component will unmount lifecycle method.
   */},{key:"componentWillUnmount",value:function componentWillUnmount(){this.stopAutoRerender();}/**
   * Checks if any widget is schedulable.
   * @param {Array} widgets Array of widgets.
   * @returns {boolean}
   */},{key:"hasSchedulableWidgets",value:function hasSchedulableWidgets(){return(this.props.widgets||[]).some(function(widget){return widget.settings.plan;});}/**
   * Sets auto re-render.
   */},{key:"startAutoRerender",value:function startAutoRerender(){var _this3=this;var minutesToRoundedHour=60-new Date().getMinutes();var nextRerenderIn=minutesToRoundedHour*60000;this.autoReloadTimeout=setTimeout(function(){return _this3.doAutoRerender();},nextRerenderIn);}/**
   * Stops auto re-render. Must be called before component is unmounted to avoid
   * memory leak.
   */},{key:"stopAutoRerender",value:function stopAutoRerender(){clearTimeout(this.autoReloadTimeout);}/**
   * Forces re-render and sets another timeout for next cycle.
   */},{key:"doAutoRerender",value:function doAutoRerender(){this.forceUpdate();this.startAutoRerender();}/**
   * Create array of elements from widget configuration.
   * @returns {Array} Array of JSX elements.
   */},{key:"createArrayOfElements",value:function createArrayOfElements(){var _this$props=this.props,_this$props$widgets=_this$props.widgets,widgets=_this$props$widgets===void 0?[]:_this$props$widgets,components=_this$props.components;return widgets.filter(function(widget){return shouldShowWidget(widget.settings);}).map(function(widget,index){if(!components[widget.type]&&widget.type!==WIDGET_GRID_TYPE){return null;}var key="w".concat((widget===null||widget===void 0?void 0:widget.id)||index);if(widget.type===WIDGET_GRID_TYPE){// If it's a grid just create it and pass the child widgets.
return createGridWrapper(key,widget.settings.widgets,components);}if(widget.height){// If it has a definite height wrap the widget in a grid.
return createGridWrapper(key,[_extends({},widget,{col:0,row:0,width:GRID_COLUMNS})],components);}// In all other cases just create and return the widget component.
return React.createElement(components[widget.type],_extends({},widget,{key:key}));});}/**
   * @return {JSX}
   */},{key:"render",value:function render(){var _this$props2=this.props,widgets=_this$props2.widgets,components=_this$props2.components;if(!widgets){return null;}return React.createElement("div",{className:"common__widgets"},this.createArrayOfElements(widgets,components));}}]);}(Component);_defineProperty(Widgets,"defaultProps",{components:null,widgets:null});export default Widgets;