@rio-cloud/rio-uikit 0.15.0-beta-46 → 0.15.0

package/lib/es/useRenderCount.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useRenderCount2.default;
+  }
+});
+
+var _useRenderCount2 = _interopRequireDefault(require("../hooks/useRenderCount"));

package/lib/es/useSessionStorage.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useSessionStorage' {
+    import { UseSessionStorage } from '../types';
+    export default UseSessionStorage;
+}

package/lib/es/useSessionStorage.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useStorage.useSessionStorage;
+  }
+});
+
+var _useStorage = require("../hooks/useStorage");

package/lib/es/useStateWithValidation.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useStateWithValidation' {
+    import { UseStateWithValidation } from '../types';
+    export default UseStateWithValidation;
+}

package/lib/es/useStateWithValidation.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useStateWithValidation2.default;
+  }
+});
+
+var _useStateWithValidation2 = _interopRequireDefault(require("../hooks/useStateWithValidation"));

package/lib/es/useTimeout.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useTimeout' {
+    import { UseTimeout } from '../types';
+    export default UseTimeout;
+}

package/lib/es/useTimeout.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useTimeout2.default;
+  }
+});
+
+var _useTimeout2 = _interopRequireDefault(require("../hooks/useTimeout"));

package/lib/es/useWindowResize.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useWindowResize' {
+    import { UseWindowResize } from '../types';
+    export default UseWindowResize;
+}

package/lib/es/useWindowResize.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _useWindowResize2.default;
+  }
+});
+
+var _useWindowResize2 = _interopRequireDefault(require("../hooks/useWindowResize"));

package/lib/hooks/useDebugInfo.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useDebugInfo;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("react");
+
+var _useRenderCount = _interopRequireDefault(require("./useRenderCount"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var logStyle = ["color: #4c5667", "background-color: #e5ebf0", "padding: 2px 4px", "border-radius: 2px"].join(";");
+
+function useDebugInfo(componentName, props) {
+  var renderCount = (0, _useRenderCount.default)();
+  var changedProps = (0, _react.useRef)({});
+  var previousProps = (0, _react.useRef)(props);
+  var lastRenderTimestamp = (0, _react.useRef)(Date.now());
+  var propKeys = Object.keys(_objectSpread(_objectSpread({}, props), previousProps));
+  changedProps.current = propKeys.reduce(function (obj, key) {
+    if (props[key] === previousProps.current[key]) {
+      return obj;
+    }
+
+    return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, key, {
+      previous: previousProps.current[key],
+      current: props[key]
+    }));
+  }, {});
+  var info = {
+    renderCount: renderCount,
+    changedProps: changedProps.current,
+    timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
+    lastRenderTimestamp: lastRenderTimestamp.current
+  };
+  (0, _react.useEffect)(function () {
+    previousProps.current = props;
+    lastRenderTimestamp.current = Date.now();
+
+    if (console) {
+      console.groupCollapsed("%c[debug-info] ".concat(componentName), logStyle);
+      console.log(info);
+      console.groupEnd();
+    }
+  });
+  return info;
+}

package/lib/hooks/useInterval.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useInterval;
+
+var _react = require("react");
+
+// See https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+function useInterval(callback, delay) {
+  var intervalRef = (0, _react.useRef)(null);
+  var savedCallback = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+  (0, _react.useEffect)(function () {
+    var tick = function tick() {
+      return savedCallback.current();
+    };
+
+    if (typeof delay === 'number') {
+      intervalRef.current = window.setInterval(tick, delay);
+      return function () {
+        return window.clearInterval(intervalRef.current);
+      };
+    }
+  }, [delay]);
+  return intervalRef;
+}

package/lib/hooks/useOnScreen.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOnScreen;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/14-useOnScreen/useOnScreen.js
+function useOnScreen(ref) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    rootMargin: '0px'
+  };
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isVisible = _useState2[0],
+      setIsVisible = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!ref.current) {
+      return;
+    }
+
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          entry = _ref2[0];
+
+      return setIsVisible(entry.isIntersecting);
+    }, options);
+    observer.observe(ref.current);
+    return function () {
+      if (!ref.current) {
+        return;
+      }
+
+      observer.unobserve(ref.current);
+    };
+  }, [ref.current, options]);
+  return isVisible;
+}

package/lib/hooks/useOnlineStatus.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useOnlineStatus;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _useEvent = _interopRequireDefault(require("./useEvent"));
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js
+function useOnlineStatus() {
+  var _useState = (0, _react.useState)(navigator.onLine),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      online = _useState2[0],
+      setOnline = _useState2[1];
+
+  (0, _useEvent.default)('online', function () {
+    return setOnline(navigator.onLine);
+  }, false, window);
+  (0, _useEvent.default)('offline', function () {
+    return setOnline(navigator.onLine);
+  }, false, window);
+  return online;
+}

package/lib/hooks/useRenderCount.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useRenderCount;
+
+var _react = require("react");
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/27-useRenderCount/useRenderCount.js
+function useRenderCount() {
+  var count = (0, _react.useRef)(1);
+  (0, _react.useEffect)(function () {
+    count.current++;
+  });
+  return count.current;
+}

package/lib/hooks/useStateWithValidation.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useStateWithValidation;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function useStateWithValidation(validationFn, initialValue) {
+  var _useState = (0, _react.useState)(initialValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(function () {
+    return validationFn(state);
+  }),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isValid = _useState4[0],
+      setIsValid = _useState4[1];
+
+  var onChange = (0, _react.useCallback)(function (nextState) {
+    var value = typeof nextState === 'function' ? nextState(state) : nextState;
+    setState(value);
+    setIsValid(validationFn(value));
+  }, [validationFn]);
+  return [state, onChange, isValid];
+}

package/lib/hooks/useStorage.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLocalStorage = useLocalStorage;
+exports.useSessionStorage = useSessionStorage;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/8-useStorage/useStorage.js
+function useLocalStorage(key, defaultValue) {
+  return useStorage(key, defaultValue, window.localStorage);
+}
+
+function useSessionStorage(key, defaultValue) {
+  return useStorage(key, defaultValue, window.sessionStorage);
+}
+
+function useStorage(key, defaultValue, storageObject) {
+  var _useState = (0, _react.useState)(function () {
+    var jsonValue = storageObject.getItem(key);
+
+    if (jsonValue) {
+      return JSON.parse(jsonValue);
+    }
+
+    if (typeof defaultValue === 'function') {
+      return defaultValue();
+    }
+
+    return defaultValue;
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!value) {
+      return storageObject.removeItem(key);
+    }
+
+    storageObject.setItem(key, JSON.stringify(value));
+  }, [key, value, storageObject]);
+  var remove = (0, _react.useCallback)(function () {
+    setValue(undefined);
+  }, []);
+  return [value, setValue, remove];
+}

package/lib/hooks/useTimeout.js

@@ -7,21 +7,24 @@ exports.default = useTimeout;
 
 var _react = require("react");
 
+// See www.joshwcomeau.com/snippets/react-hooks/use-timeout/
 function useTimeout(callback, delay) {
+  var timeoutRef = (0, _react.useRef)(null);
   var savedCallback = (0, _react.useRef)(callback);
   (0, _react.useEffect)(function () {
     savedCallback.current = callback;
   }, [callback]);
   (0, _react.useEffect)(function () {
-    function tick() {
-      savedCallback.current();
-    }
+    var tick = function tick() {
+      return savedCallback.current();
+    };
 
-    if (delay !== null) {
-      var id = setTimeout(tick, delay);
+    if (typeof delay === 'number') {
+      timeoutRef.current = window.setTimeout(tick, delay);
       return function () {
-        return clearTimeout(id);
+        return window.clearTimeout(timeoutRef.current);
       };
     }
   }, [delay]);
+  return timeoutRef;
 }