lazy-react 3.0.2 → 3.2.0

package/dist/index.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.LazyReact=t(require("react")):e.LazyReact=t(e.React)}(self,(function(e){return(()=>{"use strict";var t={787:t=>{t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var l=r[e]={exports:{}};return t[e](l,l.exports,n),l.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{n.r(o),n.d(o,{LazyBackgroundImage:()=>u,LazyComponent:()=>f,LazyFrame:()=>s,LazyImage:()=>c});var e=n(787),t=n.n(e);function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function l(t,n){var o,l,a=(o=(0,e.useState)({link:"",visible:!1}),l=2,function(e){if(Array.isArray(e))return e}(o)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,a=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return l}}(o,l)||function(e,t){if(e){if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?r(e,t):void 0}}(o,l)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),u=a[0],c=a[1];function s(){c({visible:!0,link:n.link})}return(0,e.useEffect)((function(){return void 0!==t.current&&i.addElement({element:t.current,props:n,makeItVisible:s}),function(){return i.removeElementFromList({element:t.current,props:n,makeItVisible:s})}}),[]),u}var i={elements:[]};function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function u(r){var n,o,i=(0,e.useRef)(),u=l(i,r),c=(n=(0,e.useState)(Object.assign({backgroundImage:"url(".concat(u.link,")")},r.style)),o=2,function(e){if(Array.isArray(e))return e}(n)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l=[],i=!0,a=!1;try{for(r=r.call(e);!(i=(n=r.next()).done)&&(l.push(n.value),!t||l.length!==t);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==r.return||r.return()}finally{if(a)throw o}}return l}}(n,o)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(e,t):void 0}}(n,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),s=c[0],f=c[1];return(0,e.useEffect)((function(){f(Object.assign({backgroundImage:"url(".concat(u.link,")")},r.style))}),[u]),t().createElement("div",{className:r.className,style:s,ref:i})}function c(r){var n=(0,e.useRef)(),o=l(n,r);return t().createElement("img",{src:o.link,alt:r.alt,style:r.style,className:r.className,ref:n})}function s(r){var n=(0,e.useRef)(),o=l(n,r);return t().createElement("iframe",{height:r.height||"500",scrolling:r.scrolling||"no",src:o.link,frameBorder:r.frameBorder||"no",allowtransparency:r.allowTransparency||"true",allowFullScreen:r.allowFullScreen||!0,style:r.style||{},ref:n})}function f(r){var n=(0,e.useRef)(),o=l(n,r),i=t().createElement("div",{style:r.style?r.style:{heigt:"300px",width:"300px"}});return t().createElement("div",{ref:n},o.visible?r.children:i)}i.isInViewPort=function(e){var t=e.offset,r=e.top,n=e.left;return window.scrollY+window.innerHeight+t>r&&window.scrollX+window.innerWidth+t>n},i.calculateNewPosition=function(e){var t=e.element.getBoundingClientRect(),r=t.top,n=t.left,o=t.right;return Object.assign({},e,{top:r,left:n,right:o})},i.addElement=function(e){var t=e.element,r=e.props,n=e.makeItVisible,o=t.getBoundingClientRect(),l=o.top,a=o.left,u=o.right;i.elements.push({element:t,top:l,left:a,right:u,offset:r.offset||100,makeItVisible:n}),"boolean"==typeof i.isListenerAttached&&(i.isListenerAttached=window.requestAnimationFrame(i.eventHandler))},i.eventHandler=function(){0===i.elements.length?i.removeScrollHandler():(i.elements.forEach((function(e,t){i.isInViewPort(e)?(e.makeItVisible(),i.removeElementFromList(e)):i.elements[t]=i.calculateNewPosition(e)})),i.isListenerAttached=window.requestAnimationFrame(i.eventHandler))},i.removeScrollHandler=function(){window.cancelAnimationFrame(i.isListenerAttached)},i.removeElementFromList=function(e){i.elements=i.elements.filter((function(t){return t!==e}))},i.isListenerAttached=!1})(),o})()}));
-//# sourceMappingURL=index.js.map
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.LazyReact=t(require("react")):e.LazyReact=t(e.React)}(self,(e=>(()=>{"use strict";var t={787:t=>{t.exports=e}},n={};function r(e){var o=n[e];if(void 0!==o)return o.exports;var l=n[e]={exports:{}};return t[e](l,l.exports,r),l.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};return(()=>{r.r(o),r.d(o,{LazyBackgroundImage:()=>n,LazyComponent:()=>i,LazyFrame:()=>a,LazyImage:()=>l,default:()=>s});var e=r(787),t=r.n(e);function n(n){let[r,o,l]=s(n);const[a,i]=(0,e.useState)(Object.assign({backgroundImage:`url(${o})`},n.style));return(0,e.useEffect)((()=>{i(Object.assign({backgroundImage:`url(${o})`},n.style))}),[o,l]),t().createElement("div",{className:n.className,style:a,ref:e=>{r(e)}},n.children)}function l(e){const[n,r]=s(e);return t().createElement("div",{ref:e=>{n(e)}},t().createElement("img",{src:r,alt:e.alt,style:e.style,className:e.className}))}function a(e){let[n,r]=s(e);return t().createElement("iframe",Object.assign({height:e.height||"500",scrolling:e.scrolling||"no",src:r,frameBorder:e.frameBorder||"no",allowFullScreen:e.allowFullScreen||!0,style:e.style||{},ref:e=>{n(e)}},e))}function i(e){const[n,r,o]=s(e);return o?t().createElement("div",null,e.children):t().createElement("div",{ref:e=>{n(e)},style:Object.assign({height:"300px",width:"300px"},e.style)})}function s(t){const[n,r]=(0,e.useState)(""),[o,l]=(0,e.useState)(!1);let[a,i]=(0,e.useState)(null);const s=(0,e.useMemo)((()=>({element:a,makeItVisible:d,offset:t.offset||100})),[a,t]),c=(0,e.useCallback)((e=>{null!==e&&i(e)}),[]);function d(){r((()=>t.link)),l((()=>!0))}return(0,e.useEffect)((()=>(null!==a&&u.addElement(s),()=>u.removeElementFromList(s))),[a]),[c,n,o]}let c=[];const u={isInViewPort:({offset:e,top:t,left:n})=>t<window.innerHeight+e&&n<window.innerWidth+e,calculateNewPosition:e=>{var t;const{top:n,left:r}=(null===(t=e.element)||void 0===t?void 0:t.getBoundingClientRect())||{top:0,left:0};return Object.assign(Object.assign({},e),{top:n,left:r})},addElement:function(e){c.push(e),0===u.isListenerAttached&&(u.isListenerAttached=window.requestAnimationFrame(u.eventHandler))},eventHandler:function(){0===c.length?u.removeScrollHandler():(c.forEach(((e,t)=>{u.isInViewPort(u.calculateNewPosition(e))&&(e.makeItVisible(),u.removeElementFromList(e))})),u.isListenerAttached=window.requestAnimationFrame(u.eventHandler))},removeScrollHandler:function(){window.cancelAnimationFrame(u.isListenerAttached),u.isListenerAttached=0},removeElementFromList:function(e){c=c.filter((t=>t!==e))},isListenerAttached:0}})(),o})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lazy-react",
-  "version": "3.0.2",
+  "version": "3.2.0",
   "description": "components to lazy load iframes, images and images as backgrounds",
   "main": "./dist/index.js",
   "scripts": {
@@ -9,7 +9,7 @@
     "build": "npm run build:release && npm run build:demo",
     "lint": "eslint src/*",
     "lint:fix": "eslint --fix src/*",
-    "prettify": "prettier --write  --single-quote --no-semi ./src/*.js",
+    "format": "prettier --write  --single-quote --no-semi ./src/*.tsx",
     "precommit": "lint-staged",
     "test": "jest"
   },
@@ -30,20 +30,19 @@
     "url": "https://github.com/jonathanobino/react-lazy"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
-    "@babel/preset-env": "^7.11.5",
-    "@babel/preset-react": "^7.10.4",
-    "@types/jest": "^27.4.0",
-    "babel-cli": "^6.26.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "@testing-library/react": "^12.1.4",
+    "@types/jest": "^27.4.1",
+    "@types/node": "^17.0.21",
+    "@types/react": "^17.0.43",
+    "@types/react-dom": "^17.0.14",
     "eslint": "^7.10.0",
     "eslint-plugin-react": "^7.21.3",
     "husky": "^4.3.0",
     "jest": "^27.5.1",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",
+    "ts-loader": "^9.2.7",
+    "typescript": "^4.6.2",
     "webpack": "^5.66.0",
     "webpack-cli": "^4.9.1"
   },
@@ -52,7 +51,6 @@
     "react-dom": "^17.0.2"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }
 }

package/src/{index.js → index.tsx}

@@ -3,4 +3,5 @@ import LazyImage from './lazyLoadImage'
 import LazyFrame from './lazyLoadFrame'
 import LazyComponent from './lazyLoadComponent'
 
+export { default } from './useIsInViewport'
 export { LazyBackgroundImage, LazyImage, LazyFrame, LazyComponent }

package/src/lazyLoadBackgroundImage.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars
+import useIsInViewPort from './index'
+
+export default function LazyBackgroundImage(props: any) {
+  let [setRef, link, isViewable] = useIsInViewPort(props)
+
+  const [style, setStyle] = useState({
+    backgroundImage: `url(${link})`,
+    ...props.style,
+  })
+
+  useEffect(() => {
+    setStyle({
+      backgroundImage: `url(${link})`,
+      ...props.style,
+    })
+  }, [link, isViewable])
+
+  return (
+    <div
+      className={props.className}
+      style={style}
+      ref={(node) => {
+        setRef(node)
+      }}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/lazyLoadComponent.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import useIsInViewport from './index'
+
+export default function LazyComponent(props: any) {
+  const [setRef, link, isVisible] = useIsInViewport(props)
+
+  if (!isVisible)
+    return (
+      <div
+        ref={(node) => {
+          setRef(node)
+        }}
+        style={{
+          height: '300px',
+          width: '300px',
+          ...props.style,
+        }}
+      ></div>
+    )
+
+  return <div>{props.children}</div>
+}

package/src/lazyLoadFrame.tsx

@@ -0,0 +1,21 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import useIsInViewPort from './index'
+
+export default function LazyFrame(props: any) {
+  let [setRef, link] = useIsInViewPort(props)
+
+  return (
+    <iframe
+      height={props.height || '500'}
+      scrolling={props.scrolling || 'no'}
+      src={link}
+      frameBorder={props.frameBorder || 'no'}
+      allowFullScreen={props.allowFullScreen || true}
+      style={props.style || {}}
+      ref={(node) => {
+        setRef(node)
+      }}
+      {...props}
+    />
+  )
+}

package/src/lazyLoadImage.tsx

@@ -0,0 +1,21 @@
+import React from 'react' // eslint-disable-line no-unused-vars
+import useIsInViewPort from './index'
+
+export default function LazyImage(props: any) {
+  const [setRef, link] = useIsInViewPort(props)
+
+  return (
+    <div
+      ref={(node) => {
+        setRef(node)
+      }}
+    >
+      <img
+        src={link}
+        alt={props.alt}
+        style={props.style}
+        className={props.className}
+      />
+    </div>
+  )
+}

package/src/useIsInViewport.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect, useMemo, useCallback } from 'react' // eslint-disable-line no-unused-vars
+
+interface InstanceElement {
+  makeItVisible: () => void
+  element: HTMLElement | null
+  offset: number
+}
+
+export default function useRenderIfInViewPort(props: {
+  link: string
+  offset: number
+}): [Function, string, boolean] {
+  const [link, setLink] = useState('')
+  const [visible, setVisible] = useState(false)
+
+  let [ref, setRef] = useState(null)
+
+  const thisInstance = useMemo(() => {
+    return {
+      element: ref,
+      makeItVisible,
+      offset: props.offset || 100,
+    }
+  }, [ref, props])
+
+  const getRef = useCallback((node) => {
+    if (node !== null) setRef(node)
+  }, [])
+
+  function makeItVisible() {
+    setLink(() => props.link)
+    setVisible(() => true)
+  }
+
+  useEffect(() => {
+    if (ref !== null)
+      // add the element to the array of elements that are waiting to be lazy loaded
+      CheckIfRender.addElement(thisInstance)
+    return () =>
+      // if the element is unloaded remove the element from the list of elements that needs to be lazy loader
+      CheckIfRender.removeElementFromList(thisInstance)
+  }, [ref])
+
+  return [getRef, link, visible]
+}
+
+// array with all the elements that are waiting to be shown in the viewport
+let elements: InstanceElement[] = []
+
+const CheckIfRender = {
+  // top: the position of the element in relation with the top of the browser
+  // left: the position of the element in relation with the left of the browser
+  // offset: the desired offset of the element in relation of the viewport
+  isInViewPort: ({
+    offset,
+    top,
+    left,
+  }: {
+    offset: number
+    top: number
+    left: number
+  }) => top < window.innerHeight + offset && left < window.innerWidth + offset,
+
+  calculateNewPosition: (elem: InstanceElement) => {
+    const { top, left } = elem.element?.getBoundingClientRect() || {
+      top: 0,
+      left: 0,
+    }
+
+    return {
+      ...elem,
+      top,
+      left,
+    }
+  },
+  addElement: function (element: InstanceElement) {
+    //the distance from the pixel 0,0 and the top of the element
+    elements.push(element)
+    //check if has already been started the rAF cycle
+    if (CheckIfRender.isListenerAttached === 0) {
+      CheckIfRender.isListenerAttached = window.requestAnimationFrame(
+        CheckIfRender.eventHandler
+      )
+    }
+  },
+  eventHandler: function () {
+    //if there is no more element to lazy load remove the listener/rAF
+    if (elements.length === 0) {
+      CheckIfRender.removeScrollHandler()
+    } else {
+      elements.forEach((elem, i) => {
+        const haveToShow = CheckIfRender.isInViewPort(
+          CheckIfRender.calculateNewPosition(elem)
+        )
+        if (haveToShow) {
+          elem.makeItVisible()
+          // remove element from the list of elements to lazy load
+          CheckIfRender.removeElementFromList(elem)
+        }
+      })
+      CheckIfRender.isListenerAttached = window.requestAnimationFrame(
+        CheckIfRender.eventHandler
+      )
+    }
+  },
+
+  removeScrollHandler: function () {
+    window.cancelAnimationFrame(CheckIfRender.isListenerAttached)
+    CheckIfRender.isListenerAttached = 0
+  },
+  //When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
+  removeElementFromList: function (toRemove: InstanceElement) {
+    elements = elements.filter((elem) => elem !== toRemove)
+  },
+  isListenerAttached: 0, // intended as not set
+}
+
+export { CheckIfRender }

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}

package/webpack.config.demo.js

@@ -11,7 +11,7 @@ module.exports = {
     rules: [
       {
         test: /\.js$/,
-        use: 'babel-loader',
+        use: 'ts-loader',
         exclude: /node_modules/
       }
     ]

package/webpack.config.js

@@ -1,50 +1,26 @@
-var path = require('path')
-var webpack = require('webpack')
+const path = require('path');
 
 module.exports = {
   mode:'production',
-  entry: './src/index.js',
-  devtool: 'source-map',
+  entry: path.join(__dirname,'./src/index.tsx'),
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: [{loader:'ts-loader'}],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts'],
+  },
   output: {
     library: 'LazyReact',
     libraryTarget: 'umd',
     path: path.join(__dirname),
     filename: './dist/index.js'
   },
-  // optimization: {
-  //   minimizer: [
-  //     new UglifyJsPlugin({
-  //       sourceMap: true,
-  //       uglifyOptions: {
-  //         compress: {
-  //           inline: false
-  //         },
-  //         output: {
-  //           comments: false
-  //         }
-  //       }
-  //     })
-  //   ],
-  //   runtimeChunk: false,
-  //   splitChunks: {
-  //     cacheGroups: {
-  //       default: false,
-  //       commons: {
-  //         test: /[\\/]node_modules[\\/]/,
-  //         name: 'vendor_app',
-  //         chunks: 'all',
-  //         minChunks: 2
-  //       }
-  //     }
-  //   }
-  // },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      },
-      __DEVELOPMENT__: false
-    })],
   externals: [
     {
       react: {
@@ -63,13 +39,4 @@ module.exports = {
       }
     }
   ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/
-      }
-    ]
-  }
-}
+};

package/.babelrc

@@ -1,6 +0,0 @@
-{
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
-  "plugins": [
-    ["@babel/plugin-proposal-object-rest-spread", { "loose": true, "useBuiltIns": true }]
-  ]
-}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"./dist/index.js","mappings":"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","sources":["webpack://LazyReact/webpack/universalModuleDefinition","webpack://LazyReact/external umd {\"root\":\"React\",\"commonjs2\":\"react\",\"commonjs\":\"react\",\"amd\":\"react\"}","webpack://LazyReact/webpack/bootstrap","webpack://LazyReact/webpack/runtime/compat get default export","webpack://LazyReact/webpack/runtime/define property getters","webpack://LazyReact/webpack/runtime/hasOwnProperty shorthand","webpack://LazyReact/webpack/runtime/make namespace object","webpack://LazyReact/./src/baseClass.js","webpack://LazyReact/./src/lazyLoadBackgroundImage.js","webpack://LazyReact/./src/lazyLoadImage.js","webpack://LazyReact/./src/lazyLoadFrame.js","webpack://LazyReact/./src/lazyLoadComponent.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"LazyReact\"] = factory(require(\"react\"));\n\telse\n\t\troot[\"LazyReact\"] = factory(root[\"React\"]);\n})(self, function(__WEBPACK_EXTERNAL_MODULE__787__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__787__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars\n\nexport default function useRenderIfInViewPort(element, props) {\n  const [state, setState] = useState({\n    link: '',\n    visible: false,\n  })\n\n  function makeItVisible() {\n    setState({\n      visible: true,\n      link: props.link,\n    })\n  }\n\n  useEffect(() => {\n    if (element.current !== undefined)\n      CheckIfRender.addElement({\n        element: element.current,\n        props,\n        makeItVisible,\n      })\n    return () =>\n      CheckIfRender.removeElementFromList({\n        element: element.current,\n        props,\n        makeItVisible,\n      })\n  }, [])\n\n  return state\n}\n\nconst CheckIfRender = {\n  elements: [],\n}\n\nCheckIfRender.isInViewPort = ({ offset, top, left }) =>\n  window.scrollY + window.innerHeight + offset > top &&\n  window.scrollX + window.innerWidth + offset > left\n\nCheckIfRender.calculateNewPosition = (elem) => {\n  const reference = elem.element\n  const { top, left, right } = reference.getBoundingClientRect()\n  return {\n    ...elem,\n    top,\n    left,\n    right,\n  }\n}\n\nCheckIfRender.addElement = function ({ element, props, makeItVisible }) {\n  //the distance from the pixel 0,0 and the top of the element\n  const { top, left, right } = element.getBoundingClientRect()\n  CheckIfRender.elements.push({\n    element,\n    top,\n    left,\n    right,\n    offset: props.offset || 100,\n    makeItVisible,\n  })\n  //check if has already been started the rAF cycle\n  if (typeof CheckIfRender.isListenerAttached === 'boolean') {\n    CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n      CheckIfRender.eventHandler\n    )\n  }\n}\n\nCheckIfRender.eventHandler = function () {\n  //if there is no more element to lazy load remove the listener/rAF\n  if (CheckIfRender.elements.length === 0) {\n    CheckIfRender.removeScrollHandler()\n  } else {\n    CheckIfRender.elements.forEach((elem, i) => {\n      // if element is in viewPort make it visible\n      if (CheckIfRender.isInViewPort(elem)) {\n        elem.makeItVisible()\n        // remove element from the list of elements to lazy load\n        CheckIfRender.removeElementFromList(elem)\n      } else {\n        // if the element is not shown update his position\n        CheckIfRender.elements[i] = CheckIfRender.calculateNewPosition(elem)\n      }\n    })\n    CheckIfRender.isListenerAttached = window.requestAnimationFrame(\n      CheckIfRender.eventHandler\n    )\n  }\n}\n\nCheckIfRender.removeScrollHandler = function () {\n  window.cancelAnimationFrame(CheckIfRender.isListenerAttached)\n}\n\n//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded\nCheckIfRender.removeElementFromList = function (toRemove) {\n  CheckIfRender.elements = CheckIfRender.elements.filter(\n    (elem) => elem !== toRemove\n  )\n}\n\nCheckIfRender.isListenerAttached = false\n\nexport { CheckIfRender }\n","import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyBackgroundImage(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n  const [style, setStyle] = useState({\n    backgroundImage: `url(${isViewable.link})`,\n    ...props.style,\n  })\n\n  useEffect(() => {\n    setStyle({\n      backgroundImage: `url(${isViewable.link})`,\n      ...props.style,\n    })\n  }, [isViewable])\n\n  return <div className={props.className} style={style} ref={ref} />\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyImage(props) {\n  const ref = useRef()\n  const isViewable = useIsInViewPort(ref, props)\n\n  return (\n    <img\n      src={isViewable.link}\n      alt={props.alt}\n      style={props.style}\n      className={props.className}\n      ref={ref}\n    />\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyFrame(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n\n  return (\n    <iframe\n      height={props.height || '500'}\n      scrolling={props.scrolling || 'no'}\n      src={isViewable.link}\n      frameBorder={props.frameBorder || 'no'}\n      allowtransparency={props.allowTransparency || 'true'}\n      allowFullScreen={props.allowFullScreen || true}\n      style={props.style || {}}\n      ref={ref}\n    />\n  )\n}\n","import React, { useRef } from 'react' // eslint-disable-line no-unused-vars\nimport useIsInViewPort from './baseClass'\n\nexport default function LazyComponent(props) {\n  const ref = useRef()\n  let isViewable = useIsInViewPort(ref, props)\n\n  const placeHolder = (\n    <div\n      style={\n        props.style\n          ? props.style\n          : {\n              heigt: '300px',\n              width: '300px',\n            }\n      }\n    />\n  )\n\n  return (\n    <div ref={ref}>{isViewable.visible ? props.children : placeHolder}</div>\n  )\n}\n"],"names":["root","factory","exports","module","require","define","amd","self","__WEBPACK_EXTERNAL_MODULE__787__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","useRenderIfInViewPort","element","props","useState","link","visible","state","setState","makeItVisible","useEffect","current","CheckIfRender","addElement","removeElementFromList","elements","LazyBackgroundImage","ref","useRef","isViewable","useIsInViewPort","backgroundImage","style","setStyle","className","LazyImage","src","alt","LazyFrame","height","scrolling","frameBorder","allowtransparency","allowTransparency","allowFullScreen","LazyComponent","placeHolder","heigt","width","children","isInViewPort","offset","top","left","window","scrollY","innerHeight","scrollX","innerWidth","calculateNewPosition","elem","getBoundingClientRect","right","push","isListenerAttached","requestAnimationFrame","eventHandler","length","removeScrollHandler","forEach","i","cancelAnimationFrame","toRemove","filter"],"sourceRoot":""}

package/src/baseClass.js

@@ -1,107 +0,0 @@
-import React, { useState, useEffect } from 'react' // eslint-disable-line no-unused-vars
-
-export default function useRenderIfInViewPort(element, props) {
-  const [state, setState] = useState({
-    link: '',
-    visible: false,
-  })
-
-  function makeItVisible() {
-    setState({
-      visible: true,
-      link: props.link,
-    })
-  }
-
-  useEffect(() => {
-    if (element.current !== undefined)
-      CheckIfRender.addElement({
-        element: element.current,
-        props,
-        makeItVisible,
-      })
-    return () =>
-      CheckIfRender.removeElementFromList({
-        element: element.current,
-        props,
-        makeItVisible,
-      })
-  }, [])
-
-  return state
-}
-
-const CheckIfRender = {
-  elements: [],
-}
-
-CheckIfRender.isInViewPort = ({ offset, top, left }) =>
-  window.scrollY + window.innerHeight + offset > top &&
-  window.scrollX + window.innerWidth + offset > left
-
-CheckIfRender.calculateNewPosition = (elem) => {
-  const reference = elem.element
-  const { top, left, right } = reference.getBoundingClientRect()
-  return {
-    ...elem,
-    top,
-    left,
-    right,
-  }
-}
-
-CheckIfRender.addElement = function ({ element, props, makeItVisible }) {
-  //the distance from the pixel 0,0 and the top of the element
-  const { top, left, right } = element.getBoundingClientRect()
-  CheckIfRender.elements.push({
-    element,
-    top,
-    left,
-    right,
-    offset: props.offset || 100,
-    makeItVisible,
-  })
-  //check if has already been started the rAF cycle
-  if (typeof CheckIfRender.isListenerAttached === 'boolean') {
-    CheckIfRender.isListenerAttached = window.requestAnimationFrame(
-      CheckIfRender.eventHandler
-    )
-  }
-}
-
-CheckIfRender.eventHandler = function () {
-  //if there is no more element to lazy load remove the listener/rAF
-  if (CheckIfRender.elements.length === 0) {
-    CheckIfRender.removeScrollHandler()
-  } else {
-    CheckIfRender.elements.forEach((elem, i) => {
-      // if element is in viewPort make it visible
-      if (CheckIfRender.isInViewPort(elem)) {
-        elem.makeItVisible()
-        // remove element from the list of elements to lazy load
-        CheckIfRender.removeElementFromList(elem)
-      } else {
-        // if the element is not shown update his position
-        CheckIfRender.elements[i] = CheckIfRender.calculateNewPosition(elem)
-      }
-    })
-    CheckIfRender.isListenerAttached = window.requestAnimationFrame(
-      CheckIfRender.eventHandler
-    )
-  }
-}
-
-CheckIfRender.removeScrollHandler = function () {
-  window.cancelAnimationFrame(CheckIfRender.isListenerAttached)
-}
-
-//When an element is unloaded remove it from the list of elements that are waiting to be lazy-loaded
-CheckIfRender.removeElementFromList = function (toRemove) {
-  CheckIfRender.elements = CheckIfRender.elements.filter(
-    (elem) => elem !== toRemove
-  )
-}
-
-CheckIfRender.isListenerAttached = false
-
-export { CheckIfRender }

package/src/lazyLoadBackgroundImage.js

@@ -1,20 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyBackgroundImage(props) {
-  const ref = useRef()
-  let isViewable = useIsInViewPort(ref, props)
-  const [style, setStyle] = useState({
-    backgroundImage: `url(${isViewable.link})`,
-    ...props.style,
-  })
-
-  useEffect(() => {
-    setStyle({
-      backgroundImage: `url(${isViewable.link})`,
-      ...props.style,
-    })
-  }, [isViewable])
-
-  return <div className={props.className} style={style} ref={ref} />
-}

package/src/lazyLoadComponent.js

@@ -1,24 +0,0 @@
-import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyComponent(props) {
-  const ref = useRef()
-  let isViewable = useIsInViewPort(ref, props)
-
-  const placeHolder = (
-    <div
-      style={
-        props.style
-          ? props.style
-          : {
-              heigt: '300px',
-              width: '300px',
-            }
-      }
-    />
-  )
-
-  return (
-    <div ref={ref}>{isViewable.visible ? props.children : placeHolder}</div>
-  )
-}

package/src/lazyLoadFrame.js

@@ -1,20 +0,0 @@
-import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyFrame(props) {
-  const ref = useRef()
-  let isViewable = useIsInViewPort(ref, props)
-
-  return (
-    <iframe
-      height={props.height || '500'}
-      scrolling={props.scrolling || 'no'}
-      src={isViewable.link}
-      frameBorder={props.frameBorder || 'no'}
-      allowtransparency={props.allowTransparency || 'true'}
-      allowFullScreen={props.allowFullScreen || true}
-      style={props.style || {}}
-      ref={ref}
-    />
-  )
-}

package/src/lazyLoadImage.js

@@ -1,17 +0,0 @@
-import React, { useRef } from 'react' // eslint-disable-line no-unused-vars
-import useIsInViewPort from './baseClass'
-
-export default function LazyImage(props) {
-  const ref = useRef()
-  const isViewable = useIsInViewPort(ref, props)
-
-  return (
-    <img
-      src={isViewable.link}
-      alt={props.alt}
-      style={props.style}
-      className={props.className}
-      ref={ref}
-    />
-  )
-}