@rio-cloud/rio-uikit 0.15.0-beta-44 → 0.15.0-beta-48

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); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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;
 }

package/lib/hooks/useWindowResize.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,11 +9,15 @@ exports.default = useWindowResize;
 
 var _react = require("react");
 
+var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
+
 function useWindowResize(onResizeCallback) {
+  var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
   (0, _react.useEffect)(function () {
-    window.addEventListener('resize', onResizeCallback, false);
+    var throttledCallback = (0, _throttle.default)(timeout, onResizeCallback);
+    window.addEventListener('resize', throttledCallback, false);
     return function () {
-      return window.removeEventListener('resize', onResizeCallback, true);
+      return window.removeEventListener('resize', throttledCallback, true);
     };
-  }, [onResizeCallback]);
+  }, [onResizeCallback, timeout]);
 }

package/lib/index.js

@@ -422,19 +422,19 @@ Object.defineProperty(exports, "SortArrows", {
 Object.defineProperty(exports, "SortDirection", {
   enumerable: true,
   get: function get() {
-    return _SortUtil.SortDirection;
+    return _SortUtils.SortDirection;
   }
 });
 Object.defineProperty(exports, "sortByProperty", {
   enumerable: true,
   get: function get() {
-    return _SortUtil.sortByProperty;
+    return _SortUtils.sortByProperty;
   }
 });
 Object.defineProperty(exports, "naturalSortByProperty", {
   enumerable: true,
   get: function get() {
-    return _SortUtil.naturalSortByProperty;
+    return _SortUtils.naturalSortByProperty;
   }
 });
 Object.defineProperty(exports, "getSortDirShort", {
@@ -509,6 +509,12 @@ Object.defineProperty(exports, "useTimeout", {
     return _useTimeout.default;
   }
 });
+Object.defineProperty(exports, "useInterval", {
+  enumerable: true,
+  get: function get() {
+    return _useInterval.default;
+  }
+});
 Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,
   get: function get() {
@@ -791,6 +797,12 @@ Object.defineProperty(exports, "RadialBarChart", {
     return _RadialBarChart2.default;
   }
 });
+Object.defineProperty(exports, "ChartNeedle", {
+  enumerable: true,
+  get: function get() {
+    return _ChartNeedle2.default;
+  }
+});
 exports.VERSION = void 0;
 
 var _version = _interopRequireDefault(require("./version.json"));
@@ -929,7 +941,7 @@ var _TimePicker2 = _interopRequireDefault(require("./components/timepicker/TimeP
 
 var _SortArrows2 = require("./components/table/SortArrows");
 
-var _SortUtil = require("./utils/SortUtil");
+var _SortUtils = require("./utils/SortUtils");
 
 var _routeUtils = require("./utils/routeUtils");
 
@@ -949,6 +961,8 @@ var _useEffectOnce = _interopRequireDefault(require("./hooks/useEffectOnce"));
 
 var _useTimeout = _interopRequireDefault(require("./hooks/useTimeout"));
 
+var _useInterval = _interopRequireDefault(require("./hooks/useInterval"));
+
 var _useClickOutside = _interopRequireDefault(require("./hooks/useClickOutside"));
 
 var _useClipboard = _interopRequireDefault(require("./hooks/useClipboard"));
@@ -1035,6 +1049,8 @@ var _Legend2 = _interopRequireDefault(require("./components/charts/Legend"));
 
 var _RadialBarChart2 = _interopRequireDefault(require("./components/charts/RadialBarChart"));
 
+var _ChartNeedle2 = _interopRequireDefault(require("./components/charts/ChartNeedle"));
+
 /* eslint-disable max-len */
 var VERSION = _version.default.version;
 exports.VERSION = VERSION;

package/lib/style/css/_exports/man-uikit.less

@@ -10,6 +10,7 @@
   @md: true;
   @lg: true;
   @xl: true;
+  @print: false;
 );
 
 // RIO Theme // Fonts

package/lib/style/css/_exports/rio-uikit-core.less

@@ -71,7 +71,7 @@
 @import (less) '../rio-theme/theme.less';
 
 // RIO Theme // Utils
-@import (less) '../utils/responsive/_imports.less';
+@import (less) '../utils/_imports.less';
 
 .import-utilities(
   @default: true;
@@ -81,6 +81,7 @@
   @md: false;
   @lg: false;
   @xl: false;
+  @print: false;
 );
 
 // Bootstrap // Responsive Utilities
@@ -97,7 +98,6 @@
 @import (less) '../../../components/applicationLayout/ApplicationLayout.less';
 @import (less) '../../../components/assetTree/AssetTree.less';
 @import (less) '../../../components/autosuggest/AutoSuggest.less';
-@import (less) '../../../components/button/ToggleButton.less';
 @import (less) '../../../components/checkbox/Checkbox.less';
 @import (less) '../../../components/clearableInput/ClearableInput.less';
 @import (less) '../../../components/counter/Counter.less';

package/lib/style/css/_exports/rio-uikit-print-utilities.less

@@ -0,0 +1,21 @@
+// RIO Theme Imports
+@import (less) '../rio-theme/variables.less';
+@import (less) '../rio-theme/colors.less';
+@import (less) '../rio-theme/screens.less';
+@import (less) '../shared/text.less';
+@import (less) '../rio-theme/mixins/_mixins.less';
+
+// RIO Theme // Utils
+@import (less) '../utils/_imports.less';
+
+// RIO Theme // Utility Classes
+.import-utilities(
+  @default: false;
+  @xs: false;
+  @ls: false;
+  @sm: false;
+  @md: false;
+  @lg: false;
+  @xl: false;
+  @print: true;
+);

package/lib/style/css/_exports/rio-uikit-responsive-utilities.less

@@ -6,7 +6,7 @@
 @import (less) '../rio-theme/mixins/_mixins.less';
 
 // RIO Theme // Utils
-@import (less) '../utils/responsive/_imports.less';
+@import (less) '../utils/_imports.less';
 
 // RIO Theme // Utility Classes
 .import-utilities(
@@ -17,4 +17,5 @@
   @md: true;
   @lg: true;
   @xl: true;
+  @print: false;
 );

package/lib/style/css/_exports/rio-uikit.less

@@ -10,6 +10,7 @@
   @md: true;
   @lg: true;
   @xl: true;
+  @print: false;
 );
 
 // RIO Theme // Fonts

package/lib/style/css/_exports/rio-website.less

@@ -10,6 +10,7 @@
   @md: true;
   @lg: true;
   @xl: true;
+  @print: false;
 );
 
 // RIO Theme // Fonts
@@ -630,6 +631,35 @@ html.show-handheld-navigation {
             }
           }
 
+          &.headline-block {
+            .section-content-container-row {
+              display: flex;
+              flex-direction: column;
+
+              .section-content-container-headline {
+                padding: 10px 20px;
+                background: @color-black;
+                text-transform: uppercase;
+                width: fit-content;
+
+                &:before {
+                  display: block;
+                  content: "+";
+                  width: 20px;
+                  height: 20px;
+                  position: absolute;
+                  top: 0px;
+                  left: 0px;
+                  transform: translate(-100%, -100%);
+                  text-align: center;
+                  line-height: 20px;
+                  color: @color-black;
+                  font-size: 40px;
+                }
+              }
+            }
+          }
+
           // Section Wrapper Inner Container
           .section-content-container {
             height: 100%;
@@ -1501,6 +1531,18 @@ html.show-handheld-navigation {
       }
     }
 
+    &-double-col-padding {
+      .section-layout > .section-layout-container {
+        padding-left: 0;
+        padding-right: 0;
+
+        [class*="col-"] {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+    }
+
     &-man {
       .section-layout {
         .section-layout-container {

package/lib/style/css/_exports/vw-uikit.less

@@ -10,6 +10,7 @@
   @md: true;
   @lg: true;
   @xl: true;
+  @print: false;
 );
 
 // RIO Theme // Fonts
@@ -19,7 +20,7 @@
 
 @logo-height: 42px;
 @logo-width: 204px;
-@navbar-height: 50px + @logo-height * 3;
+@navbar-height: 178px;
 
 @color-white: #ffffff;
 @color-black: #000000;

package/lib/style/css/rio-theme/buttons.less

@@ -79,6 +79,10 @@
     padding: 0;
   }
 
+  &.btn-toggle.active {
+    box-shadow: inset 0 0 4px 1px rgb(90 101 102 / 60%);
+  }
+
   &-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -397,7 +401,7 @@
     &:before {
       .rioglyph;
       content: "\e9c7";
-      color: @color-highlight-dark;
+      color: @brand-primary;
       animation: spinning 1s linear infinite;
       font-size: 20px;
     }