react-misc-toolbox/dist/helperFunctions.js

- [ ] diagramexample | optimize creating from blank slate

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getElement = exports.getContainerElement = exports.getClassName = exports.delay = exports.styleElement = exports.flippyTailClass = exports.callAll = exports.onUserInputChange = exports.lightenDarken = exports.capitalizeEveryWord = exports.flippyMultiTail = exports.flatten = exports.advancedMulti = exports.getDynamicColors = exports.compose = exports.useSafeSetState = exports.appendArrayElement = exports.truncateArrayElement = exports.generateID = undefined;

var _promise = require("babel-runtime/core-js/promise");

var _promise2 = _interopRequireDefault(_promise);

var _entries = require("babel-runtime/core-js/object/entries");

var _entries2 = _interopRequireDefault(_entries);

var _slicedToArray2 = require("babel-runtime/helpers/slicedToArray");

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _typeof2 = require("babel-runtime/helpers/typeof");

var _typeof3 = _interopRequireDefault(_typeof2);

exports.flippyClass = flippyClass;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _tinycolor = require("tinycolor2");

var _tinycolor2 = _interopRequireDefault(_tinycolor);

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

if (Array.prototype.equals) console.warn("Overriding existing Array.prototype.equals. Possible causes: New API defines the method, there's a framework conflict or you've got double inclusions in your code.");
// attach the .equals method to Array's prototype to call it on any array
Array.prototype.equals = function (array) {
  // if the other array is a falsy value, return
  if (!array) return false;

  // compare lengths - can save a lot of time
  if (this.length != array.length) return false;

  for (var i = 0, l = this.length; i < l; i++) {
    // Check if we have nested arrays
    if (this[i] instanceof Array && array[i] instanceof Array) {
      // recurse into the nested arrays
      if (!this[i].equals(array[i])) return false;
    } else if (this[i] != array[i]) {
      // Warning - two different object instances will never be equal: {x:20} != {x:20}
      return false;
    }
  }
  return true;
};
// Hide method from for-in loops
Object.defineProperty(Array.prototype, "equals", { enumerable: false });

var generateID = exports.generateID = function generateID(arr, tag) {
  var IDs = arr.map(function (v) {
    return v.ID;
  });

  var _loop = function _loop(i) {
    var found = IDs.find(function (ID) {
      return "" + tag + i === ID;
    });
    if (!found) {
      return {
        v: "" + tag + i
      };
    }
  };

  for (var i = 0; i < 10; i++) {
    var _ret = _loop(i);

    if ((typeof _ret === "undefined" ? "undefined" : (0, _typeof3.default)(_ret)) === "object") return _ret.v;
  }
};

var truncateArrayElement = exports.truncateArrayElement = function truncateArrayElement(array, index) {
  return [].concat((0, _toConsumableArray3.default)(array.slice(0, index)), (0, _toConsumableArray3.default)(array.slice(index + 1, array.length)));
};

var appendArrayElement = exports.appendArrayElement = function appendArrayElement(array, elementIndex, appendData) {
  return [].concat((0, _toConsumableArray3.default)(array.slice(0, elementIndex)), [(0, _extends3.default)({}, array[elementIndex], appendData)], (0, _toConsumableArray3.default)(array.slice(elementIndex + 1, array.length)));
};

var useSetState = function useSetState(initialState) {
  var _useReducer = (0, _react.useReducer)(function (state, newState) {
    return typeof newState === "function" ? (0, _extends3.default)({}, state, newState(state)) : (0, _extends3.default)({}, state, newState);
  }, (0, _extends3.default)({}, initialState)),
      _useReducer2 = (0, _slicedToArray3.default)(_useReducer, 2),
      state = _useReducer2[0],
      setState = _useReducer2[1];

  return [state, setState];
};

var useSafeSetState = exports.useSafeSetState = function useSafeSetState(initialState) {
  var _useSetState = useSetState(initialState),
      _useSetState2 = (0, _slicedToArray3.default)(_useSetState, 2),
      state = _useSetState2[0],
      setState = _useSetState2[1];

  var mountedRef = (0, _react.useRef)(false);
  (0, _react.useEffect)(function () {
    mountedRef.current = true;
    return function () {
      return mountedRef.current = false;
    };
  }, []);

  var safeSetState = function safeSetState() {
    return mountedRef.current && setState.apply(undefined, arguments);
  };
  return [state, safeSetState];
};

var compose = exports.compose = function compose() {
  for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
    fns[_key] = arguments[_key];
  }

  return function (x) {
    return fns.reduceRight(function (v, f) {
      return f(v);
    }, x);
  };
};

function flippyClass(bool, base, truthy, falsy) {
  return base + " " + (bool ? base + "--" + truthy : base + "--" + falsy);
}

var getDynamicColors = exports.getDynamicColors = function getDynamicColors(inputColors) {
  return {
    on: {
      backgroundColorA: (0, _tinycolor2.default)(inputColors.on.backgroundColor).toString(),
      backgroundColorB: (0, _tinycolor2.default)(inputColors.on.backgroundColor).darken(inputColors.intensityB).toString(),
      backgroundColorC: (0, _tinycolor2.default)(inputColors.on.backgroundColor).darken(inputColors.intensityC).toString()
    },
    off: {
      backgroundColorA: (0, _tinycolor2.default)(inputColors.off.backgroundColor).toString(),
      backgroundColorB: (0, _tinycolor2.default)(inputColors.off.backgroundColor).darken(inputColors.intensityB).toString(),
      backgroundColorC: (0, _tinycolor2.default)(inputColors.off.backgroundColor).darken(inputColors.intensityC).toString()
    },
    disabled: { backgroundColor: inputColors.disabled.backgroundColor }
  };
};

// export const multiClass = (customNames, suffixes) => {
//   let output = []
//   customNames.forEach(customName => {
//     return suffixes.forEach(suffix => output.push(`${customName}${suffix}`))
//   })
//   output.join(' ')
//   return output
// }

// export const flippyMulti = (unflattenedBases, ...args) => {
//   const output = []

//   const run = bases => {
//     console.log(bases)
//     bases.forEach(base => {
//       if (base) {
//         if (Array.isArray(base)) {
//           run(base)
//         } else {
//           output.push(flippyMultiTail(base, ...args))
//         }
//       }
//     })
//   }
//   run(unflattenedBases)
//   return output.join(` `)
// }

// export const unflippyMultiBase = (bases, tail) => {
//   const output = []
//   bases.forEach(base => {
//     if (base) {
//       output.push(`${base} ${base}--${tail}`)
//     }
//   })
//   return output.join(` `)
// }

// export const flippyMultiBase = (bool, unflattenedBases, truthy = '', falsy = '') => {
//   const output = []
//   const run = bases => {
//     bases.forEach(base => {
//       if (base) {
//         if (Array.isArray(base)) {
//           run(base)
//         } else {
//           if (truthy.length > 0 && falsy.length > 0) {
//             output.push(flippyClass(bool, base, truthy, falsy))
//           } else {
//             output.push(base)
//           }
//         }
//       }
//     })
//   }
//   run(unflattenedBases)
//   return output.join(` `)
// }

var advancedMulti = exports.advancedMulti = function advancedMulti(_ref) {
  var _ref$hideBase = _ref.hideBase,
      hideBase = _ref$hideBase === undefined ? false : _ref$hideBase,
      _ref$soloBase = _ref.soloBase,
      soloBase = _ref$soloBase === undefined ? "" : _ref$soloBase,
      _ref$unflattenedBases = _ref.unflattenedBases,
      unflattenedBases = _ref$unflattenedBases === undefined ? [] : _ref$unflattenedBases,
      _ref$suffixes = _ref.suffixes,
      suffixes = _ref$suffixes === undefined ? [] : _ref$suffixes,
      _ref$flipVars = _ref.flipVars,
      flipVars = _ref$flipVars === undefined ? [] : _ref$flipVars;

  var output = [];
  var run = function run(bases) {
    //console.log(bases)
    bases.forEach(function (base) {
      if (base) {
        if (Array.isArray(base)) {
          run(base);
        } else {
          output.push(convertBase({ base: base, suffixes: suffixes, flipVars: flipVars }));
        }
      }
    });
  };
  var convertBase = function convertBase(_ref2) {
    var base = _ref2.base,
        suffixes = _ref2.suffixes,
        flipVars = _ref2.flipVars;

    if (suffixes) {
      var suffixedBaseArray = hideBase ? [] : [base];
      suffixes.forEach(function (suffix) {
        return suffixedBaseArray.push("" + base + suffix);
      });
      var flippyBaseArray = [];
      suffixedBaseArray.forEach(function (suffixedBase) {
        return flippyBaseArray.push(flippyMultiTail.apply(undefined, [suffixedBase].concat((0, _toConsumableArray3.default)(flipVars))));
      });
      return flippyBaseArray;
    } else {
      return flippyMultiTail.apply(undefined, [base].concat((0, _toConsumableArray3.default)(flipVars)));
    }
  };
  run(unflattenedBases);

  var outputJoined = flatten(output).join(" ");
  return outputJoined;
};

var flatten = exports.flatten = function flatten(arr) {
  var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  return arr.reduce(function (a, v) {
    return a.concat(depth > 1 && Array.isArray(v) ? flatten(v, depth - 1) : v);
  }, []);
};

var flippyMultiTail = exports.flippyMultiTail = function flippyMultiTail(base) {
  for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
    args[_key2 - 1] = arguments[_key2];
  }

  if (args) {
    var modified = [base];
    args.forEach(function (arr) {
      var mod = void 0;
      if (arr[2]) {
        mod = "" + (arr[0] ? base + "--" + arr[1] : base + "--" + arr[2]);
        modified.push(mod);
      } else if (!arr[2] && arr[0]) {
        mod = base + "--" + arr[1];
        modified.push(mod);
      }
    });
    return modified.join(" ");
  } else {
    return base;
  }
};

var capitalizeEveryWord = exports.capitalizeEveryWord = function capitalizeEveryWord(str) {
  return str ? str.replace(/\b[a-z]/g, function (char) {
    return char.toUpperCase();
  }) : "error: string undefined";
};

var lightenDarken = exports.lightenDarken = function lightenDarken(color, amount) {
  var usePound = false;

  if (color[0] == "#") {
    color = color.slice(1);
    usePound = true;
  }

  var num = parseInt(color, 16);

  var r = (num >> 16) + amount;

  if (r > 255) r = 255;else if (r < 0) r = 0;

  var b = (num >> 8 & 0x00ff) + amount;

  if (b > 255) b = 255;else if (b < 0) b = 0;

  var g = (num & 0x0000ff) + amount;

  if (g > 255) g = 255;else if (g < 0) g = 0;

  return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
};
var onUserInputChange = exports.onUserInputChange = function onUserInputChange(callback) {
  //console.log(`onUserInputChange`)
  var type = "mouse",
      lastTime = 0;
  var mousemoveHandler = function mousemoveHandler() {
    var now = performance.now();
    if (now - lastTime < 20) type = "mouse", callback(type), document.removeEventListener("mousemove", mousemoveHandler);
    lastTime = now;
  };
  document.addEventListener("touchstart", function () {
    if (type === "touch") return;type = "touch", callback(type), document.addEventListener("mousemove", mousemoveHandler);
  });
};

var callAll = exports.callAll = function callAll() {
  for (var _len3 = arguments.length, fns = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
    fns[_key3] = arguments[_key3];
  }

  return function () {
    for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
      args[_key4] = arguments[_key4];
    }

    return fns.forEach(function (fn) {
      return fn && fn.apply(undefined, args);
    });
  };
};

var flippyTailClass = exports.flippyTailClass = function flippyTailClass(base) {
  for (var _len5 = arguments.length, args = Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
    args[_key5 - 1] = arguments[_key5];
  }

  var tail = [];
  args.forEach(function (arr) {
    var mod = "" + (arr[0] ? "--" + arr[1] : "--" + arr[2]);
    tail.push(mod);
  });
  return base + " " + base + tail.join("");
};

var styleElement = exports.styleElement = function styleElement(element, style) {
  if (document.querySelector(element)) {
    (0, _entries2.default)(style).map(function (valuePair) {
      var _valuePair = (0, _slicedToArray3.default)(valuePair, 2),
          key = _valuePair[0],
          value = _valuePair[1];

      document.querySelector(element).style[key] = value;
    });
  }
};

var delay = exports.delay = function delay(timeout) {
  return new _promise2.default(function (resolve) {
    setTimeout(resolve, timeout);
  });
};

var getClassName = exports.getClassName = function getClassName(base, extra, override) {
  return extra ? base + " " + extra : override ? override : base;
};

var getContainerElement = exports.getContainerElement = function getContainerElement(_ref3) {
  var props = _ref3.props;
  var containerClass = props.containerClass,
      containerRef = props.containerRef;

  return getElement({ ref: containerRef, className: containerClass });
};
var getElement = exports.getElement = function getElement(_ref4) {
  var ref = _ref4.ref,
      className = _ref4.className,
      id = _ref4.id,
      debug = _ref4.debug;

  var element = void 0;
  if (id) {
    element = document.getElementById(id);
    debug && console.log("element via id: ", element);
  } else if (className) {
    element = document.querySelector(className);
    debug && console.log("element via class: ", element);
  } else if (ref.current) {
    element = ref.current;
    debug && console.log("element via ref: ", element);
  } else {
    debug && console.error("must specify either className or ref");
  }
  return element;
};