lazy-react 3.1.1 → 3.4.0

package/demo/index.js.LICENSE.txt

@@ -1,32 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/** @license React v0.20.2
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v17.0.2
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/src/baseClass.js

@@ -1,111 +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({
-        // add the element to the array of elements that are waiting to be lazy loaded
-        element: element.current,
-        props,
-        makeItVisible,
-      })
-    return () =>
-      CheckIfRender.removeElementFromList({
-        // if the element is unloaded remove the element from the list of elements that needs to be lazy loader
-        element: element.current,
-        props,
-        makeItVisible,
-      })
-  }, [])
-
-  return state
-}
-
-// array with all the elements that are waiting to be shown in the viewport
-const CheckIfRender = {
-  elements: [],
-}
-
-// 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
-CheckIfRender.isInViewPort = ({ offset, top, left }) =>
-  top < window.innerHeight + offset && left < window.innerWidth + offset
-
-CheckIfRender.calculateNewPosition = (elem) => {
-  const reference = elem.element
-  const { top, left } = reference.getBoundingClientRect()
-  return {
-    ...elem,
-    top,
-    left,
-  }
-}
-
-CheckIfRender.addElement = function ({ element, props, makeItVisible }) {
-  //the distance from the pixel 0,0 and the top of the element
-  const { top, left } = element.getBoundingClientRect()
-  CheckIfRender.elements.push({
-    element,
-    top,
-    left,
-    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)
-  CheckIfRender.isListenerAttached = false
-}
-
-//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,24 +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}>
-      {props.children}
-    </div>
-  )
-}

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}
-    />
-  )
-}

package/webpack.config.demo.js

@@ -1,19 +0,0 @@
-var path = require('path')
-
-module.exports = {
-  mode:'development',
-  entry: './demo/demo.js',
-  output: {
-    path: path.join(__dirname),
-    filename: './demo/index.js'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/
-      }
-    ]
-  }
-}

package/webpack.config.js

@@ -1,47 +0,0 @@
-var path = require('path')
-var webpack = require('webpack')
-
-module.exports = {
-  mode:'production',
-  entry: './src/index.js',
-  output: {
-    library: 'LazyReact',
-    libraryTarget: 'umd',
-    path: path.join(__dirname),
-    filename: './dist/index.js'
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      },
-      __DEVELOPMENT__: false
-    })],
-  externals: [
-    {
-      react: {
-        root: 'React',
-        commonjs2: 'react',
-        commonjs: 'react',
-        amd: 'react'
-      }
-    },
-    {
-      'react-dom': {
-        root: 'ReactDOM',
-        commonjs2: 'react-dom',
-        commonjs: 'react-dom',
-        amd: 'react-dom'
-      }
-    }
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: 'babel-loader',
-        exclude: /node_modules/
-      }
-    ]
-  }
-}