suranadira-resize/src/SuranadiraResize.js

A library for resizing Suranadira components.

/**
 * Suranadira Resize
 *
 * Copyright 2019, Armands Strazds <armands@strazds.com>
 *
 */
import React, { useState, useEffect } from "react";
import Debug, { info } from "suranadira-utils/debug";

let _styles = {};

// Suranadira Icon
const SuranadiraResize = args => {
  // Define default properties
  let defaults = {
    name: "suranadiraResize1",
    unit: 10,
    styleHook: () => {},
    onResize: () => {}
  };
  // Assign external properties
  let properties = Object.assign(defaults, args);

  // Define state hooks
  const [dimensions, setDimensions] = useState({
    height: window.innerHeight, // window.screen.height,
    width: window.innerWidth // window.screen.width
  });
  const [styles, setStyles] = useState(properties.styles[0].styles);

  // Add/remove windows resize event listener
  useEffect(() => {
    const debouncedHandleResize = debounce(function handleResize() {
      setDimensions({
        height: window.innerHeight,
        width: window.innerWidth
      });
    }, 500);

    window.addEventListener("resize", debouncedHandleResize);

    return () => {
      window.removeEventListener("resize", debouncedHandleResize);
    };
  }, []);

  useEffect(() => {
    let found = false;
    for (let style of properties.styles) {
      if (
        dimensions.width > style.dimensions.minWidth &&
        dimensions.width <= style.dimensions.maxWidth
      ) {
        found = true;
        _styles = style.styles;
        setStyles(style.styles);
        Debug(
          info({
            module: "SuranadiraResize.js",
            func: "useEffect [dimensions]",
            param: "dimensions.width",
            value: `${style.dimensions.minWidth} > ${dimensions.width} <= ${style.dimensions.maxWidth}`
          })
        );
      }
    }
    if (!found) {
      setStyles(properties.styles[0].styles);
      _styles = properties.styles[0].styles;
    }

    // Use style hook to dynamically change style properties
    _styles = JSON.parse(properties.styleHook(_styles, dimensions));

    setStyles(_styles);

    properties.onResize(JSON.stringify(dimensions));

    // eslint-disable-next-line
  }, [dimensions]);

  useEffect(() => {
    document.body.style.display = "block";
  }, [styles]);

  return (
    <div
      className="SuranadiraResize"
      style={{
        position: "relative",
        display: "inline-block"
        // boxSizing: "border-box"
      }}
    >
      {React.Children.map(args.children, child => {
        return React.cloneElement(child, {
          styles: styles[child.props.name],
          key: child.props.name
        });
      })}
    </div>
  );
};

function debounce(fn, ms) {
  let timer;
  return _ => {
    clearTimeout(timer);
    timer = setTimeout(_ => {
      timer = null;
      fn.apply(this, arguments);
    }, ms);
  };
}

export default SuranadiraResize;