react-promise-tracker
Version:
Simple React Promise tracker Hook/HOC helper to add loading spinner indicators
448 lines (423 loc) • 22.9 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("react"));
else if(typeof define === 'function' && define.amd)
define(["react"], factory);
else if(typeof exports === 'object')
exports["reactPromiseTracker"] = factory(require("react"));
else
root["reactPromiseTracker"] = factory(root["react"]);
})(self, (__WEBPACK_EXTERNAL_MODULE__156__) => {
return /******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 156:
/***/ ((module) => {
module.exports = __WEBPACK_EXTERNAL_MODULE__156__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"manuallyDecrementPromiseCounter": () => (/* reexport */ manuallyDecrementPromiseCounter),
"manuallyIncrementPromiseCounter": () => (/* reexport */ manuallyIncrementPromiseCounter),
"manuallyResetPromiseCounter": () => (/* reexport */ manuallyResetPromiseCounter),
"promiseTrackerHoc": () => (/* reexport */ promiseTrackerHoc),
"trackPromise": () => (/* reexport */ trackPromise),
"usePromiseTracker": () => (/* reexport */ usePromiseTracker)
});
;// CONCATENATED MODULE: ./src/tinyEmmiter.js
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
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); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
// Based on:
// https://github.com/scottcorgan/tiny-emitter
// class based
var Emitter = /*#__PURE__*/function () {
function Emitter() {
_classCallCheck(this, Emitter);
}
_createClass(Emitter, [{
key: "emit",
value: function emit(event) {
if (!event) return this;
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
var _iterator = _createForOfIteratorHelper(this._e(event)),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var fn = _step.value;
fn.apply(fn.ctx, [].concat(args));
if (fn.off_event == true) this.off(event, fn);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return this;
}
}, {
key: "on",
value: function on(event, fn, ctx) {
if (!event) return this;
fn.ctx = ctx;
this._e(event).push(fn);
return this;
}
}, {
key: "once",
value: function once(event, fn, ctx) {
if (!event) return this;
fn.ctx = ctx;
fn.off_event = true;
return this.on(event, fn);
}
}, {
key: "off",
value: function off(event, fn) {
if (!event) return this;
if (!this[event]) return this;
var e = this._e(event);
if (!fn) {
delete this[event];
return this;
}
this[event] = e.filter(function (f) {
return f != fn;
});
return this;
}
}, {
key: "_e",
value: function _e(e) {
return this[e] || (this[e] = []);
}
}]);
return Emitter;
}();
;// CONCATENATED MODULE: ./src/constants.js
var defaultArea = 'default-area';
;// CONCATENATED MODULE: ./src/trackPromise.js
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; }
var emitter = new Emitter();
var promiseCounterUpdateEventId = "promise-counter-update";
var counter = _defineProperty({}, defaultArea, 0);
var getCounter = function getCounter(area) {
return counter[area];
};
var trackPromise = function trackPromise(promise, area) {
area = area || defaultArea;
incrementPromiseCounter(area);
var onResolveHandler = function onResolveHandler() {
return decrementPromiseCounter(area);
};
promise.then(onResolveHandler, onResolveHandler);
return promise;
};
var incrementPromiseCounter = function incrementPromiseCounter(area) {
incrementCounter(area);
var promiseInProgress = anyPromiseInProgress(area);
emitter.emit(promiseCounterUpdateEventId, promiseInProgress, area);
};
var incrementCounter = function incrementCounter(area) {
if (Boolean(counter[area])) {
counter[area]++;
} else {
counter[area] = 1;
}
};
var anyPromiseInProgress = function anyPromiseInProgress(area) {
return counter[area] > 0;
};
var decrementPromiseCounter = function decrementPromiseCounter(area) {
counter[area] > 0 && decrementCounter(area);
var promiseInProgress = anyPromiseInProgress(area);
emitter.emit(promiseCounterUpdateEventId, promiseInProgress, area);
};
var decrementCounter = function decrementCounter(area) {
counter[area]--;
};
var manuallyResetPromiseCounter = function manuallyResetPromiseCounter(area) {
area = area || defaultArea;
counter[area] = 0;
emitter.emit(promiseCounterUpdateEventId, false, area);
};
var manuallyDecrementPromiseCounter = function manuallyDecrementPromiseCounter(area) {
area = area || defaultArea;
decrementPromiseCounter(area);
};
var manuallyIncrementPromiseCounter = function manuallyIncrementPromiseCounter(area) {
area = area || defaultArea;
incrementPromiseCounter(area);
};
// TODO: Enhancement we could catch here errors and throw an Event in case there's an HTTP Error
// then the consumer of this event can be listening and decide what to to in case of error
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(156);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
;// CONCATENATED MODULE: ./src/setupConfig.js
var defaultConfig = {
area: defaultArea,
delay: 0
};
// Defensive config setup, fulfill default values
var setupConfig = function setupConfig(outerConfig) {
return {
area: !outerConfig || !outerConfig.area ? defaultArea : outerConfig.area,
delay: !outerConfig || !outerConfig.delay ? 0 : outerConfig.delay
};
};
;// CONCATENATED MODULE: ./src/trackerHoc.js
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 trackerHoc_classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function trackerHoc_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 trackerHoc_createClass(Constructor, protoProps, staticProps) { if (protoProps) trackerHoc_defineProperties(Constructor.prototype, protoProps); if (staticProps) trackerHoc_defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
// Props:
// config: {
// area: // can be null|undefined|'' (will default to DefaultArea) or area name
// delay: // Wait Xms to display the spinner (fast connections scenario avoid blinking)
// default value 0ms
// }
var promiseTrackerHoc = function promiseTrackerHoc(ComponentToWrap) {
return /*#__PURE__*/function (_Component) {
_inherits(promiseTrackerComponent, _Component);
var _super = _createSuper(promiseTrackerComponent);
function promiseTrackerComponent(props) {
var _this;
trackerHoc_classCallCheck(this, promiseTrackerComponent);
_this = _super.call(this, props);
_this.state = {
promiseInProgress: false,
internalPromiseInProgress: false,
config: setupConfig(props.config)
};
_this.notifyPromiseInProgress = _this.notifyPromiseInProgress.bind(_assertThisInitialized(_this));
_this.updateProgress = _this.updateProgress.bind(_assertThisInitialized(_this));
_this.subscribeToCounterUpdate = _this.subscribeToCounterUpdate.bind(_assertThisInitialized(_this));
return _this;
}
trackerHoc_createClass(promiseTrackerComponent, [{
key: "notifyPromiseInProgress",
value: function notifyPromiseInProgress() {
var _this2 = this;
this.state.config.delay === 0 ? this.setState({
promiseInProgress: true
}) : setTimeout(function () {
var progress = Boolean(getCounter(_this2.state.config.area) > 0);
_this2.setState({
promiseInProgress: progress
});
}, this.state.config.delay);
}
}, {
key: "updateProgress",
value: function updateProgress(progress, afterUpdateCallback) {
this.setState({
internalPromiseInProgress: progress
}, afterUpdateCallback);
!progress ? this.setState({
promiseInProgress: false
}) : this.notifyPromiseInProgress();
}
}, {
key: "subscribeToCounterUpdate",
value: function subscribeToCounterUpdate() {
var _this3 = this;
emitter.on(promiseCounterUpdateEventId, function (anyPromiseInProgress, area) {
if (_this3.state.config.area === area) {
_this3.updateProgress(anyPromiseInProgress);
}
});
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.updateProgress(Boolean(getCounter(this.state.config.area) > 0), this.subscribeToCounterUpdate);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
emitter.off(promiseCounterUpdateEventId);
}
}, {
key: "render",
value: function render() {
return /*#__PURE__*/external_react_default().createElement(ComponentToWrap, _extends({}, this.props, {
config: this.state.config,
promiseInProgress: this.state.promiseInProgress
}));
}
}]);
return promiseTrackerComponent;
}(external_react_.Component);
};
;// CONCATENATED MODULE: ./src/trackerHook.js
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || trackerHook_unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function trackerHook_unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return trackerHook_arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return trackerHook_arrayLikeToArray(o, minLen); }
function trackerHook_arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
var usePromiseTracker = function usePromiseTracker() {
var outerConfig = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultConfig;
var isMounted = external_react_default().useRef(false);
external_react_default().useEffect(function () {
isMounted.current = true;
return function () {
return isMounted.current = false;
};
}, []);
// Included in state, it will be evaluated just the first time,
// TODO: discuss if this is a good approach
// We need to apply defensive programming, ensure area and delay default to secure data
// cover cases like not all params informed, set secure defaults
var _React$useState = external_react_default().useState(setupConfig(outerConfig)),
_React$useState2 = _slicedToArray(_React$useState, 1),
config = _React$useState2[0];
// Edge case, when we start the application if we are loading just onComponentDidMount
// data, event emitter could have already emitted the event but subscription is not yet
// setup
external_react_default().useEffect(function () {
if (isMounted.current && config && config.area && getCounter(config.area) > 0) {
setInternalPromiseInProgress(true);
setPromiseInProgress(true);
}
}, [config]);
// Internal will hold the current value
var _React$useState3 = external_react_default().useState(false),
_React$useState4 = _slicedToArray(_React$useState3, 2),
internalPromiseInProgress = _React$useState4[0],
setInternalPromiseInProgress = _React$useState4[1];
// Promise in progress is 'public', it can be affected by the _delay_ parameter
// it may not show the current state
var _React$useState5 = external_react_default().useState(false),
_React$useState6 = _slicedToArray(_React$useState5, 2),
promiseInProgress = _React$useState6[0],
setPromiseInProgress = _React$useState6[1];
// We need to hold a ref to latestInternal, to check the real value on
// callbacks (if not we would get always the same value)
// more info: https://overreacted.io/a-complete-guide-to-useeffect/
var latestInternalPromiseInProgress = external_react_default().useRef(internalPromiseInProgress);
var notifyPromiseInProgress = function notifyPromiseInProgress() {
!config || !config.delay || config.delay === 0 ? setPromiseInProgress(true) : setTimeout(function () {
// Check here ref to internalPromiseInProgress
if (isMounted.current && latestInternalPromiseInProgress.current) {
setPromiseInProgress(true);
}
}, config.delay);
};
var updatePromiseTrackerStatus = function updatePromiseTrackerStatus(anyPromiseInProgress, areaAffected) {
if (isMounted.current && config.area === areaAffected) {
setInternalPromiseInProgress(anyPromiseInProgress);
// Update the ref object as well, we will check it when we need to
// cover the _delay_ case (setTimeout)
latestInternalPromiseInProgress.current = anyPromiseInProgress;
if (!anyPromiseInProgress) {
setPromiseInProgress(false);
} else {
notifyPromiseInProgress();
}
}
};
external_react_default().useEffect(function () {
latestInternalPromiseInProgress.current = internalPromiseInProgress;
emitter.on(promiseCounterUpdateEventId, updatePromiseTrackerStatus);
return function () {
return emitter.off(promiseCounterUpdateEventId, updatePromiseTrackerStatus);
};
}, []);
return {
promiseInProgress: promiseInProgress
};
};
;// CONCATENATED MODULE: ./src/index.js
})();
/******/ return __webpack_exports__;
/******/ })()
;
});