@rio-cloud/rio-uikit 0.16.1 → 0.16.2-beta.11

package/themes/Xmas/styles/rio-xmas.less

@@ -1,36 +1,66 @@
-/* Backgrounds - Map Marker */
+// Theme
+@hasDarkmode: false;
+
+// adding a new xmas map marker
+@color-white: #ffffff;
 @color-map-marker-xmas: #dd0a2c;
 
-.rio-map-marker {
-    &.active {
-        .rio-map-icon {
-            &:before {
-                color: @color-map-marker-xmas;
-            }
-        }
-    }
+@colors-map-marker-custom: {
+  map-marker-xmas: @color-map-marker-xmas;
 }
 
-@rioglyph-truck: "\f17b";
-.rioglyph-truck:before,
-.hover-rioglyph-truck:hover:before {
-	content: "\f17b";
-}
+each(@colors-map-marker-custom, {
+  .bg-@{key} {
+    color: @color-white !important;
+    background-color: @value !important;
+  }
+  .hover-bg-@{key}:hover {
+    background-color: @value !important;
+  }
+  .fill-@{key} {
+    fill: @value !important;
+  }
+})
 
-@rioglyph-bus: "\f17b";
-.rioglyph-bus:before,
-.hover-rioglyph-bus:hover:before {
-	content: "\f17b";
-}
+each(@colors-map-marker-custom, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
 
-@rioglyph-van: "\f17b";
-.rioglyph-van:before,
-.hover-rioglyph-van:hover:before {
-	content: "\f17b";
-}
 
-@rioglyph-user: "\f17c";
-.rioglyph-user:before,
-.hover-rioglyph-user:hover:before {
-	content: "\f17c";
-}
+// replacing all TRUCK, BUS, VAN and User icons
+
+// .rio-map-marker {
+//     &.active {
+//         .rio-map-icon {
+//             &:before {
+//                 color: @color-map-marker-xmas;
+//             }
+//         }
+//     }
+// }
+
+// @rioglyph-truck: "\f17b";
+// .rioglyph-truck:before,
+// .hover-rioglyph-truck:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-bus: "\f17b";
+// .rioglyph-bus:before,
+// .hover-rioglyph-bus:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-van: "\f17b";
+// .rioglyph-van:before,
+// .hover-rioglyph-van:hover:before {
+// 	content: "\f17b";
+// }
+
+// @rioglyph-user: "\f17c";
+// .rioglyph-user:before,
+// .hover-rioglyph-user:hover:before {
+// 	content: "\f17c";
+// }

package/types.ts

@@ -74,8 +74,7 @@ export interface ApplicationHeaderProps {
     appMenuItems?: ModulePropTypes[];
     navItems?: ModulePropTypes[];
     actionBarItems: React.ReactNode[];
-    onMount?: Function;
-    onUnmount?: Function;
+    onToggleAppMenu?: (isOpen: boolean) => void;
     className?: string;
 }
 
@@ -674,7 +673,9 @@ export interface FilePickerProps {
     maxSize?: number; // max file size
     onPick: (files: FileList | null) => void;
     className?: string;
-    accept?: string;
+    accept?: {
+        [mimeType: string]: string[];
+    };
     children?: ({ isDragActive }: FilePickerRenderProps) => any;
 }
 
@@ -1082,11 +1083,15 @@ export interface NumberControlProps {
     value?: number;
     step?: number;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
+    digitPrecision?: number;
+    placeholder?: string;
+    ref?: React.MutableRefObject<object>;
 }
 
 export interface NumberInputProps {
@@ -1094,13 +1099,16 @@ export interface NumberInputProps {
     max?: number;
     value?: number;
     step?: number;
-    type?: string;
     disabled?: boolean;
+    onChange?: (value: number) => void;
     onValueChanged?: (value: number) => void;
     bsSize?: 'sm' | 'lg';
     className?: string;
     unit?: string | React.ReactNode;
     inputAddon?: string;
+    placeholder?: string;
+    digitPrecision?: number;
+    ref?: React.MutableRefObject<object>;
 }
 
 // O --------------------------------------------------------------------------------------------------
@@ -1520,6 +1528,7 @@ export interface SelectProps {
 export interface SidebarProps {
     backdropClassName?: string;
     bodyClassName?: string;
+    bodyRef?: React.MutableRefObject<object>;
     className?: string;
     closed?: boolean;
     disableClose?: boolean;
@@ -2031,7 +2040,7 @@ export interface TreeItemName {
 export interface TreeItem {
     id: string;
     name: string | TreeItemName;
-    info?: string;
+    info?: string | React.ReactNode;
     type: string;
     groupIds?: string[];
     className?: string;
@@ -2192,3 +2201,19 @@ export type UseSessionStorage = (key: string, defaultValue: any) => [any, Functi
 export type UseTimeout = (callback: () => void, delay?: number) => React.MutableRefObject<object>;
 
 export type UseWindowResize = (callback: () => void, timeout?: number) => void;
+
+export type UseDarkMode = () => boolean;
+
+export type UseMutationObserver = (
+    targetElement: HTMLElement | React.MutableRefObject<object> | null | undefined,
+    callback: MutationCallback | undefined,
+    options?: {
+        attributes?: boolean;
+        childList?: boolean;
+        subtree?: boolean;
+    }
+) => void;
+
+export type UseScrollPosition = (
+    target: Window | HTMLBodyElement | React.ReactElement | React.MutableRefObject<object> | undefined
+) => number;

package/useDarkMode.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/useDarkMode' {
+    import { UseDarkMode } from './types';
+    export default UseDarkMode;
+}

package/useDarkMode.js

@@ -0,0 +1,2 @@
+import { default as _useDarkMode } from './hooks/useDarkMode';
+export { _useDarkMode as default };

package/useMutationObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/useMutationObserver' {
+    import { UseMutationObserver } from './types';
+    export default UseMutationObserver;
+}

package/useMutationObserver.js

@@ -0,0 +1,2 @@
+import { default as _useMutationObserver } from './hooks/useMutationObserver';
+export { _useMutationObserver as default };

package/useScrollPosition.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/useScrollPosition' {
+    import { UseScrollPosition } from './types';
+    export default UseScrollPosition;
+}

package/useScrollPosition.js

@@ -0,0 +1,2 @@
+import { default as _useScrollPosition } from './hooks/useScrollPosition';
+export { _useScrollPosition as default };

package/utils/colorScheme.js

@@ -0,0 +1,55 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var COOKIE_NAME = 'uikit-color-scheme';
+export var THEME_DATA_ATTRIBUTE = 'data-theme';
+var PATH = '/';
+var DOMAIN = '.rio.cloud';
+var EXPIRATION_DATE = 'Thu, 18 Dec 2030 12:00:00 UTC';
+export var THEME_DEFAULT = 'default';
+export var THEME_SYSTEM = 'system';
+export var THEME_LIGHT = 'light';
+export var THEME_DARK = 'dark';
+export var getColorScheme = function getColorScheme() {
+  return readColorSchemeFromCookie();
+};
+export var setColorScheme = function setColorScheme(scheme) {
+  return writeColorSchemeToCookie(scheme);
+};
+var readColorSchemeFromCookie = function readColorSchemeFromCookie() {
+  var decodedCookie = decodeURIComponent(document.cookie);
+  console.log(decodedCookie);
+  var _decodedCookie$split$ = decodedCookie.split(';').filter(function (entry) {
+      return entry.includes(COOKIE_NAME);
+    }),
+    _decodedCookie$split$2 = _slicedToArray(_decodedCookie$split$, 1),
+    uikitCname = _decodedCookie$split$2[0];
+  if (!uikitCname) {
+    return;
+  }
+  var _uikitCname$split = uikitCname.split('='),
+    _uikitCname$split2 = _slicedToArray(_uikitCname$split, 2),
+    colorScheme = _uikitCname$split2[1];
+  console.log("readColorSchemeFromCookie: ".concat(colorScheme));
+  if (!colorScheme) {
+    return;
+  }
+  var html = document.documentElement;
+  if (colorScheme === THEME_DEFAULT || colorScheme === THEME_SYSTEM) {
+    html.removeAttribute(THEME_DATA_ATTRIBUTE);
+    return colorScheme;
+  }
+  if (colorScheme === THEME_LIGHT || colorScheme === THEME_DARK) {
+    html.setAttribute(THEME_DATA_ATTRIBUTE, colorScheme);
+    return colorScheme;
+  }
+};
+
+// This should be done by a RIO service like User Profile SPA using a theme switcher component from the uikit
+// where this function is referenced
+var writeColorSchemeToCookie = function writeColorSchemeToCookie(scheme) {
+  var _window;
+  var isDevEnv = (_window = window) === null || _window === void 0 ? void 0 : _window.location.host.startsWith('localhost');
+  var newCookieValues = encodeURIComponent(scheme);
+  var cookie = "".concat(COOKIE_NAME, "=").concat(newCookieValues, ";domain=").concat(isDevEnv ? 'localhost' : DOMAIN, ";expires=").concat(EXPIRATION_DATE, ";path=").concat(PATH);
+  console.log("writeColorSchemeToCookie: ".concat(cookie));
+  document.cookie = cookie;
+};

package/utils/init.js

@@ -4,6 +4,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import throttle from 'lodash/fp/throttle';
 import process from 'process';
 import { inIframe } from './deviceUtils';
+import { getColorScheme } from './colorScheme';
 import versionJson from '../version.json';
 var uikitVersion = versionJson.version;
 
@@ -43,41 +44,39 @@ var checkForReleaseVersion = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var remoteVersionsListUrl, response, data;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            if (isProdEnv()) {
-              _context.next = 2;
-              break;
-            }
-            return _context.abrupt("return");
-          case 2:
-            remoteVersionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
-            _context.prev = 3;
-            _context.next = 6;
-            return fetch(remoteVersionsListUrl, {
-              method: 'get'
-            });
-          case 6:
-            response = _context.sent;
-            _context.next = 9;
-            return response.json();
-          case 9:
-            data = _context.sent;
-            if (data.latest_release !== uikitVersion) {
-              console.log("\uD83C\uDD95 UIKIT version ".concat(data.latest_release, " is the latest released version! Your are using ").concat(uikitVersion));
-            }
-            _context.next = 16;
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (isProdEnv()) {
+            _context.next = 2;
             break;
-          case 13:
-            _context.prev = 13;
-            _context.t0 = _context["catch"](3);
-            // console.warn(error);
-            console.warn("Faild to fetch versionsList from ".concat(remoteVersionsListUrl));
-          case 16:
-          case "end":
-            return _context.stop();
-        }
+          }
+          return _context.abrupt("return");
+        case 2:
+          remoteVersionsListUrl = 'https://uikit.developers.rio.cloud/versionsList.json';
+          _context.prev = 3;
+          _context.next = 6;
+          return fetch(remoteVersionsListUrl, {
+            method: 'get'
+          });
+        case 6:
+          response = _context.sent;
+          _context.next = 9;
+          return response.json();
+        case 9:
+          data = _context.sent;
+          if (data.latest_release !== uikitVersion) {
+            console.log("\uD83C\uDD95 UIKIT version ".concat(data.latest_release, " is the latest released version! Your are using ").concat(uikitVersion));
+          }
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](3);
+          // console.warn(error);
+          console.warn("Faild to fetch versionsList from ".concat(remoteVersionsListUrl));
+        case 16:
+        case "end":
+          return _context.stop();
       }
     }, _callee, null, [[3, 13]]);
   }));
@@ -122,6 +121,7 @@ export var initDocumentBootstrapping = function initDocumentBootstrapping(docume
     html.classList.add('window-iframe');
   }
   if (!isTestEnv()) {
+    getColorScheme();
     printPoweredByRIO();
     checkForReleaseVersion();
     checkMatchingUkitVersions();

package/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1"
+    "version": "0.16.2-beta.11"
 }