suranadira-resize/index.js

A library for resizing Suranadira components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "default", {
  enumerable: true,
  get: function get() {
    return _SuranadiraResize.default;
  }
});

var _SuranadiraResize = _interopRequireDefault(require("./SuranadiraResize"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _debug = _interopRequireWildcard(require("suranadira-utils/debug"));

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 _styles = {}; // Suranadira Icon

var SuranadiraResize = function SuranadiraResize(args) {
  // Define default properties
  var defaults = {
    name: "suranadiraResize1",
    unit: 10,
    styleHook: function styleHook() {},
    onResize: function onResize() {}
  }; // Assign external properties

  var properties = Object.assign(defaults, args); // Define state hooks

  var _useState = (0, _react.useState)({
    height: window.innerHeight,
    // window.screen.height,
    width: window.innerWidth // window.screen.width

  }),
      _useState2 = _slicedToArray(_useState, 2),
      dimensions = _useState2[0],
      setDimensions = _useState2[1];

  var _useState3 = (0, _react.useState)(properties.styles[0].styles),
      _useState4 = _slicedToArray(_useState3, 2),
      styles = _useState4[0],
      setStyles = _useState4[1]; // Add/remove windows resize event listener


  (0, _react.useEffect)(function () {
    var debouncedHandleResize = debounce(function handleResize() {
      setDimensions({
        height: window.innerHeight,
        width: window.innerWidth
      });
    }, 500);
    window.addEventListener("resize", debouncedHandleResize);
    return function () {
      window.removeEventListener("resize", debouncedHandleResize);
    };
  }, []);
  (0, _react.useEffect)(function () {
    var found = false;
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      for (var _iterator = properties.styles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var style = _step.value;

        if (dimensions.width > style.dimensions.minWidth && dimensions.width <= style.dimensions.maxWidth) {
          found = true;
          _styles = style.styles;
          setStyles(style.styles);
          (0, _debug.default)((0, _debug.info)({
            module: "SuranadiraResize.js",
            func: "useEffect [dimensions]",
            param: "dimensions.width",
            value: "".concat(style.dimensions.minWidth, " > ").concat(dimensions.width, " <= ").concat(style.dimensions.maxWidth)
          }));
        }
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator.return != null) {
          _iterator.return();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }

    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]);
  (0, _react.useEffect)(function () {
    document.body.style.display = "block";
  }, [styles]);
  return _react.default.createElement("div", {
    className: "SuranadiraResize",
    style: {
      position: "relative",
      display: "inline-block" // boxSizing: "border-box"

    }
  }, _react.default.Children.map(args.children, function (child) {
    return _react.default.cloneElement(child, {
      styles: styles[child.props.name],
      key: child.props.name
    });
  }));
};

function debounce(fn, ms) {
  var _this = this,
      _arguments = arguments;

  var timer;
  return function (_) {
    clearTimeout(timer);
    timer = setTimeout(function (_) {
      timer = null;
      fn.apply(_this, _arguments);
    }, ms);
  };
}

var _default = SuranadiraResize;
exports.default = _default;