@makotot/ghostui - npm Package Compare versions

Comparing version 1.1.2 to 2.0.0

dist/ghostui.cjs.development.js

@@ -30,88 +30,195 @@ 'use strict';
 
-var calc = function calc(_ref) {
-  var value = _ref.value,
-      total = _ref.total;
-  var result = value / total;
+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);
+  }
+}
 
-  if (isNaN(result)) {
-    return 0;
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var ReadingProgressCore = function ReadingProgressCore() {};
+
+var ReadingProgressWindow = /*#__PURE__*/function (_ReadingProgressCore) {
+  _inheritsLoose(ReadingProgressWindow, _ReadingProgressCore);
+
+  function ReadingProgressWindow() {
+    var _this;
+
+    _this = _ReadingProgressCore.apply(this, arguments) || this;
+
+    _this.measureWrapperHeight = function () {
+      var targetElHeihgt = document.body.getBoundingClientRect().height || 0;
+      return Math.round(targetElHeihgt - _this.getViewportHeight());
+    };
+
+    _this.getViewportHeight = function () {
+      return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    };
+
+    _this.getProgress = function () {
+      var top = window.pageYOffset || document.documentElement.scrollTop;
+      return Math.round(top / _this.measureWrapperHeight() * 100);
+    };
+
+    return _this;
   }
 
-  return result * 100;
-};
+  _createClass(ReadingProgressWindow, [{
+    key: "rootSelector",
+    get: function get() {
+      return window;
+    }
+  }]);
 
-var useReadingProgress = function useReadingProgress(props) {
-  var getEl = react.useCallback(function () {
-    var target = props != null && props.targetEl ? document.querySelector(props.targetEl) : document.body;
-    var root = props != null && props.rootEl ? document.querySelector(props.rootEl) : window;
-    return {
-      target: target,
-      root: root
+  return ReadingProgressWindow;
+}(ReadingProgressCore);
+
+var ReadingProgressElement = /*#__PURE__*/function (_ReadingProgressCore2) {
+  _inheritsLoose(ReadingProgressElement, _ReadingProgressCore2);
+
+  function ReadingProgressElement(_ref) {
+    var _this2;
+
+    var rootEl = _ref.rootEl,
+        targetEl = _ref.targetEl;
+    _this2 = _ReadingProgressCore2.call(this) || this;
+
+    _this2.measureWrapperHeight = function () {
+      var _this2$targetEl;
+
+      var targetElHeight = ((_this2$targetEl = _this2.targetEl) == null ? void 0 : _this2$targetEl.getBoundingClientRect().height) || 0;
+      return Math.round(targetElHeight - _this2.getViewportHeight());
     };
-  }, [props]);
-  var el = react.useRef();
-  react.useEffect(function () {
-    el.current = getEl();
-  }, [getEl]);
-  var measureViewportHeight = react.useCallback(function () {
-    var _el$current;
 
-    return props != null && props.rootEl ? (_el$current = el.current) == null ? void 0 : _el$current.root.clientHeight : Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-  }, [props, el]);
-  var maxRef = react.useRef(0);
-  var measure = react.useCallback(function () {
-    var _el$current2, _el$current2$target;
+    _this2.getViewportHeight = function () {
+      var _this2$rootEl;
 
-    var targetHeight = ((_el$current2 = el.current) == null ? void 0 : (_el$current2$target = _el$current2.target) == null ? void 0 : _el$current2$target.getBoundingClientRect().height) || 0;
-    var viewportHeight = measureViewportHeight();
-    maxRef.current = Math.round(targetHeight - viewportHeight);
-  }, [measureViewportHeight]);
+      return ((_this2$rootEl = _this2.rootEl) == null ? void 0 : _this2$rootEl.clientHeight) || 0;
+    };
 
-  var _useState = react.useState(0),
+    _this2.getProgress = function () {
+      var _this2$rootEl2;
+
+      var top = ((_this2$rootEl2 = _this2.rootEl) == null ? void 0 : _this2$rootEl2.scrollTop) || 0;
+      return Math.round(top / _this2.measureWrapperHeight() * 100);
+    };
+
+    _this2.rootEl = document.querySelector(rootEl);
+    _this2.targetEl = document.querySelector(targetEl);
+    return _this2;
+  }
+
+  _createClass(ReadingProgressElement, [{
+    key: "rootSelector",
+    get: function get() {
+      return this.rootEl;
+    }
+  }]);
+
+  return ReadingProgressElement;
+}(ReadingProgressCore);
+
+var ReadingProgress = /*#__PURE__*/function () {
+  function ReadingProgress(_ref2) {
+    var _this3 = this;
+
+    var rootEl = _ref2.rootEl,
+        targetEl = _ref2.targetEl;
+
+    this.getViewportHeight = function () {
+      return _this3.rp.getViewportHeight();
+    };
+
+    this.getProgress = function () {
+      return _this3.rp.getProgress();
+    };
+
+    this.rp = typeof rootEl === 'string' && typeof targetEl === 'string' ? new ReadingProgressElement({
+      rootEl: rootEl,
+      targetEl: targetEl
+    }) : new ReadingProgressWindow();
+  }
+
+  _createClass(ReadingProgress, [{
+    key: "rootSelector",
+    get: function get() {
+      return this.rp.rootSelector;
+    }
+  }]);
+
+  return ReadingProgress;
+}();
+
+var useReadingProgress = function useReadingProgress(props) {
+  var _rp$current;
+
+  var rp = react.useRef();
+  react.useEffect(function () {
+    rp.current = new ReadingProgress({
+      rootEl: props == null ? void 0 : props.rootEl,
+      targetEl: props == null ? void 0 : props.targetEl
+    });
+  }, [props]);
+
+  var _useState = react.useState(((_rp$current = rp.current) == null ? void 0 : _rp$current.getProgress()) || 0),
       value = _useState[0],
-      updateValue = _useState[1];
+      updateProgressValue = _useState[1];
 
   var update = react.useCallback(function () {
-    var _el$current3;
+    var _rp$current2;
 
-    var value = props != null && props.rootEl ? (_el$current3 = el.current) == null ? void 0 : _el$current3.root.scrollTop : window.pageYOffset || document.documentElement.scrollTop;
-    updateValue(value);
-  }, [el, props]);
-  var handleResize = react.useCallback(debounce(function () {
-    measure();
-  }), [measure]);
-  var handleScroll = react.useCallback(debounce(function () {
+    updateProgressValue(((_rp$current2 = rp.current) == null ? void 0 : _rp$current2.getProgress()) || 0);
+  }, []);
+  var debounceUpdate = react.useCallback(debounce(function () {
     update();
-  }), [update]);
+  }), []);
   react.useEffect(function () {
-    var _el$current4;
+    var _rp$current3;
 
-    if ((_el$current4 = el.current) != null && _el$current4.root) {
-      el.current.root.addEventListener('scroll', handleScroll);
+    if ((_rp$current3 = rp.current) != null && _rp$current3.rootSelector) {
+      rp.current.rootSelector.addEventListener('scroll', debounceUpdate);
     }
 
-    window.addEventListener('resize', handleResize);
-    measure();
+    window.addEventListener('resize', debounceUpdate);
     update();
     return function () {
-      var _el$current5;
+      var _rp$current4;
 
-      if ((_el$current5 = el.current) != null && _el$current5.root) {
-        el.current.root.removeEventListener('scroll', handleScroll);
+      if ((_rp$current4 = rp.current) != null && _rp$current4.rootSelector) {
+        rp.current.rootSelector.removeEventListener('scroll', debounceUpdate);
       }
 
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', debounceUpdate);
     };
-  }, [handleScroll, handleResize, measure, update]);
+  }, [update, debounceUpdate]);
   return {
-    value: value,
-    max: maxRef.current,
-    percentageOfValue: calc({
-      value: value,
-      total: maxRef.current
-    })
+    value: value
   };
 };
 
-var ReadingProgress = function ReadingProgress(_ref) {
+var ReadingProgress$1 = function ReadingProgress(_ref) {
   var targetEl = _ref.targetEl,
@@ -127,34 +234,2 @@ rootEl = _ref.rootEl,
 
-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 _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 var Root = function Root() {};
@@ -533,3 +608,3 @@
 exports.Pagination = Pagination$1;
-exports.ReadingProgress = ReadingProgress;
+exports.ReadingProgress = ReadingProgress$1;
 exports.Scrollspy = Scrollspy;
@@ -536,0 +611,0 @@ exports.usePagination = usePagination;

dist/ghostui.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=function(e){var t=null,n=function(t){return function(){e.apply(void 0,t)}};return function(){t&&cancelAnimationFrame(t);for(var e=arguments.length,r=new Array(e),o=0;o<e;o++)r[o]=arguments[o];t=requestAnimationFrame(n(r))}},n=function(n){var r=e.useCallback((function(){return{target:null!=n&&n.targetEl?document.querySelector(n.targetEl):document.body,root:null!=n&&n.rootEl?document.querySelector(n.rootEl):window}}),[n]),o=e.useRef();e.useEffect((function(){o.current=r()}),[r]);var u,i,l=e.useCallback((function(){var e;return null!=n&&n.rootEl?null==(e=o.current)?void 0:e.root.clientHeight:Math.max(document.documentElement.clientHeight,window.innerHeight||0)}),[n,o]),c=e.useRef(0),s=e.useCallback((function(){var e,t,n=(null==(e=o.current)||null==(t=e.target)?void 0:t.getBoundingClientRect().height)||0,r=l();c.current=Math.round(n-r)}),[l]),a=e.useState(0),g=a[0],d=a[1],f=e.useCallback((function(){var e,t=null!=n&&n.rootEl?null==(e=o.current)?void 0:e.root.scrollTop:window.pageYOffset||document.documentElement.scrollTop;d(t)}),[o,n]),P=e.useCallback(t((function(){s()})),[s]),h=e.useCallback(t((function(){f()})),[f]);return e.useEffect((function(){var e;return null!=(e=o.current)&&e.root&&o.current.root.addEventListener("scroll",h),window.addEventListener("resize",P),s(),f(),function(){var e;null!=(e=o.current)&&e.root&&o.current.root.removeEventListener("scroll",h),window.removeEventListener("resize",P)}}),[h,P,s,f]),{value:g,max:c.current,percentageOfValue:(u={value:g,total:c.current},i=u.value/u.total,isNaN(i)?0:100*i)}};function r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function o(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}function u(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var i=function(){},l=function(e){function t(t){var n;return(n=e.call(this)||this).el=t,n}u(t,e);var n=t.prototype;return n.isScrolledToBottom=function(){return this.scrollTop+this.outerHeight>=this.scrollHeight},n.registerScrollEvent=function(e){this.el.addEventListener("scroll",e)},n.unregisterScrollEvent=function(e){this.el.removeEventListener("scroll",e)},t.create=function(e){var n=document.querySelector(e);if(!n)throw new Error("element is not found.");return new t(n)},o(t,[{key:"top",get:function(){return this.el.getBoundingClientRect().top}},{key:"outerHeight",get:function(){return this.el.getBoundingClientRect().height}},{key:"scrollTop",get:function(){return this.el.scrollTop}},{key:"scrollHeight",get:function(){return this.el.scrollHeight}}]),t}(i),c=function(e){function t(){return e.apply(this,arguments)||this}u(t,e);var n=t.prototype;return n.isScrolledToBottom=function(){return this.scrollTop+this.outerHeight>=this.scrollHeight},n.registerScrollEvent=function(e){document.addEventListener("scroll",e)},n.unregisterScrollEvent=function(e){document.removeEventListener("scroll",e)},t.create=function(){return new t},o(t,[{key:"outerHeight",get:function(){return window.innerHeight}},{key:"scrollTop",get:function(){return document.documentElement.scrollTop}},{key:"scrollHeight",get:function(){return document.documentElement.scrollHeight}}]),t}(i),s=function(){function e(){}return e.create=function(e){return e?l.create(e):c.create()},e}(),a=function(t){var n=t.sectionRefs,r=t.rootSelector,o=t.offset,u=void 0===o?0:o,i=e.useRef(null);e.useEffect((function(){i.current=s.create(r)}),[r]);var c=e.useCallback((function(){return!!i.current&&i.current.isScrolledToBottom()}),[i]),a=e.useCallback((function(e){if(!i.current)return!1;var t=i.current.scrollTop,n=t+i.current.outerHeight,r=e.getBoundingClientRect(),o=i.current instanceof l?t+r.top-i.current.top+u:t+r.top+u;return[o<n,o+r.height>t].every((function(e){return e}))}),[i,u]),g=e.useCallback((function(){return n.map((function(e){return!!e.current&&a(e.current)}))}),[a,n]),d=e.useState([]),f=d[0],P=d[1],h=e.useMemo((function(){return f.findIndex((function(e){return e}))}),[f]),v=e.useCallback((function(){var e=c()?[].concat(new Array(n.length-1).fill(!1).map((function(e){return e})),[!0]):g();P(e)}),[g,c,n]);return e.useEffect((function(){return v(),i.current&&i.current.registerScrollEvent(v),function(){i.current&&i.current.unregisterScrollEvent(v)}}),[v]),{elementsStatusInViewport:f,currentElementIndexInViewport:h}},g=function(e){var t=this,n=e.currentPage,r=e.totalPage,o=e.middlePagesSiblingCount,u=void 0===o?2:o,i=e.edgePageCount,l=void 0===i?2:i;this.getAllPages=function(){return[].concat(Array(t.totalPage)).fill(1).map((function(e,t){return t+1}))},this.getMiddlePageCount=function(){return 2*t.middlePagesSiblingCount+1},this.isReachedToFirst=function(){return t.currentPage<=t.middlePagesSiblingCount},this.isReachedToLast=function(){return t.currentPage+t.middlePagesSiblingCount>=t.totalPage},this.getAllPreviousPages=function(){return t.getAllPages().slice(0,t.getMiddlePages()[0]-1)},this.getAllNextPages=function(){var e=t.getAllPages(),n=t.getMiddlePages();return e.slice(n[n.length-1],e[e.length])},this.hasPreviousPage=function(){return t.currentPage>1},this.hasNextPage=function(){return t.totalPage>t.currentPage},this.getMiddlePages=function(){var e=t.getAllPages(),n=t.getMiddlePageCount();return t.isReachedToFirst()?e.slice(0,n):t.isReachedToLast()?e.slice(-n):e.slice(t.currentPage-t.middlePagesSiblingCount-1,t.currentPage+t.middlePagesSiblingCount)},this.getPreviousPages=function(){return t.isReachedToFirst()||t.getAllPreviousPages().length<1?[]:t.getAllPages().slice(0,t.edgePageCount).filter((function(e){return!t.getMiddlePages().includes(e)}))},this.getNextPages=function(){if(t.isReachedToLast())return[];if(t.getAllNextPages().length<1)return[];var e=t.getAllPages();return e.slice(e.length-t.edgePageCount,e.length).filter((function(e){return!t.getMiddlePages().includes(e)}))},this.isPreviousTruncable=function(){return t.getAllPreviousPages().filter((function(e){return!t.getPreviousPages().includes(e)&&!t.getMiddlePages().includes(e)})).length>0},this.isNextTruncable=function(){return t.getAllNextPages().filter((function(e){return!t.getNextPages().includes(e)&&!t.getMiddlePages().includes(e)})).length>0},this.currentPage=n,this.totalPage=r,this.middlePagesSiblingCount=u,this.edgePageCount=l},d=function(t){var n=t.totalPage,r=t.currentPage,o=t.middlePagesSiblingCount,u=void 0===o?2:o,i=t.edgePageCount,l=void 0===i?2:i,c=e.useMemo((function(){return new g({totalPage:n,currentPage:r,middlePagesSiblingCount:u,edgePageCount:l})}),[n,r,u,l]);return{getMiddlePages:c.getMiddlePages,hasPreviousPage:c.hasPreviousPage,hasNextPage:c.hasNextPage,getPreviousPages:c.getPreviousPages,getNextPages:c.getNextPages,isPreviousTruncable:c.isPreviousTruncable,isNextTruncable:c.isNextTruncable,totalPage:n,currentPage:r}};exports.Pagination=function(e){return(0,e.children)(d({totalPage:e.totalPage,currentPage:e.currentPage,middlePagesSiblingCount:e.middlePagesSiblingCount,edgePageCount:e.edgePageCount}))},exports.ReadingProgress=function(e){return(0,e.children)(n({targetEl:e.targetEl,rootEl:e.rootEl}))},exports.Scrollspy=function(e){var t=e.children,n=a({sectionRefs:e.sectionRefs,rootSelector:e.rootSelector,offset:e.offset});return t({elementsStatusInViewport:n.elementsStatusInViewport,currentElementIndexInViewport:n.currentElementIndexInViewport})},exports.usePagination=d,exports.useReadingProgress=n,exports.useScrollspy=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function r(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}function n(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,(Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var o=function(){},i=function(e){function t(){var t;return(t=e.apply(this,arguments)||this).measureWrapperHeight=function(){var e=document.body.getBoundingClientRect().height||0;return Math.round(e-t.getViewportHeight())},t.getViewportHeight=function(){return Math.max(document.documentElement.clientHeight,window.innerHeight||0)},t.getProgress=function(){var e=window.pageYOffset||document.documentElement.scrollTop;return Math.round(e/t.measureWrapperHeight()*100)},t}return n(t,e),r(t,[{key:"rootSelector",get:function(){return window}}]),t}(o),u=function(e){function t(t){var r,n=t.rootEl,o=t.targetEl;return(r=e.call(this)||this).measureWrapperHeight=function(){var e,t=(null==(e=r.targetEl)?void 0:e.getBoundingClientRect().height)||0;return Math.round(t-r.getViewportHeight())},r.getViewportHeight=function(){var e;return(null==(e=r.rootEl)?void 0:e.clientHeight)||0},r.getProgress=function(){var e,t=(null==(e=r.rootEl)?void 0:e.scrollTop)||0;return Math.round(t/r.measureWrapperHeight()*100)},r.rootEl=document.querySelector(n),r.targetEl=document.querySelector(o),r}return n(t,e),r(t,[{key:"rootSelector",get:function(){return this.rootEl}}]),t}(o),l=function(){function e(e){var t=this,r=e.rootEl,n=e.targetEl;this.getViewportHeight=function(){return t.rp.getViewportHeight()},this.getProgress=function(){return t.rp.getProgress()},this.rp="string"==typeof r&&"string"==typeof n?new u({rootEl:r,targetEl:n}):new i}return r(e,[{key:"rootSelector",get:function(){return this.rp.rootSelector}}]),e}(),c=function(t){var r,n=e.useRef();e.useEffect((function(){n.current=new l({rootEl:null==t?void 0:t.rootEl,targetEl:null==t?void 0:t.targetEl})}),[t]);var o,i,u,c=e.useState((null==(r=n.current)?void 0:r.getProgress())||0),s=c[0],g=c[1],a=e.useCallback((function(){var e;g((null==(e=n.current)?void 0:e.getProgress())||0)}),[]),f=e.useCallback((o=function(){a()},i=null,u=function(e){return function(){o.apply(void 0,e)}},function(){i&&cancelAnimationFrame(i);for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];i=requestAnimationFrame(u(t))}),[]);return e.useEffect((function(){var e;return null!=(e=n.current)&&e.rootSelector&&n.current.rootSelector.addEventListener("scroll",f),window.addEventListener("resize",f),a(),function(){var e;null!=(e=n.current)&&e.rootSelector&&n.current.rootSelector.removeEventListener("scroll",f),window.removeEventListener("resize",f)}}),[a,f]),{value:s}},s=function(){},g=function(e){function t(t){var r;return(r=e.call(this)||this).el=t,r}n(t,e);var o=t.prototype;return o.isScrolledToBottom=function(){return this.scrollTop+this.outerHeight>=this.scrollHeight},o.registerScrollEvent=function(e){this.el.addEventListener("scroll",e)},o.unregisterScrollEvent=function(e){this.el.removeEventListener("scroll",e)},t.create=function(e){var r=document.querySelector(e);if(!r)throw new Error("element is not found.");return new t(r)},r(t,[{key:"top",get:function(){return this.el.getBoundingClientRect().top}},{key:"outerHeight",get:function(){return this.el.getBoundingClientRect().height}},{key:"scrollTop",get:function(){return this.el.scrollTop}},{key:"scrollHeight",get:function(){return this.el.scrollHeight}}]),t}(s),a=function(e){function t(){return e.apply(this,arguments)||this}n(t,e);var o=t.prototype;return o.isScrolledToBottom=function(){return this.scrollTop+this.outerHeight>=this.scrollHeight},o.registerScrollEvent=function(e){document.addEventListener("scroll",e)},o.unregisterScrollEvent=function(e){document.removeEventListener("scroll",e)},t.create=function(){return new t},r(t,[{key:"outerHeight",get:function(){return window.innerHeight}},{key:"scrollTop",get:function(){return document.documentElement.scrollTop}},{key:"scrollHeight",get:function(){return document.documentElement.scrollHeight}}]),t}(s),f=function(){function e(){}return e.create=function(e){return e?g.create(e):a.create()},e}(),d=function(t){var r=t.sectionRefs,n=t.rootSelector,o=t.offset,i=void 0===o?0:o,u=e.useRef(null);e.useEffect((function(){u.current=f.create(n)}),[n]);var l=e.useCallback((function(){return!!u.current&&u.current.isScrolledToBottom()}),[u]),c=e.useCallback((function(e){if(!u.current)return!1;var t=u.current.scrollTop,r=t+u.current.outerHeight,n=e.getBoundingClientRect(),o=u.current instanceof g?t+n.top-u.current.top+i:t+n.top+i;return[o<r,o+n.height>t].every((function(e){return e}))}),[u,i]),s=e.useCallback((function(){return r.map((function(e){return!!e.current&&c(e.current)}))}),[c,r]),a=e.useState([]),d=a[0],h=a[1],P=e.useMemo((function(){return d.findIndex((function(e){return e}))}),[d]),v=e.useCallback((function(){var e=l()?[].concat(new Array(r.length-1).fill(!1).map((function(e){return e})),[!0]):s();h(e)}),[s,l,r]);return e.useEffect((function(){return v(),u.current&&u.current.registerScrollEvent(v),function(){u.current&&u.current.unregisterScrollEvent(v)}}),[v]),{elementsStatusInViewport:d,currentElementIndexInViewport:P}},h=function(e){var t=this,r=e.currentPage,n=e.totalPage,o=e.middlePagesSiblingCount,i=void 0===o?2:o,u=e.edgePageCount,l=void 0===u?2:u;this.getAllPages=function(){return[].concat(Array(t.totalPage)).fill(1).map((function(e,t){return t+1}))},this.getMiddlePageCount=function(){return 2*t.middlePagesSiblingCount+1},this.isReachedToFirst=function(){return t.currentPage<=t.middlePagesSiblingCount},this.isReachedToLast=function(){return t.currentPage+t.middlePagesSiblingCount>=t.totalPage},this.getAllPreviousPages=function(){return t.getAllPages().slice(0,t.getMiddlePages()[0]-1)},this.getAllNextPages=function(){var e=t.getAllPages(),r=t.getMiddlePages();return e.slice(r[r.length-1],e[e.length])},this.hasPreviousPage=function(){return t.currentPage>1},this.hasNextPage=function(){return t.totalPage>t.currentPage},this.getMiddlePages=function(){var e=t.getAllPages(),r=t.getMiddlePageCount();return t.isReachedToFirst()?e.slice(0,r):t.isReachedToLast()?e.slice(-r):e.slice(t.currentPage-t.middlePagesSiblingCount-1,t.currentPage+t.middlePagesSiblingCount)},this.getPreviousPages=function(){return t.isReachedToFirst()||t.getAllPreviousPages().length<1?[]:t.getAllPages().slice(0,t.edgePageCount).filter((function(e){return!t.getMiddlePages().includes(e)}))},this.getNextPages=function(){if(t.isReachedToLast())return[];if(t.getAllNextPages().length<1)return[];var e=t.getAllPages();return e.slice(e.length-t.edgePageCount,e.length).filter((function(e){return!t.getMiddlePages().includes(e)}))},this.isPreviousTruncable=function(){return t.getAllPreviousPages().filter((function(e){return!t.getPreviousPages().includes(e)&&!t.getMiddlePages().includes(e)})).length>0},this.isNextTruncable=function(){return t.getAllNextPages().filter((function(e){return!t.getNextPages().includes(e)&&!t.getMiddlePages().includes(e)})).length>0},this.currentPage=r,this.totalPage=n,this.middlePagesSiblingCount=i,this.edgePageCount=l},P=function(t){var r=t.totalPage,n=t.currentPage,o=t.middlePagesSiblingCount,i=void 0===o?2:o,u=t.edgePageCount,l=void 0===u?2:u,c=e.useMemo((function(){return new h({totalPage:r,currentPage:n,middlePagesSiblingCount:i,edgePageCount:l})}),[r,n,i,l]);return{getMiddlePages:c.getMiddlePages,hasPreviousPage:c.hasPreviousPage,hasNextPage:c.hasNextPage,getPreviousPages:c.getPreviousPages,getNextPages:c.getNextPages,isPreviousTruncable:c.isPreviousTruncable,isNextTruncable:c.isNextTruncable,totalPage:r,currentPage:n}};exports.Pagination=function(e){return(0,e.children)(P({totalPage:e.totalPage,currentPage:e.currentPage,middlePagesSiblingCount:e.middlePagesSiblingCount,edgePageCount:e.edgePageCount}))},exports.ReadingProgress=function(e){return(0,e.children)(c({targetEl:e.targetEl,rootEl:e.rootEl}))},exports.Scrollspy=function(e){var t=e.children,r=d({sectionRefs:e.sectionRefs,rootSelector:e.rootSelector,offset:e.offset});return t({elementsStatusInViewport:r.elementsStatusInViewport,currentElementIndexInViewport:r.currentElementIndexInViewport})},exports.usePagination=P,exports.useReadingProgress=c,exports.useScrollspy=d;
 //# sourceMappingURL=ghostui.cjs.production.min.js.map

dist/ghostui.esm.js

@@ -1,2 +0,2 @@
-import { useCallback, useRef, useEffect, useState, useMemo } from 'react';
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
 
@@ -26,88 +26,195 @@ var debounce = function debounce(callback) {
 
-var calc = function calc(_ref) {
-  var value = _ref.value,
-      total = _ref.total;
-  var result = value / total;
+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);
+  }
+}
 
-  if (isNaN(result)) {
-    return 0;
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+var ReadingProgressCore = function ReadingProgressCore() {};
+
+var ReadingProgressWindow = /*#__PURE__*/function (_ReadingProgressCore) {
+  _inheritsLoose(ReadingProgressWindow, _ReadingProgressCore);
+
+  function ReadingProgressWindow() {
+    var _this;
+
+    _this = _ReadingProgressCore.apply(this, arguments) || this;
+
+    _this.measureWrapperHeight = function () {
+      var targetElHeihgt = document.body.getBoundingClientRect().height || 0;
+      return Math.round(targetElHeihgt - _this.getViewportHeight());
+    };
+
+    _this.getViewportHeight = function () {
+      return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+    };
+
+    _this.getProgress = function () {
+      var top = window.pageYOffset || document.documentElement.scrollTop;
+      return Math.round(top / _this.measureWrapperHeight() * 100);
+    };
+
+    return _this;
   }
 
-  return result * 100;
-};
+  _createClass(ReadingProgressWindow, [{
+    key: "rootSelector",
+    get: function get() {
+      return window;
+    }
+  }]);
 
-var useReadingProgress = function useReadingProgress(props) {
-  var getEl = useCallback(function () {
-    var target = props != null && props.targetEl ? document.querySelector(props.targetEl) : document.body;
-    var root = props != null && props.rootEl ? document.querySelector(props.rootEl) : window;
-    return {
-      target: target,
-      root: root
+  return ReadingProgressWindow;
+}(ReadingProgressCore);
+
+var ReadingProgressElement = /*#__PURE__*/function (_ReadingProgressCore2) {
+  _inheritsLoose(ReadingProgressElement, _ReadingProgressCore2);
+
+  function ReadingProgressElement(_ref) {
+    var _this2;
+
+    var rootEl = _ref.rootEl,
+        targetEl = _ref.targetEl;
+    _this2 = _ReadingProgressCore2.call(this) || this;
+
+    _this2.measureWrapperHeight = function () {
+      var _this2$targetEl;
+
+      var targetElHeight = ((_this2$targetEl = _this2.targetEl) == null ? void 0 : _this2$targetEl.getBoundingClientRect().height) || 0;
+      return Math.round(targetElHeight - _this2.getViewportHeight());
     };
-  }, [props]);
-  var el = useRef();
-  useEffect(function () {
-    el.current = getEl();
-  }, [getEl]);
-  var measureViewportHeight = useCallback(function () {
-    var _el$current;
 
-    return props != null && props.rootEl ? (_el$current = el.current) == null ? void 0 : _el$current.root.clientHeight : Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-  }, [props, el]);
-  var maxRef = useRef(0);
-  var measure = useCallback(function () {
-    var _el$current2, _el$current2$target;
+    _this2.getViewportHeight = function () {
+      var _this2$rootEl;
 
-    var targetHeight = ((_el$current2 = el.current) == null ? void 0 : (_el$current2$target = _el$current2.target) == null ? void 0 : _el$current2$target.getBoundingClientRect().height) || 0;
-    var viewportHeight = measureViewportHeight();
-    maxRef.current = Math.round(targetHeight - viewportHeight);
-  }, [measureViewportHeight]);
+      return ((_this2$rootEl = _this2.rootEl) == null ? void 0 : _this2$rootEl.clientHeight) || 0;
+    };
 
-  var _useState = useState(0),
+    _this2.getProgress = function () {
+      var _this2$rootEl2;
+
+      var top = ((_this2$rootEl2 = _this2.rootEl) == null ? void 0 : _this2$rootEl2.scrollTop) || 0;
+      return Math.round(top / _this2.measureWrapperHeight() * 100);
+    };
+
+    _this2.rootEl = document.querySelector(rootEl);
+    _this2.targetEl = document.querySelector(targetEl);
+    return _this2;
+  }
+
+  _createClass(ReadingProgressElement, [{
+    key: "rootSelector",
+    get: function get() {
+      return this.rootEl;
+    }
+  }]);
+
+  return ReadingProgressElement;
+}(ReadingProgressCore);
+
+var ReadingProgress = /*#__PURE__*/function () {
+  function ReadingProgress(_ref2) {
+    var _this3 = this;
+
+    var rootEl = _ref2.rootEl,
+        targetEl = _ref2.targetEl;
+
+    this.getViewportHeight = function () {
+      return _this3.rp.getViewportHeight();
+    };
+
+    this.getProgress = function () {
+      return _this3.rp.getProgress();
+    };
+
+    this.rp = typeof rootEl === 'string' && typeof targetEl === 'string' ? new ReadingProgressElement({
+      rootEl: rootEl,
+      targetEl: targetEl
+    }) : new ReadingProgressWindow();
+  }
+
+  _createClass(ReadingProgress, [{
+    key: "rootSelector",
+    get: function get() {
+      return this.rp.rootSelector;
+    }
+  }]);
+
+  return ReadingProgress;
+}();
+
+var useReadingProgress = function useReadingProgress(props) {
+  var _rp$current;
+
+  var rp = useRef();
+  useEffect(function () {
+    rp.current = new ReadingProgress({
+      rootEl: props == null ? void 0 : props.rootEl,
+      targetEl: props == null ? void 0 : props.targetEl
+    });
+  }, [props]);
+
+  var _useState = useState(((_rp$current = rp.current) == null ? void 0 : _rp$current.getProgress()) || 0),
       value = _useState[0],
-      updateValue = _useState[1];
+      updateProgressValue = _useState[1];
 
   var update = useCallback(function () {
-    var _el$current3;
+    var _rp$current2;
 
-    var value = props != null && props.rootEl ? (_el$current3 = el.current) == null ? void 0 : _el$current3.root.scrollTop : window.pageYOffset || document.documentElement.scrollTop;
-    updateValue(value);
-  }, [el, props]);
-  var handleResize = useCallback(debounce(function () {
-    measure();
-  }), [measure]);
-  var handleScroll = useCallback(debounce(function () {
+    updateProgressValue(((_rp$current2 = rp.current) == null ? void 0 : _rp$current2.getProgress()) || 0);
+  }, []);
+  var debounceUpdate = useCallback(debounce(function () {
     update();
-  }), [update]);
+  }), []);
   useEffect(function () {
-    var _el$current4;
+    var _rp$current3;
 
-    if ((_el$current4 = el.current) != null && _el$current4.root) {
-      el.current.root.addEventListener('scroll', handleScroll);
+    if ((_rp$current3 = rp.current) != null && _rp$current3.rootSelector) {
+      rp.current.rootSelector.addEventListener('scroll', debounceUpdate);
     }
 
-    window.addEventListener('resize', handleResize);
-    measure();
+    window.addEventListener('resize', debounceUpdate);
     update();
     return function () {
-      var _el$current5;
+      var _rp$current4;
 
-      if ((_el$current5 = el.current) != null && _el$current5.root) {
-        el.current.root.removeEventListener('scroll', handleScroll);
+      if ((_rp$current4 = rp.current) != null && _rp$current4.rootSelector) {
+        rp.current.rootSelector.removeEventListener('scroll', debounceUpdate);
       }
 
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', debounceUpdate);
     };
-  }, [handleScroll, handleResize, measure, update]);
+  }, [update, debounceUpdate]);
   return {
-    value: value,
-    max: maxRef.current,
-    percentageOfValue: calc({
-      value: value,
-      total: maxRef.current
-    })
+    value: value
   };
 };
 
-var ReadingProgress = function ReadingProgress(_ref) {
+var ReadingProgress$1 = function ReadingProgress(_ref) {
   var targetEl = _ref.targetEl,
@@ -123,34 +230,2 @@ rootEl = _ref.rootEl,
 
-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 _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-
-  _setPrototypeOf(subClass, superClass);
-}
-
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
-}
-
 var Root = function Root() {};
@@ -528,3 +603,3 @@
 
-export { Pagination$1 as Pagination, ReadingProgress, Scrollspy, usePagination, useReadingProgress, useScrollspy };
+export { Pagination$1 as Pagination, ReadingProgress$1 as ReadingProgress, Scrollspy, usePagination, useReadingProgress, useScrollspy };
 //# sourceMappingURL=ghostui.esm.js.map

dist/ReadingProgress/useReadingProgress.d.ts

 import { HookProps } from './type';
 export declare const useReadingProgress: (props?: HookProps | undefined) => {
     value: number;
-    max: number;
-    percentageOfValue: number;
 };

dist/utils/index.d.ts

 import * as optimization from './optimization';
-import * as percentage from './percentage';
-export { optimization, percentage };
+export { optimization };

package.json

 {
-  "version": "1.1.2",
+  "version": "2.0.0",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

src/ReadingProgress/useReadingProgress.ts

 import { useCallback, useEffect, useRef, useState } from 'react';
 import { HookProps } from './type';
-import { percentage, optimization } from '../utils';
+import { optimization } from '../utils';
+import { ReadingProgress } from './core';
 
 export const useReadingProgress = (props?: HookProps) => {
-  const getEl = useCallback(() => {
-    const target = props?.targetEl
-      ? document.querySelector(props.targetEl)
-      : document.body;
-    const root = props?.rootEl ? document.querySelector(props.rootEl) : window;
+  const rp = useRef<ReadingProgress>();
 
-    return {
-      target,
-      root,
-    };
+  useEffect(() => {
+    rp.current = new ReadingProgress({
+      rootEl: props?.rootEl,
+      targetEl: props?.targetEl,
+    });
   }, [props]);
-  const el = useRef<{
-    target: Element | HTMLElement | null;
-    root: Element | HTMLElement | (Window & typeof globalThis) | null;
-  }>();
 
-  useEffect(() => {
-    el.current = getEl();
-  }, [getEl]);
+  const [value, updateProgressValue] = useState(rp.current?.getProgress() || 0);
 
-  const measureViewportHeight = useCallback(() => {
-    return props?.rootEl
-      ? (el.current?.root as HTMLElement).clientHeight
-      : Math.max(
-          document.documentElement.clientHeight,
-          window.innerHeight || 0
-        );
-  }, [props, el]);
-
-  const maxRef = useRef(0);
-  const measure = useCallback(() => {
-    const targetHeight =
-      el.current?.target?.getBoundingClientRect().height || 0;
-    const viewportHeight = measureViewportHeight();
-    maxRef.current = Math.round(targetHeight - viewportHeight);
-  }, [measureViewportHeight]);
-
-  const [value, updateValue] = useState(0);
   const update = useCallback(() => {
-    const value = props?.rootEl
-      ? (el.current?.root as HTMLElement).scrollTop
-      : window.pageYOffset || document.documentElement.scrollTop;
-
-    updateValue(value);
-  }, [el, props]);
-
-  const handleResize = useCallback(
+    updateProgressValue(rp.current?.getProgress() || 0);
+  }, []);
+  const debounceUpdate = useCallback(
     optimization.debounce(() => {
-      measure();
-    }),
-    [measure]
-  );
-
-  const handleScroll = useCallback(
-    optimization.debounce(() => {
       update();
     }),
-    [update]
+    []
   );
 
   useEffect(() => {
-    if (el.current?.root) {
-      el.current.root.addEventListener('scroll', handleScroll);
+    if (rp.current?.rootSelector) {
+      rp.current.rootSelector.addEventListener('scroll', debounceUpdate);
     }
-    window.addEventListener('resize', handleResize);
-    measure();
+    window.addEventListener('resize', debounceUpdate);
     update();
 
     return () => {
-      if (el.current?.root) {
-        el.current.root.removeEventListener('scroll', handleScroll);
+      if (rp.current?.rootSelector) {
+        rp.current.rootSelector.removeEventListener('scroll', debounceUpdate);
       }
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener('resize', debounceUpdate);
     };
-  }, [handleScroll, handleResize, measure, update]);
+  }, [update, debounceUpdate]);
 
   return {
     value,
-    max: maxRef.current,
-    percentageOfValue: percentage.calc({ value, total: maxRef.current }),
   };
 };

src/utils/index.ts

 import * as optimization from './optimization';
-import * as percentage from './percentage';
 
-export { optimization, percentage };
+export { optimization };

No alert changes

Improved metrics

Total package byte prevSize

151133

increased by5.52%

Lines of code

1753

increased by7.09%

Worsened metrics

Number of package files

48

decreased by-2.04%

No dependency changes